From e0914b684a8c8e639b667e21e422051fd8113288 Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Sat, 28 Feb 2026 22:22:55 -0600
Subject: [PATCH] refactor: use floating ui for dropdowns

---
 app/app.vue                            |   5 -
 app/components/Dropdown.vue            |  61 +++++++---
 app/components/FileSelector.vue        |  37 +++---
 app/components/ModelSelector.vue       | 155 +++++++++---------------
 app/components/Sidenav/Header.vue      |  11 +-
 app/components/Sidenav/HeaderAgent.vue |  74 +++++-------
 app/components/Sidenav/NavAgent.vue    |  94 ++++++++++++---
 app/components/Sidenav/NavHome.vue     |  78 +++++++++---
 app/components/Sidenav/index.vue       |   7 +-
 app/components/ThemeSwitcher.vue       |  46 +++----
 app/composables/useClickOutside.ts     |  18 ---
 app/composables/useDropdown.ts         |  77 ------------
 app/layouts/auth.vue                   |   5 +-
 app/layouts/default.vue                |  15 +--
 app/plugins/clickOutside.ts            |  18 +++
 bun.lock                               |  14 ++-
 package.json                           | 158 +++++++++++++------------
 17 files changed, 437 insertions(+), 436 deletions(-)
 delete mode 100644 app/composables/useClickOutside.ts
 delete mode 100644 app/composables/useDropdown.ts
 create mode 100644 app/plugins/clickOutside.ts

diff --git a/app/app.vue b/app/app.vue
index 6cb0318..4eb5a73 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -37,12 +37,7 @@ if (import.meta.client) {
 </template>
 
 <style>
-body {
-    height: 100%;
-}
-
 #__nuxt {
-    padding: 0.5rem;
     height: 100%;
     display: flex;
 }
diff --git a/app/components/Dropdown.vue b/app/components/Dropdown.vue
index 0a56c3b..3dbb6e5 100644
--- a/app/components/Dropdown.vue
+++ b/app/components/Dropdown.vue
@@ -1,30 +1,53 @@
-<script setup>
-import { useDropdown } from '~/composables/useDropdown';
-const { dropdownState, closeDropdown } = useDropdown();
-const menuRef = ref(null);
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useFloating, offset, flip, shift, autoUpdate, type Placement } from '@floating-ui/vue';
 
-const currentItems = computed(() => dropdownState.itemsFactory?.());
+const props = defineProps<{
+    placement?: Placement;
+    dropdownClass?: string;
+}>();
 
-useClickOutside(menuRef, closeDropdown);
+const isOpen = ref(false);
+const triggerRef = ref(null);
+const dropdownRef = ref(null);
+
+const setTriggerRef = (el: any) => {
+    if (el) {
+        // If it's a Vue component, get the DOM element via $el
+        triggerRef.value = el.$el ?? el;
+    }
+};
+
+const { floatingStyles } = useFloating(triggerRef, dropdownRef, {
+    placement: props.placement ?? 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(6), flip(), shift({ padding: 10 })],
+    transform: false,
+});
+
+const toggle = () => (isOpen.value = !isOpen.value);
+const close = () => (isOpen.value = false);
+
+defineExpose({ close });
+
+onMounted(() => {
+    console.log(triggerRef.value);
+})
 </script>
 
 <template>
+    <slot :setRef="setTriggerRef" :isOpen="isOpen" :toggle="toggle" />
+
     <Teleport to="body">
-        <Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+        <Transition enter-active-class="transition-[opacity,transform] duration-150 ease-out"
             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-active-class="transition-[opacity,transform] duration-100 ease-in"
             leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
