chore: move path to page when using notification paginator

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>

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>

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>

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>

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>

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,
       }),