From fd29c379dc9c6bf0b137eb11c03526adf801033e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Tue, 13 Dec 2022 14:50:42 +0100
Subject: [PATCH] feat: add notification tabs pages (#410)

---
 pages/notifications.vue         | 27 ++++-----------------------
 pages/notifications/index.vue   | 19 +++++++++++++++++++
 pages/notifications/mention.vue | 19 +++++++++++++++++++
 3 files changed, 42 insertions(+), 23 deletions(-)
 create mode 100644 pages/notifications/index.vue
 create mode 100644 pages/notifications/mention.vue

diff --git a/pages/notifications.vue b/pages/notifications.vue
index 6731efa6..591a882c 100644
--- a/pages/notifications.vue
+++ b/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>
diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue
new file mode 100644
index 00000000..cf6d66b2
--- /dev/null
+++ b/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>
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
new file mode 100644
index 00000000..87ee8f78
--- /dev/null
+++ b/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>