From 85a424ddaaad93f97be2d8ba442da81fee9ad0db Mon Sep 17 00:00:00 2001
From: devnull-1337 <devnull.pointer69@gmail.com>
Date: Tue, 15 Jul 2025 16:11:18 +0530
Subject: [PATCH 1/3] Note hierarchy appreance

---
 src/application/i18n/messages/en.json       |  3 ++
 src/application/services/useNote.ts         | 50 +++++++++++++++++++--
 src/application/services/useNoteSettings.ts | 24 ++++++++++
 src/domain/entities/NoteSettings.ts         |  5 +++
 src/presentation/pages/Note.vue             |  6 +--
 src/presentation/pages/NoteSettings.vue     | 27 ++++++++++-
 6 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/src/application/i18n/messages/en.json b/src/application/i18n/messages/en.json
index cdf3ca77..1fff3f13 100644
--- a/src/application/i18n/messages/en.json
+++ b/src/application/i18n/messages/en.json
@@ -49,6 +49,9 @@
     "availabilityTitle": "Availability",
     "availabilityCaption": "Should the Note be available by its URL for people who knows it?",
     "availabilityRowTitle": "Note is published",
+    "noteHierarchyTitle": "Note hierarchy",
+    "noteHierarchyCaption": "Show the note hierarchy on the left menu?",
+    "noteHierarchyRowTitle": "Show note hierarchy",
     "inviteCollaboratorTitle": "Invite a collaborator",
     "inviteCollaboratorCaption": "Send this link to someone you want to add as an editor or reader.",
     "revokeHashButton": "Revoke",
diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 74342032..67c72cd6 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -9,6 +9,8 @@ import DomainError from '@/domain/entities/errors/Base';
 import useNavbar from './useNavbar';
 import { getTitle } from '@/infrastructure/utils/note';
 import type { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
+import useNoteSettings from '@/application/services/useNoteSettings';
+import type NoteSettings from '@/domain/entities/NoteSettings';
 
 /**
  * Creates base structure for the empty note:
@@ -96,6 +98,18 @@ interface UseNoteComposableState {
    * Note hierarchy
    */
   noteHierarchy: Ref<NoteHierarchy | null>;
+
+  /**
+   * Note settings composable
+   */
+  noteSettings: Ref<NoteSettings | null>;
+  /**
+   * Updates the cover image of the note.
+   * @param id - The identifier of the note whose cover should be updated.
+   * @param data - The new cover image as binary data (Blob).
+   * @returns A Promise that resolves when the cover has been updated.
+   */
+  updateCover: (id: string, data: Blob) => Promise<void>;
 }
 
 interface UseNoteComposableOptions {
@@ -116,6 +130,11 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const currentId = computed(() => toValue(options.id));
 
+  /**
+   * Note settings composable
+   */
+  const { noteSettings, load: loadNoteSettings, updateCover } = useNoteSettings();
+
   /**
    * Currently opened note
    *
@@ -320,12 +339,35 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     note.value = (await noteService.getNoteByHostname(location.hostname)).note;
   };
 
-  onMounted(() => {
+  onMounted(async () => {
     /**
-     * If we have id, load note and note hierarchy
+     * If we have id, load note settings first, then note and note hierarchy if needed
      */
     if (currentId.value !== null) {
-      void load(currentId.value);
+      await loadNoteSettings(currentId.value);
+      // Only load note and hierarchy if showNoteHierarchy is true
+      if (noteSettings.value?.showNoteHierarchy === true) {
+        void load(currentId.value);
+      } else {
+        // Load note without hierarchy
+        try {
+          const response = await noteService.getNoteById(currentId.value);
+
+          note.value = response.note;
+          canEdit.value = response.accessRights.canEdit;
+          noteTools.value = response.tools;
+          parentNote.value = response.parentNote;
+          noteParents.value = response.parents;
+          // Do not call getNoteHierarchy
+        } catch (error) {
+          deleteOpenedPageByUrl(route.path);
+          if (error instanceof DomainError) {
+            void router.push(`/error/${error.statusCode}`);
+          } else {
+            void router.push('/error/500');
+          }
+        }
+      }
     }
   });
 
@@ -414,5 +456,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     noteParents,
     parentNote,
     noteHierarchy,
+    noteSettings,
+    updateCover,
   };
 }
