6f0e2636d0
This commit implements a comprehensive mobile menu solution that: 1. **Mobile Menu Components**: - Created TopBar.tsx with circular band switcher (mobile only) - Enhanced BottomNavBar.tsx with band-context-aware navigation - Updated ResponsiveLayout.tsx to integrate TopBar for mobile views 2. **Band Context Preservation**: - Fixed black screen issue by preserving band context via React Router state - Implemented dual context detection (URL params + location state) - Added graceful fallback handling for missing context 3. **Visual Improvements**: - Changed band display from square+text to perfect circle with initials only - Updated dropdown items to use consistent circular format - Improved mobile space utilization 4. **Debugging & Testing**: - Added comprehensive debug logging for issue tracking - Created test plans and documentation - Ensured all static checks pass (TypeScript + ESLint) 5. **Shared Utilities**: - Created utils.ts with shared getInitials() function - Reduced code duplication across components Key Features: - Mobile (<768px): TopBar + BottomNavBar + Main Content - Desktop (≥768px): Sidebar (unchanged) - Band context preserved across all mobile navigation - Graceful error handling and fallbacks - Comprehensive debug logging (can be removed in production) Files Changed: - web/src/utils.ts (new) - web/src/components/TopBar.tsx (new) - web/src/components/BottomNavBar.tsx (modified) - web/src/components/ResponsiveLayout.tsx (modified) - web/src/components/Sidebar.tsx (modified) Documentation Added: - implementation_summary.md - refinement_summary.md - black_screen_fix_summary.md - test_plan_mobile_menu_fix.md - test_plan_refinement.md - testing_guide.md - black_screen_debug.md Resolves: - Mobile menu band context loss - Black screen on Library navigation - Inconsistent band display format - Missing mobile band switching capability Breaking Changes: None Backward Compatibility: Fully maintained Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
4.3 KiB
4.3 KiB
Mobile Menu Band Context Fix - Test Plan
Overview
This test plan verifies that the mobile menu band context issue has been resolved. The fix implements:
- TopBar component with band switcher (mobile only)
- Band-context-aware navigation in BottomNavBar
- Proper responsive layout switching
Test Environment
- Browser: Chrome/Firefox/Safari
- Screen sizes: Mobile (<768px), Desktop (≥768px)
- Test data: Multiple bands created in the system
Test Cases
Test 1: Band Context Preservation in Mobile View
Precondition: User is logged in with at least 2 bands created
Steps:
- Resize browser to mobile size (<768px width)
- Navigate to Band A's library (
/bands/band-a-id) - Click "Settings" in bottom navigation
- Click "Library" in bottom navigation
Expected Result:
- Should return to Band A's library (
/bands/band-a-id) - Should NOT redirect to first band or lose context
Actual Result: ⬜ Pass / ⬜ Fail
Test 2: TopBar Band Switching
Precondition: User is logged in with multiple bands
Steps:
- Resize browser to mobile size (<768px width)
- Click the band switcher in TopBar (top right)
- Select a different band from dropdown
- Observe navigation
Expected Result:
- Should navigate to selected band's library
- TopBar should show selected band name and initials
- URL should be
/bands/selected-band-id
Actual Result: ⬜ Pass / ⬜ Fail
Test 3: Player Navigation with Band Context
Precondition: User is in a band with songs
Steps:
- Resize browser to mobile size (<768px width)
- Navigate to a band's library
- Click "Player" in bottom navigation
Expected Result:
- If band has songs: Should navigate to band's songs list
- If no songs: Button should be disabled
- Navigation should preserve band context
Actual Result: ⬜ Pass / ⬜ Fail
Test 4: Members Navigation to Band Settings
Precondition: User is in a band
Steps:
- Resize browser to mobile size (<768px width)
- Navigate to a band's library
- Click "Members" in bottom navigation
Expected Result:
- Should navigate to band's members settings (
/bands/current-band-id/settings/members) - Should preserve band context
Actual Result: ⬜ Pass / ⬜ Fail
Test 5: Responsive Layout Switching
Precondition: User is logged in
Steps:
- Start with desktop size (≥768px width)
- Verify Sidebar is visible, TopBar and BottomNavBar are hidden
- Resize to mobile size (<768px width)
- Verify TopBar and BottomNavBar are visible, Sidebar is hidden
- Resize back to desktop size
- Verify original desktop layout returns
Expected Result:
- Layout should switch smoothly between mobile/desktop
- No layout glitches or overlapping elements
- Content should remain accessible in both modes
Actual Result: ⬜ Pass / ⬜ Fail
Test 6: Desktop Regression Test
Precondition: User is logged in
Steps:
- Use desktop size (≥768px width)
- Test all Sidebar functionality:
- Band switching dropdown
- Navigation to Library, Player, Settings
- User dropdown
- Verify no changes to desktop behavior
Expected Result:
- All existing Sidebar functionality should work exactly as before
- No regressions in desktop experience
Actual Result: ⬜ Pass / ⬜ Fail
Test 7: URL-Based Band Context
Precondition: User is logged in with multiple bands
Steps:
- Manually navigate to
/bands/band-b-idin mobile view - Click "Library" in bottom navigation
- Click "Settings" then back to "Library"
Expected Result:
- Should always return to band-b-id, not default to first band
- URL should consistently show correct band ID
Actual Result: ⬜ Pass / ⬜ Fail
Manual Testing Instructions
Setup
- Start development server:
npm run dev - Open browser to
http://localhost:5173 - Log in and create at least 2 test bands
Execution
- Follow each test case step-by-step
- Mark Pass/Fail for each test
- Note any unexpected behavior or errors
Verification
- All test cases should pass
- No console errors should appear
- No visual glitches or layout issues
- Navigation should be smooth and context-preserving
Success Criteria
✅ All 7 test cases pass
✅ No console errors in browser developer tools
✅ No TypeScript or ESLint errors (npm run check)
✅ Mobile and desktop layouts work correctly
✅ Band context preserved across all mobile navigation