From da0b652b2917d774618f8c0e6b89b53bcfbdf28e Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Mon, 2 Mar 2026 13:42:54 -0600
Subject: [PATCH] fix: sidebar styles and search button

---
 app/components/ChatInput.vue           |  3 +
 app/components/Sidenav/HeaderAgent.vue |  2 +-
 app/components/Sidenav/NavAgent.vue    | 81 +++++++++++++-------------
 app/components/Sidenav/NavHome.vue     |  6 +-
 app/components/Sidenav/index.vue       |  4 +-
 app/composables/useChat.ts             |  1 +
 6 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/app/components/ChatInput.vue b/app/components/ChatInput.vue
index 594b123..98452c9 100644
--- a/app/components/ChatInput.vue
+++ b/app/components/ChatInput.vue
@@ -116,6 +116,9 @@ const handleKeyDown = async (event: KeyboardEvent) => {
 
             textAreaValue.value =
                 textAreaValue.value.slice(0, cursorPosition) + '\n' + textAreaValue.value.slice(cursorPosition);
+            nextTick(() => {
+                inputRef.value!.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
+            });
             return;
         }
         event.preventDefault();
diff --git a/app/components/Sidenav/HeaderAgent.vue b/app/components/Sidenav/HeaderAgent.vue
index 1b3fcca..30dff21 100644
--- a/app/components/Sidenav/HeaderAgent.vue
+++ b/app/components/Sidenav/HeaderAgent.vue
@@ -21,7 +21,7 @@ const { isHovered } = useSidenavContext();
         <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">
