refacto to use ref route query

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