From 365e9da54f0606614517dd0c7cf6317c78685ec6 Mon Sep 17 00:00:00 2001
From: isabel <isabel@isabelroses.com>
Date: Sat, 11 Oct 2025 12:35:10 +0100
Subject: [PATCH] feat: mutuals pill

---
 src/components/Pills.tsx              | 27 +++++++++++++++++++++++++++
 src/components/ProfileCard.tsx        |  3 ++-
 src/screens/Profile/Header/Handle.tsx |  4 +++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx
index 550089a80..30a49e9ac 100644
--- a/src/components/Pills.tsx
+++ b/src/components/Pills.tsx
@@ -177,3 +177,30 @@ export function FollowsYou({size = 'sm'}: CommonProps) {
     </View>
   )
 }
+
+export function Mutuals({size = 'sm'}: CommonProps) {
+  const t = useTheme()
+
+  const variantStyles = React.useMemo(() => {
+    switch (size) {
+      case 'sm':
+      case 'lg':
+      default:
+        return [
+          {
+            paddingHorizontal: 6,
+            paddingVertical: 3,
+            borderRadius: 4,
+          },
+        ]
+    }
+  }, [size])
+
+  return (
+    <View style={[variantStyles, a.justify_center, t.atoms.bg_contrast_25]}>
+      <Text style={[a.text_xs, a.leading_tight]}>
+        <Trans>Mutuals</Trans>
+      </Text>
+    </View>
+  )
+}
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 095b62167..089ceed87 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -596,6 +596,7 @@ export function Labels({
   const moderation = moderateProfile(profile, moderationOpts)
   const modui = moderation.ui('profileList')
   const followedBy = profile.viewer?.followedBy
+  const following = profile.viewer?.following
 
   if (!followedBy && !modui.inform && !modui.alert) {
     return null
@@ -603,7 +604,7 @@ export function Labels({
 
   return (
     <Pills.Row style={[a.pt_xs]}>
-      {followedBy && <Pills.FollowsYou />}
+      {followedBy && (following ? <Pills.Mutuals /> : <Pills.FollowsYou />)}
       {modui.alerts.map(alert => (
         <Pills.Label key={getModerationCauseKey(alert)} cause={alert} />
       ))}
diff --git a/src/screens/Profile/Header/Handle.tsx b/src/screens/Profile/Header/Handle.tsx
index ad82072c2..d0d4ddb67 100644
--- a/src/screens/Profile/Header/Handle.tsx
+++ b/src/screens/Profile/Header/Handle.tsx
@@ -29,7 +29,9 @@ export function ProfileHeaderHandle({
       {profile.viewer?.followedBy && !blockHide ? (
         <View style={[t.atoms.bg_contrast_25, a.rounded_xs, a.px_sm, a.py_xs]}>
           <Text style={[t.atoms.text, a.text_sm]}>
-            <Trans>Follows you</Trans>
+            <Trans>
+              {profile.viewer?.following ? 'Mutuals' : 'Follows you'}
+            </Trans>
           </Text>
         </View>
       ) : undefined}
-- 
2.52.0