Replace horizontal tabs with custom dropdown select #8

Merged

jperera merged 1 commit from shop-dropdown-select into main

2026-03-01 13:39:45 +01:00

jperera commented

2026-03-01 13:38:06 +01:00

Owner

Summary

Replace horizontal tabs with a custom dropdown select component to improve scalability and UX
Fixes #7

Changes

HTML: Replaced .tabs flex container with .store-dropdown component
CSS: Added dropdown styles with smooth animations and hover states
TypeScript: Updated tab switching logic with dropdown interactions and keyboard navigation

Features

✅ Custom dropdown replaces horizontal tabs
✅ Current shop clearly displayed in collapsed state
✅ All shops visible when dropdown is open
✅ Item count badges work correctly
✅ Keyboard accessible (Tab, Arrow keys, Enter, Escape)
✅ Mobile-friendly touch targets
✅ Smooth animations for open/close
✅ localStorage persistence continues to work
✅ Click-outside to close

Test plan

Open the app and verify dropdown is displayed
Click dropdown trigger to expand menu
Select different stores and verify switching works
Verify badge counts are displayed correctly
Test keyboard navigation (Tab to focus, Arrow keys, Enter to select, Escape to close)
Click outside dropdown to close it
Refresh page and verify selected store persists

🤖 Generated with Claude Code

## Summary - Replace horizontal tabs with a custom dropdown select component to improve scalability and UX - Fixes #7 ## Changes - **HTML**: Replaced `.tabs` flex container with `.store-dropdown` component - **CSS**: Added dropdown styles with smooth animations and hover states - **TypeScript**: Updated tab switching logic with dropdown interactions and keyboard navigation ## Features - ✅ Custom dropdown replaces horizontal tabs - ✅ Current shop clearly displayed in collapsed state - ✅ All shops visible when dropdown is open - ✅ Item count badges work correctly - ✅ Keyboard accessible (Tab, Arrow keys, Enter, Escape) - ✅ Mobile-friendly touch targets - ✅ Smooth animations for open/close - ✅ localStorage persistence continues to work - ✅ Click-outside to close ## Test plan - [ ] Open the app and verify dropdown is displayed - [ ] Click dropdown trigger to expand menu - [ ] Select different stores and verify switching works - [ ] Verify badge counts are displayed correctly - [ ] Test keyboard navigation (Tab to focus, Arrow keys, Enter to select, Escape to close) - [ ] Click outside dropdown to close it - [ ] Refresh page and verify selected store persists 🤖 Generated with [Claude Code](https://claude.com/claude-code)

jperera added 1 commit

2026-03-01 13:38:06 +01:00

Replace horizontal tabs with custom dropdown select

Actions / build-and-push (pull_request) Successful in 37s

Details

Actions / deploy (pull_request) Has been skipped

Details

ce1ba11596

Fixes #7

- Replace flexbox horizontal tabs with a custom dropdown component
- Add dropdown trigger showing current store and badge count
- Implement dropdown menu with all store options
- Add keyboard navigation (Arrow keys, Enter, Escape, Tab)
- Add click-outside-to-close functionality
- Preserve badge indicators and localStorage persistence
- Add smooth open/close animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>