From e17d1ba4b44f5dca32f236354b9948e434f47bc3 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Tue, 10 Mar 2026 19:56:10 -0700
Subject: [PATCH] Move search bar to top level

---
 frontend/src/components/Sidebar.tsx | 49 +++++++++++++----------------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 59c9032..9ae949d 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -667,44 +667,39 @@ export function Sidebar({
       aria-label="Conversations"
     >
       {/* Header */}
-      <div className="flex justify-between items-center px-3 py-2.5 border-b border-border">
-        <h2 className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
-          Conversations
-        </h2>
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
+        <div className="relative min-w-0 flex-1">
+          <Input
+            type="text"
+            placeholder="Search conversations..."
+            aria-label="Search conversations"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="h-7 text-[13px] pr-8 bg-background/50"
+          />
+          {searchQuery && (
+            <button
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+              onClick={() => setSearchQuery('')}
+              title="Clear search"
+              aria-label="Clear search"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
         <Button
           variant="ghost"
           size="sm"
           onClick={onNewMessage}
           title="New Message"
           aria-label="New message"
-          className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground transition-colors"
+          className="h-7 w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground transition-colors"
         >
           <SquarePen className="h-4 w-4" />
         </Button>
       </div>
 
-      {/* Search */}
-      <div className="relative px-3 py-2">
-        <Input
-          type="text"
-          placeholder="Search..."
-          aria-label="Search conversations"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="h-7 text-[13px] pr-8 bg-background/50"
-        />
-        {searchQuery && (
-          <button
-            className="absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
-            onClick={() => setSearchQuery('')}
-            title="Clear search"
-            aria-label="Clear search"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-
       {/* List */}
       <div className="flex-1 min-h-0 overflow-y-auto [contain:layout_paint]">
         {/* Tools */}