zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use floating ui for dropdowns

Browse Source
This commit is contained in:
Zoe
2026-02-28 22:22:55 -06:00
parent 82ab72dae3
commit e0914b684a
17 changed files with 437 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Sidenav/NavHome.vue
+64 -14
View File
@@ -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>