fix: sidebar styles and search button

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();

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)]']">

app/components/Sidenav/NavAgent.vue

@@ -185,10 +185,9 @@ 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')" />
 
@@ -202,7 +201,7 @@ onMounted(() => {
         </button>
 
         <Collapsible :is-open="topicsOpen">
-                <div @click="handleNavClick" class="mt-1 flex flex-col transform-origin-center-top">
+            <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 }">
@@ -217,8 +216,7 @@ onMounted(() => {
                             <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
+                            <span v-else class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
-                                    class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">
                                 {{ topic.name }}
                             </span>
 
@@ -231,7 +229,6 @@ onMounted(() => {
                 </RowVirtualizerFixed>
             </div>
         </Collapsible>
-        </div>
 
         <Teleport to="body">
             <Transition

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">

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

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({