+                    class="shrink-1 max-w-full min-w-0 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)]']">
diff --git a/app/components/Sidenav/NavAgent.vue b/app/components/Sidenav/NavAgent.vue
index 0862e9d..001d9e7 100644
--- a/app/components/Sidenav/NavAgent.vue
+++ b/app/components/Sidenav/NavAgent.vue
@@ -185,53 +185,50 @@ onMounted(() => {
 
 <template>
     <nav ref="navRef"
-        class="max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
+        class="flex flex-col gap-1 max-h-full h-full overflow-auto [scrollbar-color:#888_transparent] [scrollbar-width:thin] [scrollbar-gutter:stable]">
 
         <!-- Agent Info Link -->
-        <div class="mt-2 flex flex-col">
-            <SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
-                :active="route.path.endsWith('/profile')" />
+        <SidenavItem :to="`/agent/${agentId}/profile`" name="Agent Info" icon="i-mynaui-info-square"
+            :active="route.path.endsWith('/profile')" />
 
-            <!-- Topics Section -->
-            <button @click="topicsOpen = !topicsOpen"
-                class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
-                <span class="text-sm font-medium">Topics</span>
-                <span
-                    class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
-                    :class="topicsOpen ? '' : '-rotate-90'"></span>
-            </button>
+        <!-- Topics Section -->
+        <button @click="topicsOpen = !topicsOpen"
+            class="flex items-center justify-between gap-2 px-2 py-2 rounded-lg bg-transparent hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors w-full text-left">
+            <span class="text-sm font-medium">Topics</span>
+            <span
+                class="i-mynaui-chevron-down inline-block text-4 transition-transform duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+                :class="topicsOpen ? '' : '-rotate-90'"></span>
+        </button>
 
-            <Collapsible :is-open="topicsOpen">
-                <div @click="handleNavClick" class="mt-1 flex flex-col transform-origin-center-top">
-                    <RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
-                        :item-size="40" :overscan="20">
-                        <template v-slot="{ item: topic }">
-                            <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
-                                :href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.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)]"
-                                :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
-                                <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">
-                                    <span class="i-svg-spinners-3-dots-fade text-6"></span>
-                                </div>
-                                <span v-else
-                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
-                                    {{ topic.name }}
-                                </span>
+        <Collapsible :is-open="topicsOpen">
+            <div @click="handleNavClick" class="flex flex-col transform-origin-center-top">
+                <RowVirtualizerFixed :scroll-element="navRef" key-field="id" :prerender="50" :items="topics"
+                    :item-size="40" :overscan="20">
+                    <template v-slot="{ item: topic }">
+                        <a :key="topic.id" data-action="navigate" :data-topic-id="topic.id"
+                            :href="`/agent/${agentId}/topic/${topic.id}`" :aria-label="topic.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)]"
+                            :class="{ 'bg-[var(--color-hover)]': route.params.topicId === topic.id }">
+                            <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">
+                                <span class="i-svg-spinners-3-dots-fade text-6"></span>
+                            </div>
+                            <span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
+                                {{ topic.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="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
-                                </div>
-                            </a>
-                        </template>
-                    </RowVirtualizerFixed>
-                </div>
-            </Collapsible>
-        </div>
+                            <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="pointer-events-none h-4.5 w-4.5 i-tabler-dots"></span>
+                            </div>
+                        </a>
+                    </template>
+                </RowVirtualizerFixed>
+            </div>
+        </Collapsible>
 
         <Teleport to="body">
             <Transition
diff --git a/app/components/Sidenav/NavHome.vue b/app/components/Sidenav/NavHome.vue
index 6f6ef47..36fec80 100644
--- a/app/components/Sidenav/NavHome.vue
+++ b/app/components/Sidenav/NavHome.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useFloating, offset, flip, shift, autoUpdate } from '@floating-ui/vue';
+import type { DialogType } from '~/composables/useDialog';
 
+const { openDialog } = useDialog();
 const { agents, createAgent } = useAgents();
 const agentsOpen = ref(true);
 const creatingAgent = ref(false);
@@ -119,7 +121,7 @@ onMounted(() => {
 
 <template>
     <nav ref="navRef" class="flex flex-col gap-1 overflow-auto">
-        <SidenavItem name="Search" icon="i-mynaui-search" />
+        <SidenavItem @click="openDialog(DialogType.QuickSwitcher)" name="Search" icon="i-mynaui-search" />
         <SidenavItem to="/" name="Home" icon="i-mynaui-home" />
 
         <!-- Header Toggle -->
@@ -134,7 +136,7 @@ onMounted(() => {
 
         <!-- Animated Section -->
         <Collapsible :is-open="agentsOpen">
-            <div class="mt-1 gap-1 flex flex-col transform-origin-top pt-1 pb-1 px-1">
+            <div class="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">
diff --git a/app/components/Sidenav/index.vue b/app/components/Sidenav/index.vue
index 9de2de4..a0ecbc8 100644
--- a/app/components/Sidenav/index.vue
+++ b/app/components/Sidenav/index.vue
@@ -101,14 +101,14 @@ const navKind = computed(() => {
 </script>
 
 <template>
-    <div class="relative pl-2">
+    <div class="relative">
         <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',
             isResizing ? 'transition-none' : ''
         ]" :style="open ? { width: `${sidebarWidth}px` } : {}" @mouseenter="isMouseOver = true"
             @mouseleave="isMouseOver = false" @focusin="isFocused = true" @focusout="onFocusOut">
-            <div :style="{ minWidth: `${sidebarWidth}px` }" class="flex flex-col h-full justify-between">
+            <div :style="{ minWidth: `${sidebarWidth}px` }" class="pl-2 flex flex-col h-full justify-between">
                 <div class="flex flex-col h-full max-h-full overflow-y-hidden">
                     <!-- Header -->
                     <div
diff --git a/app/composables/useChat.ts b/app/composables/useChat.ts
index 1e9ec29..d4d6681 100644
--- a/app/composables/useChat.ts
+++ b/app/composables/useChat.ts
@@ -502,6 +502,7 @@ export const useChat = (agentId: string) => {
         });
 
         try {
+            // @ts-ignore - excessive stack depth
             const res = await $fetch(`/api/auto-rename/${topicId}`, {
                 method: 'POST',
                 body: JSON.stringify({