refactor: use floating ui for dropdowns

app/components/Sidenav/Header.vue

@@ -9,7 +9,6 @@ const { user, signOut } = useAuth();
 // particular)
 const cachedUser = ref(user.value);
 
-const dropdownRef = ref<HTMLDivElement | null>(null);
 const dropdownOpen = ref(false);
 
 watch(user, () => {
@@ -29,14 +28,10 @@ const handleLogout = async () => {
 
     await navigateTo('/auth/login');
 };
-
-useClickOutside(dropdownRef, () => {
-    dropdownOpen.value = false;
-});
 </script>
 
 <template>
-    <header ref="dropdownRef" class="flex items-center justify-between overflow-hidden">
+    <header class="flex items-center justify-between overflow-hidden">
         <button @click="dropdownOpen = !dropdownOpen"
             class="flex gap-1 pr-1 items-center hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
             <div
@@ -60,8 +55,8 @@ useClickOutside(dropdownRef, () => {
             enter-from-class="opacity-0 scale-95" enter-to-class="opacity-100 scale-100"
             leave-active-class="transition-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-            <div v-if="dropdownOpen"
-                class="w-full top-full text-sm mt-1 absolute z-50 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
+            <div v-if="dropdownOpen" v-click-outside="() => dropdownOpen = false"
+                class="w-full top-full text-sm mt-1 absolute z-30 bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 flex flex-col gap-2">
                 <button @click="dropdownOpen = false; openDialog(DialogType.Settings)"
                     class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                     <span class="i-mynaui-cog-four text-4.5"></span>

app/components/Sidenav/HeaderAgent.vue

@@ -1,36 +1,11 @@
 <script setup lang="ts">
 const route = useRoute();
 const { agents, getAgent } = useAgents();
-const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 
 const agentId = computed(() => route.params.id as string);
 const activeAgent = getAgent(agentId);
 
 const { isHovered } = useSidenavContext();
-
-const toggleDropdown = (e: MouseEvent) => {
-    e.stopPropagation();
-
-    if (dropdownState.open) {
-        closeDropdown();
-        return;
-    }
-
-    const itemsFactory = () => {
-        const items = [];
-        for (const agent of agents.value || []) {
-            items.push({
-                label: agent.name,
-                icon: 'i-mynaui-check-hexagon',
-                active: activeAgent.value?.id === agent.id,
-                onClick: () => navigateTo(`/agent/${agent.id}`)
-            });
-        }
-        return items;
-    };
-
-    openDropdown(e, itemsFactory, { verticality: 'descending', placement: 'center', maxWidth: '200px' });
-}
 </script>
 
 <template>
@@ -43,24 +18,35 @@ const toggleDropdown = (e: MouseEvent) => {
             </NuxtLink>
         </div>
 
-        <button
-            class="shrink-1 max-w-full min-w-0 w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
-            @click="toggleDropdown">
-            <div class="pointer-events-none flex items-center gap-1.5 max-w-full">
-                <div
-                    :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
-                    <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl" class="w-full h-full object-cover" />
-                    <span v-else class="h-4 w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
-                </div>
-                <span
-                    class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
-                    {{ activeAgent?.name }}
-                </span>
-                <div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]">
-                    <span
-                        class="i-mynaui-chevron-up-down inline-block text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
-                </div>
-            </div>
-        </button>
+        <Dropdown placement="bottom" dropdown-class="max-w-48">
+            <template #default="{ toggle, setRef }">
+                <button :ref="setRef" @click="toggle"
+                    class="shrink-1 max-w-full min-w-0 w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg">
+                    <div class="pointer-events-none flex items-center gap-1.5 max-w-full">
+                        <div
+                            :class="['w-[28px] h-[28px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center', activeAgent?.imageUrl ? '' : 'border border-[var(--color-border)]']">
+                            <img v-if="activeAgent?.imageUrl" :src="activeAgent.imageUrl"
+                                class="w-full h-full object-cover" />
+                            <span v-else class="h-4 w-4 i-mynaui-check-hexagon text-[var(--color-accent)]"></span>
+                        </div>
+                        <span
+                            class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
+                            {{ activeAgent?.name }}
+                        </span>
+                        <div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]">
+                            <span
+                                class="i-mynaui-chevron-up-down inline-block text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"></span>
+                        </div>
+                    </div>
+                </button>
+            </template>
+
+            <template #dropdown="{ close }">
+                <button v-for="agent in agents" :key="agent.id" @click="navigateTo(`/agent/${agent.id}`); close()"
+                    class="truncate block w-full text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150">
+                    {{ agent.name }}
+                </button>
+            </template>
+        </Dropdown>
     </header>
 </template>

app/components/Sidenav/NavAgent.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { assert } from '~~/utils/assert';
 import RowVirtualizerFixed from '~/components/RowVirtualizerFixed.vue';
+import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
+
+const dropdownOpen = ref(false);
+const dropdownTrigger = ref<HTMLElement | null>(null);
+const dropdownContent = ref(null);
+const activeMenuTopicId = ref<string | null>(null);
 
 const route = useRoute();
-const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 const { getAgent } = useAgents();
 
 const triplit = useTriplitClient();
@@ -11,7 +16,6 @@ const triplit = useTriplitClient();
 const navRef = ref<HTMLElement | null>(null);
 const agentId = computed(() => route.params.id as string);
 
-console.log(agentId.value);
 const activeAgent = getAgent(agentId);
 watch(agentId, () => {
     if (navRef.value) {
@@ -23,6 +27,30 @@ const topics = computed(() => {
     return activeAgent.value?.topics || [];
 })
 
+const { floatingStyles, placement } = useFloating(dropdownTrigger, dropdownContent, {
+    placement: 'bottom-end',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(6), flip(), shift({ padding: 10 })],
+    transform: false,
+});
+
+const transformOrigin = computed(() =>
+    placement.value.startsWith('top')
+        ? 'transform-origin-bottom-center'
+        : 'transform-origin-top-center'
+);
+
+const closeDropdown = () => {
+    dropdownOpen.value = false;
+    activeMenuTopicId.value = null;
+    dropdownTrigger.value = null;
+};
+
+// Computed to get the topic data for the currently open menu
+const menuTopic = computed(() =>
+    topics.value.find(t => t.id === activeMenuTopicId.value)
+);
+
 const topicsOpen = ref(true);
 let activeAutoRenames = reactive(new Map<string, string>());
 
@@ -137,23 +165,14 @@ const handleNavClick = (e: MouseEvent) => {
         case 'toggle-dropdown':
             e.preventDefault();
             e.stopPropagation();
-            if (dropdownState.open) {
+            if (activeMenuTopicId.value === topicId && dropdownOpen.value) {
                 closeDropdown();
                 return;
             }
 
-            openDropdown(e, () => {
-                const topic = topics.value.find(t => t.id === topicId);
-                const isRenaming = activeAutoRenames.has(topicId) && topic?.renaming;
-
-                return [
-                    isRenaming
-                        ? { label: 'Cancel Auto Rename', onClick: () => cancelAutoRename(topicId) }
-                        : { label: 'Auto Rename', onClick: () => autoRenameTopic(topicId) },
-                    { label: 'Rename', disabled: isRenaming ?? false, onClick: () => startRename(topicId, topic?.name || '') },
-                    { label: 'Delete', danger: true, onClick: () => deleteTopic(topicId) }
-                ];
-            }, { minWidth: '120px', placement: 'right' });
+            activeMenuTopicId.value = topicId;
+            dropdownTrigger.value = trigger;
+            dropdownOpen.value = true;
             break;
     }
 }
@@ -205,7 +224,7 @@ onMounted(() => {
 
                                 <div data-action="toggle-dropdown"
                                     class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                                    <span class="h-4.5 w-4.5 i-tabler-dots"></span>
+                                    <span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
                                 </div>
                             </a>
                         </template>
@@ -213,7 +232,46 @@ onMounted(() => {
                 </div>
             </Collapsible>
         </div>
+
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
+                leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                leave-from-class="opacity-100 scale-100 translate-y-0"
+                leave-to-class="opacity-0 scale-95 translate-y-1">
+                <div v-if="dropdownOpen" ref="dropdownContent" :style="floatingStyles" class="fixed z-15"
+                    :class="transformOrigin">
+                    <div v-click-outside="closeDropdown"
+                        class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
+
+                        <!-- Dynamic content based on menuTopic -->
+                        <template v-if="menuTopic">
+                            <button v-if="menuTopic.renaming" @click="cancelAutoRename(menuTopic.id); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
+                                Cancel Auto Rename
+                            </button>
+                            <button v-else @click="autoRenameTopic(menuTopic.id); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
+                                Auto Rename
+                            </button>
+
+                            <button :disabled="menuTopic.renaming ?? false"
+                                @click="startRename(menuTopic.id, menuTopic.name); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
+                                Rename
+                            </button>
+
+                            <div class="h-px bg-[var(--color-border)] my-1" />
+
+                            <button @click="deleteTopic(menuTopic.id); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 text-red-500">
+                                Delete
+                            </button>
+                        </template>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
     </nav>
 </template>
-
-<!-- text-[var(--text-secondary)] hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] -->

app/components/Sidenav/NavHome.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
+
 const { agents, createAgent } = useAgents();
 const agentsOpen = ref(true);
 const creatingAgent = ref(false);
 
-const { openDropdown, dropdownState, closeDropdown } = useDropdown();
+const dropdownOpen = ref(false);
+const dropdownTrigger = ref<HTMLElement | null>(null);
+const dropdownContent = ref(null);
+const activeMenuAgentId = ref<string | null>(null);
 
 const triplit = useTriplitClient();
 
@@ -54,6 +59,29 @@ const deleteAgent = async (agentId: string) => {
     await triplit.delete('agents', agentId);
 }
 
+const { floatingStyles, placement } = useFloating(dropdownTrigger, dropdownContent, {
+    placement: 'bottom-end',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(6), flip(), shift({ padding: 10 })],
+    transform: false,
+});
+
+const transformOrigin = computed(() =>
+    placement.value.startsWith('top')
+        ? 'transform-origin-bottom-center'
+        : 'transform-origin-top-center'
+);
+
+const closeDropdown = () => {
+    dropdownOpen.value = false;
+    activeMenuAgentId.value = null;
+    dropdownTrigger.value = null;
+};
+
+const menuAgent = computed(() =>
+    agents.value.find(t => t.id === activeMenuAgentId.value)
+);
+
 const handleNavClick = (e: MouseEvent) => {
     const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
     if (!trigger) return;
@@ -71,22 +99,14 @@ const handleNavClick = (e: MouseEvent) => {
         case 'toggle-dropdown':
             e.preventDefault();
             e.stopPropagation();
-            if (dropdownState.open) {
+            if (activeMenuAgentId.value === agentId && dropdownOpen.value) {
                 closeDropdown();
                 return;
             }
 
-            openDropdown(e, () => {
-                const agent = agents.value.find(a => a.id === agentId);
-                if (agent) {
-                    return [
-                        { label: 'Rename', onClick: () => startRename(agentId, agent?.name || '') },
-                        { label: 'Delete', danger: true, onClick: () => deleteAgent(agentId) }
-                    ];
-                }
-
-                return [];
-            }, { minWidth: '120px', placement: 'right' });
+            activeMenuAgentId.value = agentId;
+            dropdownTrigger.value = trigger;
+            dropdownOpen.value = true;
             break;
     }
 }
@@ -141,7 +161,7 @@ onMounted(() => {
 
                                 <div data-action="toggle-dropdown"
                                     class="text-[var(--text-secondary)] shrink-0 opacity-0 group-hover:opacity-100 p-1 flex items-center justify-center rounded-md hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
-                                    <span class="h-4.5 w-4.5 i-tabler-dots"></span>
+                                    <span class="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
                                 </div>
                             </a>
                         </template>
@@ -149,5 +169,35 @@ onMounted(() => {
                 </div>
             </div>
         </Collapsible>
+
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                enter-from-class="opacity-0 scale-95 translate-y-1" enter-to-class="opacity-100 scale-100 translate-y-0"
+                leave-active-class="transition-[opacity,transform] duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                leave-from-class="opacity-100 scale-100 translate-y-0"
+                leave-to-class="opacity-0 scale-95 translate-y-1">
+                <div v-if="dropdownOpen" ref="dropdownContent" :style="floatingStyles" class="fixed z-15"
+                    :class="transformOrigin">
+                    <div v-click-outside="closeDropdown"
+                        class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1 min-w-40">
+
+                        <template v-if="menuAgent">
+                            <button @click="startRename(menuAgent.id, menuAgent.name); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50">
+                                Rename
+                            </button>
+
+                            <div class="h-px bg-[var(--color-border)] my-1" />
+
+                            <button @click="deleteAgent(menuAgent.id); closeDropdown()"
+                                class="text-left px-3 py-1.5 text-sm rounded-lg hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 text-red-500">
+                                Delete
+                            </button>
+                        </template>
+                    </div>
+                </div>
+            </Transition>
+        </Teleport>
     </nav>
 </template>

app/components/Sidenav/index.vue

@@ -101,7 +101,7 @@ const navKind = computed(() => {
 </script>
 
 <template>
-    <div class="relative">
+    <div class="relative pl-2">
         <aside ref="sidenavRef" :class="[
             'h-full max-w-fit background-[var(--bg-base)] overflow-hidden will-change-width text-[var(--text-secondary)] select-none transition-[width,margin] duration-250 ease-[cubic-bezier(0.5,_1,_0.89,_1)]',
             open ? 'w-full mr-2' : 'w-0 mr-0',
@@ -111,7 +111,8 @@ const navKind = computed(() => {
             <div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
                 <div class="flex flex-col h-full max-h-full overflow-y-hidden">
                     <!-- Header -->
-                    <div class="relative flex flex-row gap-2 justify-between items-center mb-1.5 h-8">
+                    <div
+                        class="z-25 bg-[var(--bg-base)] relative flex flex-row gap-2 justify-between items-center shrink-0 pb-1.5 h-11 pt-2">
 
                         <SidenavHeader v-if="navKind === 'home'" />
                         <SidenavHeaderAgent v-else-if="navKind === 'agent'" />
@@ -142,7 +143,7 @@ const navKind = computed(() => {
                     <SidenavNavAgent v-else-if="navKind === 'agent'" />
                 </div>
 
-                <div class="flex justify-between pt-2">
+                <div class="flex justify-between pt-2 z-25 bg-[var(--bg-base)] pb-2">
                     <div class="flex">
                         <button @click="openDialog(DialogType.Settings)"
                             class="flex items-center justify-center h-7 w-7 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg transition-colors text-[var(--text-secondary)] active:text-[var(--text-primary)]">