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>

src/components/SearchBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
 import { notes, findNotes, activeNote } from '@/composables/useNotes'
+import { formatDate } from '@/utils/helpers'
 
 const active = ref(false)
 watch(active, () => {
@@ -12,10 +13,12 @@ const results = computed<Note[]>(() => {
   return query.value ? findNotes(query.value) : notes.value
 })
 
-const click = (note: Note) => {
+const goToNote = (note: Note) => {
   activeNote.value = note
   active.value = false
+  if (queryElem.value) queryElem.value.blur()
 }
+const queryElem = ref<HTMLInputElement | null>(null)
 </script>
 <template>
   <div id="search-container" class="relative h-full flex-1">
@@ -27,6 +30,7 @@ const click = (note: Note) => {
       @mousedown="active = true"
       @blur="active = false"
       v-model="query"
+      ref="queryElem"
     />
     <div
       class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
@@ -40,11 +44,10 @@ const click = (note: Note) => {
           v-for="note in results"
           v-if="results.length > 0"
           class="flex flex-row"
-          :class="{ disabled: activeNote?.id === note.id }"
         >
           <a
             class="flex-1 items-center px-2 py-1"
-            @click.stop.prevent="() => click(note)"
+            @click.stop.prevent="() => goToNote(note)"
             @mousedown.prevent
             :class="{ disabled: activeNote?.id === note.id }"
           >
@@ -53,7 +56,8 @@ const click = (note: Note) => {
               v-if="activeNote?.id === note.id"
               >current</span
             >
-            {{ note.title }}</a
+            <span class="flex-1">{{ note.title }}</span>
+            <span>{{ formatDate(note.modified) }}</span></a
           >
         </li>
         <li v-else><a>No notes found</a></li>

src/components/SideBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { rootNote } from '@/composables/useNotes'
+import { rootNote, notes, activeNote } from '@/composables/useNotes'
 import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
 import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
 
@@ -15,12 +15,16 @@ const emit = defineEmits<{
 <template>
   <div
     id="sidebar"
-    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3"
+    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem icon="house">{{ rootNote?.title }}</SideBarMenuItem>
+        <SideBarMenuItem
+          icon="fas fa-fw fa-home"
+          @click="activeNote = rootNote"
+          >{{ rootNote?.title }}</SideBarMenuItem
+        >
       </template>
     </SideBarMenu>
     <SideBarMenu>
@@ -36,9 +40,16 @@ const emit = defineEmits<{
       </template>
     </SideBarMenu>
     <SideBarMenu>
-      <template #header>Recent notes</template>
+      <template #header
+        ><i class="far fa-clock fa-fw mr-2" />Recent notes</template
+      >
       <template #items>
-        <SideBarMenuItem>{{ rootNote?.title }}</SideBarMenuItem>
+        <SideBarMenuItem
+          v-for="note in notes"
+          icon="far fa-file-alt fa-fw"
+          @click="activeNote = note"
+          >{{ note.title }}</SideBarMenuItem
+        >
       </template>
     </SideBarMenu>
   </div>

src/components/SideBar/SideBarMenuItem.vue

@@ -6,10 +6,9 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200"
+    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
-    <i :class="`bi bi-${props.icon}`" class="mr-2" v-if="props.icon"></i
-    ><slot></slot>
+    <i :class="props.icon" class="mr-2" v-if="props.icon"></i><slot></slot>
   </a>
 </template>

src/components/TopBar.vue

@@ -2,6 +2,7 @@
 import Hamburger from '@/components/Hamburger.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import Logo from './Logo.vue'
+import { addNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -13,21 +14,26 @@ const emit = defineEmits<{
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
     <div
-      class="w-in mx-auto flex w-full max-w-app items-center gap-3 text-white"
+      class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white"
     >
       <div
-        class="flex w-sidebar items-center pl-3"
-        :class="sideBarCollapsed && 'w-fit'"
+        class="flex pl-3"
+        :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
       >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
         />
-        <Logo class="ml-auto px-3 text-2xl" />
+        <Logo class="ml-auto pl-5 text-2xl" />
       </div>
-      <div class="mr-3 flex h-full flex-1 items-center gap-2 py-2.5">
+      <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
-        <button class="btn-outline btn-sm btn h-full text-white">+</button>
+        <button
+          class="btn-outline btn-sm btn h-full text-white"
+          @click="addNote('Untitled new note', '', true)"
+        >
+          <i class="fas fa-plus-circle text-[1.1rem]" />
+        </button>
         <button class="btn-outline btn-sm btn h-full text-white">
           Sign in
         </button>