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 }) => (
+}> = ({ notification, unread }) => {
-  <NotificationGroupWithStatus
+  let actions: JSX.Element | undefined;
-    type='follow'
+  let additionalContent: JSX.Element | undefined;
-    icon={PersonAddIcon}
+
-    iconId='person-add'
+  if (notification.sampleAccountIds.length === 1) {
-    accountIds={notification.sampleAccountIds}
+    // only display those if the group contains 1 account, otherwise it does not makes sense
-    timestamp={notification.latest_page_notification_at}
+    const account = notification.sampleAccountIds[0];
-    count={notification.notifications_count}
+
-    labelRenderer={labelRenderer}
+    if (account) {
-    unread={unread}
+      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}
+    />
+  );
+};

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

@@ -46,7 +46,7 @@ export const NotificationFollowRequest: React.FC<{
   }, [dispatch, notification.sampleAccountIds]);
 
   const actions = (
-    <div className='notification-group__actions'>
+    <>
       <IconButton
         title={intl.formatMessage(messages.reject)}
         icon='times'
@@ -59,7 +59,7 @@ export const NotificationFollowRequest: React.FC<{
         iconComponent={CheckIcon}
         onClick={onAuthorize}
       />
-    </div>
+    </>
   );
 
   return (

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

@@ -31,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
   labelSeeMoreHref?: string;
   type: string;
   unread: boolean;
+  additionalContent?: JSX.Element;
 }> = ({
   icon,
   iconId,
@@ -43,6 +44,7 @@ export const NotificationGroupWithStatus: React.FC<{
   labelSeeMoreHref,
   type,
   unread,
+  additionalContent,
 }) => {
   const dispatch = useAppDispatch();
 
@@ -92,7 +94,9 @@ export const NotificationGroupWithStatus: React.FC<{
             <div className='notification-group__main__header__wrapper'>
               <AvatarGroup accountIds={accountIds} />
 
-              {actions}
+              {actions && (
+                <div className='notification-group__actions'>{actions}</div>
+              )}
             </div>
 
             <div className='notification-group__main__header__label'>
@@ -106,6 +110,12 @@ export const NotificationGroupWithStatus: React.FC<{
               <EmbeddedStatus statusId={statusId} />
             </div>
           )}
+
+          {additionalContent && (
+            <div className='notification-group__main__additional-content'>
+              {additionalContent}
+            </div>
+          )}
         </div>
       </div>
     </HotKeys>

app/javascript/styles/mastodon/components.scss

@@ -10486,6 +10486,13 @@ noscript {
     gap: 8px;
     flex: 1 1 auto;
     overflow: hidden;
+    container-type: inline-size;
+
+    @container (width < 350px) {
+      &__header time {
+        display: none;
+      }
+    }
 
     &__header {
       display: flex;
@@ -10525,6 +10532,11 @@ noscript {
       border-radius: 8px;
       padding: 8px;
     }
+
+    &__additional-content {
+      color: $darker-text-color;
+      margin-top: -8px; // to offset the parent's `gap` property
+    }
   }
 
   &__avatar-group {