Add a follow button & follower count on follow notifications (#31433)

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

@@ -1,7 +1,11 @@
 import { FormattedMessage } from 'react-intl';
 
 import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import { FollowersCounter } from 'mastodon/components/counters';
+import { FollowButton } from 'mastodon/components/follow_button';
+import { ShortNumber } from 'mastodon/components/short_number';
 import type { NotificationGroupFollow } from 'mastodon/models/notification_group';
+import { useAppSelector } from 'mastodon/store';
 
 import type { LabelRenderer } from './notification_group_with_status';
 import { NotificationGroupWithStatus } from './notification_group_with_status';
@@ -14,18 +18,45 @@ const labelRenderer: LabelRenderer = (values) => (
   />
 );
 
+const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => {
+  const account = useAppSelector((s) => s.accounts.get(accountId));
+
+  if (!account) return null;
+
+  return (
+    <ShortNumber value={account.followers_count} renderer={FollowersCounter} />
+  );
+};
+
 export const NotificationFollow: React.FC<{
   notification: NotificationGroupFollow;
   unread: boolean;
-}> = ({ notification, unread }) => (
-  <NotificationGroupWithStatus
-    type='follow'
-    icon={PersonAddIcon}
-    iconId='person-add'
-    accountIds={notification.sampleAccountIds}
-    timestamp={notification.latest_page_notification_at}
-    count={notification.notifications_count}
-    labelRenderer={labelRenderer}
-    unread={unread}
-  />
-);
+}> = ({ notification, unread }) => {
+  let actions: JSX.Element | undefined;
+  let additionalContent: JSX.Element | undefined;
+
+  if (notification.sampleAccountIds.length === 1) {
+    // only display those if the group contains 1 account, otherwise it does not makes sense
+    const account = notification.sampleAccountIds[0];
+
+    if (account) {
+      actions = <FollowButton accountId={notification.sampleAccountIds[0]} />;
+      additionalContent = <FollowerCount accountId={account} />;
+    }
+  }
+
+  return (
+    <NotificationGroupWithStatus
+      type='follow'
+      icon={PersonAddIcon}
+      iconId='person-add'
+      accountIds={notification.sampleAccountIds}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      unread={unread}
+      actions={actions}
+      additionalContent={additionalContent}
+    />
+  );
+};