✨ (stacked notes) implements overlay

src/hooks/useNote.hook.ts

@@ -1,5 +1,5 @@
 import { Ref, ref } from '@vue/reactivity'
-import { nextTick, onUnmounted, watch } from '@vue/runtime-core'
+import { computed, nextTick, onUnmounted, watch } from '@vue/runtime-core'
 import { useRoute, useRouter } from 'vue-router'
 
 import { noteEventBus } from '@/bus/noteBusEvent'
@@ -26,6 +26,19 @@ export const useNote = (user: Ref<string>, repo: Ref<string>) => {
 
   const { readme, notFound, tree } = useRepo(user, repo)
   const { listenToClick } = useLinks('note-display')
+  const titles = computed(() => {
+    return stackedNotes.value.reduce((obj: Record<string, string>, note) => {
+      if (!note) {
+        return obj
+      }
+      const filePath = tree.value.find((file) => file.sha === note)?.path ?? ''
+      const fileNames = filePath.split('.')
+      fileNames.pop()
+      obj[note] = fileNames.join('.')
+
+      return obj
+    }, {})
+  })
 
   const unsubscribe = noteEventBus.addEventBusListener(
     ({ path, currentNoteSHA }) => {
@@ -93,6 +106,7 @@ export const useNote = (user: Ref<string>, repo: Ref<string>) => {
   })
 
   return {
+    titles,
     readme,
     notFound,
     stackedNotes

src/hooks/useNoteOverlay.hook.ts

@@ -0,0 +1,27 @@
+import { computed, onMounted } from '@vue/runtime-core'
+
+import { useOverlay } from '@/hooks/useOverlay.hook'
+
+const BOOKMARK_WIDTH = 2
+const NOTE_WIDTH = 620
+
+export const useNoteOverlay = (className: string, index: number) => {
+  const { x } = useOverlay()
+  const displayNoteOverlay = computed(() => x.value > index * NOTE_WIDTH)
+
+  onMounted(() => {
+    const noteElement = document.querySelector(
+      `.${className}`
+    ) as HTMLElement | null
+
+    if (!noteElement) {
+      return
+    }
+
+    noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+  })
+
+  return {
+    displayNoteOverlay
+  }
+}

src/hooks/useOverlay.hook.ts

@@ -0,0 +1,27 @@
+import { onMounted, ref } from 'vue'
+
+import { useEventListener } from '@vueuse/core'
+
+export const useOverlay = () => {
+  const x = ref(0)
+
+  onMounted(() => {
+    const element = document.querySelector('body')
+
+    useEventListener(
+      element,
+      'scroll',
+      (e) => {
+        const target = e.target as HTMLElement
+        x.value = target.scrollLeft
+      },
+      {
+        passive: true,
+        capture: false
+      }
+    )
+  })
+  return {
+    x
+  }
+}