diff --git a/src/application/services/useNoteSettings.ts b/src/application/services/useNoteSettings.ts
index 7e2d38a3..5ce2f125 100644
--- a/src/application/services/useNoteSettings.ts
+++ b/src/application/services/useNoteSettings.ts
@@ -33,6 +33,13 @@ interface UseNoteSettingsComposableState {
    */
   updateIsPublic: (id: NoteId, newIsPublicValue: boolean) => Promise<void>;
 
+  /**
+   * Update field showNoteHierarchy in note settings
+   * @param id - Note id
+   * @param newShowNoteHierarchyValue - new showNoteHierarchy
+   */
+  updateShowNoteHierarchy: (id: NoteId, newShowNoteHierarchyValue: boolean) => Promise<void>;
+
   /**
    * Revoke invitation hash
    * @param id - note id
@@ -116,6 +123,22 @@ export default function (): UseNoteSettingsComposableState {
     }
   }
 
+  /**
+   * Update field showNoteHierarchy in note settings
+   * @param id - Note id
+   * @param newShowNoteHierarchyValue - new showNoteHierarchy
+   */
+  async function updateShowNoteHierarchy(id: NoteId, newShowNoteHierarchyValue: boolean): Promise<void> {
+    const { showNoteHierarchy } = await noteSettingsService.patchNoteSettingsByNoteId(id, { showNoteHierarchy: newShowNoteHierarchyValue });
+
+    /**
+     * If note settings were not loaded till this moment for some reason, do nothing
+     */
+    if (noteSettings.value) {
+      noteSettings.value.showNoteHierarchy = showNoteHierarchy;
+    }
+  }
+
   /**
    * Revoke invitation hash
    * @param id - Note id
@@ -198,5 +221,6 @@ export default function (): UseNoteSettingsComposableState {
     revokeHash,
     changeRole,
     deleteNoteById,
+    updateShowNoteHierarchy,
   };
 }
diff --git a/src/domain/entities/NoteSettings.ts b/src/domain/entities/NoteSettings.ts
index 93b1551b..f71ea615 100644
--- a/src/domain/entities/NoteSettings.ts
+++ b/src/domain/entities/NoteSettings.ts
@@ -38,4 +38,9 @@ export default interface NoteSettings {
    * Note cover image id
    */
   cover: string;
+
+  /**
+   * Show note heirarchy
+   */
+  showNoteHierarchy: boolean;
 }
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index ce00bc7b..369c159f 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -46,6 +46,7 @@
       <PageBlock>
         <template #left>
           <VerticalMenu
+            v-if="noteSettings && noteSettings.showNoteHierarchy"
             class="menu"
             :items="[verticalMenuItems]"
           />
@@ -72,7 +73,6 @@ import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
-import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
@@ -99,7 +99,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, noteSettings, updateCover } = useNote({
   id: noteId,
 });
 
@@ -123,8 +123,6 @@ function redirectToNoteSettings(): void {
   router.push(`/note/${props.id}/settings`);
 }
 