-            <div v-if="dropdownState.open" ref="menuRef"
-                :style="{ top: `${dropdownState.y}px`, left: `${dropdownState.x}px`, width: dropdownState.options?.width || 'auto', minWidth: dropdownState.options?.minWidth || 'auto', maxWidth: dropdownState.options?.maxWidth || 'auto', transform: `translate(${dropdownState.options?.placement === 'right' ? '-100%' : dropdownState.options?.placement === 'center' ? '-50%' : '0'}, ${dropdownState.options?.verticality === 'ascending' ? 'calc(-100% - 0.25rem)' : '0.25rem'})` }"
-                class="flex flex-col gap-1 fixed z-[100] bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-lg p-1.5 shadow-xl">
-                <!-- Render your items based on activeMenu.content -->
-                <button v-for="item in currentItems" @click="item.onClick(); closeDropdown()" :disabled="item.disabled"
-                    class="disabled:opacity-50 disabled:cursor-not-allowed items-center gap-1 text-left px-3 py-1.5 text-sm hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
-                    :class="{ 'text-red-600 hover:bg-red-600/20': item.danger, 'text-primary bg-[var(--color-hover)]': item.active }">
-                    <span v-if="item.icon" :class="['w-4 h-4 shrink-0', item.icon]"></span>
-                    <span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ item.label
-                    }}</span>
-                </button>
+            <div v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="fixed z-9999" :class="dropdownClass">
+                <div v-click-outside="close"
+                    class="bg-[var(--bg-surface)] border border-[var(--color-border)] rounded-xl p-1.5 shadow-xl flex flex-col gap-1">
+                    <slot name="dropdown" :close="close" />
+                </div>
             </div>
         </Transition>
     </Teleport>
diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index d9cf874..834da3a 100644
--- a/app/components/FileSelector.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/components/ModelSelector.vue b/app/components/ModelSelector.vue
index f61d4b0..368268a 100644
--- a/app/components/ModelSelector.vue
+++ b/app/components/ModelSelector.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, nextTick } from 'vue';
+import { useFloating, offset, flip, shift, autoUpdate, size } from '@floating-ui/vue';
 import type { Entity } from '@triplit/client';
 import type schema from '#triplit/schema';
 import type { ModelWithProvider, ProviderWithModels } from '~/composables/useModels';
@@ -13,73 +14,43 @@ const props = defineProps<{
     providers: ProviderWithModels[];
 }>();
 
-const modelSelectorState = reactive({
-    open: false,
-    direction: 'up',
-    x: 0,
-    y: 0,
-});
 const selectedModel = defineModel<ModelWithProvider | null>();
 
-const dropdownButton = ref<HTMLButtonElement | null>(null);
+const isOpen = ref(false);
+const dropdownButton = ref<HTMLElement | null>(null);
+const dropdownContent = ref<HTMLElement | null>(null);
 const searchInputRef = ref<HTMLInputElement | null>(null);
-const dropdownMaxHeight = ref<number | undefined>(undefined);
 
 const navigatingWithKeyboard = ref(false);
 const focusedOptionId = ref<string | null>(null);
 
+const { floatingStyles, placement } = useFloating(dropdownButton, dropdownContent, {
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+        offset(6),
+        flip(),
+        shift({ padding: 10 }),
+        size({
+            apply({ availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                    maxHeight: `${Math.min(availableHeight - 20, 460)}px`,
+                });
+            },
+            padding: 10,
+        }),
+    ],
+    transform: false,
+});
+
+const transformOrigin = computed(() =>
+    placement.value.startsWith('top')
+        ? 'transform-origin-bottom-center'
+        : 'transform-origin-top-center'
+);
+
 const toggleDropdown = () => {
-    if (modelSelectorState.open) {
-        closeDropdown();
-        return;
-    }
-
-    console.log(modelSelectorState);
-    modelSelectorState.open = true;
-
-    setTimeout(() => {
-        document.body.addEventListener('click', closeDropdown);
-    });
-}
-
-const findContainer = (startingElement: HTMLElement): HTMLElement | null => {
-    let container: HTMLElement | null = startingElement;
-    while (container) {
-        const computedStyle = getComputedStyle(container);
-        if (computedStyle.overflow !== 'visible') {
-            return container;
-        }
-        container = container.parentElement;
-    }
-    return null;
-}
-
-const calculateDropdownPosition = () => {
-    if (!dropdownButton.value) return;
-
-    const buttonRect = dropdownButton.value.getBoundingClientRect();
-    const container = findContainer(dropdownButton.value) || document.body;
-
-    const containerRect = container.getBoundingClientRect();
-
-    const spaceAbove = buttonRect.top - containerRect.top;
-    const spaceBelow = containerRect.bottom - buttonRect.bottom;
-
-    if (spaceAbove > spaceBelow) {
-        modelSelectorState.direction = 'up';
-        dropdownMaxHeight.value = Math.min(spaceAbove - 20, 460);
-    } else {
-        modelSelectorState.direction = 'down';
-        dropdownMaxHeight.value = Math.min(spaceBelow - 20, 460);
-    }
-
-    modelSelectorState.x = buttonRect.left;
-    if (modelSelectorState.direction === 'up') {
-        const pageHeight = document.body.scrollHeight;
-        modelSelectorState.y = (pageHeight - buttonRect.top) + 6;
-    } else {
-        modelSelectorState.y = buttonRect.bottom + 6;
-    }
+    isOpen.value = !isOpen.value;
 };
 
 const searchQuery = ref('');
