veridian/app/components/Sidenav/NavHome.vue

<script setup lang="ts">
const { agents, createAgent } = useAgents();
const agentsOpen = ref(true);
const creatingAgent = ref(false);

const { openDropdown, dropdownState, closeDropdown } = useDropdown();

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

const newAgent = async () => {
    creatingAgent.value = true;
    try {
        const agent = await createAgent();
        return navigateTo(`/agent/${agent.id}`);
    } finally {
        creatingAgent.value = false;
    }
};

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 (dropdownState.open) {
                closeDropdown();
                return;
            }

            // openDropdown(e, () => {
            //     const agent = agents.value.find(a => a.id === agentId);
            //     if (agent) {
            //         const isRenaming = activeAutoRenames.has(agentId) && agent?.renaming;

            //         return [
            //             isRenaming
            //                 ? { label: 'Cancel Auto Rename', onClick: () => cancelAutoRename(agentId) }
            //                 : { label: 'Auto Rename', onClick: () => autoRenameAgent(agentId) },
            //             { label: 'Rename', disabled: isRenaming ?? false, onClick: () => startRename(agentId, agent?.name || '') },
            //             { label: 'Delete', danger: true, onClick: () => deleteAgent(agentId) }
            //         ];
            //     }

            //     return [];
            // }, { minWidth: '120px', placement: 'right' });
            break;
    }
}

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

<template>
    <nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
        <SidenavItem name="Search" icon="mynaui:search" />
        <SidenavItem to="/" name="Home" icon="mynaui:home" />

        <!-- 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="text-sm">Agents</span>
            <Icon name="mynaui:chevron-down" class="w-4 h-4 transition-transform duration-200"
                :class="{ '-rotate-90': !agentsOpen }" />
        </button>

        <!-- Animated Section -->
        <Collapsible :is-open="agentsOpen">
            <div class="mt-1 gap-1 flex flex-col transform-origin-top pt-1 pb-1 px-1">
                <button @click="newAgent" :disabled="creatingAgent"
                    class="flex items-center gap-2 px-1 h-9 shrink-0 rounded-lg text-sm text-[var(--text-secondary)] hover:bg-[var(--color-hover)] transition-colors disabled:opacity-50 w-full">
                    <div class="h-7 w-7 flex items-center justify-center">
                        <Icon v-if="creatingAgent" class="text-4.5" name="svg-spinners:ring-resize" />
                        <Icon v-else class="text-4.5" name="mynaui:plus" />
                    </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="renameTopicId === topic.id && !topic.renaming" id="topic-rename-input"
                                    v-model="newTopicName" @keydown.enter="saveRename" @keydown.escape="cancelRename"
                                    @blur="saveRename"
                                    class="flex-1 bg-transparent border-none outline-none text-sm font-medium text-[var(--text-primary)] px-0 min-w-0" />
                                <div v-else-if="topic.renaming" class="flex w-full">
                                    <Icon name="svg-spinners:3-dots-fade" class="text-6" />
                                </div> -->
                                <span class="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 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>
                                </div>
                            </a>
                        </template>
                    </RowVirtualizerFixed>
                </div>
            </div>
        </Collapsible>
    </nav>
</template>