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
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)
Replace horizontal tabs with custom dropdown select
All checks were successful
Actions / build-and-push (pull_request) Successful in 37s
Actions / deploy (pull_request) Has been skipped
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>
jperera added this to the shopping project 2026-03-01 13:39:38 +01:00
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
jperera/shopping!8
No description provided.