feat: add notification tabs pages (#410)

pages/notifications.vue

@@ -5,35 +5,18 @@ definePageMeta({
 
 const { t } = useI18n()
 
-// Default limit is 20 notifications, and servers are normally caped to 30
-const paginatorAll = useMasto().notifications.iterate({ limit: 30 })
-const paginatorMention = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
-
-const { clearNotifications } = useNotifications()
-onActivated(clearNotifications)
-
-const stream = await useMasto().stream.streamUser()
-
 const tabs = $computed(() => [
   {
     name: 'all',
+    to: '/notifications',
     display: t('tab.notifications_all'),
-    paginator: paginatorAll,
   },
   {
     name: 'mention',
+    to: '/notifications/mention',
     display: t('tab.notifications_mention'),
-    paginator: paginatorMention,
   },
 ] as const)
-
-// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
-const tab = $ref(tabs[0].name)
-const paginator = $computed(() => tabs.find(t => t.name === tab)!.paginator)
-
-useHeadFixed({
-  title: () => t('nav_side.notifications'),
-})
 </script>
 
 <template>
@@ -46,10 +29,8 @@ useHeadFixed({
     </template>
 
     <template #header>
-      <CommonTabs v-model="tab" :options="tabs" />
+      <CommonRouteTabs replace :options="tabs" />
     </template>
-    <slot>
-      <NotificationPaginator :key="tab" v-bind="{ paginator, stream }" />
-    </slot>
+    <NuxtPage />
   </MainContent>
 </template>

pages/notifications/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginator = useMasto().notifications.iterate({ limit: 30 })
+
+const { clearNotifications } = useNotifications()
+onActivated(clearNotifications)
+
+const stream = await useMasto().stream.streamUser()
+
+useHeadFixed({
+  title: () => `${t('tab.notifications_all')} | ${t('nav_side.notifications')}`,
+})
+</script>
+
+<template>
+  <NotificationPaginator v-bind="{ paginator, stream }" />
+</template>

pages/notifications/mention.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginator = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
+
+const { clearNotifications } = useNotifications()
+onActivated(clearNotifications)
+
+const stream = await useMasto().stream.streamUser()
+
+useHeadFixed({
+  title: () => `${t('tab.notifications_mention')} | ${t('nav_side.notifications')}`,
+})
+</script>
+
+<template>
+  <NotificationPaginator v-bind="{ paginator, stream }" />
+</template>