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>
5.1 KiB
5.1 KiB
mobile-layout Specification
Purpose
Provide responsive layout capabilities that detect user devices and adapt the UI for optimal mobile experience. This extends the existing "Responsive Layout and Navigation" requirement in frontend-core to include mobile devices (<768px).
MODIFIED Requirements
Requirement: Responsive Layout and Navigation
The frontend SHALL provide a responsive layout that works on desktop, tablet, and mobile devices with intuitive navigation. The system SHALL detect the device type and switch layouts accordingly.
Scenario: Mobile layout (<768px)
- WHEN viewed on mobile devices (<768px width)
- THEN the system SHALL:
- Display a simplified header with hamburger menu
- Show sidebars as full-screen slide-in panels (not inline)
- Display a bottom toolbar with frequently used actions
- Use single-column layout for content
- Ensure all touch targets are at least 44x44 pixels
Scenario: Tablet layout (768px-1024px)
- WHEN viewed on tablet (768px-1024px)
- THEN the system SHALL:
- Collapse sidebars to icons or overlay panels
- Use full width for content areas
- Stack panels vertically when needed
Scenario: Desktop layout (>1024px)
- WHEN viewed on desktop (>1024px)
- THEN the system SHALL:
- Display full navigation and sidebars inline
- Show room list and detail side-by-side when applicable
- Display member/file panels as sidebars
ADDED Requirements
Requirement: Device Detection
The frontend SHALL provide hooks for detecting device type based on viewport width.
Scenario: Detect mobile device
- WHEN the viewport width is less than 768px
- THEN
useIsMobile()hook SHALL returntrue - AND the UI SHALL render mobile-optimized components
Scenario: Detect tablet device
- WHEN the viewport width is between 768px and 1023px
- THEN
useIsTablet()hook SHALL returntrue
Scenario: Detect desktop device
- WHEN the viewport width is 1024px or greater
- THEN
useIsDesktop()hook SHALL returntrue
Scenario: Handle viewport resize
- WHEN the user resizes the browser window across breakpoints
- THEN the hooks SHALL update their return values
- AND the UI SHALL transition smoothly to the appropriate layout
Requirement: Mobile Navigation
The frontend SHALL provide mobile-optimized navigation patterns for small screens.
Scenario: Display mobile header
- WHEN on mobile layout in room detail view
- THEN the system SHALL:
- Show room title (truncated if necessary)
- Show connection status indicator
- Show hamburger menu button
- Hide secondary action buttons (move to menu)
Scenario: Open mobile action menu
- WHEN user taps the hamburger menu on mobile
- THEN the system SHALL:
- Display an action drawer/sheet from bottom or side
- Show all room actions: Generate Report, Change Status, etc.
- Allow closing by tapping outside or swipe gesture
Scenario: Display bottom toolbar
- WHEN on mobile layout in room detail view
- THEN the system SHALL:
- Show a fixed bottom toolbar above the message input
- Include buttons for: Files, Members
- Use icons with labels for clarity
- Ensure toolbar doesn't overlap with device safe areas
Requirement: Mobile Sidebars
The frontend SHALL display sidebars as slide-in panels on mobile devices.
Scenario: Open members panel on mobile
- WHEN user taps the Members button on mobile
- THEN the system SHALL:
- Slide in a full-screen panel from the right
- Display dark overlay behind the panel
- Show member list with larger touch targets
- Include a close button at the top of the panel
Scenario: Close sidebar panel
- WHEN user taps the close button or backdrop overlay
- THEN the system SHALL:
- Slide the panel out to the right
- Remove the dark overlay
- Return focus to the main content
Scenario: Open files panel on mobile
- WHEN user taps the Files button on mobile
- THEN the system SHALL:
- Slide in a full-screen panel from the right
- Display file list with larger thumbnails
- Show upload area with larger drop zone
- Include a close button at the top
Requirement: Touch-Friendly Interactions
The frontend SHALL ensure all interactive elements are usable on touch devices.
Scenario: Minimum touch target size
- WHEN displaying buttons, links, or interactive elements on mobile
- THEN the system SHALL:
- Ensure minimum touch target of 44x44 pixels
- Provide adequate spacing between touch targets
- Use padding to expand touch areas without changing visual size
Scenario: Mobile message input
- WHEN user focuses the message input on mobile
- THEN the system SHALL:
- Expand input area for easier typing
- Keep send button easily accessible
- Handle soft keyboard appearance gracefully
- Not obscure the input behind the keyboard
Scenario: Mobile form inputs
- WHEN displaying form inputs on mobile (login, add member, etc.)
- THEN the system SHALL:
- Use larger input fields (minimum height 44px)
- Show appropriate mobile keyboard type (email, text, etc.)
- Support autocomplete where appropriate