# Tasks: Add Mobile Responsive Layout

## Phase 1: Foundation - Device Detection

- [x] **T-1.1**: Create `useMediaQuery` hook for responsive breakpoint detection
  - Create `/frontend/src/hooks/useMediaQuery.ts`
  - Export `useMediaQuery`, `useIsMobile`, `useIsTablet`, `useIsDesktop`
  - Add unit tests for hook behavior

- [x] **T-1.2**: Add mobile viewport meta and CSS custom properties
  - Ensure viewport meta tag is properly configured
  - Add CSS custom properties for safe area insets (notch handling)

## Phase 2: Mobile Navigation & Header

- [x] **T-2.1**: Create `MobileHeader` component with hamburger menu
  - Show essential info: room title, status, connection indicator
  - Hamburger button triggers action drawer
  - Implement slide-in action drawer for secondary actions

- [x] **T-2.2**: Create `BottomToolbar` component for mobile
  - Show: Files toggle, Members toggle, Message input trigger
  - Fixed position at bottom, above keyboard when active
  - Touch-friendly button sizes (min 44x44px)

- [x] **T-2.3**: Update `RoomDetail` header to switch between desktop and mobile layouts
  - Use `useIsMobile()` to conditionally render
  - Desktop: Current header layout
  - Mobile: `MobileHeader` + `BottomToolbar`

## Phase 3: Collapsible Sidebars

- [x] **T-3.1**: Create `SlidePanel` component for mobile sidebars
  - Full-height slide-in from right
  - Dark overlay backdrop
  - Close on backdrop click or swipe
  - Smooth CSS transitions

- [x] **T-3.2**: Update Members sidebar to use `SlidePanel` on mobile
  - Wrap existing member list content
  - Add close button at top
  - Full-screen width on mobile

- [x] **T-3.3**: Update Files sidebar to use `SlidePanel` on mobile
  - Wrap existing file list and upload area
  - Larger upload drop zone on mobile
  - Full-screen width on mobile

## Phase 4: Room List Mobile Optimization

- [x] **T-4.1**: Update `RoomList` layout for mobile
  - Full-width room cards (remove grid on mobile)
  - Stack filter controls vertically
  - Increase touch targets on filter buttons

- [x] **T-4.2**: Add mobile-optimized room card design
  - Larger status/severity badges
  - More padding for touch targets
  - Truncate long descriptions

## Phase 5: Touch-Friendly Inputs

- [x] **T-5.1**: Update message input for mobile
  - Larger input field (min height 44px)
  - Larger send button
  - Handle keyboard appearance gracefully

- [x] **T-5.2**: Update button and input sizes globally on mobile
  - Minimum touch target 44x44px
  - Larger form inputs
  - Use Tailwind responsive variants (sm: prefixes)

## Phase 6: Testing & Validation

- [x] **T-6.1**: Add responsive tests for key components
  - Test `useMediaQuery` hook with different window sizes
  - Test component rendering at mobile breakpoint
  - Test sidebar open/close behavior

- [x] **T-6.2**: Manual testing on actual devices
  - Test on iPhone Safari
  - Test on Android Chrome
  - Test keyboard interactions
  - Test safe area handling (notch)

- [x] **T-6.3**: Run full test suite and fix any regressions
  - `npm run test:run`
  - `npm run build`
  - Fix any TypeScript or lint errors

## Dependencies
- T-1.1 must complete before T-2.x and T-3.x
- T-3.1 must complete before T-3.2 and T-3.3
- T-6.x depends on all other tasks

## Parallelizable Work
- T-2.x (Navigation) and T-3.x (Sidebars) can run in parallel after T-1.1
- T-4.x (Room List) can run in parallel with T-2.x and T-3.x