refacto to use ref route query

src/components/FluxNote.vue

@@ -14,7 +14,7 @@ import StackedNote from '@/components/StackedNote.vue'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { useNote } from '@/hooks/useNote.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { useVisitRepo } from '@/modules/history/hooks/useVisitRepo.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { useUserSettings } from '@/modules/user/hooks/useUserSettings.hook'
@@ -49,7 +49,7 @@ useUserSettings()
 const { visitRepo } = useVisitRepo({ user: user, repo: repo })
 const { toHTML } = useMarkdown(repo)
 const { listenToClick } = useLinks('note-display')
-const { stackedNotes, resetStackedNotes, scrollToTop } = useQueryStackedNotes()
+const { stackedNotes, scrollToTop } = useRouteQueryStackedNotes()
 
 const { titles } = useNote('note-container')
 
@@ -85,7 +85,6 @@ onMounted(() => visitRepo())
 
 onUnmounted(() => {
   store.resetFiles()
-  resetStackedNotes()
 })
 
 const focusREADME = () => scrollToTop()
@@ -100,10 +99,7 @@ const focusREADME = () => scrollToTop()
       </div>
       <div class="repo-title">
         <h1 class="title is-1">
-          <router-link
-            :to="{ name: 'FluxNoteView', params: { user, repo } }"
-            @click="resetStackedNotes"
-          >
+          <router-link :to="{ name: 'FluxNoteView', params: { user, repo } }">
             {{ repo }}
           </router-link>
         </h1>

