Preliminary implementation of moderation_warning notifications

src/components/notification.jsx

@@ -28,6 +28,7 @@ const NOTIFICATION_ICONS = {
   'admin.signup': 'account-edit',
   'admin.report': 'account-warning',
   severed_relationships: 'heart-break',
+  moderation_warning: 'alert',
   emoji_reaction: 'emoji2',
   'pleroma:emoji_reaction': 'emoji2',
 };
@@ -45,6 +46,8 @@ poll = A poll you have voted in or created has ended
 update = A status you interacted with has been edited
 admin.sign_up = Someone signed up (optionally sent to admins)
 admin.report = A new report has been filed
+severed_relationships = Severed relationships
+moderation_warning = Moderation warning
 */
 
 function emojiText(emoji, emoji_url) {
@@ -91,6 +94,7 @@ const contentText = {
       Lost connections with <i>{name}</i>.
     </>
   ),
+  moderation_warning: <b>Moderation warning</b>,
   emoji_reaction: emojiText,
   'pleroma:emoji_reaction': emojiText,
 };
@@ -117,6 +121,17 @@ const SEVERED_RELATIONSHIPS_TEXT = {
   ),
 };
 
+const MODERATION_WARNING_TEXT = {
+  none: 'Your account has received a moderation warning.',
+  disable: 'Your account has been disabled.',
+  mark_statuses_as_sensitive:
+    'Some of your posts have been marked as sensitive.',
+  delete_statuses: 'Some of your posts have been deleted.',
+  sensitive: 'Your posts will be marked as sensitive from now on.',
+  silence: 'Your account has been limited.',
+  suspend: 'Your account has been suspended.',
+};
+
 const AVATARS_LIMIT = 50;
 
 function Notification({
@@ -125,8 +140,16 @@ function Notification({
   isStatic,
   disableContextMenu,
 }) {
-  const { id, status, account, report, event, _accounts, _statuses } =
+  const {
-    notification;
+    id,
+    status,
+    account,
+    report,
+    event,
+    moderation_warning,
+    _accounts,
+    _statuses,
+  } = notification;
   let { type } = notification;
 
   // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
@@ -314,6 +337,20 @@ function Notification({
                 .
               </div>
             )}
+            {type === 'moderation_warning' && !!moderation_warning && (
+              <div>
+                {MODERATION_WARNING_TEXT[moderation_warning.action]}
+                <br />
+                <a
+                  href={`/disputes/strikes/${moderation_warning.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn more <Icon icon="external" size="s" />
+                </a>
+                .
+              </div>
+            )}
           </>
         )}
         {_accounts?.length > 1 && (

src/pages/notifications.jsx

@@ -102,6 +102,17 @@ function Notifications({ columnMode }) {
       //   },
       // });
 
+      // TEST: Slot in a fake notification to test 'moderation_warning'
+      // notifications.unshift({
+      //   id: '123123',
+      //   type: 'moderation_warning',
+      //   createdAt: new Date().toISOString(),
+      //   moderation_warning: {
+      //     id: '1231234',
+      //     action: 'mark_statuses_as_sensitive',
+      //   },
+      // });
+
       // console.log({ notifications });
 
       const groupedNotifications = groupNotifications(notifications);