Mobile filter panel

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Product task: Mobile filter panel
Thumb-reach filters in a bottom sheet, not a side drawer.

Compose these UI patterns:
- Bottom Sheet: A panel that rises from the bottom edge—common on mobile for actions and details.; use Vaul / shadcn Drawer (bottom)
- Scrim / Overlay / Backdrop: A translucent layer under an overlay that dims the page and blocks clicks.; use Dialog overlay / fixed inset-0 bg-black/45
- Button / Action Button: A semantic control for an action, with hierarchy expressed through its visual variant.; use shadcn Button (variants)
- Tag / Chip: Compact labels for categories, filters, or metadata—sometimes removable.; use shadcn Badge variants / custom chips

Avoid:
- Do not use Drawer / Side Sheet: A panel that slides in from an edge, usually over a scrim, for secondary tasks.
- Do not use Modal Dialog: A centered window that blocks the page until the user responds.

Brief:
Mobile filter flow:

1. Entry: "Filters" control; show active filters as Tags next to it.
2. Open Bottom sheet from the bottom with Scrim; sheet body scrolls; sticky footer has Reset + Apply.
3. Prefer bottom sheet over side Drawer (thumb reach) and over a center Modal (too cramped for multi-field filters).
4. Scrim dismiss: discard changes (or confirm discard — pick one policy and stick to it).
5. Apply closes the sheet and refreshes the list.

Implement for a phone-width layout first.

Implement as a minimal, coherent flow. Match existing project style.