feat: add severed_relationships notification type

components/notification/NotificationCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import RelationshipSeveranceCard from '~/components/notification/RelationshipSeveranceCard.vue'
 
 // Add undocumented 'annual_report' type introduced in v4.3
 // ref. https://github.com/mastodon/documentation/issues/1211#:~:text=api/v1/annual_reports
@@ -25,13 +26,15 @@
   'update',
   'status',
   'annual_report',
+  'severed_relationships',
 ]
 
 // well-known emoji reactions types Elk does not support yet
 const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
 
 if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotificationTypes.includes(notification.type)) {
   console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
+  console.warn(notification)
 }
 </script>
 
@@ -134,5 +137,13 @@
         </div>
       </div>
     </template>
+    <template v-else-if="notification.type === 'severed_relationships'">
+      <div flex p4 items-center>
+        <div i-material-symbols:heart-broken-outline-rounded text-xl me-4 color-red />
+        <div class="content-rich">
+          <RelationshipSeveranceCard :event="notification.event!" />
+        </div>
+      </div>
+    </template>
   </article>
 </template>

components/notification/RelationshipSeveranceCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const { event } = defineProps<{
+  event: object
+}>()
+
+const { t } = useI18n()
+
+const type = event.type
+const from = currentServer
+const target = event.targetName
+const followers = event.followersCount
+const following = event.followingCount
+</script>
+
+<template>
+  <p v-if="type === 'account_suspension'">
+    {{ t('notification.relationship_severance.account_suspension', [from, target]) }}
+  </p>
+  <p v-else-if="type === 'domain_block'">
+    {{ t('notification.relationship_severance.domain_block', { from, target, followers, n: following }) }}
+  </p>
+  <p v-else-if="type === 'user_domain_block'">
+    {{ t("notification.relationship_severance.user_domain_block", { target, followers, n: following }) }}
+  </p>
+
+  <NuxtLink :to="`https://${currentServer}/severed_relationships`" target="_blank">
+    Learn more
+  </NuxtLink>
+</template>

locales/en.json

@@ -339,6 +339,11 @@
     "followed_you_count": "{0} people followed you|{0} person followed you|{0} people followed you",
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "boosted your post",
+    "relationship_severance": {
+      "account_suspension": "An admin from {0} has suspended {1}, which means you can no longer receive updates from them or interact with them.",
+      "domain_block": "An admin from {from} has blocked {target}, including {followers} of your followers and {n} account you follow.|An admin from {from} has blocked {target}, including {followers} of your followers and {n} accounts you follow.",
+      "user_domain_block": "You have blocked {target}, removing {followers} of your followers and {n} account you follow.|You have blocked {target}, removing {followers} of your followers and {n} accounts you follow."
+    },
     "reported": "{0} reported {1}",
     "request_to_follow": "requested to follow you",
     "signed_up": "signed up",