1d5d4d447d
Mobile Responsive Layout: - Add useMediaQuery, useIsMobile, useIsTablet, useIsDesktop hooks for device detection - Create MobileHeader component with hamburger menu and action drawer - Create BottomToolbar for mobile navigation (Files, Members) - Create SlidePanel component for full-screen mobile sidebars - Update RoomDetail.tsx with mobile/desktop conditional rendering - Update RoomList.tsx with single-column grid and touch-friendly buttons - Add CSS custom properties for safe areas and touch targets (min 44px) - Add mobile viewport meta tags for notched devices Open Room Access: - All authenticated users can view all rooms (not just their own) - Users can join active rooms they're not members of - Add is_member field to room responses - Update room list API to return all rooms by default Admin Room Management: - Add permanent delete functionality for system admins - Add delete confirmation dialog with room title verification - Broadcast room deletion via WebSocket to connected users - Add users search API for adding members 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
99 lines
3.3 KiB
Markdown
99 lines
3.3 KiB
Markdown
# 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
|