feat: restore scroll position

components/status/StatusActions.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   command?: boolean
 }>()
 
+const nuxtApp = useNuxtApp()
 const focusEditor = inject<typeof noop>('focus-editor', noop)
 
 const { details, command } = $(props)
@@ -24,11 +25,14 @@ const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumbe
 const reply = () => {
   if (!checkLogin())
     return
-  if (details)
-    focusEditor()
 
-  else
+  if (details) {
+    focusEditor()
+  }
+  else {
+    nuxtApp.$rememberScrollPosition(status)
     navigateTo({ path: getStatusRoute(status).href, state: { focusReply: true } })
+  }
 }
 </script>
 

composables/paginator.ts

@@ -1,5 +1,6 @@
 import type { Paginator, WsEvents } from 'masto'
 import type { PaginatorState } from '~/types'
+import { onReactivated } from '~/composables/vue'
 
 export function usePaginator<T>(
   paginator: Paginator<any, T[]>,
@@ -16,7 +17,10 @@ export function usePaginator<T>(
   const bound = reactive(useElementBounding(endAnchor))
   const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
   const error = ref<unknown | undefined>()
+  const loaded = ref(false)
+
   const deactivated = useDeactivated()
+  const nuxtApp = useNuxtApp()
 
   async function update() {
     items.value.unshift(...prevItems.value)
@@ -77,13 +81,36 @@ export function usePaginator<T>(
 
     await nextTick()
     bound.update()
+    if (!loaded.value) {
+      loaded.value = true
+      await nextTick()
+      nuxtApp.$restoreScrollPosition()
+    }
   }
 
   if (process.client) {
+    const timeout = ref()
     useIntervalFn(() => {
       bound.update()
     }, 1000)
 
+    onDeactivated(() => {
+      window.clearTimeout(timeout.value)
+      loaded.value = false
+    })
+    onReactivated(() => {
+      window.clearTimeout(timeout.value)
+      if (isMastoInitialised.value) {
+        if (!loaded.value)
+          loaded.value = true
+
+        timeout.value = setTimeout(() => nuxtApp.$restoreScrollPosition(), 600)
+      }
+      else {
+        loaded.value = false
+      }
+    })
+
     if (!isMastoInitialised.value) {
       onMastoInit(() => {
         state.value = 'idle'

constants/index.ts

@@ -17,6 +17,7 @@ export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
 export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'
 export const STORAGE_KEY_NOTIFICATION = 'elk-notification'
 export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
+export const STORAGE_KEY_LAST_SCROLL_POSITION = 'elk-last-scroll-position'
 
 export const COOKIE_MAX_AGE = 10 * 365 * 24 * 60 * 60 * 1000
 

plugins/remember-scroll-position.client.ts

@@ -0,0 +1,24 @@
+import type { Status } from 'masto'
+
+import { STORAGE_KEY_LAST_SCROLL_POSITION } from '~/constants'
+
+export default defineNuxtPlugin(() => {
+  const lastStatus = useSessionStorage<Record<string, string>>(STORAGE_KEY_LAST_SCROLL_POSITION, {})
+  return {
+    provide: {
+      restoreScrollPosition: () => {
+        const statusId = lastStatus.value[useRoute().fullPath]
+        if (statusId) {
+          const el = document.getElementById(`status-${statusId}`)
+          if (el)
+            nextTick().then(() => el?.scrollIntoView())
+          else
+            delete lastStatus.value[useRoute().fullPath]
+        }
+      },
+      rememberScrollPosition: (status: Status) => {
+        lastStatus.value[useRoute().fullPath] = status.id
+      },
+    },
+  }
+})