✨ (scroll) scroll on title click

src/components/StackedNote.vue

@@ -3,7 +3,11 @@
     class="stacked-note"
     :class="{ [className]: true, overlay: displayNoteOverlay }"
   >
-    <div class="title-stacked-note" :class="titleClassName">{{ title }}</div>
+    <div class="title-stacked-note" :class="titleClassName">
+      <a @click.prevent="focus">
+        {{ title }}
+      </a>
+    </div>
     <section v-html="content"></section>
   </div>
 </template>
@@ -13,6 +17,7 @@ import { computed, defineComponent, nextTick, watch } from 'vue'
 import { useFile } from '@/hooks/useFile.hook'
 import { useLinks } from '@/hooks/useLinks.hook'
 import { useNoteOverlay } from '@/hooks/useNoteOverlay.hook'
+import { useFocus } from '@/hooks/useFocus.hook'
 
 export default defineComponent({
   name: 'StackedNote',
@@ -26,6 +31,7 @@ export default defineComponent({
   setup(props) {
     const { content } = useFile(props.user, props.repo, props.sha)
     const { listenToClick } = useLinks('stacked-note', props.sha)
+    const { scrollToFocusedNote } = useFocus()
     const className = computed(() => `stacked-note-${props.index}`)
     const titleClassName = computed(() => `title-${className.value}`)
 
@@ -39,7 +45,13 @@ export default defineComponent({
       }
     })
 
-    return { content, titleClassName, className, displayNoteOverlay }
+    return {
+      content,
+      titleClassName,
+      className,
+      displayNoteOverlay,
+      focus: () => scrollToFocusedNote(props.sha)
+    }
   }
 })
 </script>
@@ -64,6 +76,10 @@ $border-color: rgba(18, 19, 58, 0.2);
   top: 1rem;
   left: 1.5rem;
   direction: rtl;
+
+  a {
+    color: #363636;
+  }
 }
 
 @media screen and (max-width: 768px) {

src/hooks/useFocus.hook.ts

@@ -1,14 +1,23 @@
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
-import { nextTick } from 'vue'
+import { computed, nextTick } from 'vue'
-import { LocationQueryValue } from 'vue-router'
+import { LocationQueryValue, useRoute } from 'vue-router'
 
 export const useFocus = () => {
   const { scrollToNote } = useOverlay(false)
+  const { query } = useRoute()
+
+  const initialStackedNotes = computed(() =>
+    query.stackedNotes
+      ? Array.isArray(query.stackedNotes)
+        ? query.stackedNotes
+        : [query.stackedNotes]
+      : []
+  )
 
   const scrollToFocusedNote = (
-    stackedNotes: LocationQueryValue[],
+    sha?: string,
-    sha?: string
+    stackedNotes: LocationQueryValue[] = initialStackedNotes.value
   ) => {
     if (!sha) {
       return

src/hooks/useNote.hook.ts

@@ -61,7 +61,7 @@ export const useNote = (
     }, {})
   )
 
-  const unsubscribe = noteEventBus.addEventBusListener(
+  const unsubscribeLink = noteEventBus.addEventBusListener(
     ({ path, currentNoteSHA }) => {
       const currentFile = tree.value.find((file) => file.sha === currentNoteSHA)
 
@@ -76,7 +76,7 @@ export const useNote = (
       const file = tree.value.find((file) => file.path === finalPath)
 
       if (!file?.sha || stackedNotes.value.includes(file.sha)) {
-        scrollToFocusedNote(stackedNotes.value, file?.sha)
+        scrollToFocusedNote(file?.sha, stackedNotes.value)
         return
       }
 
@@ -115,7 +115,7 @@ export const useNote = (
 
       stackedNotes.value = newStackedNotes
 
-      scrollToFocusedNote(stackedNotes.value, file.sha)
+      scrollToFocusedNote(file.sha, stackedNotes.value)
     }
   )
 
@@ -140,7 +140,7 @@ export const useNote = (
   })
 
   onUnmounted(() => {
-    unsubscribe()
+    unsubscribeLink()
   })
 
   watch(stackedNotes, resizeContainer, {