egg/Task_Reporter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add mobile responsive layout, open room access, and admin room management

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/pages/Login.test.tsx
View File

@@ -40,7 +40,7 @@ describe('Login', () => {
expect(screen.getByText('Task Reporter')).toBeInTheDocument()
expect(screen.getByLabelText(/email/i)).toBeInTheDocument()
expect(screen.getByLabelText(/password/i)).toBeInTheDocument()
expect(screen.getByPlaceholderText(/enter your password/i)).toBeInTheDocument()
expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument()
})
@@ -48,7 +48,13 @@ describe('Login', () => {
render(<Login />)
expect(screen.getByLabelText(/email/i)).toHaveValue('')
expect(screen.getByLabelText(/password/i)).toHaveValue('')
expect(screen.getByPlaceholderText(/enter your password/i)).toHaveValue('')
})
it('should have password visibility toggle', () => {
render(<Login />)
expect(screen.getByLabelText(/show password/i)).toBeInTheDocument()
})
})
@@ -58,7 +64,7 @@ describe('Login', () => {
render(<Login />)
const emailInput = screen.getByLabelText(/email/i)
const passwordInput = screen.getByLabelText(/password/i)
const passwordInput = screen.getByPlaceholderText(/enter your password/i)
await user.type(emailInput, 'test@example.com')
await user.type(passwordInput, 'password123')
@@ -67,6 +73,22 @@ describe('Login', () => {
expect(passwordInput).toHaveValue('password123')
})
it('should toggle password visibility', async () => {
const user = userEvent.setup()
render(<Login />)
const passwordInput = screen.getByPlaceholderText(/enter your password/i)
const toggleButton = screen.getByLabelText(/show password/i)
expect(passwordInput).toHaveAttribute('type', 'password')
await user.click(toggleButton)
expect(passwordInput).toHaveAttribute('type', 'text')
await user.click(screen.getByLabelText(/hide password/i))
expect(passwordInput).toHaveAttribute('type', 'password')
})
it('should submit form with credentials', async () => {
vi.mocked(authService.login).mockResolvedValue({
token: 'test-token',
@@ -77,7 +99,7 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'password123')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
@@ -98,7 +120,7 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'password123')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
@@ -116,7 +138,7 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'password123')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
@@ -135,7 +157,7 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'wrongpassword')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'wrongpassword')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
@@ -155,7 +177,7 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'password123')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
@@ -172,11 +194,11 @@ describe('Login', () => {
render(<Login />)
await user.type(screen.getByLabelText(/email/i), 'testuser')
await user.type(screen.getByLabelText(/password/i), 'password123')
await user.type(screen.getByPlaceholderText(/enter your password/i), 'password123')
await user.click(screen.getByRole('button', { name: /login/i }))
await waitFor(() => {
expect(screen.getByRole('button')).toBeDisabled()
expect(screen.getByRole('button', { name: /logging in/i })).toBeDisabled()
})
})
})

66
frontend/src/pages/Login.tsx
View File

