Add "Followers you know" to hovercard (#34769)

app/javascript/mastodon/components/counters.tsx

@@ -43,3 +43,17 @@ export const FollowersCounter = (
     }}
   />
 );
+
+export const FollowersYouKnowCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number,
+) => (
+  <FormattedMessage
+    id='account.followers_you_know_counter'
+    defaultMessage='{counter} you know'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);

app/javascript/mastodon/components/hover_card_account.tsx

@@ -9,11 +9,16 @@ import { fetchAccount } from 'mastodon/actions/accounts';
 import { AccountBio } from 'mastodon/components/account_bio';
 import { AccountFields } from 'mastodon/components/account_fields';
 import { Avatar } from 'mastodon/components/avatar';
-import { FollowersCounter } from 'mastodon/components/counters';
+import { AvatarGroup } from 'mastodon/components/avatar_group';
+import {
+  FollowersCounter,
+  FollowersYouKnowCounter,
+} from 'mastodon/components/counters';
 import { DisplayName } from 'mastodon/components/display_name';
 import { FollowButton } from 'mastodon/components/follow_button';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { ShortNumber } from 'mastodon/components/short_number';
+import { useFetchFamiliarFollowers } from 'mastodon/features/account_timeline/hooks/familiar_followers';
 import { domain } from 'mastodon/initial_state';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
@@ -38,6 +43,8 @@ export const HoverCardAccount = forwardRef<
     }
   }, [dispatch, accountId, account]);
 
+  const { familiarFollowers } = useFetchFamiliarFollowers({ accountId });
+
   return (
     <div
       ref={ref}
@@ -73,11 +80,27 @@ export const HoverCardAccount = forwardRef<
             )}
           </div>
 
-          <div className='hover-card__number'>
+          <div className='hover-card__numbers'>
             <ShortNumber
               value={account.followers_count}
               renderer={FollowersCounter}
             />
+            {familiarFollowers.length > 0 && (
+              <>
+                &middot;
+                <div className='hover-card__familiar-followers'>
+                  <ShortNumber
+                    value={familiarFollowers.length}
+                    renderer={FollowersYouKnowCounter}
+                  />
+                  <AvatarGroup compact>
+                    {familiarFollowers.slice(0, 3).map((account) => (
+                      <Avatar key={account.id} account={account} size={22} />
+                    ))}
+                  </AvatarGroup>
+                </div>
+              </>
+            )}
           </div>
 
           <FollowButton accountId={accountId} />