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>

openspec/changes/archive/add-mobile-responsive-layout/tasks.md

@@ -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