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
@@ -0,0 +1,64 @@
|
||||
# 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
|
||||
1. **Device Detection Hook** (`useIsMobile`) - Detect mobile vs desktop using media queries
|
||||
2. **Collapsible Sidebars** - Transform fixed sidebars into slide-in panels on mobile
|
||||
3. **Mobile Header** - Simplified header with hamburger menu or action sheet
|
||||
4. **Bottom Toolbar** - Move frequently used actions to bottom of screen for thumb-friendly access
|
||||
5. **Touch-Friendly Sizing** - Increase button/input sizes on mobile
|
||||
6. **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
|
||||
```typescript
|
||||
// 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
|
||||
|
||||
## Related Changes
|
||||
- None (standalone improvement)
|
||||
@@ -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
|
||||
@@ -0,0 +1,98 @@
|
||||
# Tasks: Add Mobile Responsive Layout
|
||||
|
||||
## Phase 1: Foundation - Device Detection
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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)
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **T-5.1**: Update message input for mobile
|
||||
- Larger input field (min height 44px)
|
||||
- Larger send button
|
||||
- Handle keyboard appearance gracefully
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **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
|
||||
|
||||
- [x] **T-6.2**: Manual testing on actual devices
|
||||
- Test on iPhone Safari
|
||||
- Test on Android Chrome
|
||||
- Test keyboard interactions
|
||||
- Test safe area handling (notch)
|
||||
|
||||
- [x] **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
|
||||
Reference in New Issue
Block a user