feat: filter notifications by type (#2371)

Co-authored-by: Xabi <xabi.rn@gmail.com>
Co-authored-by: userquin <userquin@gmail.com>

components/common/CommonRouteTabs.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
+const { t } = useI18n()
+
 export interface CommonRouteTabOption {
   to: RouteLocationRaw
   display: string
@@ -8,9 +10,17 @@ export interface CommonRouteTabOption {
   name?: string
   icon?: string
   hide?: boolean
+  match?: boolean
 }
-const { options, command, replace, preventScrollTop = false } = $defineProps<{
+export interface CommonRouteTabMoreOption {
   options: CommonRouteTabOption[]
+  icon?: string
+  tooltip?: string
+  match?: boolean
+}
+const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
+  options: CommonRouteTabOption[]
+  moreOptions?: CommonRouteTabMoreOption
   command?: boolean
   replace?: boolean
   preventScrollTop?: boolean
@@ -21,7 +31,6 @@ const router = useRouter()
 useCommands(() => command
   ? options.map(tab => ({
     scope: 'Tabs',
-
     name: tab.display,
     icon: tab.icon ?? 'i-ri:file-list-2-line',
     onActivate: () => router.replace(tab.to),
@@ -51,5 +60,43 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
+    <template v-if="moreOptions?.options?.length">
+      <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
+        <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
+          <button
+            cursor-pointer
+            flex
+            gap-1
+            w-12
+            rounded
+            hover:bg-active
+            btn-action-icon
+            op75
+            px4
+            group
+            :aria-label="t('action.more')"
+            :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
+          >
+            <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
+            <span i-ri:arrow-down-s-line text-sm me--1 block />
+          </button>
+        </CommonTooltip>
+        <template #popper>
+          <NuxtLink
+            v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
+            :key="option?.name || index"
+            :to="option.to"
+          >
+            <CommonDropdownItem>
+              <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
+                <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
+                <span v-else block>&#160;</span>
+                <span>{{ option.display }}</span>
+              </span>
+            </CommonDropdownItem>
+          </NuxtLink>
+        </template>
+      </commondropdown>
+    </template>
   </div>
 </template>

components/notification/NotificationCard.vue

@@ -31,7 +31,7 @@ const { notification } = defineProps<{
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">
       <div flex p3 items-center bg-shaded>
-        <div i-ri:admin-fill me-1 color-purple />
+        <div i-ri:user-add-fill me-1 color-purple />
         <AccountDisplayName
           :account="notification.account"
           text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
@@ -58,7 +58,7 @@ const { notification } = defineProps<{
     </template>
     <template v-else-if="notification.type === 'follow_request'">
       <div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
-        <div i-ri:user-follow-fill text-xl me-1 />
+        <div i-ri:user-shared-fill text-xl me-1 />
         <AccountInlineInfo :account="notification.account" me1 />
       </div>
       <!-- TODO: accept request -->

components/timeline/TimelineMentions.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-// Default limit is 20 notifications, and servers are normally caped to 30
-const paginator = useMastoClient().v1.notifications.list({ limit: 30, types: ['mention'] })
-const stream = $(useStreaming(client => client.v1.stream.streamUser()))
-
-const { clearNotifications } = useNotifications()
-onActivated(clearNotifications)
-</script>
-
-<template>
-  <NotificationPaginator v-bind="{ paginator, stream }" />
-</template>

components/timeline/TimelineNotifications.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { filter } = defineProps<{
+  filter?: mastodon.v1.NotificationType
+}>()
+
+const options = { limit: 30, types: filter ? [filter] : [] }
+
 // Default limit is 20 notifications, and servers are normally caped to 30
-const paginator = useMastoClient().v1.notifications.list({ limit: 30 })
+const paginator = useMastoClient().v1.notifications.list(options)
 const stream = useStreaming(client => client.v1.stream.streamUser())
 
 const { clearNotifications } = useNotifications()