Files

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

2.5 KiB

Raw Blame History

Proposal: Add Mobile Responsive Layout

Summary

Add device detection and responsive layout switching to optimize the user experience on mobile devices (<768px). The frontend currently only supports desktop and tablet layouts, leaving mobile users with horizontal scrolling issues and poor usability.

Motivation

Fixed sidebar widths (w-72 for members, w-80 for files) cause horizontal overflow on mobile screens
Header controls don't adapt to narrow screens, causing button wrapping issues
No mobile navigation pattern - current horizontal nav doesn't collapse
Small touch targets - buttons use px-3 py-1.5 which is difficult to tap on mobile
Mobile devices are commonly used on the production floor for quick incident reporting

Scope

In Scope

Device Detection Hook (useIsMobile) - Detect mobile vs desktop using media queries
Collapsible Sidebars - Transform fixed sidebars into slide-in panels on mobile
Mobile Header - Simplified header with hamburger menu or action sheet
Bottom Toolbar - Move frequently used actions to bottom of screen for thumb-friendly access
Touch-Friendly Sizing - Increase button/input sizes on mobile
Responsive Text - Adjust font sizes for readability on small screens

Out of Scope

Native mobile app (PWA can be considered later)
Offline functionality
Push notifications
Complex gestures (swipe to delete, etc.)

Technical Approach

Device Detection

// hooks/useMediaQuery.ts
export function useIsMobile(): boolean {
  return useMediaQuery('(max-width: 767px)')
}

export function useIsTablet(): boolean {
  return useMediaQuery('(min-width: 768px) and (max-width: 1023px)')
}

Layout Strategy

Mobile (<768px): Single-column layout, slide-in sidebars, bottom action bar
Tablet (768-1023px): Current behavior with minor adjustments
Desktop (>1024px): Current behavior (unchanged)

Key Component Changes

Component	Mobile Behavior
RoomDetail Header	Collapse to hamburger menu, show essential actions only
Members Sidebar	Slide-in from right, full-screen overlay
Files Sidebar	Slide-in from right, full-screen overlay
Message Input	Sticky bottom with larger touch targets
Room Cards	Full-width single column

Impact

frontend-core spec: Add mobile-specific requirements to "Responsive Layout and Navigation"
Estimated file changes: ~8 frontend files
No backend changes required

None (standalone improvement)

2.5 KiB Raw Blame History