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>
133 lines
5.1 KiB
Markdown
133 lines
5.1 KiB
Markdown
# 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 return `true`
|
|
- **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 return `true`
|
|
|
|
#### Scenario: Detect desktop device
|
|
- **WHEN** the viewport width is 1024px or greater
|
|
- **THEN** `useIsDesktop()` hook SHALL return `true`
|
|
|
|
#### 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
|