autocomplete styling

src/components/Search/SearchResult.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { activeNote } from '@/composables/useNotes'
+import { formatDate } from '@/utils/helpers'
+
+const props = defineProps<{
+  result: Note
+  activeResult?: Note
+}>()
+
+const emit = defineEmits<{
+  (e: 'goToNote'): void
+}>()
+</script>
+<template>
+  <li class="flex flex-row">
+    <a
+      class="flex-1 items-center px-2 py-1"
+      @click.stop.prevent="() => emit('goToNote')"
+      @mousedown.prevent
+      :class="{
+        disabled: activeNote?.id === result.id,
+        active: props.activeResult?.id === result.id,
+      }"
+    >
+      <span
+        class="badge-ghost badge badge-sm mr-0.5"
+        v-if="activeNote?.id === result.id"
+      >
+        current
+      </span>
+      <span class="flex-1">{{ result.title }}</span>
+      <span>{{ formatDate(result.modified) }}</span>
+    </a>
+  </li>
+</template>