Add tea filtering system (by theine, milk, infusion time, type)

[CarlosCanet]

Description

Implement a comprehensive filtering system to allow users to discover and browse teas based on their properties and preferences (theine content, milk compatibility, infusion time, tea type, reinfusion capability, etc.).

Context

Currently, users can only view individual tea days sequentially. Adding filters would improve discoverability and help users find teas matching their preferences (e.g., "show me all caffeine-free teas that accept milk").

User Stories

• As a user, I want to filter teas by theine content (has/no theine) to avoid caffeine
• As a user, I want to filter teas that accept milk to match my preferences
• As a user, I want to filter by tea type (black, green, herbal, etc.)
• As a user, I want to filter by infusion time range (quick vs long infusions)
• As a user, I want to filter teas that can be reinfused
• As a user, I want to combine multiple filters simultaneously

Tasks

Backend

• Create filter service/utility functions
• Add database queries with filter parameters
• Optimize queries with proper indexes (Tea model already has most fields)
• Handle edge cases (missing data, null values)

Frontend

• Design filter UI component (sidebar, drawer, or inline)
• Implement filter controls (checkboxes, sliders, dropdowns)
• Add "Clear filters" button
• Show active filter count/badges
• Display filtered results count
• Handle empty results state ("No teas match your filters")

UX Enhancements

• Persist filters in URL params (shareable links)
• Add filter presets ("Caffeine-free", "Quick brews", "Reinfusable")
• Mobile-responsive filter panel
• Add loading states during filter application
• Consider client-side filtering for small datasets (performance)

Filter Criteria (based on Tea model)

• Tea Type: Black, Green, Red, White, Oolong, Rooibos, Herbal, Mate, Chai, Matcha, Blend
• Has Theine: Yes/No (boolean)
• Add Milk: Yes/No (boolean)
• Can Reinfuse: Yes/No (boolean)
• Infusion Time: Range slider (e.g., 1-10 minutes)
• Temperature: Range slider (e.g., 70-100°C)
• Reinfuse Number: Min value (if canReinfuse = true)
• Ingredients: Multi-select (if available from TeaIngredient relation)

Implementation Suggestions

Option A: Server-Side (recommended for large datasets)

• Use Prisma where clause with dynamic filters
• Return filtered Tea[] from API route or Server Action
• Better for SEO and initial load performance

Option B: Client-Side (faster for small datasets)

• Fetch all Teas once, filter in browser with Array.filter()
• Instant filter updates without server roundtrips
• Good for MVP with <100 teas

Option C: Hybrid

• Server-side for initial load + complex filters
• Client-side for quick toggles on already-loaded data

UI/UX Design Notes

• Filter Panel Position: Left sidebar (desktop), bottom drawer (mobile)
• daisyUI Components: Use drawer, checkbox, range, select, badge
• Color Scheme: Match existing theme (neutral/primary)
• Icons: Use react-icons for filter icon, clear icon, etc.

Acceptance Criteria

• Users can filter teas by at least 3 criteria (type, theine, milk)
• Filters work correctly with multiple selections
• Results update immediately or with clear loading state
• Filter state persists in URL (can share filtered view)
• Empty state shown when no results match
• Mobile-responsive design
• Accessible (keyboard navigation, screen reader support)

Future Enhancements (post-MVP)

• Filter by user ratings/badges
• Filter by "assigned to me" or "favorites"
• Sort results (by name, infusion time, etc.)
• Advanced search with text input (tea name, ingredients)
• Save custom filter presets per user

Technical Notes

• Ensure proper TypeScript types for filter params
• Add Zod validation for filter inputs if using Server Actions
• Consider caching filter results (React Query, SWR, or native fetch cache)
• Test with edge cases: all filters active, no filters, conflicting filters

Priority: Medium (UX enhancement, not MVP blocker)
Phase: Post-MVP / Future Enhancement
Estimated Effort: 2-3 days (backend + frontend + testing)