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/proposal.md

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