Add ability to group follow notifications in WebUI (#32520)

app/javascript/mastodon/features/notifications/components/column_settings.jsx

@@ -38,6 +38,7 @@ class ColumnSettings extends PureComponent {
     const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
     const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
     const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
+    const groupStr = <FormattedMessage id='notifications.column_settings.group' defaultMessage='Group' />;
 
     const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
     const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
@@ -94,6 +95,7 @@ class ColumnSettings extends PureComponent {
             {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} onChange={this.onPushChange} label={pushStr} />}
             <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
             <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
+            <SettingToggle prefix='notifications' settings={settings} settingPath={['group', 'follow']} onChange={onChange} label={groupStr} />
           </div>
         </section>
 

app/javascript/mastodon/features/notifications/containers/column_settings_container.js

@@ -56,11 +56,12 @@ const mapDispatchToProps = (dispatch) => ({
       } else {
         dispatch(changeSetting(['notifications', ...path], checked));
       }
-    } else if(path[0] === 'groupingBeta') {
-      dispatch(changeSetting(['notifications', ...path], checked));
-      dispatch(initializeNotifications());
     } else {
       dispatch(changeSetting(['notifications', ...path], checked));
+
+      if(path[0] === 'group' && path[1] === 'follow') {
+        dispatch(initializeNotifications());
+      }
     }
   },
 

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

@@ -1,16 +1,19 @@
 import { FormattedMessage } from 'react-intl';
 
+import { Link } from 'react-router-dom';
+
 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 { me } from 'mastodon/initial_state';
 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';
 
-const labelRenderer: LabelRenderer = (displayedName, total) => {
+const labelRenderer: LabelRenderer = (displayedName, total, seeMoreHref) => {
   if (total === 1)
     return (
       <FormattedMessage
@@ -23,10 +26,12 @@ const labelRenderer: LabelRenderer = (displayedName, total) => {
   return (
     <FormattedMessage
       id='notification.follow.name_and_others'
-      defaultMessage='{name} and {count, plural, one {# other} other {# others}} followed you'
+      defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> followed you'
       values={{
         name: displayedName,
         count: total - 1,
+        a: (chunks) =>
+          seeMoreHref ? <Link to={seeMoreHref}>{chunks}</Link> : chunks,
       }}
     />
   );
@@ -46,6 +51,10 @@ export const NotificationFollow: React.FC<{
   notification: NotificationGroupFollow;
   unread: boolean;
 }> = ({ notification, unread }) => {
+  const username = useAppSelector(
+    (state) => state.accounts.getIn([me, 'username']) as string,
+  );
+
   let actions: JSX.Element | undefined;
   let additionalContent: JSX.Element | undefined;
 
@@ -68,6 +77,7 @@ export const NotificationFollow: React.FC<{
       timestamp={notification.latest_page_notification_at}
       count={notification.notifications_count}
       labelRenderer={labelRenderer}
+      labelSeeMoreHref={`/@${username}/followers`}
       unread={unread}
       actions={actions}
       additionalContent={additionalContent}