Fix handling admin.sign_up (grouped) notification

Author: cheeaun

src/components/notification.jsx

@@ -27,7 +27,7 @@ const NOTIFICATION_ICONS = {
   favourite: 'heart',
   poll: 'poll',
   update: 'pencil',
-  'admin.signup': 'account-edit',
+  'admin.sign_up': 'account-edit',
   'admin.report': 'account-warning',
   severed_relationships: 'heart-break',
   moderation_warning: 'alert',
@@ -256,7 +256,20 @@ const contentText = {
   quoted_update: ({ account }) => (
     <Trans>{account} edited a post you have quoted.</Trans>
   ),
-  'admin.sign_up': ({ account }) => <Trans>{account} signed up.</Trans>,
+  'admin.sign_up': ({ account, count, components: { Subject } }) => (
+    <Plural
+      value={count}
+      _1={<Trans>{account} signed up.</Trans>}
+      other={
+        <Trans>
+          <Subject clickable={count > 1}>
+            <span title={count}>{shortenNumber(count)}</span> people
+          </Subject>{' '}
+          signed up.
+        </Trans>
+      }
+    />
+  ),
   'admin.report': ({ account, targetAccount }) => (
     <Trans>
       {account} reported {targetAccount}
@@ -399,7 +412,8 @@ function Notification({
 
   if (typeof text === 'function') {
     const count =
-      (type === 'favourite' || type === 'reblog') && notificationsCount
+      (type === 'favourite' || type === 'reblog' || type === 'admin.sign_up') &&
+      notificationsCount
         ? diffCount
           ? notificationsCount
           : sampleAccounts?.length
@@ -465,14 +479,63 @@ function Notification({
       reblog: t`Boosted by…`,
       follow: t`Followed by…`,
     }[type] || t`Accounts`;
+  const showRemoteAccounts =
+    (type === 'favourite+reblog' ||
+      type === 'favourite' ||
+      type === 'reblog' ||
+      type === 'admin.sign_up') &&
+    expandAccounts === 'remote';
   const handleOpenGenericAccounts = () => {
-    states.showGenericAccounts = {
-      heading: genericAccountsHeading,
-      accounts: _accounts,
-      showReactions: type === 'favourite+reblog',
-      excludeRelationshipAttrs: type === 'follow' ? ['followedBy'] : [],
-      postID: statusKey(actualStatusID, instance),
-    };
+    if (showRemoteAccounts) {
+      states.showGenericAccounts = {
+        heading: genericAccountsHeading,
+        accounts: _accounts,
+        fetchAccounts: async () => {
+          const keyAccounts = await Promise.allSettled(
+            _groupKeys.map(async (gKey) => {
+              const iterator = masto.v2.notifications
+                .$select(gKey)
+                .accounts.list()
+                .values();
+              return [gKey, (await iterator.next()).value];
+            }),
+          );
+          const accounts = [];
+          for (const keyAccount of keyAccounts) {
+            const [key, _accounts] = keyAccount.value;
+            const type = /^favourite/.test(key)
+              ? 'favourite'
+              : /^reblog/.test(key)
+                ? 'reblog'
+                : null;
+            // if (!type) continue;
+            for (const account of _accounts) {
+              const theAccount = accounts.find((a) => a.id === account.id);
+              if (theAccount && type) {
+                theAccount._types.push(type);
+              } else {
+                if (type) account._types = [type];
+                accounts.push(account);
+              }
+            }
+          }
+          return {
+            done: true,
+            value: accounts,
+          };
+        },
+        showReactions: type === 'favourite+reblog',
+        postID: statusKey(actualStatusID, instance),
+      };
+    } else {
+      states.showGenericAccounts = {
+        heading: genericAccountsHeading,
+        accounts: _accounts,
+        showReactions: type === 'favourite+reblog',
+        excludeRelationshipAttrs: type === 'follow' ? ['followedBy'] : [],
+        postID: statusKey(actualStatusID, instance),
+      };
+    }
   };
 
   console.debug('RENDER Notification', notification.id);
@@ -486,12 +549,21 @@ function Notification({
     }
   }
 
+  const debugHover = (e) => {
+    if (e.shiftKey) {
+      console.log({
+        ...notification,
+      });
+    }
+  };
+
   return (
     <div
       class={`notification notification-${type}`}
       data-notification-id={_ids || id}
       data-group-key={_groupKeys?.join(' ') || groupKey}
       tabIndex="0"
+      onMouseEnter={debugHover}
     >
       <div
         class={`notification-type notification-${type}`}
@@ -621,61 +693,17 @@ function Notification({
                 </a>{' '}
               </Fragment>
             ))}
-            {(type === 'favourite+reblog' ||
-              type === 'favourite' ||
-              type === 'reblog') &&
-            expandAccounts === 'remote' ? (
+            {showRemoteAccounts ? (
               <button
                 type="button"
                 class="small plain"
                 data-group-keys={_groupKeys?.join(' ')}
-                onClick={() => {
-                  states.showGenericAccounts = {
-                    heading: genericAccountsHeading,
-                    accounts: _accounts,
-                    fetchAccounts: async () => {
-                      const keyAccounts = await Promise.allSettled(
-                        _groupKeys.map(async (gKey) => {
-                          const iterator = masto.v2.notifications
-                            .$select(gKey)
-                            .accounts.list()
-                            .values();
-                          return [gKey, (await iterator.next()).value];
-                        }),
-                      );
-                      const accounts = [];
-                      for (const keyAccount of keyAccounts) {
-                        const [key, _accounts] = keyAccount.value;
-                        const type = /^favourite/.test(key)
-                          ? 'favourite'
-                          : /^reblog/.test(key)
-                            ? 'reblog'
-                            : null;
-                        if (!type) continue;
-                        for (const account of _accounts) {
-                          const theAccount = accounts.find(
-                            (a) => a.id === account.id,
-                          );
-                          if (theAccount) {
-                            theAccount._types.push(type);
-                          } else {
-                            account._types = [type];
-                            accounts.push(account);
-                          }
-                        }
-                      }
-                      return {
-                        done: true,
-                        value: accounts,
-                      };
-                    },
-                    showReactions: type === 'favourite+reblog',
-                    postID: statusKey(actualStatusID, instance),
-                  };
-                }}
+                onClick={handleOpenGenericAccounts}
               >
                 +
-                {(type === 'favourite' || type === 'reblog') &&
+                {(type === 'favourite' ||
+                  type === 'reblog' ||
+                  type === 'admin.sign_up') &&
                   notificationsCount - _accounts.length}
                 <Icon icon="chevron-down" />
               </button>
@@ -727,7 +755,7 @@ function Notification({
                 </a>{' '}
               </Fragment>
             ))}
-            {notificationsCount > sampleAccounts.length && (
+            {notificationsCount > sampleAccounts.length && status?.id && (
               <Link
                 to={
                   instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`

src/locales/en.po

@@ -11,7 +11,7 @@ const notificationTypeKeys = {
   update: ['status'],
 };
 
-const GROUP_TYPES = ['favourite', 'reblog', 'follow'];
+const GROUP_TYPES = ['favourite', 'reblog', 'follow', 'admin.sign_up'];
 const groupable = (type) => GROUP_TYPES.includes(type);
 
 export function fixNotifications(notifications) {