Tea catalog page with search and filter

[CarlosCanet]

Description

Create a tea catalog page that displays all available teas (including those without assigned days) with search and filtering capabilities.

Tasks

• Create /catalog page to display tea library
• Display tea cards with: name, type, ingredients, temperature, infusion time
• Implement search by tea name (text input)
• Add filter by tea type (dropdown/multi-select: BLACK, GREEN, RED, WHITE, OOLONG, ROOIBOS, HERBAL, MATE, CHAI, MATCHA, BLEND)
• Add filter by ingredients (multi-select with autocomplete)
• Add filter by theine content (has/no theine toggle)
• Add filter by reinfusion capability (can reinfuse toggle)
• Pagination or infinite scroll for large tea lists
• Sort options: name, temperature, infusion time
• Clear/reset filters button
• Responsive grid layout (mobile: 1 col, tablet: 2 cols, desktop: 3-4 cols)
• Public accessible route (no auth required)

UI Design

• Use daisyUI cards for tea display
• Search bar at top with real-time filtering
• Filter sidebar or top controls (responsive)
• Tea cards show:
  • Name and type badge
  • Temperature and infusion time
  • Ingredient tags
  • Theine/reinfusion indicators
  • Link to view full details (if on a calendar day)

Technical Details

• Server Component for initial data fetch
• Client Component for search/filter interaction
• Query optimization: index on teaType, ingredients search
• Consider debouncing search input
• Cache results for performance

Definition of Done

• Catalog page functional
• Search works in real-time
• Filters work independently and together
• Responsive design tested
• Performance acceptable (load time < 1s)
• No auth required for access
• Clear UX for filtering

Related Issues

• Depends on: Tea guess form (Server Action) (TDD) #29 (TeaGuess implementation with TeaIngredient)

Phase: 3.4 Tea Catalog & Library
Priority: Low
Milestone: Production Polish