refactor: use floating ui for dropdowns

app/components/FileSelector.vue

@@ -2,8 +2,6 @@
 import { nanoid } from 'nanoid';
 import { assert } from '~~/utils/assert';
 
-const { openDropdown, closeDropdown, dropdownState } = useDropdown();
-
 const inputRef = ref<HTMLInputElement | null>(null);
 const files = defineModel<{
     id: string;
@@ -73,21 +71,6 @@ watch(rawFiles, async (newFiles, oldFiles) => {
     }));
 })
 
-const toggleSelectorDropdown = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (inputRef.value === null) return;
-
-    if (dropdownState.open) {
-        closeDropdown();
-        return;
-    }
-
-    openDropdown(e, () => [
-        { label: "Upload file", icon: "i-mynaui-file-plus", onClick: () => inputRef.value?.click() },
-    ])
-};
-
 const handleFileChange = (e: Event) => {
     const inputFiles = (e.target! as HTMLInputElement).files;
     if (inputFiles === null) return;
@@ -112,8 +95,20 @@ onUnmounted(() => {
 
 <template>
     <input ref="inputRef" type="file" multiple class="hidden" />
-    <button @click="toggleSelectorDropdown"
-        class="flex items-center justify-center h-8.5 w-8.5 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-        <span class="pointer-events-none i-mynaui-paperclip text-5 text-[var(--text-secondary)]"></span>
-    </button>
+    <Dropdown placement="top">
+        <template #default="{ toggle, setRef }">
+            <button :ref="setRef" @click="toggle"
+                class="flex items-center justify-center h-8.5 w-8.5 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
+                <span class="pointer-events-none i-mynaui-paperclip text-5 text-[var(--text-secondary)]"></span>
+            </button>
+        </template>
+
+        <template #dropdown="{ close }">
+            <button @click="inputRef?.click(); close()"
+                class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
+                <span class="text-4.5 i-mynaui-file-plus"></span>
+                <span>Upload file</span>
+            </button>
+        </template>
+    </Dropdown>
 </template>