update note display

src/components/Note.vue

@@ -1,17 +1,69 @@
 <script setup lang="ts">
-defineProps<{
+import { ref, watch, computed } from 'vue'
+import { formatDate } from '@/utils/helpers'
+import { notes, activeNote } from '@/composables/useNotes'
+import { notesRelations } from '@/composables/useNotes'
+
+const props = defineProps<{
   note: Note
 }>()
+
+const emit = defineEmits<{
+  (e: 'update', note: Note): void
+}>()
+
+const noteTitle = ref(props.note.title)
+watch(noteTitle, () => {
+  const updatedNote: Note = {
+    ...props.note,
+    title: noteTitle.value,
+  }
+  emit('update', updatedNote)
+})
+
+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)
+})
 </script>
 <template>
-  <div>
-    <h1 class="flex items-center pb-2 text-3xl">
+  <div class="flex flex-col">
+    <h1 class="mb-2 flex items-center rounded-md text-3xl hover:bg-gray-200">
       <i
         class="bi bi-house mr-2 text-base text-secondary"
-        v-if="note.isRoot"
+        v-if="props.note.isRoot"
       ></i
-      >{{ note.title }}
+      ><input
+        type="text"
+        class="flex-1 bg-transparent py-1 outline-none"
+        v-model="noteTitle"
+      />
     </h1>
-    <div>{{ note.content }}</div>
+    <div class="flex-1">{{ note.content }}</div>
+    <div class="card mt-3 border-[1px]" v-if="references.length > 0">
+      <div class="card-body px-3 py-3">
+        <ul class="menu rounded-md">
+          <li class="menu-title !opacity-100">
+            <span class="card-title text-secondary"
+              >References
+              <div class="badge-outline badge">{{ references.length }}</div>
+            </span>
+          </li>
+          <li v-for="reference in references">
+            <a class="rounded-md" @click="activeNote = reference"
+              ><i class="far fa-file-alt fa-fw" />{{ reference.title }}</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+    <hr class="my-3" />
+    <div class="flex text-sm text-secondary">
+      <span>{{ note.wordCount }} words</span>
+      <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
+    </div>
   </div>
 </template>