feat: Add relationship info to hover card (#34792)

app/javascript/mastodon/components/hover_card_account.tsx

@@ -45,6 +45,19 @@ export const HoverCardAccount = forwardRef<
 
   const { familiarFollowers } = useFetchFamiliarFollowers({ accountId });
 
+  const relationship = useAppSelector((state) =>
+    accountId ? state.relationships.get(accountId) : undefined,
+  );
+  const isMutual = relationship?.followed_by && relationship.following;
+  const isFollower = relationship?.followed_by;
+  const hasRelationshipLoaded = !!relationship;
+
+  const shouldDisplayFamiliarFollowers =
+    familiarFollowers.length > 0 &&
+    hasRelationshipLoaded &&
+    !isMutual &&
+    !isFollower;
+
   return (
     <div
       ref={ref}
@@ -85,7 +98,7 @@ export const HoverCardAccount = forwardRef<
               value={account.followers_count}
               renderer={FollowersCounter}
             />
-            {familiarFollowers.length > 0 && (
+            {shouldDisplayFamiliarFollowers && (
               <>
                 &middot;
                 <div className='hover-card__familiar-followers'>
@@ -101,6 +114,22 @@ export const HoverCardAccount = forwardRef<
                 </div>
               </>
             )}
+            {(isMutual || isFollower) && (
+              <>
+                &middot;
+                {isMutual ? (
+                  <FormattedMessage
+                    id='account.mutual'
+                    defaultMessage='You follow each other'
+                  />
+                ) : (
+                  <FormattedMessage
+                    id='account.follows_you'
+                    defaultMessage='Follows you'
+                  />
+                )}
+              </>
+            )}
           </div>
 
           <FollowButton accountId={accountId} />

app/javascript/styles/mastodon/components.scss

@@ -10766,7 +10766,7 @@ noscript {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 10px;
+    gap: 2px 10px;
   }
 
   &__numbers {