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

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

@ -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" />
<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)}
onBlur={() => {
if (!searchValue && categories.length >= 4) setSearchCollapsed(true);
}}
className="w-44 h-8 pl-8 text-sm ring-inset"
className="w-52 h-8 pl-8 text-sm"
aria-label="Search"
/>
</div>
)}
</div>
);
}