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/HeaderAgent.vue
+30 -44
View File
@@ -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>