Preliminary support for severed relationships notifications

Reference: https://github.com/mastodon/mastodon/pull/27511

This is done purely based on the above codebase without real testing.

src/components/ICONS.jsx

@@ -106,4 +106,5 @@ export const ICONS = {
   copy: () => import('@iconify-icons/mingcute/copy-2-line'),
   quote: () => import('@iconify-icons/mingcute/quote-left-line'),
   settings: () => import('@iconify-icons/mingcute/settings-6-line'),
+  unlink: () => import('@iconify-icons/mingcute/unlink-line'),
 };

src/components/notification.jsx

@@ -25,6 +25,7 @@ const NOTIFICATION_ICONS = {
   update: 'pencil',
   'admin.signup': 'account-edit',
   'admin.report': 'account-warning',
+  severed_relationships: 'unlink',
 };
 
 /*
@@ -63,6 +64,14 @@ const contentText = {
   'favourite+reblog_reply': 'boosted & liked your reply.',
   'admin.sign_up': 'signed up.',
   'admin.report': (targetAccount) => <>reported {targetAccount}</>,
+  severed_relationships: (name) => `Relationships with ${name} severed.`,
+};
+
+// account_suspension, domain_block, user_domain_block
+const SEVERED_RELATIONSHIPS_TEXT = {
+  account_suspension: 'Account has been suspended.',
+  domain_block: 'Domain has been blocked.',
+  user_domain_block: 'You blocked this domain.',
 };
 
 const AVATARS_LIMIT = 50;
@@ -73,7 +82,8 @@ function Notification({
   isStatic,
   disableContextMenu,
 }) {
-  const { id, status, account, report, _accounts, _statuses } = notification;
+  const { id, status, account, report, event, _accounts, _statuses } =
+    notification;
   let { type } = notification;
 
   // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
@@ -135,6 +145,11 @@ function Notification({
       if (targetAccount) {
         text = text(<NameText account={targetAccount} showAvatar />);
       }
+    } else if (type === 'severed_relationships') {
+      const targetName = event?.targetName;
+      if (targetName) {
+        text = text(targetName);
+      }
     }
   }
 
@@ -203,9 +218,11 @@ function Notification({
                       </b>{' '}
                     </>
                   ) : (
-                    <>
-                      <NameText account={account} showAvatar />{' '}
-                    </>
+                    account && (
+                      <>
+                        <NameText account={account} showAvatar />{' '}
+                      </>
+                    )
                   )}
                 </>
               )}
@@ -224,6 +241,44 @@ function Notification({
             {type === 'follow_request' && (
               <FollowRequestButtons accountID={account.id} />
             )}
+            {type === 'severed_relationships' && (
+              <>
+                <p>
+                  <span class="insignificant">
+                    {event?.purge ? (
+                      'Purged by administrators.'
+                    ) : (
+                      <>
+                        {event.relationshipsCount} relationship
+                        {event.relationshipsCount === 1 ? '' : 's'}
+                        {!!event.createdAt && (
+                          <>
+                            {' '}
+                            •{' '}
+                            <RelativeTime
+                              datetime={event.createdAt}
+                              format="micro"
+                            />
+                          </>
+                        )}
+                      </>
+                    )}
+                  </span>
+                  <br />
+                  <b>{SEVERED_RELATIONSHIPS_TEXT[event.type]}</b>
+                </p>
+                <p>
+                  <a
+                    href={`https://${instance}/severed_relationships`}
+                    class="button plain6"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <span>View</span> <Icon icon="external" />
+                  </a>
+                </p>
+              </>
+            )}
           </>
         )}
         {_accounts?.length > 1 && (

src/pages/notifications.jsx

@@ -198,6 +198,7 @@ function Notifications({ columnMode }) {
 
         setUIState('default');
       } catch (e) {
+        console.error(e);
         setUIState('error');
       }
     })();

src/utils/group-notifications.jsx

@@ -63,11 +63,11 @@ function groupNotifications(notifications) {
         mappedNotification.id += `-${id}`;
       }
     } else {
-      account._types = [type];
+      if (account) account._types = [type];
       let n = (notificationsMap[key] = {
         ...notification,
         type: virtualType,
-        _accounts: [account],
+        _accounts: account ? [account] : [],
       });
       cleanNotifications[j++] = n;
     }