listview

src/components/ViewModes/Note.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { formatDate } from '@/utils/helpers'
 import {
-  notes,
   activeNote,
-  notesRelations,
   deleteNote,
   rootNote,
   setRootNote,
   setActiveNote,
+  getNoteReferences
 } from '@/composables/useNotes'
 
 const props = defineProps<{
@@ -29,16 +28,7 @@ const updateNoteContent = (content: string) => {
   emit('update', updatedNote)
 }
 
-const references = computed<Note[]>(() => {
-  const relations = notesRelations.value[props.note.id]
-  return relations
-    ? (relations.from || [])
-        .map((noteId) => {
-          return notes.value.find((note) => note.id === noteId)
-        })
-        .filter((note): note is Note => note !== undefined)
-    : []
-})
+const references = computed<Note[]>(() => getNoteReferences(props.note))
 
 const del = async (closeModal: () => Promise<Boolean>) => {
   await closeModal()
@@ -52,18 +42,14 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
 }
 </script>
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex h-full flex-col">
     <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
         ></i>
-        <input
-          type="text"
-          class="flex-grow bg-transparent py-1 outline-none"
-          v-model="noteTitle"
-        />
+        <input type="text" class="flex-grow bg-transparent py-1 outline-none" v-model="noteTitle" />
       </template>
     </NoteToolbar>
     <NoteEditor