fix: Chat Sidebar interactions

Author: allozaur

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte

@@ -15,16 +15,12 @@
 	let searchQuery = $state('');
 
 	let filteredConversations = $derived.by(() => {
-		if (isSearchModeActive && searchQuery.trim().length > 0) {
+		if (searchQuery.trim().length > 0) {
 			return conversations().filter((conversation: { name: string }) =>
 				conversation.name.toLowerCase().includes(searchQuery.toLowerCase())
 			);
 		}
 
-		if (isSearchModeActive && searchQuery.trim().length === 0) {
-			return [];
-		}
-
 		return conversations();
 	});
 
@@ -60,8 +56,8 @@
 
 		<ChatSidebarActions
 			{handleMobileSidebarItemClick}
-			{isSearchModeActive}
-			{searchQuery}
+			bind:isSearchModeActive
+			bind:searchQuery
 		/>
 	</Sidebar.Header>
 

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebarActions.svelte

@@ -9,19 +9,38 @@
         searchQuery: string;
     }
 
-    let { handleMobileSidebarItemClick, isSearchModeActive, searchQuery }: Props = $props();
+    let { handleMobileSidebarItemClick, isSearchModeActive = $bindable(), searchQuery = $bindable() }: Props = $props();
+
+    let searchInput: HTMLInputElement | null = $state(null);
+
+    $effect(() => {
+        if (isSearchModeActive) {
+            searchInput?.focus();
+        }
+    })
+
+    function handleSearchModeDeactivate() {
+        isSearchModeActive = false;
+        searchQuery = '';
+    }
 </script>
 
 <div class="space-y-0.5">
     {#if isSearchModeActive}
         <div class="relative">
             <Search class="text-muted-foreground absolute left-2 top-2.5 h-4 w-4" />
 
-            <Input bind:value={searchQuery} placeholder="Search conversations..." class="pl-8" />
+            <Input
+                bind:ref={searchInput}
+                onkeydown={(e) => e.key === 'Escape' && handleSearchModeDeactivate()}
+                placeholder="Search conversations..."
+                class="pl-8"
+                bind:value={searchQuery}
+            />
 
             <X
                 class="cursor-pointertext-muted-foreground absolute right-2 top-2.5 h-4 w-4"
-                onclick={() => (isSearchModeActive = false)}
+                onclick={handleSearchModeDeactivate}
             />
         </div>
     {:else}