From 5acd2224df77f5cd68347adbc0a2c3c1c4fb4844 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sat, 11 Feb 2023 12:31:53 +0100
Subject: [PATCH] chore: move path to page when using notification paginator

---
 components/notification/NotificationPaginator.vue |  8 +-------
 components/timeline/TimelineMentions.vue          |  3 ++-
 components/timeline/TimelineNotifications.vue     |  4 +++-
 pages/notifications/index.vue                     |  5 ++++-
 pages/notifications/mention.vue                   |  6 +++++-
 plugins/track-scroll-position.client.ts           | 14 ++++++++++----
 6 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/notification/NotificationPaginator.vue b/components/notification/NotificationPaginator.vue
index e65cd924..db171219 100644
--- a/components/notification/NotificationPaginator.vue
+++ b/components/notification/NotificationPaginator.vue
@@ -116,9 +116,7 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
   // Finalize remaining groups
   processGroup()
 
-  nextTick().then(() => {
-    nuxtApp.$trackScroll.restoreCustomPageScroll()
-  })
+  nuxtApp.$trackScroll.restoreCustomPageScroll()
 
   return results
 }
@@ -153,10 +151,6 @@ function preprocess(items: NotificationSlot[]): NotificationSlot[] {
 
 const { clearNotifications } = useNotifications()
 const { formatNumber } = useHumanReadableNumber()
-
-onMounted(() => {
-  nuxtApp.$trackScroll.registerCustomRoute(path)
-})
 </script>
 
 <template>
diff --git a/components/timeline/TimelineMentions.vue b/components/timeline/TimelineMentions.vue
index 97cf390d..318e50c7 100644
--- a/components/timeline/TimelineMentions.vue
+++ b/components/timeline/TimelineMentions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineProps<{ path: string }>()
 // 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()))
@@ -8,5 +9,5 @@ onActivated(clearNotifications)
 </script>
 
 <template>
-  <NotificationPaginator v-bind="{ path: '/notification/mention', paginator, stream }" />
+  <NotificationPaginator v-bind="{ path, paginator, stream }" />
 </template>
diff --git a/components/timeline/TimelineNotifications.vue b/components/timeline/TimelineNotifications.vue
index 98c78be7..64a48564 100644
--- a/components/timeline/TimelineNotifications.vue
+++ b/components/timeline/TimelineNotifications.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+defineProps<{ path: string }>()
+
 // Default limit is 20 notifications, and servers are normally caped to 30
 const paginator = useMastoClient().v1.notifications.list({ limit: 30 })
 const stream = useStreaming(client => client.v1.stream.streamUser())
@@ -8,5 +10,5 @@ onActivated(clearNotifications)
 </script>
 
 <template>
-  <NotificationPaginator v-bind="{ path: '/notification', paginator, stream }" />
+  <NotificationPaginator v-bind="{ path, paginator, stream }" />
 </template>
diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue
index 5862ee7c..61fd7dae 100644
--- a/pages/notifications/index.vue
+++ b/pages/notifications/index.vue
@@ -3,8 +3,11 @@ const { t } = useI18n()
 useHeadFixed({
   title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`,
 })
+onMounted(() => {
+  useNuxtApp().$trackScroll.registerCustomRoute('/notifications')
+})
 </script>
 
 <template>
-  <TimelineNotifications v-if="isHydrated" />
+  <TimelineNotifications v-if="isHydrated" path="/notifications" />
 </template>
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
index c157d6f8..271e03d2 100644
--- a/pages/notifications/mention.vue
+++ b/pages/notifications/mention.vue
@@ -3,8 +3,12 @@ const { t } = useI18n()
 useHeadFixed({
   title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
 })
+
+onMounted(() => {
+  useNuxtApp().$trackScroll.registerCustomRoute('/notification/mention')
+})
 </script>
 
 <template>
-  <TimelineMentions v-if="isHydrated" />
+  <TimelineMentions v-if="isHydrated" path="/notifications/mention" />
 </template>
diff --git a/plugins/track-scroll-position.client.ts b/plugins/track-scroll-position.client.ts
index e1cdabd1..c88332a8 100644
--- a/plugins/track-scroll-position.client.ts
+++ b/plugins/track-scroll-position.client.ts
@@ -13,7 +13,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     track.value = true
   })
 
-  const forceScroll = () => {
+  const forceScrollToTop = () => {
     storage.value[route.fullPath] = 0
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
@@ -22,7 +22,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     const path = route.fullPath
     return nextTick().then(() => {
       if (route.meta?.noScrollTrack) {
-        forceScroll()
+        forceScrollToTop()
         return Promise.resolve()
       }
 
@@ -43,6 +43,13 @@ export default defineNuxtPlugin((nuxtApp) => {
           if (scrollPosition)
             window.scrollTo(0, scrollPosition)
 
+          // required for custom routes: first call will reject
+          if (!track.value) {
+            nextTick().then(() => {
+              track.value = true
+            })
+          }
+
           resolve()
         }, 600)
       })
@@ -76,9 +83,8 @@ export default defineNuxtPlugin((nuxtApp) => {
   return {
     provide: {
       trackScroll: reactive({
-        forceScroll,
+        forceScrollToTop,
         restoreScroll,
-        track,
         registerCustomRoute,
         restoreCustomPageScroll,
       }),