feat: display the note parents structure

src/application/services/useNote.ts

@@ -72,6 +72,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
    */
@@ -165,6 +170,12 @@ 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[]>([]);
   /**
    * Note hierarchy
    *
@@ -194,6 +205,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       canEdit.value = response.accessRights.canEdit;
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
+      noteParents.value = response.parents;
       void getNoteHierarchy(id);
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
@@ -399,6 +411,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
+    noteParents,
     parentNote,
     noteHierarchy,
   };

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/components/breadcrumbs/BreadCrumbs.vue

@@ -0,0 +1,50 @@
+<template>
+  <RouterLink
+    v-for="(parent, index) in displayedParents"
+    :key="index"
+    :to="{ path: parent.id ? `/note/${parent.id}` : '' }"
+    class="breadcrumb"
+  >
+    {{ parent.content ? getTitle(parent.content) : '...' }}
+    <Icon
+      v-if="index < displayedParents.length - 1"
+      name="ChevronRight"
+    />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+
+import { getTitle } from '@/infrastructure/utils/note.ts';
+import { RouterLink } from 'vue-router';
+import { computed } from 'vue';
+import { Note } from '@/domain/entities/Note.ts';
+import { Icon } from '@codexteam/ui/vue';
+
+const props = defineProps<{
+  noteParents: Note[];
+}>();
+/**
+ * Note parents hierarchy
+ * If there are more than 3, only the closest & the furthest ones are shown
+ */
+const displayedParents = computed(() => {
+  if (props.noteParents.length > 3) {
+    return [
+      props.noteParents[0],
+      { id: '',
+        content: null },
+      props.noteParents[props.noteParents.length - 1],
+    ];
+  }
+
+  return props.noteParents;
+});
+</script>
+
+<style scoped>
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

src/presentation/pages/Note.vue

@@ -4,11 +4,9 @@
       :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'
-        }}
+        <BreadCrumbs
+          :note-parents="noteParents"
+        />
       </template>
       <template #right>
         <Button
@@ -65,11 +63,11 @@ import { useRoute, useRouter } from 'vue-router';
 import { 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 BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
 import { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
 import { getTitle } from '@/infrastructure/utils/note';
 
@@ -93,7 +91,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteHierarchy } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
   id: noteId,
 });