Add Search Functionality to Sport Select Component

[tristanblt]

Description

The current SportSelect component displays all available sports in a dropdown, but with many sport types (50+), users need to scroll through the entire list to find their desired sport. We should add search/filter functionality to make it easier to find sports quickly.

Current State

• SportSelect component (apps/web/src/components/sport-select/sport-select.tsx) uses a basic Radix UI Select component
• All sports from SPORT_TYPE enum are displayed as SelectItem components
• No search or filter capability exists
• Sports are displayed with icons and labels from sportTypeLabelMap

Requirements

Frontend Implementation

1. Enhanced Sport Select Component

   • Add a search input field at the top of the dropdown
   • Filter sports based on user input (case-insensitive)
   • Search should match both:
     • Sport type enum value (e.g., "RUNNING", "CYCLING")
     • Sport label/display name (e.g., "Running", "Cycling")
   • Maintain the existing "All Sports" option
   • Show "No results found" message when search yields no matches
   • Highlight matching text in results (optional enhancement)

2. UI/UX Considerations

   • Search input should be visible when dropdown opens
   • Search should be focused automatically when dropdown opens
   • Maintain keyboard navigation (arrow keys, enter to select)
   • Clear search button (optional)
   • Preserve existing styling and behavior

3. Implementation Options

   Option A: Use Combobox Pattern

   • Replace Select with a Combobox component (Radix UI or similar)
   • Provides built-in search functionality
   • Better accessibility for searchable lists

   Option B: Custom Search Filter

   • Keep Select component
   • Add search input inside SelectContent
   • Filter SelectItem components based on search query
   • More control but requires custom implementation

   Recommendation: Option A (Combobox) for better UX and accessibility

Technical Details

• Search should be case-insensitive
• Search should match partial strings (e.g., "run" matches "RUNNING", "TRAIL_RUNNING")
• Consider using Fuse.js or similar for fuzzy search (optional enhancement)
• Maintain i18n support (search should work with translated labels)

Acceptance Criteria

• Search input is visible in the sport select dropdown
• Users can type to filter sports
• Search works with both enum values and display labels
• Search is case-insensitive
• "All Sports" option remains available
• Keyboard navigation still works
• No results message is shown when appropriate
• Existing functionality (selection, icons, labels) is preserved
• Component works on mobile devices
• Accessibility is maintained (ARIA labels, keyboard support)

Related Files

• apps/web/src/components/sport-select/sport-select.tsx - Current sport select component
• apps/web/src/components/ui/select.tsx - Base select component (Radix UI)
• apps/web/src/utils/label-map/core.ts - Sport label mappings
• libs/shared/src/types/misc/core/sport-type.enum.ts - Sport type enum
• apps/web/src/components/create-event-dialog/components/event-form-fields.tsx - Usage of sport select in forms

Additional Considerations

• Consider adding this search functionality to other sport select components:
  • MultiSportSelector (apps/web/src/components/training-zone-editor/multi-sport-selector.tsx)
  • Sport select in event forms
• Consider adding sport categories/grouping (e.g., "Running", "Cycling", "Water Sports") for better organization (future enhancement)