From be30faaa0fc14946ff5f0804fe14b4f82377a69c Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 8 Jan 2023 17:33:19 +0100
Subject: [PATCH] chore: avoid scroll to top when switching tabs

---
 components/common/CommonRouteTabs.vue        | 13 +++++++++++--
 components/notification/NotificationCard.vue |  2 +-
 plugins/remember-scroll-position.client.ts   |  3 ++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index 75ca06e6..dc2850e5 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -15,6 +15,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
 }>()
 
 const router = useRouter()
+const nuxtApp = useNuxtApp()
 
 useCommands(() => command
   ? options.map(tab => ({
@@ -24,7 +25,15 @@ useCommands(() => command
     icon: tab.icon ?? 'i-ri:file-list-2-line',
     onActivate: () => router.replace(tab.to),
   }))
-  : [])
+  : [],
+)
+
+const handleClick = (to: RouteLocationRaw) => {
+  if (preventScrollTop || nuxtApp.$preventScrollToTop(router.resolve(to).fullPath))
+    return
+
+  nuxtApp.$scrollToTop()
+}
 </script>
 
 <template>
@@ -41,7 +50,7 @@ useCommands(() => command
         tabindex="1"
         hover:bg-active transition-100
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
-        @click="!preventScrollTop && $scrollToTop()"
+        @click="handleClick(option.to)"
       >
         <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
       </NuxtLink>
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index c3a3261e..14e8a74a 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -14,7 +14,7 @@ function click() {
 <template>
   <article flex flex-col relative>
     <template v-if="notification.type === 'follow'">
-      <NuxtLink :to="getAccountRoute(notification.account)" @click.capture="click">
+      <NuxtLink :to="getAccountRoute(notification.account)" @click="click">
         <div
           flex items-center absolute
           ps-3 pe-4 inset-is-0
diff --git a/plugins/remember-scroll-position.client.ts b/plugins/remember-scroll-position.client.ts
index b66de1ed..91173bc6 100644
--- a/plugins/remember-scroll-position.client.ts
+++ b/plugins/remember-scroll-position.client.ts
@@ -6,6 +6,7 @@ interface RestoreScroll {
   id: string
   type: 'status' | 'follow'
 }
+
 export default defineNuxtPlugin(() => {
   const lastStatus = useSessionStorage<Record<string, RestoreScroll>>(STORAGE_KEY_LAST_SCROLL_POSITION, {})
   return {
@@ -20,7 +21,7 @@ export default defineNuxtPlugin(() => {
             ? document.getElementById(`status-${restore.id}`)
             : document.querySelector(`a[href="${restore.id}"]`)
           if (el)
-            nextTick().then(() => el?.scrollIntoView())
+            el.scrollIntoView()
           else
             delete lastStatus.value[useRoute().fullPath]
         }