-const { updateCover } = useNoteSettings();
-
 const { isEditorReady, editorConfig } = useNoteEditor({
   noteTools,
   isDraftResolver: () => noteId.value === null,
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 48f624ac..c1e1a2cd 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -63,6 +63,20 @@
           </Row>
         </Section>
 
+        <Section
+          :title="t('noteSettings.noteHierarchyTitle')"
+          :caption="t('noteSettings.noteHierarchyCaption')"
+        >
+          <Row :title="t('noteSettings.noteHierarchyRowTitle')">
+            <template #right>
+              <Switch
+                v-model="showNoteHierarchy"
+                @click="changeShowNoteHierarchy"
+              />
+            </template>
+          </Row>
+        </Section>
+
         <Fieldset
           :title="t('noteSettings.teamFormFieldSetTitle')"
         >
@@ -123,7 +137,7 @@ const props = defineProps<{
 
 const { patchOpenedPageByUrl } = useNavbar();
 const route = useRoute();
-const { noteSettings, load: loadSettings, updateIsPublic, deleteNoteById, parentNote, setParent } = useNoteSettings();
+const { noteSettings, load: loadSettings, updateIsPublic, deleteNoteById, parentNote, setParent, updateShowNoteHierarchy } = useNoteSettings();
 const { noteTitle, unlinkParent } = useNote({
   id: props.id,
 });
@@ -177,6 +191,13 @@ const isPublic = computed(() => {
   return noteSettings.value?.isPublic;
 });
 
+/**
+ * Current value of showNoteHierarchy field
+ */
+const showNoteHierarchy = computed(() => {
+  return noteSettings.value?.showNoteHierarchy;
+});
+
 /**
  * Change isPublic property
  */
@@ -184,6 +205,10 @@ async function changeAccess() {
   updateIsPublic(props.id, !noteSettings.value!.isPublic);
 }
 
+async function changeShowNoteHierarchy() {
+  updateShowNoteHierarchy(props.id, !noteSettings.value!.showNoteHierarchy);
+}
+
 /**
  * Construct the parent note URL. If the parent note is not set, return an empty string
  *

From 3592607397a2e74cd268712e7a2c403b9312b5c9 Mon Sep 17 00:00:00 2001
From: devnull-1337 <devnull.pointer69@gmail.com>
Date: Tue, 29 Jul 2025 01:28:13 +0530
Subject: [PATCH 2/3] Changes

---
 src/application/services/useNote.ts | 75 +++++++++--------------------
 src/presentation/pages/Note.vue     | 45 ++++++++++-------
 2 files changed, 50 insertions(+), 70 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index 67c72cd6..f2ecd3a9 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -1,4 +1,4 @@
-import { onMounted, ref, type Ref, type MaybeRefOrGetter, computed, toValue, watch } from 'vue';
+import { ref, type Ref, type MaybeRefOrGetter, computed, toValue, watch } from 'vue';
 import { noteService, editorToolsService } from '@/domain';
 import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
 import type { NoteTool } from '@/domain/entities/Note';
@@ -9,8 +9,13 @@ import DomainError from '@/domain/entities/errors/Base';
 import useNavbar from './useNavbar';
 import { getTitle } from '@/infrastructure/utils/note';
 import type { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
-import useNoteSettings from '@/application/services/useNoteSettings';
-import type NoteSettings from '@/domain/entities/NoteSettings';
+
+/**
+ * Note-specific load options
+ */
+export interface NoteLoadOptions {
+  loadHierarchy?: boolean;
+}
 
 /**
  * Creates base structure for the empty note:
@@ -100,16 +105,11 @@ interface UseNoteComposableState {
   noteHierarchy: Ref<NoteHierarchy | null>;
 
   /**
-   * Note settings composable
-   */
-  noteSettings: Ref<NoteSettings | null>;
-  /**
-   * Updates the cover image of the note.
-   * @param id - The identifier of the note whose cover should be updated.
-   * @param data - The new cover image as binary data (Blob).
-   * @returns A Promise that resolves when the cover has been updated.
+   * Load note by id with configurable options
+   * @param id - Note identifier
+   * @param loadOptions - Load options for customizing what data to fetch
    */
-  updateCover: (id: string, data: Blob) => Promise<void>;
+  load: (id: NoteId, loadOptions?: NoteLoadOptions) => Promise<void>;
 }
 
 interface UseNoteComposableOptions {
@@ -130,11 +130,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const currentId = computed(() => toValue(options.id));
 
-  /**
-   * Note settings composable
-   */
-  const { noteSettings, load: loadNoteSettings, updateCover } = useNoteSettings();
-
   /**
    * Currently opened note
    *
@@ -215,8 +210,9 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   /**
    * Load note by id
    * @param id - Note identifier got from composable argument
+   * @param loadOptions - Loading options
    */
-  async function load(id: NoteId): Promise<void> {
+  async function load(id: NoteId, loadOptions?: NoteLoadOptions): Promise<void> {
     try {
       const response = await noteService.getNoteById(id);
 
@@ -225,7 +221,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
       noteParents.value = response.parents;
-      void getNoteHierarchy(id);
+
+      // Default to false if not specified
+      const shouldLoadHierarchy = loadOptions?.loadHierarchy ?? false;
+
+      if (shouldLoadHierarchy) {
+        void getNoteHierarchy(id);
+      }
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
       if (error instanceof DomainError) {
@@ -339,38 +341,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     note.value = (await noteService.getNoteByHostname(location.hostname)).note;
   };
 
-  onMounted(async () => {
-    /**
-     * If we have id, load note settings first, then note and note hierarchy if needed
-     */
-    if (currentId.value !== null) {
-      await loadNoteSettings(currentId.value);
-      // Only load note and hierarchy if showNoteHierarchy is true
-      if (noteSettings.value?.showNoteHierarchy === true) {
-        void load(currentId.value);
-      } else {
-        // Load note without hierarchy
-        try {
-          const response = await noteService.getNoteById(currentId.value);
-
-          note.value = response.note;
-          canEdit.value = response.accessRights.canEdit;
-          noteTools.value = response.tools;
-          parentNote.value = response.parentNote;
-          noteParents.value = response.parents;
-          // Do not call getNoteHierarchy
-        } catch (error) {
-          deleteOpenedPageByUrl(route.path);
-          if (error instanceof DomainError) {
-            void router.push(`/error/${error.statusCode}`);
-          } else {
-            void router.push('/error/500');
-          }
-        }
-      }
-    }
-  });
-
   /**
    * Reset note to the initial state
    */
@@ -456,7 +426,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     noteParents,
     parentNote,
     noteHierarchy,
-    noteSettings,
-    updateCover,
+    load,
   };
 }
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 369c159f..273f2531 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -46,9 +46,9 @@
       <PageBlock>
         <template #left>
           <VerticalMenu
-            v-if="noteSettings && noteSettings.showNoteHierarchy"
+            v-if="noteSettings && noteSettings.showNoteHierarchy && verticalMenuItems.length > 0"
             class="menu"
-            :items="[verticalMenuItems]"
+            :items="verticalMenuItems"
           />
         </template>
         <template #default>
@@ -67,12 +67,13 @@
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
 import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
-import useNote from '@/application/services/useNote';
+import useNote, { type NoteLoadOptions } from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
+import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
@@ -99,10 +100,13 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, noteSettings, updateCover } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, load } = useNote({
   id: noteId,
 });
 
+// Note settings composable - used directly in the page
+const { noteSettings, load: loadNoteSettings, updateCover } = useNoteSettings();
+
 /**
  * Create new child note
  */
@@ -181,18 +185,10 @@ async function noteChanged(data: NoteContent): Promise<void> {
  * @returns menuItem  - VerticalMenuItem
  */
 
-function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentNoteTitle: string): VerticalMenuItem {
-  if (!noteHierarchyObj) {
-    return {
-      title: 'Untitled',
-      isActive: true,
-      items: undefined,
-    };
-  }
-
+function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy, currentNoteTitle: string): VerticalMenuItem {
   // Transform the current note into a VerticalMenuItem
   return {
-    title: noteHierarchyObj?.noteTitle || 'Untitled',
+    title: noteHierarchyObj.noteTitle || 'Untitled',
     isActive: route.path === `/note/${noteHierarchyObj.noteId}`,
     items: noteHierarchyObj.childNotes ? noteHierarchyObj.childNotes.map(child => transformNoteHierarchy(child, currentNoteTitle)) : undefined,
     onActivate: () => {
@@ -201,18 +197,33 @@ function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentN
   };
 }
 
-const verticalMenuItems = computed<VerticalMenuItem>(() => {
-  return transformNoteHierarchy(noteHierarchy.value, noteTitle.value);
+const verticalMenuItems = computed<VerticalMenuItem[]>(() => {
+  if (!noteHierarchy.value) {
+    return [];
+  }
+
+  return [transformNoteHierarchy(noteHierarchy.value, noteTitle.value)];
 });
 
 watch(
   () => props.id,
-  () => {
+  async () => {
     /** If new child note is created, refresh editor with empty data */
     if (props.id === null) {
       useHead({
         title: t('note.new'),
       });
+    } else {
+      // Load note settings first
+      await loadNoteSettings(props.id);
+
+      // Create load options based on note settings
+      const loadOptions: NoteLoadOptions = {
+        loadHierarchy: noteSettings.value?.showNoteHierarchy === true,
+      };
+
+      // Load note with the configured options
+      await load(props.id, loadOptions);
     }
   },
   { immediate: true }

From 04095c85ff159eead619236d6c6408a6d9f1db38 Mon Sep 17 00:00:00 2001
From: devnull-1337 <devnull.pointer69@gmail.com>
Date: Thu, 25 Sep 2025 21:41:10 +0530
Subject: [PATCH 3/3] Code changes

---
 src/application/services/useNote.ts | 53 +++++++++++++++--------------
 src/presentation/pages/Note.vue     | 15 ++++----
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/application/services/useNote.ts b/src/application/services/useNote.ts
index f2ecd3a9..9d999420 100644
--- a/src/application/services/useNote.ts
+++ b/src/application/services/useNote.ts
@@ -1,4 +1,4 @@
-import { ref, type Ref, type MaybeRefOrGetter, computed, toValue, watch } from 'vue';
+import { onMounted, ref, type Ref, type MaybeRefOrGetter, computed, toValue, watch } from 'vue';
 import { noteService, editorToolsService } from '@/domain';
 import type { Note, NoteContent, NoteId } from '@/domain/entities/Note';
 import type { NoteTool } from '@/domain/entities/Note';
@@ -10,13 +10,6 @@ import useNavbar from './useNavbar';
 import { getTitle } from '@/infrastructure/utils/note';
 import type { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
 
-/**
- * Note-specific load options
- */
-export interface NoteLoadOptions {
-  loadHierarchy?: boolean;
-}
-
 /**
  * Creates base structure for the empty note:
  * First block is Header, second is an empty Paragraph
@@ -105,11 +98,16 @@ interface UseNoteComposableState {
   noteHierarchy: Ref<NoteHierarchy | null>;
 
   /**
-   * Load note by id with configurable options
+   * Load note by id
    * @param id - Note identifier
-   * @param loadOptions - Load options for customizing what data to fetch
    */
-  load: (id: NoteId, loadOptions?: NoteLoadOptions) => Promise<void>;
+  load: (id: NoteId) => Promise<void>;
+
+  /**
+   * Load note hierarchy separately when needed
+   * @param id - Note identifier
+   */
+  loadHierarchy: (id: NoteId) => Promise<void>;
 }
 
 interface UseNoteComposableOptions {
@@ -210,9 +208,8 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   /**
    * Load note by id
    * @param id - Note identifier got from composable argument
-   * @param loadOptions - Loading options
    */
-  async function load(id: NoteId, loadOptions?: NoteLoadOptions): Promise<void> {
+  async function load(id: NoteId): Promise<void> {
     try {
       const response = await noteService.getNoteById(id);
 
@@ -221,13 +218,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
       noteParents.value = response.parents;
-
-      // Default to false if not specified
-      const shouldLoadHierarchy = loadOptions?.loadHierarchy ?? false;
-
-      if (shouldLoadHierarchy) {
-        void getNoteHierarchy(id);
-      }
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
       if (error instanceof DomainError) {
@@ -238,6 +228,14 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     }
   }
 
+  /**
+   * Load note hierarchy separately when needed
+   * @param id - Note identifier
+   */
+  async function loadHierarchy(id: NoteId): Promise<void> {
+    await getNoteHierarchy(id);
+  }
+
   /**
    * Returns list of tools used in the note
    * @param content - content of the note
@@ -300,11 +298,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
           title: noteTitle.value,
           url: route.path,
         });
-
-      /**
-       * Get note Hierarchy when new Note is created
-       */
-      void getNoteHierarchy(noteCreated.id);
     } else {
       await noteService.updateNoteContentAndTools(currentId.value, content, specifiedNoteTools);
     }
@@ -334,6 +327,15 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     parentNote.value = undefined;
   }
 
+  onMounted(() => {
+    /**
+     * If we have id, load note and note hierarchy
+     */
+    if (currentId.value !== null) {
+      void load(currentId.value);
+    }
+  });
+
   /**
    * Get note by custom hostname
    */
@@ -427,5 +429,6 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     parentNote,
     noteHierarchy,
     load,
+    loadHierarchy,
   };
 }
diff --git a/src/presentation/pages/Note.vue b/src/presentation/pages/Note.vue
index 273f2531..b512b9f0 100644
--- a/src/presentation/pages/Note.vue
+++ b/src/presentation/pages/Note.vue
@@ -67,7 +67,7 @@
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
 import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
-import useNote, { type NoteLoadOptions } from '@/application/services/useNote';
+import useNote from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
@@ -100,7 +100,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, load } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy, loadHierarchy } = useNote({
   id: noteId,
 });
 
@@ -217,13 +217,10 @@ watch(
       // Load note settings first
       await loadNoteSettings(props.id);
 
-      // Create load options based on note settings
-      const loadOptions: NoteLoadOptions = {
-        loadHierarchy: noteSettings.value?.showNoteHierarchy === true,
-      };
-
-      // Load note with the configured options
-      await load(props.id, loadOptions);
+      // Load hierarchy only if settings allow it
+      if (noteSettings.value?.showNoteHierarchy === true) {
+        await loadHierarchy(props.id);
+      }
     }
   },
   { immediate: true }