refactor to UI components

src/components/Note/Autocomplete.vue

@@ -45,16 +45,11 @@ const handleKeypress = (event: { [key: string]: number }) => {
 defineExpose({ handleKeypress })
 </script>
 <template>
-  <ul
-    tabindex="0"
-    class="menu rounded-md border-[1px] bg-base-100 p-2 text-[0.875rem] text-black shadow-md"
-  >
-    <li class="flex flex-row" @click="emit('createLink', props.autocompleteText)">
-      <a class="flex-grow px-2 py-1" :class="!activeResult && 'active'">
-        <span class="flex-grow">{{ props.autocompleteText }}</span>
-        <i class="fas fa-plus-circle ml-auto text-white" />
-      </a>
-    </li>
+  <UIMenu class="border-[1px] p-2 text-[0.875rem] text-black shadow-md" :compact="true">
+    <UIMenuItem :active="!activeResult" @click="emit('createLink', props.autocompleteText)">
+      <span class="flex-grow">{{ props.autocompleteText }}</span>
+      <i class="fas fa-plus-circle ml-auto text-white" />
+    </UIMenuItem>
     <SearchResult
       v-for="result in results"
       :key="result.id"
@@ -62,5 +57,5 @@ defineExpose({ handleKeypress })
       :active-result="activeResult"
       @go-to-note="emit('createLink', result.title)"
     />
-  </ul>
+  </UIMenu>
 </template>

src/components/Note/NoteReferences.vue

@@ -5,22 +5,18 @@ const props = defineProps<{
 }>()
 </script>
 <template>
-  <div class="card mt-3 border-[1px]" v-if="props.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">{{ props.references.length }}</div>
-          </span>
-        </li>
-        <li v-for="reference in props.references" :key="reference.id">
-          <a class="rounded-md" @click="setActiveNote(reference.id)">
-            <i class="far fa-file-alt fa-fw" />
-            {{ reference.title }}
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
+    <UIMenuItem :title="true">
+      <span>References</span>
+      <UIBadge variant="outline">{{ props.references.length }}</UIBadge>
+    </UIMenuItem>
+    <UIMenuItem
+      v-for="reference in props.references"
+      :key="reference.id"
+      @click="setActiveNote(reference.id)"
+    >
+      <i class="far fa-file-alt fa-fw" />
+      {{ reference.title }}
+    </UIMenuItem>
+  </UIMenu>
 </template>