veridian/app/components/Sidenav/NavHome.vue

<script setup lang="ts">
import { useFloating, offset, flip, shift, autoUpdate, hide } from '@floating-ui/vue';
import { DialogType } from '~/composables/useDialog';

const { openDialog } = useDialog();
const { agents, createAgent, deleteAgent, updateAgent } = await useAgents();
const agentsOpen = ref(true);
const creatingAgent = ref(false);

const dropdownOpen = ref(false);
const dropdownTrigger = ref<HTMLElement | null>(null);
const dropdownContent = ref(null);
const activeMenuAgentId = ref<string | null>(null);

const navRef = ref<HTMLElement | null>(null);
const toggleAgentsList = () => {
    agentsOpen.value = !agentsOpen.value;
};

const newAgent = async () => {
    await createAgent();
};

const renameAgentId = ref<string | null>(null);
const newAgentName = ref('');

const startRename = (agentId: string, currentName: string) => {
    renameAgentId.value = agentId;
    newAgentName.value = currentName;
    nextTick(() => {
        const input = document.getElementById('agent-rename-input') as HTMLInputElement | null;
        if (input) {
            input.focus();
        }
    })
};

const saveRename = async () => {
    updateAgent(renameAgentId.value!, { name: newAgentName.value.trim() });
    cancelRename();
};

const cancelRename = () => {
    renameAgentId.value = null;
    newAgentName.value = '';
};

const { floatingStyles, placement, middlewareData } = useFloating(dropdownTrigger, dropdownContent, {
    placement: 'bottom-end',
    whileElementsMounted: autoUpdate,
    middleware: [offset(6), flip(), shift({ padding: 10 }), hide()],
    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(a => a.id === activeMenuAgentId.value)
);

const handleNavClick = (e: MouseEvent) => {
    const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
    if (!trigger) return;

    const agentId = trigger.dataset.agentId || (trigger.closest('[data-agent-id]') as HTMLElement | null)?.dataset.agentId;
    if (!agentId) return;

    const action = trigger.dataset.action;
    switch (action) {
        case 'navigate':
            if (e.metaKey || e.ctrlKey || e.shiftKey) return;
            e.preventDefault();
            return navigateTo(`/agent/${agentId}`);

        case 'toggle-dropdown':
            e.preventDefault();
            e.stopPropagation();
            if (activeMenuAgentId.value === agentId && dropdownOpen.value) {
                closeDropdown();
                return;
            }

            activeMenuAgentId.value = agentId;
            dropdownTrigger.value = trigger;
            dropdownOpen.value = true;
            break;
    }
}

onMounted(() => {
    // simply preload the topic page
    preloadRouteComponents(`/agent/42`);
})
</script>

<template>
    <nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
        <SidenavItem @click="openDialog(DialogType.QuickSwitcher)" name="Search" icon="i-mynaui-search">
            <div class="flex items-center gap-1">
                <span class="flex bg-[var(--bg-container)] px-1 rounded border border-[var(--color-border)]">
                    <kbd class="font-mono text-[10px] case-capital">ctrl</kbd>
                </span>
                <span class="flex bg-[var(--bg-container)] px-1 rounded border border-[var(--color-border)]">
                    <kbd class="font-mono text-[10px] case-capital">k</kbd>
                </span>
            </div>
        </SidenavItem>
        <SidenavItem to="/" name="Home" icon="i-mynaui-home" active />
        <SidenavItem to="/resources" name="Resources" icon="i-tabler-books" />

        <!-- Header Toggle -->
        <button
            class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg @hover:bg-[var(--color-hover)] transition-colors w-full"
            @click="toggleAgentsList">
            <span class="md:text-sm">Agents</span>
            <span
                class="i-mynaui-chevron-down inline-block text-5 md:text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
                :class="{ '-rotate-90': !agentsOpen }"></span>
        </button>

        <!-- Animated Section -->
        <Collapsible :is-open="agentsOpen">
            <div class="flex flex-col transform-origin-top pt-1 pb-1 px-1">
                <button @click="newAgent" :disabled="creatingAgent"
                    class="disabled:cursor-wait flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg md:text-sm text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
                    <div class="h-9 w-9 md:h-7 md:w-7 flex items-center justify-center">
                        <span v-if="creatingAgent" class="i-svg-spinners-ring-resize text-5 md:text-4"></span>
                        <span v-else class="i-mynaui-plus-solid text-5 md:text-4"></span>
                    </div>
                    <span>New Agent</span>
                </button>

                <div @click="handleNavClick" class="flex flex-col">
                    <RowVirtualizerFixed :scroll-element="navRef" key-field="id" :items="agents" :prerender="50"
                        :item-size="40" :overscan="20">
                        <template v-slot="{ item: agent }">
                            <a data-action="navigate" :data-agent-id="agent.id" :href="`/agent/${agent.id}`"
                                :aria-label="agent.name"
                                class="mt-1 group px-2 decoration-none flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9 text-[var(--text-secondary)] @hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] focus:text-[var(--text-primary)]">
                                <input v-if="renameAgentId === agent.id" id="agent-rename-input" v-model="newAgentName"
                                    @keydown.prevent.enter="saveRename" @keydown.escape="cancelRename"
                                    @blur="saveRename"
                                    class="flex-1 bg-transparent border-none outline-none md:text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
                                <span v-else
                                    class="md:text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                    {{ agent.name }}
                                </span>

                                <div data-action="toggle-dropdown"
                                    class="text-[var(--text-secondary)] shrink-0 md: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,background-color] duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
                                    <span class="pointer-events-none h-6 w-6 md:h-4.5 md:w-4.5 i-tabler-dots"></span>
                                </div>
                            </a>
                        </template>
                    </RowVirtualizerFixed>
                </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,
                    visibility: middlewareData.hide?.referenceHidden
                        ? 'hidden'
                        : 'visible',
                }" 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>