feat: dispaly quote notifications (#3435)

Author: shuuji3

app/components/notification/NotificationCard.vue

@@ -25,6 +25,8 @@ const supportedNotificationTypes: NotificationType[] = [
   'update',
   'status',
   'annual_report',
+  // @ts-expect-error masto.js type does not include this new type yet (ref. https://github.com/neet/masto.js/pull/1357)
+  'quote',
 ]
 
 // well-known emoji reactions types Elk does not support yet
@@ -130,7 +132,15 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
         </template>
       </StatusCard>
     </template>
-    <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
+    <template
+      v-else-if="
+        notification.type === 'mention'
+          || notification.type === 'poll'
+          || notification.type === 'status'
+          // @ts-expect-error masto.js type does not include this new type yet (ref. https://github.com/neet/masto.js/pull/1357)
+          || notification.type === 'quote'
+      "
+    >
       <StatusCard :status="notification.status!" />
     </template>
     <template v-else-if="notification.type === 'annual_report'">

app/components/notification/NotificationPaginator.vue

@@ -13,7 +13,14 @@ const virtualScroller = false // TODO: fix flickering issue with virtual scroll
 
 const groupCapacity = Number.MAX_VALUE // No limit
 
-const includeNotificationTypes: mastodon.v1.NotificationType[] = ['update', 'mention', 'poll', 'status']
+const includeNotificationTypes: mastodon.v1.NotificationType[] = [
+  'update',
+  'mention',
+  'poll',
+  'status',
+  // @ts-expect-error masto.js type does not include this new type yet (ref. https://github.com/neet/masto.js/pull/1357)
+  'quote',
+]
 
 let id = 0
 

app/constants/index.ts

@@ -27,7 +27,19 @@ export const STORAGE_KEY_BOTTOM_NAV_BUTTONS = 'elk-bottom-nav-buttons'
 
 export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\-]+\.)+\w+\/(@[@\w\-.]+)(\/objects)?(\/\d+)?$/
 
-export const NOTIFICATION_FILTER_TYPES: mastodon.v1.NotificationType[] = ['status', 'reblog', 'follow', 'follow_request', 'favourite', 'poll', 'update', 'admin.sign_up', 'admin.report']
+export const NOTIFICATION_FILTER_TYPES: mastodon.v1.NotificationType[] = [
+  'status',
+  'reblog',
+  // @ts-expect-error masto.js type does not include this new type yet (ref. https://github.com/neet/masto.js/pull/1357)
+  'quote',
+  'follow',
+  'follow_request',
+  'favourite',
+  'poll',
+  'update',
+  'admin.sign_up',
+  'admin.report',
+]
 
 export const THEME_COLORS = {
   defaultTheme: '#cc7d24',

app/pages/notifications.vue

@@ -40,6 +40,8 @@ const filterIconMap: Record<mastodon.v1.NotificationType, string> = {
   'mention': 'i-ri:at-line',
   'status': 'i-ri:account-pin-circle-line',
   'reblog': 'i-ri:repeat-fill',
+  // @ts-expect-error masto.js type does not include this new type yet (ref. https://github.com/neet/masto.js/pull/1357)
+  'quote': 'i-ri:double-quotes-l',
   'follow': 'i-ri:user-follow-line',
   'follow_request': 'i-ri:user-shared-line',
   'favourite': 'i-ri:heart-3-line',

locales/en.json

@@ -676,6 +676,7 @@
     "notifications_mention": "Mentions",
     "notifications_more_tooltip": "Filter notifications by type",
     "notifications_poll": "Poll",
+    "notifications_quote": "Quote",
     "notifications_reblog": "Boost",
     "notifications_status": "Status",
     "notifications_update": "Update",

service-worker/types.ts

@@ -3,7 +3,7 @@
 // I just copy/paste any entry from masto api and convert it to snake case, reusing types not including camel case props
 import type { mastodon } from 'masto'
 
-export type NotificationType = 'mention' | 'status' | 'reblog' | 'follow' | 'follow_request' | 'favourite' | 'poll' | 'update' | 'admin.sign_up' | 'admin.report'
+export type NotificationType = 'mention' | 'status' | 'reblog' | 'follow' | 'follow_request' | 'favourite' | 'poll' | 'update' | 'admin.sign_up' | 'admin.report' | 'quote'
 
 export interface PushPayload {
   access_token: string