Match styling of the user profile dropdown in the navbar by using
Bootstrap's native .dropdown-menu and .dropdown-item classes instead
of custom classes. Keep only custom positioning, thumbnail sizing,
and the clickable header styles.
Shows a right-pointing arrow on section headers (Cosplayers/Albums)
to visually signal they are clickable and navigate to the list page.
The arrow subtly moves right on hover for extra affordance.
Refactor SearchDropdown to use a flat item list for unified keyboard
navigation. Section headers (Cosplayers/Albums) are now clickable
links that navigate to the respective list page with the search query
as a ?search= parameter.
Album covers now show as rounded squares (border-radius: 0.375rem)
while cosplayer profile pics remain circular, improving visual
differentiation between result types.
New SearchDropdown component that provides a live typeahead dropdown
in the navbar searching both cosplayers (persons) and albums.
- Fires API calls on every keystroke (no debounce) to existing /api/person and /api/album
- Version counter discards stale responses
- Minimum 2 characters before searching
- Keyboard navigation (arrows, enter, escape)
- Blur delay for click-to-navigate
- Thumbnail support with fallback avatars/icons
- Loading and empty states
REDCODE