notes search

src/components/Note.vue

@@ -4,9 +4,14 @@ defineProps<{
 }>()
 </script>
 <template>
-  <h1 class="flex items-center text-3xl pb-2">
-    <i class="bi bi-house mr-2 text-secondary text-base" v-if="note.isRoot"></i
-    >{{ note.title }}
-  </h1>
-  <div>{{ note.content }}</div>
+  <div>
+    <h1 class="flex items-center pb-2 text-3xl">
+      <i
+        class="bi bi-house mr-2 text-base text-secondary"
+        v-if="note.isRoot"
+      ></i
+      >{{ note.title }}
+    </h1>
+    <div>{{ note.content }}</div>
+  </div>
 </template>

src/components/SearchBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue'
-import { notes, findNotes } from '@/composables/useNotes'
+import { notes, findNotes, activeNote } from '@/composables/useNotes'
 
 const active = ref(false)
 watch(active, () => {
@@ -13,7 +13,8 @@ const results = computed<Note[]>(() => {
 })
 
 const click = (note: Note) => {
-  console.log(note.title)
+  activeNote.value = note
+  active.value = false
 }
 </script>
 <template>
@@ -29,20 +30,33 @@ const click = (note: Note) => {
     />
     <div
       class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
-      v-if="active && results.length > 0"
+      v-if="active"
     >
       <ul
         tabindex="0"
         class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
       >
-        <li v-for="note in results">
+        <li
+          v-for="note in results"
+          v-if="results.length > 0"
+          class="flex flex-row"
+          :class="{ disabled: activeNote?.id === note.id }"
+        >
           <a
-            class="px-2 py-1"
+            class="flex-1 items-center px-2 py-1"
             @click.stop.prevent="() => click(note)"
             @mousedown.prevent
-            >{{ note.title }}</a
+            :class="{ disabled: activeNote?.id === note.id }"
+          >
+            <span
+              class="badge-ghost badge badge-sm mr-0.5"
+              v-if="activeNote?.id === note.id"
+              >current</span
+            >
+            {{ note.title }}</a
           >
         </li>
+        <li v-else><a>No notes found</a></li>
       </ul>
     </div>
   </div>