feat: filter notifications by type (#2371)

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

pages/notifications/[filter].vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const filter = $computed<mastodon.v1.NotificationType | undefined>(() => {
+  if (!isHydrated.value)
+    return undefined
+
+  const rawFilter = route.params?.filter
+  const actualFilter = Array.isArray(rawFilter) ? rawFilter[0] : rawFilter
+  if (isNotification(actualFilter))
+    return actualFilter
+})
+
+useHydratedHead({
+  title: () => `${t(`tab.notifications_${filter ?? 'all'}`)} | ${t('nav.notifications')}`,
+})
+</script>
+
+<template>
+  <TimelineNotifications v-if="isHydrated" :filter="filter" />
+</template>

pages/notifications/mention.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const { t } = useI18n()
-useHydratedHead({
-  title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
-})
-</script>
-
-<template>
-  <TimelineMentions v-if="isHydrated" />
-</template>