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
2025-12-05 09:12:10 +08:00
parent 1e44a63a8e
commit 1d5d4d447d
48 changed files with 3505 additions and 401 deletions

View File

@@ -36,35 +36,26 @@ The frontend SHALL provide a login interface that authenticates users against th
- Redirect to login page
### Requirement: Incident Room List
The frontend SHALL display a filterable, searchable list of incident rooms accessible to the current user.
The frontend SHALL display a filterable, searchable list of incident rooms accessible to the current user. The frontend SHALL restrict the status filter options to show only "Active" and "Resolved" for non-admin users, and SHALL display all status options including "Archived" only for system administrators.
#### Scenario: Display room list
- **WHEN** a logged-in user navigates to the room list page
#### Scenario: Filter rooms by status (Non-admin)
- **WHEN** a non-admin user views the status filter dropdown
- **THEN** the system SHALL:
- Fetch rooms from `GET /api/rooms`
- Display rooms as cards with title, status, severity, and timestamp
- Show the user's role in each room
- Order by last activity (most recent first)
- Display only "Active" and "Resolved" options
- NOT display "Archived" option
- NOT display "All Status" option that would include archived rooms
#### Scenario: Filter rooms by status
- **WHEN** a user selects a status filter (Active, Resolved, Archived)
#### Scenario: Filter rooms by status (Admin)
- **WHEN** a system administrator views the status filter dropdown
- **THEN** the system SHALL:
- Update the room list to show only rooms matching the filter
- Preserve other active filters
- Display all status options: "All Status", "Active", "Resolved", "Archived"
- Allow viewing archived rooms
#### Scenario: Search rooms
- **WHEN** a user enters text in the search box
#### Scenario: Default status filter
- **WHEN** a user navigates to the room list page
- **THEN** the system SHALL:
- Filter rooms by title and description containing the search text
- Update results in real-time (debounced)
#### Scenario: Create new room
- **WHEN** a user clicks "New Room" and fills the creation form
- **THEN** the system SHALL:
- Display template selection if templates exist
- Submit room creation to `POST /api/rooms`
- Navigate to the new room on success
- Show error message on failure
- Default to "Active" status filter for all users
- Fetch only active rooms initially
### Requirement: Incident Room Detail View
The frontend SHALL display complete incident room information including metadata, members, and provide management controls for authorized users.
@@ -270,3 +261,43 @@ The frontend SHALL provide a responsive layout that works on desktop and tablet
- Log error details for debugging
- Not crash or show blank screen
### Requirement: Admin Room Deletion Interface
The frontend SHALL provide system administrators with the ability to permanently delete rooms through a dedicated UI control.
#### Scenario: Display delete button for admin
- **WHEN** a system administrator views a room detail page
- **THEN** the system SHALL:
- Display a "Delete Room Permanently" button in room settings/actions
- Style the button with warning color (red)
- Only show this button to admin users
#### Scenario: Hide delete button for non-admin
- **WHEN** a non-admin user views a room detail page
- **THEN** the system SHALL:
- NOT display permanent delete option
- Only show standard archive option (if owner)
#### Scenario: Confirm permanent deletion
- **WHEN** an admin clicks "Delete Room Permanently"
- **THEN** the system SHALL:
- Display a confirmation dialog with warning text
- Require typing room name to confirm (optional safety measure)
- Explain that deletion is irreversible
- Show what will be deleted (messages, files, reports)
#### Scenario: Execute permanent deletion
- **WHEN** an admin confirms permanent deletion
- **THEN** the system SHALL:
- Send DELETE request to `/api/rooms/{room_id}/permanent`
- Show loading state during deletion
- Navigate to room list on success
- Show success toast message
- Show error message on failure
#### Scenario: Handle active users in deleted room
- **WHEN** a room is permanently deleted while other users are viewing it
- **THEN** the system SHALL:
- Receive WebSocket disconnect event
- Display "Room has been deleted" message
- Navigate affected users to room list