refactor: unify NOTE_WIDTH constant with --note-width CSS variable

Read note width from the CSS custom property at runtime (cached on first
call) instead of duplicating the value in a JS constant.

src/constants/note-width.ts

@@ -1 +1,12 @@
-export const NOTE_WIDTH = 480
+let cached: number | undefined
+
+export const getNoteWidth = () => {
+  if (cached === undefined) {
+    cached = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue(
+        "--note-width",
+      ),
+    )
+  }
+  return cached
+}

src/hooks/useNoteOverlay.hook.ts

@@ -1,6 +1,6 @@
 import { computed, onMounted, Ref, ref, toValue } from "vue"
 
-import { NOTE_WIDTH } from "@/constants/note-width"
+import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 
@@ -20,7 +20,7 @@ export const useNoteOverlay = (
     if (isMobile.value) {
       return y.value > valueIndex * noteHeight.value
     } else {
-      return x.value > valueIndex * NOTE_WIDTH - valueIndex * OFFSET
+      return x.value > valueIndex * getNoteWidth() - valueIndex * OFFSET
     }
   })
 
@@ -46,7 +46,7 @@ export const useNoteOverlay = (
       ) satisfies NodeListOf<HTMLElement>
 
       stackedNoteContainers.forEach((stackedNote, ind) => {
-        stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${
+        stackedNote.style.right = `calc(-${getNoteWidth()}px + ${
           (stackedNotes.value.length - ind) * BOOKMARK_WIDTH
         }rem)`
       })

src/hooks/useResizeContainer.hook.ts

@@ -1,6 +1,6 @@
 import { onMounted, watch, type Ref } from "vue"
 
-import { NOTE_WIDTH } from "@/constants/note-width"
+import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
 
 export const useResizeContainer = (
@@ -22,7 +22,7 @@ export const useResizeContainer = (
       container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
     } else {
       container.style.width = `${
-        NOTE_WIDTH * (stackedNotes.value.length + 1)
+        getNoteWidth() * (stackedNotes.value.length + 1)
       }px`
     }
   }

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -2,7 +2,7 @@ import { useWindowSize } from "@vueuse/core"
 import { useRouteQuery } from "@vueuse/router"
 import { nextTick, readonly } from "vue"
 
-import { NOTE_WIDTH } from "@/constants/note-width"
+import { getNoteWidth } from "@/constants/note-width"
 import { useOverlay } from "@/hooks/useOverlay.hook"
 
 export const useRouteQueryStackedNotes = () => {
@@ -37,7 +37,7 @@ export const useRouteQueryStackedNotes = () => {
       } else {
         if (sha) {
           const margin = index * 44
-          const left = (index + 1) * NOTE_WIDTH - margin
+          const left = (index + 1) * getNoteWidth() - margin
           scrollToNote(left)
         } else {
           scrollToNote(0)