[Glitch] Add ability to group follow notifications in WebUI

Port 6c87c76e18 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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 'flavours/glitch/components/counters';
 import { FollowButton } from 'flavours/glitch/components/follow_button';
 import { ShortNumber } from 'flavours/glitch/components/short_number';
+import { me } from 'flavours/glitch/initial_state';
 import type { NotificationGroupFollow } from 'flavours/glitch/models/notification_group';
 import { useAppSelector } from 'flavours/glitch/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}