rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Always show search input in CategoryFilterBar

Browse Source 
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>
This commit is contained in:
Kyle 2026-02-25 23:30:02 +08:00
parent 1e225145c9
commit 05d04c131e
1 changed files with 12 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/shared/CategoryFilterBar.tsx
View File

@ -118,7 +118,6 @@ export default function CategoryFilterBar({
onSearchChange, onSearchChange,
}: CategoryFilterBarProps) { }: CategoryFilterBarProps) {
const [otherOpen, setOtherOpen] = useState(false); const [otherOpen, setOtherOpen] = useState(false);
const [searchCollapsed, setSearchCollapsed] = useState(false);
const searchInputRef = useRef<HTMLInputElement>(null); const searchInputRef = useRef<HTMLInputElement>(null);
const isAllActive = activeFilters.length === 0; const isAllActive = activeFilters.length === 0;
@ -129,16 +128,6 @@ export default function CategoryFilterBar({
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), 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 handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event; const { active, over } = event;
if (!over || active.id === over.id || !onReorderCategories) return; if (!over || active.id === over.id || !onReorderCategories) return;
@ -254,32 +243,18 @@ export default function CategoryFilterBar({
<div className="flex-1" /> <div className="flex-1" />
{/* Search */} {/* Search */}
{searchCollapsed ? ( <div className="relative shrink-0">
<button <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" />
type="button" <Input
onClick={handleExpandSearch} ref={searchInputRef}
aria-label="Expand search" type="search"
className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-card-elevated transition-colors duration-150" placeholder="Search..."
> value={searchValue}
<Search className="h-4 w-4" /> onChange={(e) => onSearchChange(e.target.value)}
</button> className="w-52 h-8 pl-8 text-sm"
) : ( aria-label="Search"
<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" /> </div>
<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> </div>
); );
} }