frontend-filterlisted

## Project Detection Before generating code, detect the project stack: 1. Find `package.json` (walk up directories if needed) 2. From `dependencies`/`devDependencies`, detect: - **Router**: `@tanstack/react-router` | `next` | `@remix-run/react` - **UI**: `@radix-ui/*` (for Sheet, Popover, Select) 3. Scan existing filter components to detect: - Filter location (`components/common/filter-*.tsx`) - URL-based state management pattern - Filter field type definitions 4. If no filter system exists, generate from scratch ## Conventions ### Naming - Filter sidebar: `filter-sidebar.tsx` - Filter form: `filter-fields.tsx` - Mobile sheet: `sheet-filter.tsx` - Filter trigger: `filter-trigger.tsx` - Hook: `useFilterState()` inside filter component ### Rules - Filter state lives in URL search params (not local state) - Removing a filter clears the search param - Active filter count shown on trigger button - Sidebar toggle persisted in localStorage - Filter types determined by field type - No ternary operators ## Filter Types | Field Type | Filter Component | Behavior | |------------|-----------------|----------| | TEXT_SHORT / TEXT_LONG | InputGroup with clear button | Debounced text search | | DROPDOWN (single) | Select component | Exact match | | DROPDOWN (multiple) | Combobox with multi-select | Any match | | DATE | Date range picker (start + end) | Between start/end | | CATEGORY | Tree list in Popover | Hierarchical select | | RELATIONSHIP | Async combobox (search