feat(mobile): Implement responsive mobile menu with band context preservation
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>
This commit is contained in:
Mistral Vibe
148
test_plan_mobile_menu_fix.md
Normal file
148
test_plan_mobile_menu_fix.md
Normal file
@@ -0,0 +1,148 @@
|
||||
# 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:
|
||||
1. TopBar component with band switcher (mobile only)
|
||||
2. Band-context-aware navigation in BottomNavBar
|
||||
3. 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**:
|
||||
1. Resize browser to mobile size (<768px width)
|
||||
2. Navigate to Band A's library (`/bands/band-a-id`)
|
||||
3. Click "Settings" in bottom navigation
|
||||
4. 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**:
|
||||
1. Resize browser to mobile size (<768px width)
|
||||
2. Click the band switcher in TopBar (top right)
|
||||
3. Select a different band from dropdown
|
||||
4. 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**:
|
||||
1. Resize browser to mobile size (<768px width)
|
||||
2. Navigate to a band's library
|
||||
3. 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**:
|
||||
1. Resize browser to mobile size (<768px width)
|
||||
2. Navigate to a band's library
|
||||
3. 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**:
|
||||
1. Start with desktop size (≥768px width)
|
||||
2. Verify Sidebar is visible, TopBar and BottomNavBar are hidden
|
||||
3. Resize to mobile size (<768px width)
|
||||
4. Verify TopBar and BottomNavBar are visible, Sidebar is hidden
|
||||
5. Resize back to desktop size
|
||||
6. 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**:
|
||||
1. Use desktop size (≥768px width)
|
||||
2. Test all Sidebar functionality:
|
||||
- Band switching dropdown
|
||||
- Navigation to Library, Player, Settings
|
||||
- User dropdown
|
||||
3. 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**:
|
||||
1. Manually navigate to `/bands/band-b-id` in mobile view
|
||||
2. Click "Library" in bottom navigation
|
||||
3. 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
|
||||
1. Start development server: `npm run dev`
|
||||
2. Open browser to `http://localhost:5173`
|
||||
3. Log in and create at least 2 test bands
|
||||
|
||||
### Execution
|
||||
1. Follow each test case step-by-step
|
||||
2. Mark Pass/Fail for each test
|
||||
3. 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
|
||||
Reference in New Issue
Block a user