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>
This commit is contained in:
egg
132
openspec/specs/mobile-layout/spec.md
Normal file
132
openspec/specs/mobile-layout/spec.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user