refactor to UI components

src/components/Search/SearchBar.vue

@@ -66,7 +66,7 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
       @keydown="handleKeydown"
     />
     <div class="z-1000 absolute left-0 right-0 top-[100%]" v-if="active">
-      <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
+      <UIMenu :compact="true" class="mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
         <div class="max-h-[320px] w-full overflow-y-auto">
           <template v-if="results.length > 0">
             <SearchResult
@@ -78,9 +78,9 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
               ref="resultsRefs"
             />
           </template>
-          <li v-else><a>No notes found</a></li>
+          <UIMenuItem :compact="true" v-else>No notes found</UIMenuItem>
         </div>
-      </ul>
+      </UIMenu>
     </div>
   </div>
 </template>

src/components/Search/SearchResult.vue

@@ -14,21 +14,15 @@ const emit = defineEmits<{
 const element = ref<HTMLElement | null>(null)
 </script>
 <template>
-  <li class="flex w-full flex-row" ref="element">
-    <a
-      class="items-center px-2 py-1 w-full"
-      @click.stop.prevent="() => emit('goToNote', element)"
-      @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-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
-      <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
-    </a>
-  </li>
+  <UIMenuItem
+    class="flex w-full items-center"
+    @click.stop.prevent="() => emit('goToNote', element)"
+    @mousedown.prevent
+    :disabled="activeNote?.id === result.id"
+    :active="props.activeResult?.id === result.id"
+  >
+    <UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">current</UIBadge>
+    <span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
+    <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
+  </UIMenuItem>
 </template>