implement toolbar actions

src/components/Note.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { formatDate } from '@/utils/helpers'
-import { notes, activeNote } from '@/composables/useNotes'
-import { notesRelations } from '@/composables/useNotes'
+import {
+  notes,
+  activeNote,
+  notesRelations,
+  deleteNote,
+  rootNote,
+  setRootNote,
+} from '@/composables/useNotes'
 
 const props = defineProps<{
   note: Note
@@ -21,24 +27,30 @@ watch(noteTitle, () => {
 })
 
 const references = computed<Note[]>(() => {
-  return notesRelations.value[props.note.id].from
-    .map((noteId) => {
-      return notes.value.find((note) => note.id === noteId)
-    })
-    .filter((note): note is Note => note !== undefined)
+  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 deleteNote = () => {
-  console.log('delete note')
+const del = async (closeModal: () => Promise<Boolean>) => {
+  await closeModal()
+  activeNote.value = rootNote.value
+  deleteNote(props.note.id)
 }
 
-const setRootNote = () => {
-  console.log('set root note')
+const setRoot = async (closeModal: () => Promise<Boolean>) => {
+  setRootNote(props.note.id)
+  closeModal()
 }
 </script>
 <template>
   <div class="flex flex-col">
-    <NoteToolbar @delete="deleteNote" @set-root="setRootNote">
+    <NoteToolbar @delete="del" @set-root="setRoot">
       <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"