refactor: Remove duplicated AvatarGroup CSS and familiar followers cleanup (#34681)

app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx

@@ -7,6 +7,7 @@ import { HotKeys } from 'react-hotkeys';
 
 import { replyComposeById } from 'mastodon/actions/compose';
 import { navigateToStatus } from 'mastodon/actions/statuses';
+import { Avatar } from 'mastodon/components/avatar';
 import { AvatarGroup } from 'mastodon/components/avatar_group';
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
@@ -17,6 +18,14 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { DisplayedName } from './displayed_name';
 import { EmbeddedStatus } from './embedded_status';
 
+export const AvatarById: React.FC<{ accountId: string }> = ({ accountId }) => {
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+
+  if (!account) return null;
+
+  return <Avatar withLink account={account} size={28} />;
+};
+
 export type LabelRenderer = (
   displayedName: JSX.Element,
   total: number,
@@ -99,12 +108,13 @@ export const NotificationGroupWithStatus: React.FC<{
         <div className='notification-group__main'>
           <div className='notification-group__main__header'>
             <div className='notification-group__main__header__wrapper'>
-              <AvatarGroup
-                accountIds={accountIds.slice(
-                  0,
-                  NOTIFICATIONS_GROUP_MAX_AVATARS,
-                )}
-              />
+              <AvatarGroup>
+                {accountIds
+                  .slice(0, NOTIFICATIONS_GROUP_MAX_AVATARS)
+                  .map((id) => (
+                    <AvatarById key={id} accountId={id} />
+                  ))}
+              </AvatarGroup>
 
               {actions && (
                 <div className='notification-group__actions'>{actions}</div>