more ui components

src/components/Search/SearchBar.vue

@@ -65,7 +65,7 @@ const resultsRefs = ref<InstanceType<typeof SearchResult>[]>([])
       ref="queryElem"
       @keydown="handleKeydown"
     />
-    <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
+    <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">
         <div class="max-h-[320px] w-full overflow-y-auto">
           <template v-if="results.length > 0">

src/components/TopBar/Settings.vue

@@ -24,35 +24,26 @@ const handleClick = (fn: (...args: any[]) => any) => {
 </script>
 <template>
   <OnClickOutside>
-    <div class="search-active-hide dropdown-end dropdown">
-      <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
-        <i class="fa-fw fa-solid fa-user-gear" />
-      </label>
-      <ul
-        tabindex="0"
-        class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
-      >
-        <li
-          class="text-base"
-          v-for="source in availableNotesSources.filter(
-            (source) => source !== activeNotesSource
-          )"
+    <UIDropdown class="search-active-hide">
+      <template #activator>
+        <UIButton size="sm" variant="outline" tabindex="0" class="py-1 text-white">
+          <i class="fa-fw fa-solid fa-user-gear" />
+        </UIButton>
+      </template>
+      <template #items>
+        <UIDropdownItem
+          v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
           :key="source"
-          @click="handleClick(() => (preferredNotesSource = source))"
         >
-          <a>
-            <i class="fa-fw fa-solid fa-database" />
-            {{ sourceLabels[source] }}
-          </a>
-        </li>
+          <i class="fa-fw fa-solid fa-database" />
+          {{ sourceLabels[source] }}
+        </UIDropdownItem>
         <UIModal>
           <template #activator="{ open }">
-            <li @click="open" class="text-base">
-              <a>
-                <i class="fa-fw fa-solid fa-right-from-bracket" />
-                Sign out
-              </a>
-            </li>
+            <UIDropdownItem @click="open">
+              <i class="fa-fw fa-solid fa-right-from-bracket" />
+              Sign out
+            </UIDropdownItem>
           </template>
           <template #title>Sign out</template>
           <template #default>
@@ -60,11 +51,11 @@ const handleClick = (fn: (...args: any[]) => any) => {
             <p>Your synchronized notes can't be accessed until you sign-in again.</p>
           </template>
           <template #actions="{ close }">
-            <button class="btn-sm btn" @click="close">Cancel</button>
-            <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
+            <UIButton size="sm" @click="close">Cancel</UIButton>
+            <UIButton size="sm" color="primary" @click="signOut(close)">Sign out</UIButton>
           </template>
         </UIModal>
-      </ul>
-    </div>
+      </template>
+    </UIDropdown>
   </OnClickOutside>
 </template>

src/components/ViewModes/Note.vue

@@ -66,11 +66,3 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.btn-group .btn {
-  @apply border-[1px] border-neutral-200 text-opacity-70;
-  &:not(:first-child) {
-    @apply ml-[-1px];
-  }
-}
-</style>

src/components/ui/UIButton.vue

@@ -19,5 +19,5 @@ const styleClass = computed(() => {
 })
 </script>
 <template>
-  <button class="btn" :class="styleClass"><slot></slot></button>
+  <button class="btn duration-0" :class="styleClass"><slot></slot></button>
 </template>

src/components/ui/UIDropdown.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="dropdown-end dropdown">
+    <slot name="activator" tabindex="0"></slot>
+    <ul
+      tabindex="0"
+      class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
+    >
+      <slot name="items"></slot>
+    </ul>
+  </div>
+</template>

src/components/ui/UIDropdownItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <li class="text-base">
+    <a><slot></slot></a>
+  </li>
+</template>

src/components/ui/UIModal.vue

@@ -60,7 +60,7 @@ defineExpose({ open, close })
           </p>
           <div class="modal-action">
             <slot name="actions" v-bind="slotProps">
-              <button class="btn-sm btn" @click="close">Close</button>
+              <UIButton size="sm" @click="close">Close</UIButton>
             </slot>
           </div>
         </div>

src/style.scss

@@ -42,10 +42,6 @@ p:last-child {
   @apply my-0;
 }
 
-.btn {
-  animation-duration: 0s;
-}
-
 .ck-body-wrapper {
   height: 0;
 }