@@ -143,11 +114,10 @@ watch(() => props.providers, () => {
             selectedModel.value = firstEnabled;
         }
     }
-})
+});
 
-watch(() => modelSelectorState.open, (open) => {
+watch(isOpen, (open) => {
     if (open) {
-        calculateDropdownPosition();
         nextTick(() => {
             searchInputRef.value?.focus();
         });
@@ -158,9 +128,7 @@ watch(() => modelSelectorState.open, (open) => {
 });
 
 const closeDropdown = () => {
-    document.body.removeEventListener('click', closeDropdown);
-
-    modelSelectorState.open = false;
+    isOpen.value = false;
     navigatingWithKeyboard.value = false;
 };
 
@@ -198,7 +166,6 @@ const handleSearchKeyDown = (event: KeyboardEvent) => {
             break;
         case 'Enter':
             event.preventDefault();
-            console.log("enter", focusedOptionId.value, flatOptions.value[0]);
             if (focusedOptionId.value) {
                 const option = flatOptions.value.find(o => o.id === focusedOptionId.value);
                 if (option) {
@@ -223,56 +190,49 @@ const unbindShortcut = addShortcut(['ctrl', 'shift', 'm'], (event) => {
 
 onUnmounted(() => {
     unbindShortcut();
-})
+});
 </script>
 
 <template>
     <div role="button" @click="toggleDropdown()" ref="dropdownButton"
         class="cursor-pointer flex items-center w-fit select-none gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-200"
         :class="[
-            modelSelectorState.open
+            isOpen
                 ? 'bg-[var(--color-hover)] text-[var(--text-primary)]'
                 : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)]',
         ]">
         <ModelIcon v-if="selectedModel" class="text-white" :avatar="true" variant="color"
             :model-id="selectedModel.externalId" size="22" />
-        <span class="max-w-fulltruncate">
+        <span class="max-w-full truncate">
             {{ selectedModel ? selectedModel.name : 'Select a model' }}
         </span>
         <span class="i-mynaui-chevron-down text-3.5 transition-transform duration-200"
-            :class="{ 'rotate-180': modelSelectorState.open }"></span>
+            :class="{ 'rotate-180': isOpen }"></span>
     </div>
 
-
     <Teleport to="body">
-        <Transition enter-active-class="transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+        <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-all duration-100 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+            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">
             <KeepAlive>
-                <div v-if="modelSelectorState.open" ref="dropdownContentRef" role="listbox" aria-label="Select model"
-                    :aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined" :style="{
-                        position: 'absolute',
-                        top: modelSelectorState.direction === 'down' ? `${modelSelectorState.y}px` : '',
-                        bottom: modelSelectorState.direction === 'up' ? `${modelSelectorState.y}px` : '',
-                        left: `${modelSelectorState.x}px`,
-                        maxHeight: dropdownMaxHeight ? `${dropdownMaxHeight}px` : '460px',
-                        height: 'auto'
-                    }"
-                    class="absolute left-0 max-w-[420px] w-full flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden z-50"
-                    :class="modelSelectorState.direction === 'up' ? 'transform-origin-bottom-center' : 'transform-origin-top-center'">
-                    <div>
-                        <div class="relative">
-                            <span
-                                class="i-mynaui-search absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]"></span>
-                            <input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
-                                @keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
-                                class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
-                        </div>
+                <div v-if="isOpen" ref="dropdownContent" role="listbox" aria-label="Select model"
+                    :aria-activedescendant="focusedOptionId ? `model-option-${focusedOptionId}` : undefined"
+                    :style="floatingStyles"
+                    class="fixed z-50 max-w-[420px] min-w-[280px] flex flex-col rounded-xl border border-[var(--color-border)] bg-[var(--bg-surface)] shadow-lg overflow-hidden"
+                    :class="transformOrigin">
+
+                    <div class="relative">
+                        <span
+                            class="i-mynaui-search absolute left-3 top-1/2 -translate-y-1/2 text-4 text-[var(--text-secondary)]"></span>
+                        <input ref="searchInputRef" v-model="searchQuery" autocomplete="off" name="search"
+                            @keydown="handleSearchKeyDown" type="text" placeholder="Search models..."
+                            class="placeholder:text-[var(--text-tertiary)] w-full pl-9 pr-3 py-2 text-sm text-[var(--text-primary)] bg-transparent placeholder-[var(--text-secondary)] outline-none" />
                     </div>
 
-                    <div
-                        class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none max-w-full overflow-hidden">
+                    <div v-click-outside="closeDropdown"
+                        class="flex-1 overflow-y-auto [scrollbar-width:thin] py-2 select-none">
                         <div v-if="filteredProviders.length === 0"
                             class="px-4 py-8 text-center text-sm text-[var(--text-secondary)]">
                             No models found
@@ -283,7 +243,7 @@ onUnmounted(() => {
                                 class="px-4 py-1.5 text-[13px] font-medium text-[var(--text-secondary)] capitalize tracking-wider flex justify-between">
                                 {{ provider.name }}
                                 <button
-                                    @click="modelSelectorState.open = true; openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
+                                    @click="openDialog(DialogType.Settings, undefined, { page: 'providers', params: provider.id })"
                                     class="flex h-5 w-5 items-center justify-center hover:bg-[var(--color-hover)] rounded transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                                     <span class="i-mynaui-cog-four text-4"></span>
                                 </button>
@@ -291,8 +251,7 @@ onUnmounted(() => {
 
                             <button v-for="model in provider.models.filter(m => m.enabled).sort(sortByReleaseDate)"
                                 :key="model.id" :id="`model-option-${model.id}`" role="option"
-                                :aria-selected="focusedOptionId === model.id"
-                                @click="selectModel(model, provider); modelSelectorState.open = false"
+                                :aria-selected="focusedOptionId === model.id" @click="selectModel(model, provider)"
                                 class="text-white w-full min-h-9 px-4 py-2 flex items-center justify-between hover:bg-[var(--color-hover)] transition-colors duration-150"
                                 :class="{
                                     'bg-[var(--color-hover)]': selectedModel?.id === model.id,
@@ -306,7 +265,7 @@ onUnmounted(() => {
                     <div class="p-1 border-t border-[var(--color-border)]">
                         <button
                             class="flex w-full items-center gap-2 px-3 py-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
-                            @click="modelSelectorState.open = false; openDialog(DialogType.Settings, undefined, { page: 'providers' });">
+                            @click="closeDropdown(); openDialog(DialogType.Settings, undefined, { page: 'providers' });">
                             <span class="i-mynaui-cog-four text-4.5"></span>
                             <span>Manage Providers</span>
                             <span class="i-mynaui-arrow-right text-4 ml-auto"></span>
diff --git a/app/components/Sidenav/Header.vue b/app/components/Sidenav/Header.vue
index 9b9b3bb..cc33cca 100644
--- a/app/components/Sidenav/Header.vue
+++ b/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>
diff --git a/app/components/Sidenav/HeaderAgent.vue b/app/components/Sidenav/HeaderAgent.vue
index c5a776f..1b3fcca 100644
--- a/app/components/Sidenav/HeaderAgent.vue
+++ b/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>
\ No newline at end of file
diff --git a/app/components/Sidenav/NavAgent.vue b/app/components/Sidenav/NavAgent.vue
index 27edaaf..0862e9d 100644
--- a/app/components/Sidenav/NavAgent.vue
+++ b/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)] -->
\ No newline at end of file
diff --git a/app/components/Sidenav/NavHome.vue b/app/components/Sidenav/NavHome.vue
index b9c145b..6f6ef47 100644
--- a/app/components/Sidenav/NavHome.vue
+++ b/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>
diff --git a/app/components/Sidenav/index.vue b/app/components/Sidenav/index.vue
index 124b7c0..b0a7806 100644
--- a/app/components/Sidenav/index.vue
+++ b/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)]">
diff --git a/app/components/ThemeSwitcher.vue b/app/components/ThemeSwitcher.vue
index fdd2fb4..d52fe92 100644
--- a/app/components/ThemeSwitcher.vue
+++ b/app/components/ThemeSwitcher.vue
@@ -8,7 +8,6 @@ const props = defineProps<{
 type Theme = 'light' | 'dark' | 'system';
 
 const { updateSettings, settings } = await useUserSettings();
-const { openDropdown, dropdownState, closeDropdown } = useDropdown();
 
 const selectTheme = (colorScheme: Theme) => {
     updateSettings({ appearance: { colorScheme } });
@@ -23,27 +22,32 @@ const themeOptions: DropdownItem[] = [
 const currentOption = computed(
     () => themeOptions.find((option) => option.id === settings.value.appearance.colorScheme) || themeOptions[2],
 );
-
-const toggleDropdown = (e: MouseEvent) => {
-    e.stopPropagation();
-
-    if (dropdownState.open) {
-        closeDropdown();
-        return;
-    }
-
-    openDropdown(e, () => themeOptions, { verticality: 'ascending', placement: 'right' });
-}
 </script>
 
 <template>
-    <button aria-label="Open theme switcher" @click="toggleDropdown"
-        class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
-        :class="{
-            'h-7 w-7 text-5': size === 'small',
-            'h-9 w-9 text-6': size === 'medium',
-            'h-11 w-11 text-7': size === 'large',
-        }">
-        <span :class="['pointer-events-none', currentOption!.icon]"></span>
-    </button>
+    <Dropdown placement="top-end" dropdown-class="min-w-35">
+        <template #default="{ toggle, setRef }">
+            <button :ref="setRef" @click="toggle"
+                class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
+                :class="{
+                    'h-7 w-7 text-5': size === 'small',
+                    'h-9 w-9 text-6': size === 'medium',
+                    'h-11 w-11 text-7': size === 'large',
+                }">
+                <span :class="['pointer-events-none', currentOption!.icon]"></span>
+            </button>
+        </template>
+
+        <template #dropdown="{ close }">
+            <button v-for="option in themeOptions" :key="option.id" @click="option.onClick!(); close()"
+                class="text-left px-3 py-1.5 items-center gap-1 hover:bg-[var(--color-hover)] rounded-lg transition-colors duration-150"
+                :class="{
+                    'bg-[var(--color-hover)]': option.id === currentOption?.id,
+                }">
+                <span class="text-4.5" :class="option.icon"></span>
+                <span class="text-sm whitespace-nowrap text-ellipsis max-w-full overflow-hidden">{{ option.label
+                }}</span>
+            </button>
+        </template>
+    </Dropdown>
 </template>
\ No newline at end of file
diff --git a/app/composables/useClickOutside.ts b/app/composables/useClickOutside.ts
deleted file mode 100644
index 8f6fd51..0000000
--- a/app/composables/useClickOutside.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Ref } from 'vue';
-import { onMounted, onUnmounted } from 'vue';
-
-export const useClickOutside = (target: Ref<HTMLElement | null>, callback: () => void) => {
-    const onClick = (event: MouseEvent) => {
-        if (target.value && !target.value.contains(event.target as Node)) {
-            callback();
-        }
-    };
-
-    onMounted(() => {
-        document.addEventListener('click', onClick);
-    });
-
-    onUnmounted(() => {
-        document.removeEventListener('click', onClick);
-    });
-};
diff --git a/app/composables/useDropdown.ts b/app/composables/useDropdown.ts
deleted file mode 100644
index 20e20c2..0000000
--- a/app/composables/useDropdown.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { DropdownItem } from "~/types/dropdown"
-
-interface DropdownOptions {
-    placement?: 'right' | 'left' | 'center';
-    verticality?: 'ascending' | 'descending';
-    width?: string | number;
-    minWidth?: string;
-    maxWidth?: string;
-}
-
-interface DropdownState {
-    open: boolean;
-    x: number;
-    y: number;
-    itemsFactory: (() => DropdownItem[]) | null;
-    options: DropdownOptions | null;
-}
-
-const dropdownState = reactive<DropdownState>({
-    open: false,
-    x: 0,
-    y: 0,
-    itemsFactory: null,
-    options: null,
-})
-
-export const useDropdown = () => {
-    const openDropdown = (e: MouseEvent, itemsFactory: () => DropdownItem[], options?: DropdownOptions) => {
-        // TODO: take in placement logic and prefered verticality, and measure the space
-        // available in the direction of the prefered verticality, and if it doesnt fit
-        // in the direction of the placement, flip the placement
-        const rect = (e.target as HTMLElement).getBoundingClientRect()
-
-        dropdownState.x = rect.left
-        dropdownState.y = rect.bottom
-        if (options) {
-            switch (options.placement) {
-                case 'right':
-                    dropdownState.x = rect.right
-                    dropdownState.y = rect.bottom
-                    break;
-                case 'left':
-                    dropdownState.x = rect.left
-                    dropdownState.y = rect.bottom
-                    break;
-                case 'center':
-                    dropdownState.x = rect.left + rect.width / 2
-                    dropdownState.y = rect.bottom
-                    break;
-            }
-
-            switch (options.verticality) {
-                case 'ascending':
-                    dropdownState.y = rect.top;
-                    break;
-                case 'descending':
-                    dropdownState.y = rect.bottom;
-                    break;
-            }
-        }
-        dropdownState.itemsFactory = itemsFactory
-        dropdownState.options = options ?? null
-        dropdownState.open = true
-    }
-
-    const closeDropdown = () => {
-        dropdownState.open = false
-        dropdownState.itemsFactory = null
-        dropdownState.options = null
-    }
-
-    return {
-        dropdownState,
-        openDropdown,
-        closeDropdown,
-    }
-}
diff --git a/app/layouts/auth.vue b/app/layouts/auth.vue
index 20d4564..2283f51 100644
--- a/app/layouts/auth.vue
+++ b/app/layouts/auth.vue
@@ -14,14 +14,11 @@ preloadRouteComponents('/');
 
 <template>
     <main
-        class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
+        class="p-2 bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
         <div class="flex-1 overflow-y-auto">
             <slot />
         </div>
     </main>
-    <ClientOnly>
-        <Dropdown />
-    </ClientOnly>
 </template>
 
 <style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 35de97b..809fe64 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -20,14 +20,15 @@ useHead({
 
 <template>
     <Sidenav />
-    <main
-        class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
-        <div class="flex-1 overflow-y-auto">
-            <slot />
-        </div>
-    </main>
+    <div class="p-2 w-full h-full">
+        <main
+            class="bg-[var(--bg-surface)] flex flex-col h-full w-full border border-solid border-[var(--color-border)] rounded-lg overflow-hidden">
+            <div class="flex-1 overflow-y-auto">
+                <slot />
+            </div>
+        </main>
+    </div>
     <ClientOnly>
         <Dialog />
-        <Dropdown />
     </ClientOnly>
 </template>
diff --git a/app/plugins/clickOutside.ts b/app/plugins/clickOutside.ts
new file mode 100644
index 0000000..fcd250b
--- /dev/null
+++ b/app/plugins/clickOutside.ts
@@ -0,0 +1,18 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.directive('click-outside', {
+        mounted(el: any, binding: any) {
+            el.clickOutsideEvent = (event: Event) => {
+                if (!el.contains(event.target as Node)) {
+                    binding.value();
+                }
+            };
+
+            setTimeout(() => {
+                document.addEventListener("click", el.clickOutsideEvent);
+            });
+        },
+        unmounted(el: any) {
+            document.removeEventListener('click', el.clickOutsideEvent);
+        }
+    });
+});
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index c8858dc..b0f6f91 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,6 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
+  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "veridian",
@@ -12,6 +12,7 @@
         "@aws-sdk/client-s3": "^3.1000.0",
         "@aws-sdk/s3-request-presigner": "^3.1000.0",
         "@daveyplate/better-auth-triplit": "^0.2.2",
+        "@floating-ui/vue": "^1.1.10",
         "@iconify-json/mynaui": "^1.2.17",
         "@nuxt/fonts": "0.14.0",
         "@nuxt/hints": "1.0.0-alpha.5",
@@ -62,6 +63,7 @@
     "@parcel/watcher",
     "esbuild",
     "core-js",
+    "vue-demi",
     "@sentry/cli",
   ],
   "patchedDependencies": {
@@ -311,6 +313,14 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.23.1", "", { "os": "win32", "cpu": "x64" }, "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg=="],
 
+    "@floating-ui/core": ["@floating-ui/core@1.7.4", "", { "dependencies": { "@floating-ui/utils": "^0.2.10" } }, "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.5", "", { "dependencies": { "@floating-ui/core": "^1.7.4", "@floating-ui/utils": "^0.2.10" } }, "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
+
+    "@floating-ui/vue": ["@floating-ui/vue@1.1.10", "", { "dependencies": { "@floating-ui/dom": "^1.7.5", "@floating-ui/utils": "^0.2.10", "vue-demi": ">=0.13.0" } }, "sha512-vdf8f6rHnFPPLRsmL4p12wYl+Ux4mOJOkjzKEMYVnwdf7UFdvBtHlLvQyx8iKG5vhPRbDRgZxdtpmyigDPjzYg=="],
+
     "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="],
 
     "@hono/node-ws": ["@hono/node-ws@1.3.0", "", { "dependencies": { "ws": "^8.17.0" }, "peerDependencies": { "@hono/node-server": "^1.19.2", "hono": "^4.6.0" } }, "sha512-ju25YbbvLuXdqBCmLZLqnNYu1nbHIQjoyUqA8ApZOeL1k4skuiTcw5SW77/5SUYo2Xi2NVBJoVlfQurnKEp03Q=="],
@@ -2467,6 +2477,8 @@
 
     "vue-bundle-renderer": ["vue-bundle-renderer@2.2.0", "", { "dependencies": { "ufo": "^1.6.1" } }, "sha512-sz/0WEdYH1KfaOm0XaBmRZOWgYTEvUDt6yPYaUzl4E52qzgWLlknaPPTTZmp6benaPTlQAI/hN1x3tAzZygycg=="],
 
+    "vue-demi": ["vue-demi@0.14.10", "", { "peerDependencies": { "@vue/composition-api": "^1.0.0-rc.1", "vue": "^3.0.0-0 || ^2.6.0" }, "optionalPeers": ["@vue/composition-api"], "bin": { "vue-demi-fix": "bin/vue-demi-fix.js", "vue-demi-switch": "bin/vue-demi-switch.js" } }, "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg=="],
+
     "vue-devtools-stub": ["vue-devtools-stub@0.1.0", "", {}, "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ=="],
 
     "vue-flow-layout": ["vue-flow-layout@0.2.0", "", {}, "sha512-zKgsWWkXq0xrus7H4Mc+uFs1ESrmdTXlO0YNbR6wMdPaFvosL3fMB8N7uTV308UhGy9UvTrGhIY7mVz9eN+L0Q=="],
diff --git a/package.json b/package.json
index 3ada6a9..20a2ea5 100644
--- a/package.json
+++ b/package.json
@@ -1,80 +1,82 @@
 {
-    "name": "veridian",
-    "type": "module",
-    "private": true,
-    "scripts": {
-        "build": "nuxt build",
-        "triplit": "triplit dev -s sqlite",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
-    },
-    "dependencies": {
-        "@ai-sdk/cerebras": "^2.0.34",
-        "@ai-sdk/cohere": "^3.0.21",
-        "@ai-sdk/google": "^3.0.29",
-        "@ai-sdk/openai-compatible": "^2.0.30",
-        "@aws-sdk/client-s3": "^3.1000.0",
-        "@aws-sdk/s3-request-presigner": "^3.1000.0",
-        "@daveyplate/better-auth-triplit": "^0.2.2",
-        "@iconify-json/mynaui": "^1.2.17",
-        "@nuxt/fonts": "0.14.0",
-        "@nuxt/hints": "1.0.0-alpha.5",
-        "@nuxt/icon": "2.2.0",
-        "@openrouter/ai-sdk-provider": "^2.2.3",
-        "@sentry/nuxt": "^10.39.0",
-        "@tanstack/vue-virtual": "^3.13.18",
-        "@triplit/client": "^1.0.50",
-        "@triplit/server": "^1.1.8",
-        "@types/big.js": "^6.2.2",
-        "ai": "^6.0.89",
-        "ai-sdk-ollama": "^3.7.1",
-        "better-auth": "^1.4.18",
-        "big.js": "^7.0.1",
-        "comlink": "^4.4.2",
-        "glob": "^13.0.5",
-        "nanoid": "^5.1.6",
-        "nuxt": "^4.3.1",
-        "rehype-katex": "^7.0.1",
-        "remark-breaks": "^4.0.0",
-        "remark-gfm": "^4.0.1",
-        "remark-math": "^6.0.0",
-        "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.1.2",
-        "shiki": "^3.22.0",
-        "triplit-nuxt": "0.3.1-prerelease.5",
-        "unified": "^11.0.5",
-        "vue": "^3.5.28",
-        "vue-router": "^5.0.3",
-        "zod": "^4.3.6"
-    },
-    "devDependencies": {
-        "@iconify-json/logos": "^1.2.10",
-        "@iconify-json/svg-spinners": "^1.2.4",
-        "@iconify-json/tabler": "^1.2.26",
-        "@triplit/cli": "^1.0.61",
-        "@types/jsonwebtoken": "^9.0.10",
-        "@types/node": "^25.3.0",
-        "@unocss/nuxt": "^66.6.0",
-        "jsonwebtoken": "^9.0.3",
-        "knip": "^5.84.1",
-        "typescript": "^5.9.3",
-        "unocss": "^66.6.0"
-    },
-    "trustedDependencies": [
-        "@parcel/watcher",
-        "@sentry/cli",
-        "core-js",
-        "esbuild",
-        "unrs-resolver"
-    ],
-    "patchedDependencies": {
-        "@triplit/db@1.1.10": "patches/@triplit%2Fdb@1.1.10.patch",
-        "@triplit/client@1.0.50": "patches/@triplit%2Fclient@1.0.50.patch"
-    },
-    "overrides": {
-        "@vercel/nft": "^0.27.4",
-        "vite": "8.0.0-beta.15"
-    }
+  "name": "veridian",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "triplit": "triplit dev -s sqlite",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@ai-sdk/cerebras": "^2.0.34",
+    "@ai-sdk/cohere": "^3.0.21",
+    "@ai-sdk/google": "^3.0.29",
+    "@ai-sdk/openai-compatible": "^2.0.30",
+    "@aws-sdk/client-s3": "^3.1000.0",
+    "@aws-sdk/s3-request-presigner": "^3.1000.0",
+    "@daveyplate/better-auth-triplit": "^0.2.2",
+    "@floating-ui/vue": "^1.1.10",
+    "@iconify-json/mynaui": "^1.2.17",
+    "@nuxt/fonts": "0.14.0",
+    "@nuxt/hints": "1.0.0-alpha.5",
+    "@nuxt/icon": "2.2.0",
+    "@openrouter/ai-sdk-provider": "^2.2.3",
+    "@sentry/nuxt": "^10.39.0",
+    "@tanstack/vue-virtual": "^3.13.18",
+    "@triplit/client": "^1.0.50",
+    "@triplit/server": "^1.1.8",
+    "@types/big.js": "^6.2.2",
+    "ai": "^6.0.89",
+    "ai-sdk-ollama": "^3.7.1",
+    "better-auth": "^1.4.18",
+    "big.js": "^7.0.1",
+    "comlink": "^4.4.2",
+    "glob": "^13.0.5",
+    "nanoid": "^5.1.6",
+    "nuxt": "^4.3.1",
+    "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "shiki": "^3.22.0",
+    "triplit-nuxt": "0.3.1-prerelease.5",
+    "unified": "^11.0.5",
+    "vue": "^3.5.28",
+    "vue-router": "^5.0.3",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@iconify-json/logos": "^1.2.10",
+    "@iconify-json/svg-spinners": "^1.2.4",
+    "@iconify-json/tabler": "^1.2.26",
+    "@triplit/cli": "^1.0.61",
+    "@types/jsonwebtoken": "^9.0.10",
+    "@types/node": "^25.3.0",
+    "@unocss/nuxt": "^66.6.0",
+    "jsonwebtoken": "^9.0.3",
+    "knip": "^5.84.1",
+    "typescript": "^5.9.3",
+    "unocss": "^66.6.0"
+  },
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "@sentry/cli",
+    "core-js",
+    "esbuild",
+    "unrs-resolver",
+    "vue-demi"
+  ],
+  "patchedDependencies": {
+    "@triplit/db@1.1.10": "patches/@triplit%2Fdb@1.1.10.patch",
+    "@triplit/client@1.0.50": "patches/@triplit%2Fclient@1.0.50.patch"
+  },
+  "overrides": {
+    "@vercel/nft": "^0.27.4",
+    "vite": "8.0.0-beta.15"
+  }
 }
\ No newline at end of file