From fd61a0528760109fed01260577bd36690c76d316 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 24 Nov 2025 10:10:21 +0900
Subject: [PATCH] feat: dispaly `quote` notifications (#3435)

---
 app/components/notification/NotificationCard.vue   | 12 +++++++++++-
 .../notification/NotificationPaginator.vue         |  9 ++++++++-
 app/constants/index.ts                             | 14 +++++++++++++-
 app/pages/notifications.vue                        |  2 ++
 locales/en.json                                    |  1 +
 service-worker/types.ts                            |  2 +-
 6 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/app/components/notification/NotificationCard.vue b/app/components/notification/NotificationCard.vue
index 20d3aa4f..8fdeac19 100644
--- a/app/components/notification/NotificationCard.vue
+++ b/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'">
diff --git a/app/components/notification/NotificationPaginator.vue b/app/components/notification/NotificationPaginator.vue
index 07c83aca..c5e1b7a1 100644
--- a/app/components/notification/NotificationPaginator.vue
+++ b/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
 
diff --git a/app/constants/index.ts b/app/constants/index.ts
index 9a82b5e3..da70f93b 100644
--- a/app/constants/index.ts
+++ b/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',
diff --git a/app/pages/notifications.vue b/app/pages/notifications.vue
index ebe68ab6..3a9e5c3b 100644
--- a/app/pages/notifications.vue
+++ b/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',
diff --git a/locales/en.json b/locales/en.json
index 2de4f66d..e7bb9503 100644
--- a/locales/en.json
+++ b/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",
diff --git a/service-worker/types.ts b/service-worker/types.ts
index c51b7a63..0604aa54 100644
--- a/service-worker/types.ts
+++ b/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