refactor to UI components

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>