src/components/LinkedNotes.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 import { useBacklinks } from '@/hooks/useBacklinks.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 
 const props = defineProps<{
   sha: string
@@ -11,7 +11,7 @@ const props = defineProps<{
 const shaProp = computed((props) => props.sha)
 
 const { backlink } = useBacklinks(shaProp)
-const { addStackedNote } = useQueryStackedNotes()
+const { addStackedNote } = useRouteQueryStackedNotes()
 const hasBacklinks = computed(() => (backlink.value?.links.length ?? 0) > 0)
 
 const emitNote = (sha: string) => {

src/components/StackedNote.vue

@@ -5,7 +5,7 @@ import { useFile } from '@/hooks/useFile.hook'
 import { useImages } from '@/hooks/useImages.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { useTitleNotes } from '@/hooks/useTitleNotes.hook'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { filenameToNoteTitle } from '@/utils/noteTitle'
@@ -27,7 +27,7 @@ const sha = computed(() => props.sha)
 const index = computed(() => props.index)
 const repo = computed(() => props.repo)
 
-const { scrollToFocusedNote } = useQueryStackedNotes()
+const { scrollToFocusedNote } = useRouteQueryStackedNotes()
 
 const { content } = useFile(sha)
 const className = computed(() => `stacked-note-${props.index}`)

src/hooks/useNote.hook.ts

@@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { noteEventBus } from '@/bus/noteEventBus'
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { resolvePath } from '@/modules/repo/services/resolvePath'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
 import { pathToNotePathTitle } from '@/utils/noteTitle'
@@ -11,7 +11,7 @@ import { pathToNotePathTitle } from '@/utils/noteTitle'
 export const useNote = (containerClass: string) => {
   const store = useUserRepoStore()
   const { isMobile } = useOverlay(false)
-  const { stackedNotes, addStackedNote } = useQueryStackedNotes()
+  const { stackedNotes, addStackedNote } = useRouteQueryStackedNotes()
 
   const titles = computed(() =>
     stackedNotes.value?.reduce((obj: Record<string, string>, note) => {

src/hooks/useNoteOverlay.hook.ts

@@ -2,7 +2,7 @@ import { computed, onMounted, Ref, ref, toValue } from 'vue'
 
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 
 const BOOKMARK_WIDTH = 2
 
@@ -22,7 +22,7 @@ export const useNoteOverlay = (
   })
 
   onMounted(() => {
-    const { stackedNotes } = useQueryStackedNotes()
+    const { stackedNotes } = useRouteQueryStackedNotes()
     const noteElement = document.querySelector(
       `.${className}`
     ) as HTMLElement | null

src/hooks/useQueryStackedNotes.hook.ts

@@ -1,101 +0,0 @@
-import { useWindowSize } from '@vueuse/core'
-import { nextTick, readonly, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-import { NOTE_WIDTH } from '@/constants/note-width'
-import { useOverlay } from '@/hooks/useOverlay.hook'
-import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
-
-const stackedNotes = ref<string[]>([])
-
-let initial = true
-
-export const useQueryStackedNotes = () => {
-  const { query } = useRoute()
-  const { push, currentRoute } = useRouter()
-  const store = useUserRepoStore()
-  const { height } = useWindowSize()
-  const { scrollToNote, isMobile } = useOverlay(false)
-
-  const scrollToFocusedNote = (sha: string) => {
-    nextTick(() => {
-      const index = stackedNotes.value.findIndex((noteSHA) => noteSHA === sha)
-
-      const hasOneStackedNote = stackedNotes.value.length === 1
-
-      if (isMobile.value) {
-        const element = document.querySelector(`.note-${sha}`) as HTMLElement
-        const top = (index + 1) * (element?.clientHeight ?? height.value)
-        scrollToNote(top, hasOneStackedNote)
-      } else {
-        const margin = index * 44
-        const left = (index + 1) * NOTE_WIDTH - margin
-        scrollToNote(left, hasOneStackedNote)
-      }
-    })
-  }
-
-  const resetStackedNotes = () => {
-    stackedNotes.value = Array.isArray(query.stackedNotes)
-      ? (query.stackedNotes as string[])
-      : ([query.stackedNotes]
-          .map((n) => n?.toString())
-          .filter((n) => !!n) as string[])
-  }
-
-  if (initial) {
-    initial = false
-    resetStackedNotes()
-  }
-
-  const updateQueryStackedNotes = (newStackedNotes: string[]) =>
-    (stackedNotes.value = newStackedNotes)
-
-  const addStackedNote = (currentSHA: string, sha: string) => {
-    if (stackedNotes.value.includes(sha)) {
-      scrollToFocusedNote(sha)
-      return
-    }
-
-    const getStackedNotes = () => {
-      if (!currentSHA) {
-        return [sha]
-      }
-
-      const [splittedStackedNotes] = stackedNotes.value
-        .join(';')
-        .split(currentSHA)
-
-      return [
-        ...splittedStackedNotes.replaceAll(';;', ';').split(';'),
-        currentSHA,
-        sha
-      ].filter((sha) => !!sha)
-    }
-
-    const newStackedNotes = getStackedNotes()
-
-    push({
-      name: currentRoute.value.name ?? 'FluxNoteView',
-      params: {
-        user: store.user,
-        repo: store.repo
-      },
-      query: {
-        stackedNotes: newStackedNotes
-      }
-    })
-
-    updateQueryStackedNotes(newStackedNotes)
-    scrollToFocusedNote(sha)
-  }
-
-  return {
-    stackedNotes: readonly(stackedNotes),
-    updateQueryStackedNotes,
-    addStackedNote,
-    resetStackedNotes,
-    scrollToFocusedNote,
-    scrollToTop: () => scrollToNote(0)
-  }
-}

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -0,0 +1,80 @@
+import { useWindowSize } from '@vueuse/core'
+import { useRouteQuery } from '@vueuse/router'
+import { nextTick, readonly, watch } from 'vue'
+
+import { NOTE_WIDTH } from '@/constants/note-width'
+import { useOverlay } from '@/hooks/useOverlay.hook'
+
+export const useRouteQueryStackedNotes = () => {
+  const stackedNotes = useRouteQuery('stackedNotes', undefined, {
+    transform: (value: string | string[] | undefined) => {
+      if (!value) {
+        return []
+      }
+
+      return Array.isArray(value) ? value : [value]
+    }
+  })
+  const { height } = useWindowSize()
+
+  const { scrollToNote, isMobile } = useOverlay(false)
+
+  watch(stackedNotes, (val) => console.log(val))
+
+  const scrollToFocusedNote = (
+    sha: string,
+    notes: string[] = stackedNotes.value
+  ) => {
+    nextTick(() => {
+      const index = notes.findIndex((noteSHA) => noteSHA === sha)
+
+      const hasOneStackedNote = notes.length === 1
+
+      if (isMobile.value) {
+        const element = document.querySelector(`.note-${sha}`) as HTMLElement
+        const top = (index + 1) * (element?.clientHeight ?? height.value)
+        scrollToNote(top, hasOneStackedNote)
+      } else {
+        const margin = index * 44
+        const left = (index + 1) * NOTE_WIDTH - margin
+        scrollToNote(left, hasOneStackedNote)
+      }
+    })
+  }
+
+  const addStackedNote = (currentSHA: string, sha: string) => {
+    if (!stackedNotes.value) {
+      return
+    }
+
+    if (stackedNotes.value.includes(sha)) {
+      scrollToFocusedNote(sha)
+      return
+    }
+
+    if (!currentSHA) {
+      stackedNotes.value = [sha]
+    } else {
+      const [splittedStackedNotes] = stackedNotes.value
+        .join(';')
+        .split(currentSHA)
+
+      const newStackedNotes = [
+        ...splittedStackedNotes.replaceAll(';;', ';').split(';'),
+        currentSHA,
+        sha
+      ].filter((sha) => !!sha)
+
+      stackedNotes.value = newStackedNotes
+    }
+
+    scrollToFocusedNote(sha, stackedNotes.value)
+  }
+
+  return {
+    stackedNotes: readonly(stackedNotes),
+    addStackedNote,
+    scrollToFocusedNote,
+    scrollToTop: () => scrollToNote(0)
+  }
+}

src/hooks/useTitleNotes.hook.ts

@@ -1,14 +1,14 @@
 import { useTitle } from '@vueuse/core'
 import { computed, Ref, toValue, watch } from 'vue'
 
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
+import { useRouteQueryStackedNotes } from '@/hooks/useRouteQueryStackedNotes.hook'
 import { useNotes } from '@/modules/note/hooks/useNotes'
 import { pathToNoteTitle } from '@/utils/noteTitle'
 
 export const generateTitle = (titles: string[]) => titles.join(' | ')
 
 export const useTitleNotes = (prefix: Ref<string> | string) => {
-  const { stackedNotes } = useQueryStackedNotes()
+  const { stackedNotes } = useRouteQueryStackedNotes()
   const { notes } = useNotes()
   const titleNotes = computed(() =>
     notes.value

src/views/ShareNotes.vue

@@ -1,20 +1,14 @@
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 
 import { useFile } from '@/hooks/useFile.hook'
-import { useQueryStackedNotes } from '@/hooks/useQueryStackedNotes.hook'
 
 const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
 
 const props = defineProps<{ user: string; repo: string; note: string }>()
 
-const { resetStackedNotes } = useQueryStackedNotes()
 const note = computed(() => props.note)
 const { content } = useFile(note)
-
-onMounted(() => {
-  resetStackedNotes()
-})
 </script>
 
 <template>