refactor: extract useResizeContainer hook from useNoteView

src/components/FluxNote.vue

@@ -13,6 +13,7 @@ import StackedNote from "@/components/StackedNote.vue"
 import { useLinks } from "@/hooks/useLinks.hook"
 import { markdownBuilder } from "@/hooks/useMarkdown.hook"
 import { useNoteView } from "@/hooks/useNoteView.hook"
+import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { useVisitRepo } from "@/modules/history/hooks/useVisitRepo.hook"
 import CacheAllNotes from "@/modules/note/components/CacheAllNote.vue"
@@ -52,7 +53,8 @@ const { toHTML } = markdownBuilder(repo)
 const { listenToClick } = useLinks("note-display")
 const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
 
-const { titles } = useNoteView("note-container")
+const { titles } = useNoteView()
+useResizeContainer("note-container", stackedNotes)
 
 const renderedContent = computed(() =>
   props.content !== null

src/hooks/useNoteView.hook.ts

@@ -1,17 +1,14 @@
-import { computed, onMounted, onUnmounted, watch } from "vue"
+import { computed, onUnmounted } from "vue"
 
 import { noteEventBus } from "@/bus/noteEventBus"
-import { NOTE_WIDTH } from "@/constants/note-width"
-import { useOverlay } from "@/hooks/useOverlay.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"
 import { errorMessage } from "@/utils/notif"
 
-export const useNoteView = (containerClass: string) => {
+export const useNoteView = () => {
   const store = useUserRepoStore()
-  const { isMobile } = useOverlay(false)
   const { stackedNotes, addStackedNote } = useRouteQueryStackedNotes()
 
   const titles = computed(() =>
@@ -45,36 +42,10 @@ export const useNoteView = (containerClass: string) => {
     },
   )
 
-  const resizeContainer = () => {
-    const container = document.querySelector(
-      `.${containerClass}`,
-    ) as HTMLElement | null
-
-    if (!container) {
-      return
-    }
-
-    if (isMobile.value) {
-      container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
-    } else {
-      container.style.width = `${
-        NOTE_WIDTH * (stackedNotes.value.length + 1)
-      }px`
-    }
-  }
-
-  onMounted(() => {
-    resizeContainer()
-  })
-
   onUnmounted(() => {
     unsubscribeLink()
   })
 
-  watch(stackedNotes, resizeContainer, {
-    immediate: true,
-  })
-
   return {
     titles,
   }

src/hooks/useResizeContainer.hook.ts

@@ -0,0 +1,37 @@
+import { onMounted, watch, type Ref } from "vue"
+
+import { NOTE_WIDTH } from "@/constants/note-width"
+import { useOverlay } from "@/hooks/useOverlay.hook"
+
+export const useResizeContainer = (
+  containerClass: string,
+  stackedNotes: Readonly<Ref<readonly string[]>>,
+) => {
+  const { isMobile } = useOverlay(false)
+
+  const resizeContainer = () => {
+    const container = document.querySelector(
+      `.${containerClass}`,
+    ) as HTMLElement | null
+
+    if (!container) {
+      return
+    }
+
+    if (isMobile.value) {
+      container.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
+    } else {
+      container.style.width = `${
+        NOTE_WIDTH * (stackedNotes.value.length + 1)
+      }px`
+    }
+  }
+
+  onMounted(() => {
+    resizeContainer()
+  })
+
+  watch(stackedNotes, resizeContainer, {
+    immediate: true,
+  })
+}