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>

implementation_summary.md

@@ -0,0 +1,119 @@
+# Mobile Menu Band Context Fix - Implementation Summary
+
+## Problem Solved
+The mobile menu was losing band context when users navigated between sections, making it impossible to return to the current band's library. The "Library" button in the bottom navigation would always redirect to the first band instead of preserving the current band context.
+
+## Solution Implemented
+
+### 1. Created Shared Utilities (`web/src/utils.ts`)
+- Extracted `getInitials()` function for reuse across components
+- Promotes code consistency and reduces duplication
+
+### 2. Created TopBar Component (`web/src/components/TopBar.tsx`)
+**Features**:
+- Mobile-only band switcher in top right corner
+- Shows current band name and initials
+- Dropdown to switch between bands
+- Responsive design with proper z-index for mobile overlay
+- Uses React Query to fetch bands data
+- Derives active band from URL parameters
+
+**Technical Details**:
+- Uses `useQuery` from `@tanstack/react-query` for data fetching
+- Implements dropdown with outside click detection
+- Matches Sidebar's visual style for consistency
+- Fixed positioning with proper spacing
+
+### 3. Enhanced BottomNavBar (`web/src/components/BottomNavBar.tsx`)
+**Key Improvements**:
+- **Library button**: Now preserves band context by navigating to `/bands/${currentBandId}` instead of `/bands`
+- **Player button**: Navigates to band-specific songs list with proper context
+- **Members button**: Now goes to band settings (`/bands/${currentBandId}/settings/members`) instead of generic settings
+- **Band context detection**: Extracts current band ID from URL parameters
+- **Improved active states**: Better detection of library and player states
+
+### 4. Updated ResponsiveLayout (`web/src/components/ResponsiveLayout.tsx`)
+**Changes**:
+- Added TopBar import and integration
+- Adjusted mobile layout dimensions:
+  - Main content height: `calc(100vh - 110px)` (50px TopBar + 60px BottomNavBar)
+  - Added `paddingTop: 50px` to account for TopBar height
+- Desktop layout unchanged (uses Sidebar as before)
+
+### 5. Updated Sidebar (`web/src/components/Sidebar.tsx`)
+- Replaced local `getInitials` function with import from shared utilities
+- Maintains all existing functionality
+- No behavioral changes
+
+## Files Modified
+
+### Created:
+- `web/src/utils.ts` - Shared utility functions
+- `web/src/components/TopBar.tsx` - Mobile band switcher
+
+### Modified:
+- `web/src/components/BottomNavBar.tsx` - Band-context-aware navigation
+- `web/src/components/ResponsiveLayout.tsx` - TopBar integration
+- `web/src/components/Sidebar.tsx` - Use shared utilities
+
+## Technical Approach
+
+### Band Context Preservation
+- **URL-based detection**: Extract band ID from route parameters using `matchPath`
+- **Context-aware navigation**: All navigation actions preserve current band context
+- **Fallback handling**: Graceful degradation when no band context exists
+
+### Responsive Design
+- **Mobile (<768px)**: TopBar + BottomNavBar + Main Content
+- **Desktop (≥768px)**: Sidebar (unchanged)
+- **Smooth transitions**: Layout switches cleanly between breakpoints
+
+### Performance
+- **Efficient data fetching**: Uses existing React Query cache
+- **Minimal re-renders**: Only mobile components affected
+- **No additional API calls**: Reuses existing band data
+
+## Verification
+
+### Static Checks
+✅ TypeScript compilation passes (`npm run typecheck`)
+✅ ESLint passes (`npm run lint`)
+✅ Full check passes (`npm run check`)
+
+### Manual Testing Required
+- Band context preservation across navigation
+- TopBar band switching functionality
+- Responsive layout switching
+- Desktop regression testing
+- URL-based context handling
+
+## Benefits
+
+### User Experience
+- ✅ Band context preserved in mobile navigation
+- ✅ Easy band switching via TopBar
+- ✅ Consistent behavior between mobile and desktop
+- ✅ Intuitive navigation flow
+
+### Code Quality
+- ✅ Reduced code duplication (shared utilities)
+- ✅ Type-safe implementation
+- ✅ Clean separation of concerns
+- ✅ Maintainable and extensible
+
+### Future Compatibility
+- ✅ Ready for React Native wrapping
+- ✅ Consistent API for mobile/web
+- ✅ Easy to extend with additional features
+
+## Backward Compatibility
+- ✅ No breaking changes to existing functionality
+- ✅ Desktop experience completely unchanged
+- ✅ Existing routes and navigation patterns preserved
+- ✅ API contracts unchanged
+
+## Next Steps
+1. **Manual Testing**: Execute test plan to verify all functionality
+2. **User Feedback**: Gather input on mobile UX improvements
+3. **Performance Monitoring**: Check for any performance impact
+4. **Documentation**: Update user guides with mobile navigation instructions