egg/Task_Reporter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
38c428dc8d2a5f025f9fc234615830155d382284
Task_Reporter/openspec/changes/archive/add-mobile-responsive-layout/tasks.md
egg 1d5d4d447d feat: Add mobile responsive layout, open room access, and admin room management 
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>
2025-12-05 09:12:10 +08:00

3.3 KiB
Raw Blame History

Tasks: Add Mobile Responsive Layout

Phase 1: Foundation - Device Detection

  • 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

  • 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

  • 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

  • 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)

  • 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

  • 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

  • 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

  • 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

  • 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

  • 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

  • T-5.1: Update message input for mobile

    • Larger input field (min height 44px)
    • Larger send button
    • Handle keyboard appearance gracefully

  • 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

  • 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

  • T-6.2: Manual testing on actual devices

    • Test on iPhone Safari
    • Test on Android Chrome
    • Test keyboard interactions
    • Test safe area handling (notch)

  • 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