From 05d04c131ed9756cabca05ed89e8a85396668542 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 25 Feb 2026 23:30:02 +0800
Subject: [PATCH] Always show search input in CategoryFilterBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove the collapsible search behavior that hid the input behind an
icon when ≥4 categories existed. Search should always be visible and
match the standard header pattern (w-52 input with icon).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/shared/CategoryFilterBar.tsx   | 49 +++++--------------
 1 file changed, 12 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/shared/CategoryFilterBar.tsx b/frontend/src/components/shared/CategoryFilterBar.tsx
index bc00140..bee958d 100644
--- a/frontend/src/components/shared/CategoryFilterBar.tsx
+++ b/frontend/src/components/shared/CategoryFilterBar.tsx
@@ -118,7 +118,6 @@ export default function CategoryFilterBar({
   onSearchChange,
 }: CategoryFilterBarProps) {
   const [otherOpen, setOtherOpen] = useState(false);
-  const [searchCollapsed, setSearchCollapsed] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const isAllActive = activeFilters.length === 0;
@@ -129,16 +128,6 @@ export default function CategoryFilterBar({
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
   );
 
-  // Collapse search if there are many categories
-  useEffect(() => {
-    setSearchCollapsed(categories.length >= 4);
-  }, [categories.length]);
-
-  const handleExpandSearch = () => {
-    setSearchCollapsed(false);
-    setTimeout(() => searchInputRef.current?.focus(), 50);
-  };
-
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id || !onReorderCategories) return;
@@ -254,32 +243,18 @@ export default function CategoryFilterBar({
       <div className="flex-1" />
 
       {/* Search */}
-      {searchCollapsed ? (
-        <button
-          type="button"
-          onClick={handleExpandSearch}
-          aria-label="Expand search"
-          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-card-elevated transition-colors duration-150"
-        >
-          <Search className="h-4 w-4" />
-        </button>
-      ) : (
-        <div className="relative transition-all duration-200">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-          <Input
-            ref={searchInputRef}
-            type="search"
-            placeholder="Search..."
-            value={searchValue}
-            onChange={(e) => onSearchChange(e.target.value)}
-            onBlur={() => {
-              if (!searchValue && categories.length >= 4) setSearchCollapsed(true);
-            }}
-            className="w-44 h-8 pl-8 text-sm ring-inset"
-            aria-label="Search"
-          />
-        </div>
-      )}
+      <div className="relative shrink-0">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="w-52 h-8 pl-8 text-sm"
+          aria-label="Search"
+        />
+      </div>
     </div>
   );
 }