listview component

src/components/ViewModes/ListView.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table-compact table w-full">
+      <!-- head -->
+      <thead>
+        <tr>
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <th>Note title</th>
+          <th>References</th>
+          <th>Modified</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- row 1 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Cy Ganderton</td>
+          <td>Quality Control Specialist</td>
+          <td>Blue</td>
+        </tr>
+        <!-- row 2 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Hart Hagerty</td>
+          <td>Desktop Support Technician</td>
+          <td>Purple</td>
+        </tr>
+        <!-- row 3 -->
+        <tr class="hover">
+          <th>
+            <label>
+              <input type="checkbox" class="checkbox-primary checkbox checkbox-sm" />
+            </label>
+          </th>
+          <td>Brice Swyre</td>
+          <td>Tax Accountant</td>
+          <td>Red</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

src/components/ViewModes/Note.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { formatDate } from '@/utils/helpers'
+import {
+  notes,
+  activeNote,
+  notesRelations,
+  deleteNote,
+  rootNote,
+  setRootNote,
+  setActiveNote,
+} from '@/composables/useNotes'
+
+const props = defineProps<{
+  note: Note
+}>()
+
+const emit = defineEmits<{
+  update: [note: Note]
+}>()
+
+const noteTitle = ref(props.note.title)
+watch(noteTitle, () => {
+  const updatedNote: Note = { ...props.note, title: noteTitle.value }
+  emit('update', updatedNote)
+})
+
+const updateNoteContent = (content: string) => {
+  const updatedNote: Note = { ...props.note, content }
+  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 del = async (closeModal: () => Promise<Boolean>) => {
+  await closeModal()
+  setActiveNote(rootNote.value?.id)
+  deleteNote(props.note.id)
+}
+
+const setRoot = async (closeModal: () => Promise<Boolean>) => {
+  setRootNote(props.note.id)
+  closeModal()
+}
+</script>
+<template>
+  <div class="flex flex-col h-full">
+    <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"
+        />
+      </template>
+    </NoteToolbar>
+    <NoteEditor
+      class="flex-grow"
+      :note="activeNote"
+      @update="updateNoteContent"
+      v-if="activeNote"
+    ></NoteEditor>
+    <NoteReferences :references="references" />
+    <hr class="my-3" />
+    <div class="flex text-sm text-secondary">
+      <span>{{ note.wordCount }} {{ note.wordCount === 1 ? 'word' : 'words' }}</span>
+      <span class="ml-auto">Last modified {{ formatDate(note.modified) }}</span>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.btn-group .btn {
+  @apply border-[1px] border-neutral-200 text-opacity-70;
+  &:not(:first-child) {
+    @apply ml-[-1px];
+  }
+}
+</style>