From 3270140c3fbffbaf529277f688a06e6df4bc2023 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 10 Feb 2023 22:13:46 +0100
Subject: [PATCH] feat: track scroll position

---
 pages/settings/about/index.vue                |  4 +
 pages/settings/index.vue                      |  6 ++
 pages/settings/interface/index.vue            |  4 +
 pages/settings/language/index.vue             |  4 +
 pages/settings/notifications/index.vue        |  1 +
 .../settings/notifications/notifications.vue  |  1 +
 .../notifications/push-notifications.vue      |  1 +
 pages/settings/preferences/index.vue          |  4 +
 pages/settings/profile/appearance.vue         |  3 +-
 pages/settings/profile/featured-tags.vue      |  1 +
 pages/settings/profile/index.vue              |  1 +
 pages/settings/users/index.vue                |  4 +
 plugins/scroll-to-top.ts                      |  7 +-
 plugins/track-scroll-position.client.ts       | 75 +++++++++++++++++++
 14 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 plugins/track-scroll-position.client.ts

diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index fe16b8b2..ecdbbd5c 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const buildInfo = useBuildInfo()
 const { t } = useI18n()
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index c0ee6207..78c35749 100644
--- a/pages/settings/index.vue
+++ b/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>
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 804e7f89..021c5771 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
index 10478711..38c861d7 100644
--- a/pages/settings/language/index.vue
+++ b/pages/settings/language/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({
diff --git a/pages/settings/notifications/index.vue b/pages/settings/notifications/index.vue
index ef95d85a..566cae25 100644
--- a/pages/settings/notifications/index.vue
+++ b/pages/settings/notifications/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()
diff --git a/pages/settings/notifications/notifications.vue b/pages/settings/notifications/notifications.vue
index 68ede7fc..22d15d6a 100644
--- a/pages/settings/notifications/notifications.vue
+++ b/pages/settings/notifications/notifications.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()
diff --git a/pages/settings/notifications/push-notifications.vue b/pages/settings/notifications/push-notifications.vue
index 641cb5a0..1c9ad546 100644
--- a/pages/settings/notifications/push-notifications.vue
+++ b/pages/settings/notifications/push-notifications.vue
@@ -4,6 +4,7 @@ definePageMeta({
     if (!useAppConfig().pwaEnabled)
       return navigateTo('/settings/notifications')
   }],
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 89be61df..b02d1d7a 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t } = useI18n()
 
 useHeadFixed({
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index a65f8acb..f33ca4be 100644
--- a/pages/settings/profile/appearance.vue
+++ b/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()
diff --git a/pages/settings/profile/featured-tags.vue b/pages/settings/profile/featured-tags.vue
index 0d6e7bdb..06d27957 100644
--- a/pages/settings/profile/featured-tags.vue
+++ b/pages/settings/profile/featured-tags.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()
diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
index 35290952..8e92ab98 100644
--- a/pages/settings/profile/index.vue
+++ b/pages/settings/profile/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   middleware: 'auth',
+  noScrollTrack: true,
 })
 
 const { t } = useI18n()
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 7d667b9d..c28a83cd 100644
--- a/pages/settings/users/index.vue
+++ b/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({
diff --git a/plugins/scroll-to-top.ts b/plugins/scroll-to-top.ts
index 448d2420..8cb199af 100644
--- a/plugins/scroll-to-top.ts
+++ b/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' })
       },
     },
   }
diff --git a/plugins/track-scroll-position.client.ts b/plugins/track-scroll-position.client.ts
new file mode 100644
index 00000000..85a8917a
--- /dev/null
+++ b/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,
+      }),
+    },
+  }
+})