feat: display the note parents structure

src/application/services/useNote.ts

@@ -70,6 +70,11 @@ interface UseNoteComposableState {
    */
   unlinkParent: () => Promise<void>;
 
+  /**
+   * Returns an array of note parents for the current note.
+   */
+  noteParents: Ref<Note[]>;
+
   /**
    * Defines if user can edit note
    */
@@ -158,6 +163,13 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const parentNote = ref<Note | undefined>(undefined);
 
+  /**
+   * Note parents of the actual note
+   *
+   * Actual note by default
+   */
+  const noteParents = ref<Note[]>([]);
+
   /**
    * Load note by id
    * @param id - Note identifier got from composable argument
@@ -172,6 +184,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     canEdit.value = response.accessRights.canEdit;
     noteTools.value = response.tools;
     parentNote.value = response.parentNote;
+    noteParents.value = response.parents;
   }
 
   /**
@@ -265,6 +278,35 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     parentNote.value = undefined;
   }
 
+  /**
+   * Reform the array of note parents by adding the actual note id and content.
+   * @returns An array of Note objects representing the formatted note parents.
+   * @throws {Error} If the note id is not defined.
+   */
+  function formatNoteParents(): Note[] {
+    if (currentId.value === null) {
+      return [];
+    }
+    let presentationFormat: Note[] = [];
+
+    if (noteParents.value.length === 0) {
+      presentationFormat.push({
+        id: currentId.value,
+        content: note.value?.content as NoteContent,
+      });
+    } else {
+      presentationFormat = noteParents.value;
+      if (noteParents.value.find(noteItem => noteItem.id === currentId.value) === undefined) {
+        presentationFormat.push({
+          id: currentId.value,
+          content: note.value?.content as NoteContent,
+        });
+      }
+    }
+
+    return presentationFormat;
+  }
+
   /**
    * Get note by custom hostname
    */
@@ -315,6 +357,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
   });
 
   watch(noteTitle, (currentNoteTitle) => {
+    noteParents.value = formatNoteParents();
     patchOpenedPageByUrl(
       route.path,
       {
@@ -332,6 +375,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
+    noteParents,
     parentNote,
   };
 }

src/domain/entities/NoteDTO.ts

@@ -25,4 +25,9 @@ export interface NoteDTO {
    * Editor tools
    */
   tools: EditorTool[];
+
+  /**
+   * Note parents
+   */
+  parents: Note[];
 }

src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts

@@ -10,4 +10,5 @@ export type GetNoteResponsePayload = {
   accessRights: NoteAccessRights;
   parentNote: Note | undefined;
   tools: EditorTool[];
+  parents: Note[];
 };

src/presentation/pages/Note.vue

@@ -4,11 +4,17 @@
       :style="{ '--opacity': id && note ? 1 : 0 }"
     >
       <template #left>
-        {{
-          note && 'updatedAt' in note && note.updatedAt
-            ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
-            : t('note.lastEdit') + ' ' + 'a few seconds ago'
-        }}
+        <div>
+          <RouterLink
+            v-for="(parent, index) in displayedParents"
+            :key="index"
+            :to="{ path: `/note/${parent.id ? parent.id : noteId}` }"
+            @click.prevent="handleParentClick($event, parent)"
+          >
+            {{ getTitle(parent.content) }}
+            <span v-if="index < displayedParents.length - 1"> > </span>
+          </RouterLink>
+        </div>
       </template>
       <template #right>
         <Button
@@ -48,18 +54,19 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef, watch } from 'vue';
+import { computed, ref, toRef, watch } from 'vue';
+import { OutputData } from '@editorjs/editorjs';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
-import { useRouter } from 'vue-router';
-import { NoteContent } from '@/domain/entities/Note';
+import { RouterLink, useRouter } from 'vue-router';
+import { Note, NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
-import { getTimeFromNow } from '@/infrastructure/utils/date';
 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 { getTitle } from '@/infrastructure/utils/note';
 
 const { t } = useI18n();
 
@@ -79,7 +86,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents } = useNote({
   id: noteId,
 });
 
@@ -103,6 +110,51 @@ function redirectToNoteSettings(): void {
   router.push(`/note/${props.id}/settings`);
 }
 
+/**
+ * Navigate to a specific note
+ *
+ * @param {number} parentId - The ID of the parent note to navigate to
+ */
+function navigateToParent(parentId: string): void {
+  router.push(`/note/${parentId}`);
+}
+
+/**
+ * Handle parent click
+ *
+ * @param {Event} event - The click event
+ * @param {object} parent - The parent object
+ * @param {string} parent.id - The ID of the parent note
+ */
+function handleParentClick(event: Event, parent: Note): void {
+  if (getTitle(parent.content) !== '...') {
+    navigateToParent(parent.id);
+  } else {
+    event.preventDefault();
+  }
+}
+
+/**
+ * Displayed parents
+ */
+const displayedParents = computed(() => {
+  if (noteParents.value.length > 3) {
+    const newNoteContent = { blocks: [] } as OutputData;
+
+    newNoteContent.blocks.push({ type: 'paraghraph',
+      data: { text: '...' } });
+
+    return [
+      noteParents.value[0],
+      { id: '',
+        content: newNoteContent },
+      noteParents.value[noteParents.value.length - 1],
+    ];
+  }
+
+  return noteParents.value;
+});
+
 const { updateCover } = useNoteSettings();
 
 const { isEditorReady, editorConfig } = useNoteEditor({