feat: track scroll position

pages/settings/about/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const buildInfo = useBuildInfo()
 const { t } = useI18n()
 

pages/settings/index.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+</script>
+
 <template>
   <div min-h-screen flex justify-center items-center>
     <div text-center flex="~ col gap-2" items-center>

pages/settings/interface/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({

pages/settings/language/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({

pages/settings/notifications/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/notifications/notifications.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/notifications/push-notifications.vue

@@ -4,6 +4,7 @@ definePageMeta({
     if (!useAppConfig().pwaEnabled)
       return navigateTo('/settings/notifications')
   }],
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/preferences/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({

pages/settings/profile/appearance.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
-import { ofetch } from 'ofetch'
 import { useForm } from 'slimeform'
 import { parse } from 'ultrahtml'
-import type { Component } from 'vue'
 
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/profile/featured-tags.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/profile/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()

pages/settings/users/index.vue

@@ -3,6 +3,10 @@
 import { fileOpen } from 'browser-fs-access'
 import type { UserLogin } from '~/types'
 
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({

plugins/scroll-to-top.ts

@@ -1,8 +1,11 @@
-export default defineNuxtPlugin(() => {
+export default defineNuxtPlugin((/* nuxtApp */) => {
   return {
     provide: {
       scrollToTop: () => {
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+        // if (typeof force === 'boolean' && force)
+        //   nuxtApp.$trackScroll.forceScroll()
+
+        // window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
       },
     },
   }

plugins/track-scroll-position.client.ts

@@ -0,0 +1,75 @@
+export default defineNuxtPlugin((nuxtApp) => {
+  const router = useRouter()
+  const route = useRoute()
+  const track = ref(false)
+  const { y } = useWindowScroll()
+  const storage = useLocalStorage<Record<string, number>>('elk-track-scroll', {})
+
+  router.beforeEach(async () => {
+    track.value = false
+  })
+  router.onError(async () => {
+    track.value = true
+  })
+
+  const forceScroll = () => {
+    storage.value[route.fullPath] = 0
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+  }
+
+  const restoreScroll = () => {
+    const path = route.fullPath
+    return nextTick().then(() => {
+      return new Promise<void>((resolve, reject) => {
+        setTimeout(() => {
+          if (path !== route.fullPath) {
+            reject(new Error('navigation canceled'))
+            return
+          }
+
+          if (!route.meta || !route.meta?.noScrollTrack) {
+            const scrollPosition = storage.value[route.fullPath]
+            if (scrollPosition)
+              window.scrollTo(0, scrollPosition)
+          }
+          else {
+            forceScroll()
+          }
+
+          resolve()
+        }, 600)
+      })
+    })
+  }
+
+  nuxtApp.hooks.hook('app:suspense:resolve', () => {
+    if (isHydrated.value) {
+      restoreScroll().then(() => {
+        track.value = true
+      }).catch(noop)
+    }
+  })
+
+  nuxtApp.hooks.hook('page:finish', () => {
+    if (isHydrated.value) {
+      restoreScroll().then(() => {
+        track.value = true
+      }).catch(noop)
+    }
+  })
+
+  watch(() => [track.value, y.value, route], ([trackEnabled, scrollPosition, r]) => {
+    if (trackEnabled && (!r.meta || !r.meta?.noScrollTrack))
+      storage.value[r.fullPath] = Math.floor(scrollPosition)
+  }, { immediate: true, flush: 'pre' })
+
+  return {
+    provide: {
+      trackScroll: reactive({
+        forceScroll,
+        restoreScroll,
+        track,
+      }),
+    },
+  }
+})