@@ -10,6 +10,7 @@ export default function Login() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [showPassword, setShowPassword] = useState(false)
const loginMutation = useMutation({
mutationFn: () => authService.login({ username, password }),
@@ -68,16 +69,61 @@ export default function Login() {
>
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
placeholder="Enter your password"
required
autoComplete="current-password"
/>
<div className="relative">
<input
id="password"
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-4 py-2 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
placeholder="Enter your password"
required
autoComplete="current-password"
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
aria-label={showPassword ? 'Hide password' : 'Show password'}
>
{showPassword ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)}
</button>
</div>
</div>
{/* Error Message */}

840
frontend/src/pages/RoomDetail.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from 'react'
import { useParams, Link } from 'react-router'
import { useParams, Link, useNavigate } from 'react-router'
import {
useRoom,
useRoomPermissions,
@@ -7,15 +7,19 @@ import {
useAddMember,
useUpdateMemberRole,
useRemoveMember,
usePermanentDeleteRoom,
} from '../hooks/useRooms'
import { useMessages } from '../hooks/useMessages'
import { useWebSocket } from '../hooks/useWebSocket'
import { useFiles, useUploadFile, useDeleteFile } from '../hooks/useFiles'
import { useGenerateReport, useDownloadReport } from '../hooks/useReports'
import { useUserSearch } from '../hooks/useUsers'
import { useIsMobile } from '../hooks/useMediaQuery'
import { filesService } from '../services/files'
import { useChatStore } from '../stores/chatStore'
import { useAuthStore } from '../stores/authStore'
import { useAuthStore, useIsAdmin } from '../stores/authStore'
import { Breadcrumb } from '../components/common'
import { MobileHeader, BottomToolbar, SlidePanel } from '../components/mobile'
import ReportProgress from '../components/report/ReportProgress'
import type { SeverityLevel, RoomStatus, MemberRole, FileMetadata, ReportStatus } from '../types'
@@ -42,20 +46,36 @@ const QUICK_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🎉']
export default function RoomDetail() {
const { roomId } = useParams<{ roomId: string }>()
const navigate = useNavigate()
const user = useAuthStore((state) => state.user)
const isAdmin = useIsAdmin()
const isMobile = useIsMobile()
const { data: room, isLoading: roomLoading, error: roomError } = useRoom(roomId || '')
const { data: permissions } = useRoomPermissions(roomId || '')
const { data: messagesData, isLoading: messagesLoading } = useMessages(roomId || '', { limit: 50 })
const { messages, connectionStatus, typingUsers, onlineUsers, setMessages, setCurrentRoom } = useChatStore()
const { sendTextMessage, sendTyping, editMessage, deleteMessage, addReaction, removeReaction } = useWebSocket(roomId || null)
// Handle room deleted event from WebSocket
const handleRoomDeleted = useCallback((deletedRoomId: string) => {
if (deletedRoomId === roomId) {
alert('This room has been permanently deleted by an administrator.')
navigate('/')
}
}, [roomId, navigate])
const { sendTextMessage, sendTyping, editMessage, deleteMessage, addReaction, removeReaction } = useWebSocket(
roomId || null,
{ onRoomDeleted: handleRoomDeleted }
)
// Mutations
const updateRoom = useUpdateRoom(roomId || '')
const addMember = useAddMember(roomId || '')
const updateMemberRole = useUpdateMemberRole(roomId || '')
const removeMember = useRemoveMember(roomId || '')
const permanentDeleteRoom = usePermanentDeleteRoom()
// File hooks
const { data: filesData, isLoading: filesLoading } = useFiles(roomId || '')
@@ -88,8 +108,35 @@ export default function RoomDetail() {
const fileInputRef = useRef<HTMLInputElement>(null)
const [newMemberUsername, setNewMemberUsername] = useState('')
const [newMemberRole, setNewMemberRole] = useState<MemberRole>('viewer')
const [userSearchQuery, setUserSearchQuery] = useState('')
const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
const [showUserDropdown, setShowUserDropdown] = useState(false)
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
const [deleteConfirmInput, setDeleteConfirmInput] = useState('')
const messagesEndRef = useRef<HTMLDivElement>(null)
const typingTimeoutRef = useRef<number | null>(null)
const searchTimeoutRef = useRef<number | null>(null)
// User search with debounce
const { data: userSearchResults, isLoading: userSearchLoading } = useUserSearch(
debouncedSearchQuery,
showAddMember && debouncedSearchQuery.length >= 1
)
// Debounce user search
useEffect(() => {
if (searchTimeoutRef.current) {
clearTimeout(searchTimeoutRef.current)
}
searchTimeoutRef.current = window.setTimeout(() => {
setDebouncedSearchQuery(userSearchQuery)
}, 300)
return () => {
if (searchTimeoutRef.current) {
clearTimeout(searchTimeoutRef.current)
}
}
}, [userSearchQuery])
// Initialize room
useEffect(() => {
@@ -188,6 +235,8 @@ export default function RoomDetail() {
onSuccess: () => {
setNewMemberUsername('')
setNewMemberRole('viewer')
setUserSearchQuery('')
setShowUserDropdown(false)
setShowAddMember(false)
},
}
@@ -204,6 +253,17 @@ export default function RoomDetail() {
}
}
// Permanent delete room (admin only)
const handlePermanentDelete = () => {
if (!roomId || !room) return
permanentDeleteRoom.mutate(roomId, {
onSuccess: () => {
navigate('/')
},
})
}
// File handlers
const handleFileUpload = useCallback(
(files: FileList | null) => {
@@ -341,129 +401,159 @@ export default function RoomDetail() {
const typingUsersArray = Array.from(typingUsers).filter((u) => u !== user?.username)
const onlineUsersArray = Array.from(onlineUsers)
// Toggle handlers for mobile
const handleFilesToggle = () => {
setShowFiles(!showFiles)
if (!isMobile) setShowMembers(false)
}
const handleMembersToggle = () => {
setShowMembers(!showMembers)
if (!isMobile) setShowFiles(false)
}
return (
<div className="min-h-screen bg-gray-50 flex flex-col">
{/* Header */}
<header className="bg-white shadow-sm flex-shrink-0">
<div className="max-w-7xl mx-auto px-4 py-3">
{/* Breadcrumb */}
<div className="mb-2">
<Breadcrumb
items={[
{ label: 'Home', href: '/' },
{ label: 'Rooms', href: '/' },
{ label: room.title },
]}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div>
<h1 className="font-semibold text-gray-900">{room.title}</h1>
<div className="flex items-center gap-2 text-sm">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[room.status]}`}>
{room.status}
</span>
<span className={`px-2 py-0.5 rounded text-xs font-medium ${severityColors[room.severity]}`}>
{room.severity}
</span>
{room.location && <span className="text-gray-500">{room.location}</span>}
{/* Header - Mobile vs Desktop */}
{isMobile ? (
<MobileHeader
title={room.title}
status={room.status}
connectionStatus={connectionStatus}
canUpdateStatus={permissions?.can_update_status}
isAdmin={isAdmin}
isGeneratingReport={generateReport.isPending}
onGenerateReport={handleGenerateReport}
onStatusChange={handleStatusChange}
onPermanentDelete={() => setShowDeleteConfirm(true)}
/>
) : (
<header className="bg-white shadow-sm flex-shrink-0">
<div className="max-w-7xl mx-auto px-4 py-3">
{/* Breadcrumb */}
<div className="mb-2">
<Breadcrumb
items={[
{ label: 'Home', href: '/' },
{ label: 'Rooms', href: '/' },
{ label: room.title },
]}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div>
<h1 className="font-semibold text-gray-900">{room.title}</h1>
<div className="flex items-center gap-2 text-sm">
<span className={`px-2 py-0.5 rounded text-xs font-medium ${statusColors[room.status]}`}>
{room.status}
</span>
<span className={`px-2 py-0.5 rounded text-xs font-medium ${severityColors[room.severity]}`}>
{room.severity}
</span>
{room.location && <span className="text-gray-500">{room.location}</span>}
</div>
</div>
</div>
</div>
<div className="flex items-center gap-4">
{/* Connection Status */}
<div className="flex items-center gap-1">
<div
className={`w-2 h-2 rounded-full ${
connectionStatus === 'connected'
? 'bg-green-500'
: connectionStatus === 'connecting'
? 'bg-yellow-500'
: 'bg-red-500'
}`}
/>
<span className="text-xs text-gray-500">
{connectionStatus === 'connected' ? 'Connected' : connectionStatus}
</span>
</div>
{/* Generate Report Button */}
<button
onClick={handleGenerateReport}
disabled={generateReport.isPending}
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
<div className="flex items-center gap-4">
{/* Connection Status */}
<div className="flex items-center gap-1">
<div
className={`w-2 h-2 rounded-full ${
connectionStatus === 'connected'
? 'bg-green-500'
: connectionStatus === 'connecting'
? 'bg-yellow-500'
: 'bg-red-500'
}`}
/>
</svg>
{generateReport.isPending ? '生成中...' : '生成報告'}
</button>
{/* Status Actions (Owner only) */}
{permissions?.can_update_status && room.status === 'active' && (
<div className="flex items-center gap-2">
<button
onClick={() => handleStatusChange('resolved')}
className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
>
Resolve
</button>
<button
onClick={() => handleStatusChange('archived')}
className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
>
Archive
</button>
<span className="text-xs text-gray-500">
{connectionStatus === 'connected' ? 'Connected' : connectionStatus}
</span>
</div>
)}
{/* Files Toggle */}
<button
onClick={() => {
setShowFiles(!showFiles)
setShowMembers(false)
}}
className={`flex items-center gap-1 ${showFiles ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
<span className="text-sm">Files</span>
</button>
{/* Generate Report Button */}
<button
onClick={handleGenerateReport}
disabled={generateReport.isPending}
className="flex items-center gap-1 px-3 py-1.5 text-sm bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
{generateReport.isPending ? '生成中...' : '生成報告'}
</button>
{/* Members Toggle */}
<button
onClick={() => {
setShowMembers(!showMembers)
setShowFiles(false)
}}
className={`flex items-center gap-1 ${showMembers ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span className="text-sm">{room.member_count}</span>
</button>
{/* Status Actions (Owner only) */}
{permissions?.can_update_status && room.status === 'active' && (
<div className="flex items-center gap-2">
<button
onClick={() => handleStatusChange('resolved')}
className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200"
>
Resolve
</button>
<button
onClick={() => handleStatusChange('archived')}
className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
>
Archive
</button>
</div>
)}
{/* Permanent Delete (Admin only) */}
{isAdmin && (
<button
onClick={() => setShowDeleteConfirm(true)}
className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200"
title="Permanently delete this room (Admin only)"
>
Delete Permanently
</button>
)}
{/* Files Toggle */}
<button
onClick={handleFilesToggle}
className={`flex items-center gap-1 ${showFiles ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
/>
</svg>
<span className="text-sm">Files</span>
</button>
{/* Members Toggle */}
<button
onClick={handleMembersToggle}
className={`flex items-center gap-1 ${showMembers ? 'text-blue-600' : 'text-gray-600 hover:text-gray-800'}`}
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span className="text-sm">{room.member_count}</span>
</button>
</div>
</div>
</div>
</div>
</header>
</header>
)}
{/* Main Content */}
<div className="flex-1 flex overflow-hidden">
@@ -639,29 +729,44 @@ export default function RoomDetail() {
{/* Message Input */}
{permissions?.can_write && (
<form onSubmit={handleSendMessage} className="p-4 bg-white border-t">
<form onSubmit={handleSendMessage} className={`p-4 bg-white border-t ${isMobile ? 'pb-2' : ''}`}>
<div className="flex gap-2">
<input
type="text"
value={messageInput}
onChange={handleInputChange}
placeholder="Type a message..."
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
className={`flex-1 px-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none ${
isMobile ? 'py-3 text-base' : 'py-2'
}`}
/>
<button
type="submit"
disabled={!messageInput.trim()}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
className={`bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed ${
isMobile ? 'px-5 py-3 touch-target' : 'px-4 py-2'
}`}
>
Send
</button>
</div>
</form>
)}
{/* Bottom Toolbar - Mobile Only */}
{isMobile && (
<BottomToolbar
showFiles={showFiles}
showMembers={showMembers}
memberCount={room.member_count || 0}
onFilesToggle={handleFilesToggle}
onMembersToggle={handleMembersToggle}
/>
)}
</div>
{/* Members Sidebar */}
{showMembers && (
{/* Members Sidebar - Desktop Only */}
{!isMobile && showMembers && (
<div className="w-72 bg-white border-l flex-shrink-0 overflow-y-auto">
<div className="p-4">
<div className="flex items-center justify-between mb-4">
@@ -679,13 +784,53 @@ export default function RoomDetail() {
{/* Add Member Form */}
{showAddMember && (
<form onSubmit={handleAddMember} className="mb-4 p-3 bg-gray-50 rounded-lg">
<input
type="text"
value={newMemberUsername}
onChange={(e) => setNewMemberUsername(e.target.value)}
placeholder="Username"
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded mb-2"
/>
<div className="relative mb-2">
<input
type="text"
value={userSearchQuery}
onChange={(e) => {
setUserSearchQuery(e.target.value)
setShowUserDropdown(true)
if (e.target.value !== newMemberUsername) {
setNewMemberUsername('')
}
}}
onFocus={() => setShowUserDropdown(true)}
placeholder="Search user by name or email..."
className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded"
/>
{/* User Search Dropdown */}
{showUserDropdown && userSearchQuery.length >= 1 && (
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
{userSearchLoading ? (
<div className="px-3 py-2 text-sm text-gray-500">Searching...</div>
) : userSearchResults && userSearchResults.length > 0 ? (
userSearchResults.map((result) => (
<button
key={result.user_id}
type="button"
onClick={() => {
setNewMemberUsername(result.user_id)
setUserSearchQuery(result.display_name || result.user_id)
setShowUserDropdown(false)
}}
className="w-full px-3 py-2 text-left hover:bg-gray-100 text-sm"
>
<div className="font-medium text-gray-900">{result.display_name}</div>
<div className="text-xs text-gray-500">{result.user_id}</div>
</button>
))
) : (
<div className="px-3 py-2 text-sm text-gray-500">No users found</div>
)}
</div>
)}
</div>
{newMemberUsername && (
<div className="text-xs text-green-600 mb-2">
Selected: {newMemberUsername}
</div>
)}
<div className="flex gap-2">
<select
value={newMemberRole}
@@ -697,7 +842,7 @@ export default function RoomDetail() {
</select>
<button
type="submit"
disabled={addMember.isPending}
disabled={addMember.isPending || !newMemberUsername}
className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
>
Add
@@ -711,57 +856,72 @@ export default function RoomDetail() {
{/* Member List */}
<div className="space-y-2">
{room.members?.map((member) => (
<div
key={member.user_id}
className="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
<div
className={`w-2 h-2 rounded-full flex-shrink-0 ${
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
}`}
/>
<span className="text-sm text-gray-900 truncate">{member.user_id}</span>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
{/* Role selector (Owner can change roles except their own) */}
{permissions?.role === 'owner' && member.role !== 'owner' ? (
<select
value={member.role}
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
className="text-xs px-1 py-0.5 border border-gray-200 rounded"
>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
</select>
) : (
<span className="text-xs text-gray-500 px-1">{roleLabels[member.role]}</span>
)}
{/* Remove button (Owner/Editor can remove, but not the owner) */}
{permissions?.can_manage_members &&
member.role !== 'owner' &&
member.user_id !== user?.username && (
<button
onClick={() => handleRemoveMember(member.user_id)}
className="p-1 text-gray-400 hover:text-red-500"
title="Remove member"
{room.members?.map((member) => {
const isOwner = permissions?.role === 'owner'
const isEditor = permissions?.role === 'editor'
const canUpgradeToEditor = isEditor && member.role === 'viewer'
return (
<div
key={member.user_id}
className="flex items-center justify-between py-2 px-2 hover:bg-gray-50 rounded"
>
<div className="flex items-center gap-2 flex-1 min-w-0">
<div
className={`w-2 h-2 rounded-full flex-shrink-0 ${
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
}`}
/>
<span className="text-sm text-gray-900 truncate">{member.user_id}</span>
</div>
<div className="flex items-center gap-1 flex-shrink-0">
{/* Owner: Full role selector */}
{isOwner && member.role !== 'owner' ? (
<select
value={member.role}
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
className="text-xs px-1 py-0.5 border border-gray-200 rounded"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
</select>
) : canUpgradeToEditor ? (
/* Editor: Can only upgrade viewer to editor */
<button
onClick={() => handleRoleChange(member.user_id, 'editor')}
className="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded hover:bg-green-200"
title="Upgrade to Editor"
>
Upgrade
</button>
) : (
<span className="text-xs text-gray-500 px-1">{roleLabels[member.role]}</span>
)}
{/* Remove button: Only owner can remove, editors cannot */}
{isOwner &&
member.role !== 'owner' &&
member.user_id !== user?.username && (
<button
onClick={() => handleRemoveMember(member.user_id)}
className="p-1 text-gray-400 hover:text-red-500"
title="Remove member"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
)}
</div>
</div>
</div>
))}
)
})}
</div>
</div>
</div>
)}
{/* Files Sidebar */}
{showFiles && (
{/* Files Sidebar - Desktop Only */}
{!isMobile && showFiles && (
<div className="w-80 bg-white border-l flex-shrink-0 overflow-y-auto">
<div className="p-4">
<h3 className="font-semibold text-gray-900 mb-4">Files</h3>
@@ -894,6 +1054,276 @@ export default function RoomDetail() {
)}
</div>
{/* Mobile Members SlidePanel */}
{isMobile && (
<SlidePanel
isOpen={showMembers}
onClose={() => setShowMembers(false)}
title="Members"
>
<div className="p-4">
{permissions?.can_manage_members && (
<button
onClick={() => setShowAddMember(!showAddMember)}
className="w-full mb-4 px-4 py-3 text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100 touch-target"
>
+ Add Member
</button>
)}
{/* Add Member Form */}
{showAddMember && (
<form onSubmit={handleAddMember} className="mb-4 p-4 bg-gray-50 rounded-lg">
<div className="relative mb-3">
<input
type="text"
value={userSearchQuery}
onChange={(e) => {
setUserSearchQuery(e.target.value)
setShowUserDropdown(true)
if (e.target.value !== newMemberUsername) {
setNewMemberUsername('')
}
}}
onFocus={() => setShowUserDropdown(true)}
placeholder="Search user by name or email..."
className="w-full px-4 py-3 text-base border border-gray-300 rounded-lg"
/>
{showUserDropdown && userSearchQuery.length >= 1 && (
<div className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto">
{userSearchLoading ? (
<div className="px-4 py-3 text-gray-500">Searching...</div>
) : userSearchResults && userSearchResults.length > 0 ? (
userSearchResults.map((result) => (
<button
key={result.user_id}
type="button"
onClick={() => {
setNewMemberUsername(result.user_id)
setUserSearchQuery(result.display_name || result.user_id)
setShowUserDropdown(false)
}}
className="w-full px-4 py-3 text-left hover:bg-gray-100 touch-target"
>
<div className="font-medium text-gray-900">{result.display_name}</div>
<div className="text-sm text-gray-500">{result.user_id}</div>
</button>
))
) : (
<div className="px-4 py-3 text-gray-500">No users found</div>
)}
</div>
)}
</div>
{newMemberUsername && (
<div className="text-sm text-green-600 mb-3">Selected: {newMemberUsername}</div>
)}
<div className="flex gap-3">
<select
value={newMemberRole}
onChange={(e) => setNewMemberRole(e.target.value as MemberRole)}
className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-lg"
>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
</select>
<button
type="submit"
disabled={addMember.isPending || !newMemberUsername}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 touch-target"
>
Add
</button>
</div>
</form>
)}
{/* Member List */}
<div className="space-y-1">
{room.members?.map((member) => {
const isOwner = permissions?.role === 'owner'
const isEditor = permissions?.role === 'editor'
const canUpgradeToEditor = isEditor && member.role === 'viewer'
return (
<div
key={member.user_id}
className="flex items-center justify-between py-3 px-3 hover:bg-gray-50 rounded-lg touch-target"
>
<div className="flex items-center gap-3 flex-1 min-w-0">
<div
className={`w-3 h-3 rounded-full flex-shrink-0 ${
onlineUsersArray.includes(member.user_id) ? 'bg-green-500' : 'bg-gray-300'
}`}
/>
<span className="text-base text-gray-900 truncate">{member.user_id}</span>
</div>
<div className="flex items-center gap-2 flex-shrink-0">
{isOwner && member.role !== 'owner' ? (
<select
value={member.role}
onChange={(e) => handleRoleChange(member.user_id, e.target.value as MemberRole)}
className="text-sm px-2 py-1 border border-gray-200 rounded"
>
<option value="viewer">Viewer</option>
<option value="editor">Editor</option>
</select>
) : canUpgradeToEditor ? (
<button
onClick={() => handleRoleChange(member.user_id, 'editor')}
className="text-sm px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200"
>
Upgrade
</button>
) : (
<span className="text-sm text-gray-500">{roleLabels[member.role]}</span>
)}
{isOwner && member.role !== 'owner' && member.user_id !== user?.username && (
<button
onClick={() => handleRemoveMember(member.user_id)}
className="p-2 text-gray-400 hover:text-red-500 touch-target"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
)}
</div>
</div>
)
})}
</div>
</div>
</SlidePanel>
)}
{/* Mobile Files SlidePanel */}
{isMobile && (
<SlidePanel
isOpen={showFiles}
onClose={() => setShowFiles(false)}
title="Files"
>
<div className="p-4">
{/* Upload Area */}
{permissions?.can_write && (
<div
className={`mb-4 border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'
}`}
onDrop={handleDrop}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
>
<input
type="file"
ref={fileInputRef}
onChange={(e) => handleFileUpload(e.target.files)}
className="hidden"
/>
{uploadProgress !== null ? (
<div>
<div className="text-base text-gray-600 mb-2">Uploading...</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full transition-all"
style={{ width: `${uploadProgress}%` }}
/>
</div>
<div className="text-sm text-gray-500 mt-1">{uploadProgress}%</div>
</div>
) : (
<>
<svg className="w-10 h-10 mx-auto text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<button
onClick={() => fileInputRef.current?.click()}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 touch-target"
>
Choose File
</button>
</>
)}
</div>
)}
{/* File List */}
{filesLoading ? (
<div className="text-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
</div>
) : filesData?.files.length === 0 ? (
<p className="text-base text-gray-500 text-center py-8">No files uploaded yet</p>
) : (
<div className="space-y-2">
{filesData?.files.map((file) => (
<div
key={file.file_id}
className="flex items-center gap-3 p-3 hover:bg-gray-50 rounded-lg"
>
{/* Thumbnail or Icon */}
<div className="w-12 h-12 flex-shrink-0 rounded bg-gray-100 flex items-center justify-center overflow-hidden">
{filesService.isImage(file.mime_type) ? (
<svg className="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
) : (
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
)}
</div>
{/* File Info */}
<div className="flex-1 min-w-0">
<p className="text-base text-gray-900 truncate">{file.filename}</p>
<p className="text-sm text-gray-500">{filesService.formatFileSize(file.file_size)}</p>
</div>
{/* Actions */}
<div className="flex items-center gap-1">
{filesService.isImage(file.mime_type) && (
<button
onClick={() => setPreviewFile(file)}
className="p-2 text-gray-400 hover:text-blue-500 touch-target"
title="Preview"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
)}
<button
onClick={() => handleDownloadFile(file)}
className="p-2 text-gray-400 hover:text-blue-500 touch-target"
title="Download"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
{(file.uploader_id === user?.username || permissions?.can_delete) && (
<button
onClick={() => handleDeleteFile(file.file_id)}
className="p-2 text-gray-400 hover:text-red-500 touch-target"
title="Delete"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
)}
</div>
</div>
))}
</div>
)}
</div>
</SlidePanel>
)}
{/* Image Preview Modal */}
{previewFile && (
<div
@@ -941,6 +1371,74 @@ export default function RoomDetail() {
reportId={reportProgress.reportId}
onDownload={handleDownloadReport}
/>
{/* Permanent Delete Confirmation Modal (Admin only) */}
{showDeleteConfirm && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6">
<h2 className="text-xl font-semibold text-red-600 mb-4">
Permanently Delete Room
</h2>
<div className="space-y-4">
<div className="bg-red-50 border border-red-200 rounded-lg p-4">
<p className="text-sm text-red-800 font-medium mb-2">
This action cannot be undone!
</p>
<p className="text-sm text-red-700">
The following will be permanently deleted:
</p>
<ul className="text-sm text-red-700 list-disc list-inside mt-2">
<li>All members and permissions</li>
<li>All messages and reactions</li>
<li>All uploaded files</li>
<li>All generated reports</li>
</ul>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Type <span className="font-bold">"{room?.title}"</span> to confirm:
</label>
<input
type="text"
value={deleteConfirmInput}
onChange={(e) => setDeleteConfirmInput(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none"
placeholder="Enter room title"
/>
</div>
{permanentDeleteRoom.isError && (
<div className="bg-red-50 text-red-600 px-3 py-2 rounded-lg text-sm">
Failed to delete room. Please try again.
</div>
)}
<div className="flex justify-end gap-3 pt-2">
<button
type="button"
onClick={() => {
setShowDeleteConfirm(false)
setDeleteConfirmInput('')
}}
className="px-4 py-2 text-gray-600 hover:text-gray-800"
>
Cancel
</button>
<button
type="button"
onClick={handlePermanentDelete}
disabled={deleteConfirmInput !== room?.title || permanentDeleteRoom.isPending}
className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
{permanentDeleteRoom.isPending ? 'Deleting...' : 'Delete Permanently'}
</button>
</div>
</div>
</div>
</div>
)}
</div>
)
}

275
frontend/src/pages/RoomList.tsx
View File

@@ -1,9 +1,10 @@
import { useState } from 'react'
import { Link } from 'react-router'
import { useRooms, useCreateRoom, useRoomTemplates } from '../hooks/useRooms'
import { useAuthStore } from '../stores/authStore'
import { Link, useNavigate } from 'react-router'
import { useRooms, useCreateRoom, useRoomTemplates, useJoinRoom } from '../hooks/useRooms'
import { useAuthStore, useIsAdmin } from '../stores/authStore'
import { useIsMobile } from '../hooks/useMediaQuery'
import { Breadcrumb } from '../components/common'
import type { RoomStatus, IncidentType, SeverityLevel, CreateRoomRequest } from '../types'
import type { RoomStatus, IncidentType, SeverityLevel, CreateRoomRequest, Room } from '../types'
const statusColors: Record<RoomStatus, string> = {
active: 'bg-green-100 text-green-800',
@@ -28,13 +29,19 @@ const incidentTypeLabels: Record<IncidentType, string> = {
const ITEMS_PER_PAGE = 12
export default function RoomList() {
const navigate = useNavigate()
const user = useAuthStore((state) => state.user)
const clearAuth = useAuthStore((state) => state.clearAuth)
const isAdmin = useIsAdmin()
const isMobile = useIsMobile()
const [statusFilter, setStatusFilter] = useState<RoomStatus | ''>('')
const [statusFilter, setStatusFilter] = useState<RoomStatus | ''>('active')
const [search, setSearch] = useState('')
const [showCreateModal, setShowCreateModal] = useState(false)
const [page, setPage] = useState(1)
const [myRoomsOnly, setMyRoomsOnly] = useState(false)
const joinRoom = useJoinRoom()
// Reset page when filters change
const handleStatusChange = (status: RoomStatus | '') => {
@@ -47,9 +54,25 @@ export default function RoomList() {
setPage(1)
}
const handleMyRoomsToggle = () => {
setMyRoomsOnly(!myRoomsOnly)
setPage(1)
}
const handleJoinRoom = (e: React.MouseEvent, roomId: string) => {
e.preventDefault()
e.stopPropagation()
joinRoom.mutate(roomId, {
onSuccess: () => {
navigate(`/rooms/${roomId}`)
},
})
}
const { data, isLoading, error } = useRooms({
status: statusFilter || undefined,
search: search || undefined,
my_rooms: myRoomsOnly || undefined,
limit: ITEMS_PER_PAGE,
offset: (page - 1) * ITEMS_PER_PAGE,
})
@@ -63,60 +86,90 @@ export default function RoomList() {
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<header className="bg-white shadow-sm">
<div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 className="text-xl font-bold text-gray-900">Task Reporter</h1>
<div className="flex items-center gap-4">
<span className="text-gray-600">{user?.display_name}</span>
<header className="bg-white shadow-sm safe-area-top">
<div className="max-w-7xl mx-auto px-4 py-3 sm:py-4 flex justify-between items-center">
<h1 className={`font-bold text-gray-900 ${isMobile ? 'text-lg' : 'text-xl'}`}>Task Reporter</h1>
<div className="flex items-center gap-2 sm:gap-4">
{!isMobile && <span className="text-gray-600">{user?.display_name}</span>}
<button
onClick={handleLogout}
className="text-gray-500 hover:text-gray-700"
className={`text-gray-500 hover:text-gray-700 ${isMobile ? 'touch-target p-2' : ''}`}
aria-label="Logout"
>
Logout
{isMobile ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
) : (
'Logout'
)}
</button>
</div>
</div>
</header>
{/* Main Content */}
<main className="max-w-7xl mx-auto px-4 py-6">
{/* Breadcrumb */}
<div className="mb-4">
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Rooms' }]} />
</div>
<main className={`max-w-7xl mx-auto px-4 py-4 sm:py-6 ${isMobile ? 'safe-area-bottom' : ''}`}>
{/* Breadcrumb - hide on mobile */}
{!isMobile && (
<div className="mb-4">
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Rooms' }]} />
</div>
)}
{/* Toolbar */}
<div className="flex flex-col sm:flex-row gap-4 mb-6">
{/* Search */}
<div className="flex flex-col gap-3 mb-4 sm:mb-6">
{/* Search - Full width on mobile */}
<div className="flex-1">
<input
type="text"
placeholder="Search rooms..."
value={search}
onChange={(e) => handleSearchChange(e.target.value)}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
className={`w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none ${
isMobile ? 'px-4 py-3 text-base' : 'px-4 py-2'
}`}
/>
</div>
{/* Status Filter */}
<select
value={statusFilter}
onChange={(e) => handleStatusChange(e.target.value as RoomStatus | '')}
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
>
<option value="">All Status</option>
<option value="active">Active</option>
<option value="resolved">Resolved</option>
<option value="archived">Archived</option>
</select>
{/* Filter Row */}
<div className="flex flex-wrap gap-2 sm:gap-4">
{/* Status Filter */}
<select
value={statusFilter}
onChange={(e) => handleStatusChange(e.target.value as RoomStatus | '')}
className={`border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none flex-1 sm:flex-none ${
isMobile ? 'px-3 py-3 text-base min-w-0' : 'px-4 py-2'
}`}
>
{isAdmin && <option value="">All Status</option>}
<option value="active">Active</option>
<option value="resolved">Resolved</option>
{isAdmin && <option value="archived">Archived</option>}
</select>
{/* New Room Button */}
<button
onClick={() => setShowCreateModal(true)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
>
+ New Room
</button>
{/* My Rooms Filter */}
<button
onClick={handleMyRoomsToggle}
className={`rounded-lg border transition-colors flex-1 sm:flex-none ${
myRoomsOnly
? 'bg-blue-600 text-white border-blue-600'
: 'border-gray-300 text-gray-700 hover:bg-gray-50'
} ${isMobile ? 'px-3 py-3 text-base' : 'px-4 py-2'}`}
>
{myRoomsOnly ? 'Show All' : 'My Rooms'}
</button>
{/* New Room Button */}
<button
onClick={() => setShowCreateModal(true)}
className={`bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex-1 sm:flex-none ${
isMobile ? 'px-3 py-3 text-base' : 'px-4 py-2'
}`}
>
+ New Room
</button>
</div>
</div>
{/* Room List */}
@@ -141,56 +194,15 @@ export default function RoomList() {
</div>
) : (
<>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<div className={`grid gap-4 ${isMobile ? 'grid-cols-1' : 'md:grid-cols-2 lg:grid-cols-3'}`}>
{data?.rooms.map((room) => (
<Link
<RoomCard
key={room.room_id}
to={`/rooms/${room.room_id}`}
className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow"
>
{/* Room Header */}
<div className="flex justify-between items-start mb-2">
<h3 className="font-semibold text-gray-900 truncate flex-1">
{room.title}
</h3>
<span
className={`ml-2 px-2 py-0.5 rounded text-xs font-medium ${
statusColors[room.status]
}`}
>
{room.status}
</span>
</div>
{/* Type and Severity */}
<div className="flex gap-2 mb-3">
<span className="text-xs text-gray-500">
{incidentTypeLabels[room.incident_type]}
</span>
<span
className={`px-2 py-0.5 rounded text-xs font-medium ${
severityColors[room.severity]
}`}
>
{room.severity}
</span>
</div>
{/* Description */}
{room.description && (
<p className="text-sm text-gray-600 mb-3 line-clamp-2">
{room.description}
</p>
)}
{/* Footer */}
<div className="flex justify-between items-center text-xs text-gray-400">
<span>{room.member_count} members</span>
<span>
{new Date(room.last_activity_at).toLocaleDateString()}
</span>
</div>
</Link>
room={room}
onJoin={handleJoinRoom}
isJoining={joinRoom.isPending}
isMobile={isMobile}
/>
))}
</div>
@@ -231,6 +243,97 @@ export default function RoomList() {
)
}
// Room Card Component
function RoomCard({
room,
onJoin,
isJoining,
isMobile,
}: {
room: Room
onJoin: (e: React.MouseEvent, roomId: string) => void
isJoining: boolean
isMobile: boolean
}) {
const isMember = room.is_member || room.current_user_role !== null
return (
<Link
to={isMember ? `/rooms/${room.room_id}` : '#'}
onClick={!isMember ? (e) => e.preventDefault() : undefined}
className={`bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow block ${
isMobile ? 'p-4' : 'p-4'
}`}
>
{/* Room Header */}
<div className="flex justify-between items-start mb-2">
<h3 className={`font-semibold text-gray-900 truncate flex-1 ${isMobile ? 'text-base' : ''}`}>
{room.title}
</h3>
<div className="flex gap-1 ml-2 flex-shrink-0">
{isMember && (
<span className={`rounded font-medium bg-blue-100 text-blue-800 ${
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
}`}>
Member
</span>
)}
<span
className={`rounded font-medium ${statusColors[room.status]} ${
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
}`}
>
{room.status}
</span>
</div>
</div>
{/* Type and Severity */}
<div className="flex gap-2 mb-3 flex-wrap">
<span className={`text-gray-500 ${isMobile ? 'text-sm' : 'text-xs'}`}>
{incidentTypeLabels[room.incident_type]}
</span>
<span
className={`rounded font-medium ${severityColors[room.severity]} ${
isMobile ? 'px-2 py-1 text-xs' : 'px-2 py-0.5 text-xs'
}`}
>
{room.severity}
</span>
</div>
{/* Description */}
{room.description && (
<p className={`text-gray-600 mb-3 line-clamp-2 ${isMobile ? 'text-base' : 'text-sm'}`}>
{room.description}
</p>
)}
{/* Footer */}
<div className="flex justify-between items-center">
<span className={`text-gray-400 ${isMobile ? 'text-sm' : 'text-xs'}`}>
{room.member_count} members
</span>
{!isMember && room.status !== 'archived' ? (
<button
onClick={(e) => onJoin(e, room.room_id)}
disabled={isJoining}
className={`bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50 ${
isMobile ? 'px-4 py-2 text-base touch-target' : 'px-3 py-1 text-sm'
}`}
>
{isJoining ? 'Joining...' : 'Join'}
</button>
) : (
<span className={`text-gray-400 ${isMobile ? 'text-sm' : 'text-xs'}`}>
{new Date(room.last_activity_at).toLocaleDateString()}
</span>
)}
</div>
</Link>
)
}
// Create Room Modal Component
function CreateRoomModal({ onClose }: { onClose: () => void }) {
const [title, setTitle] = useState('')