Merge branch 'main' into userquin/feat-track-scroll-position

# Conflicts:
#	pages/settings/language/index.vue

components/common/CommonPaginator.vue

@@ -49,7 +49,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
 
 nuxtApp.hook('elk-logo:click', () => {
   update()
-  nuxtApp.$scrollToTop()
+  nuxtApp.$trackScroll.forceScrollToTop()
 })
 
 function createEntry(item: any) {

components/nav/NavSideItem.vue

@@ -16,6 +16,23 @@ defineSlots<{
 
 const router = useRouter()
 
+const allowScrollTop = ref(false)
+
+usePageTransition({
+  beforeEach: () => {
+    allowScrollTop.value = false
+  },
+  afterHydrated: () => {
+    if (typeof props.to === 'string')
+      allowScrollTop.value = router.currentRoute.value.fullPath === props.to
+    else
+      allowScrollTop.value = router.currentRoute.value.name === props.to.name
+  },
+  onTransitionError: () => {
+    allowScrollTop.value = false
+  },
+})
+
 useCommand({
   scope: 'Navigation',
 
@@ -51,7 +68,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
     :active-class="activeClass"
     group focus:outline-none disabled:pointer-events-none
     :tabindex="noUserDisable ? -1 : null"
-    @click="$scrollToTop"
+    @click="allowScrollTop && $trackScroll.forceScrollToTop()"
   >
     <CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
       <div

components/notification/NotificationPaginator.vue

@@ -4,11 +4,14 @@ import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import type { Paginator, WsEvents, mastodon } from 'masto'
 import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
-const { paginator, stream } = defineProps<{
+const { path, paginator, stream } = defineProps<{
+  path: string
   paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
   stream?: Promise<WsEvents>
 }>()
 
+const nuxtApp = useNuxtApp()
+
 const virtualScroller = false // TODO: fix flickering issue with virtual scroll
 
 const groupCapacity = Number.MAX_VALUE // No limit
@@ -113,6 +116,8 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
   // Finalize remaining groups
   processGroup()
 
+  nuxtApp.$trackScroll.restoreCustomPageScroll()
+
   return results
 }
 

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="{ 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="{ paginator, stream }" />
+  <NotificationPaginator v-bind="{ path, paginator, stream }" />
 </template>

composables/page-transiton.ts

@@ -0,0 +1,29 @@
+export const usePageTransition = (options: {
+  beforeEach?: typeof noop
+  afterHydrated?: typeof noop
+  onTransitionError?: typeof noop
+}) => {
+  const nuxtApp = useNuxtApp()
+  const router = useRouter()
+
+  if (options.beforeEach) {
+    router.beforeEach(() => {
+      options.beforeEach?.()
+    })
+  }
+
+  if (options.onTransitionError) {
+    router.onError(() => {
+      options.onTransitionError?.()
+    })
+  }
+
+  if (options.afterHydrated) {
+    const nuxtHook = () => {
+      if (isHydrated.value)
+        options.afterHydrated?.()
+    }
+    nuxtApp.hooks.hook('app:suspense:resolve', nuxtHook)
+    nuxtApp.hooks.hook('page:finish', nuxtHook)
+  }
+}

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>

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,6 +1,10 @@
 <script setup lang="ts">
 import type { ElkTranslationStatus } from '~/types/translation-status'
 
+definePageMeta({
+  noScrollTrack: true,
+})
+
 const { t, locale } = useI18n()
 
 const translationStatus: ElkTranslationStatus = await import('~/elk-translation-status.json').then(m => m.default)

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,89 @@
+export default defineNuxtPlugin(() => {
+  const route = useRoute()
+  const track = ref(false)
+  const { y } = useWindowScroll()
+  const storage = useLocalStorage<Record<string, number>>('elk-track-scroll', {})
+  const customRoutes = new Set<string>()
+
+  const forceScrollToTop = () => {
+    storage.value[route.fullPath] = 0
+    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+  }
+
+  const restoreScrollCallback = (ignoreCustomRoutes: boolean) => {
+    const path = route.fullPath
+    return nextTick().then(() => {
+      if (route.meta?.noScrollTrack) {
+        forceScrollToTop()
+        return Promise.resolve()
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        setTimeout(() => {
+          const fullPath = route.fullPath
+          if (path !== fullPath) {
+            reject(new Error('navigation canceled'))
+            return
+          }
+
+          const r = ignoreCustomRoutes ? undefined : customRoutes.has(fullPath)
+          if (r) {
+            reject(new Error('custom routed detected'))
+            return
+          }
+
+          const scrollPosition = storage.value[fullPath]
+          if (scrollPosition)
+            window.scrollTo(0, scrollPosition)
+
+          // required for custom routes: first call will be rejected
+          // we need to enable scroll tracking again, it is disabled
+          if (!track.value) {
+            nextTick().then(() => {
+              track.value = true
+            })
+          }
+
+          resolve()
+        }, 600)
+      })
+    })
+  }
+
+  const restoreScroll = () => restoreScrollCallback(false)
+
+  const restoreCustomPageScroll = () => restoreScrollCallback(true)
+
+  usePageTransition({
+    beforeEach: () => {
+      track.value = false
+    },
+    afterHydrated: () => {
+      restoreScroll().then(() => {
+        track.value = true
+      }).catch(noop)
+    },
+    onTransitionError: () => {
+      track.value = true
+    },
+  })
+
+  watch([track, y, () => route], ([trackEnabled, scrollPosition, r]) => {
+    if (trackEnabled && (!r.meta || !r.meta?.noScrollTrack))
+      storage.value[r.fullPath] = Math.floor(scrollPosition)
+  }, { immediate: true, flush: 'pre' })
+
+  const registerCustomRoute = (path: string) => {
+    customRoutes.add(path)
+  }
+
+  return {
+    provide: {
+      trackScroll: {
+        forceScrollToTop,
+        registerCustomRoute,
+        restoreCustomPageScroll,
+      },
+    },
+  }
+})