Rebuild frontend from the Claude Design handoff, DarkSingularity brand

Replaces the Phase 1 placeholder UI with a single persistent app shell (top bar + sidebar + chat pane, 860px responsive breakpoint) matching the "PWA chat system UI" design handoff: message bubbles with consecutive-run avatar/name grouping, auto-growing composer, room search, and the real DarkSingularity logo (also used to regenerate the PWA icons). The handoff didn't cover Phase 2 (private rooms, roles, invites) or browsing/joining open rooms, so those are added using the same visual language: a room info panel with role badges, invite-by-username with a pending-invites list, member management (remove/promote/demote/transfer ownership), room settings (rename/describe/delete), and separate browse-rooms/invites-inbox modals. Unread badges, last-message preview, and the typing indicator are deliberately deferred -- both need new backend features (read-tracking, a WS typing event) that weren't in scope this pass. Two small backend additions round out data the new UI needs but the API didn't expose: MessageRead.username (historic messages had no sender name) and InviteRead.target_username / MyInviteRead.room_name+invited_by_username (a recipient's invite list can't otherwise resolve a room they're not in). Both are additive; 35 backend tests still pass. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-13 21:10:58 -06:00
parent c79e96dd48
commit e9fcb9fea2
51 changed files with 2510 additions and 290 deletions
@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+import { ApiError } from '../api/client'
+import { joinRoom, listRooms } from '../api/rooms'
+import type { RoomListItem } from '../types'
+import { RoomAvatar } from './RoomAvatar'
+import './Modal.css'
+
+interface BrowseRoomsModalProps {
+  onClose: () => void
+  onJoined: (roomId: string) => void
+}
+
+export function BrowseRoomsModal({ onClose, onJoined }: BrowseRoomsModalProps) {
+  const [rooms, setRooms] = useState<RoomListItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [joiningId, setJoiningId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    listRooms()
+      .then(setRooms)
+      .catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
+      .finally(() => setLoading(false))
+  }, [])
+
+  async function handleJoin(roomId: string) {
+    setJoiningId(roomId)
+    setError(null)
+    try {
+      await joinRoom(roomId)
+      onJoined(roomId)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setJoiningId(null)
+    }
+  }
+
+  const joinable = rooms.filter((r) => !r.is_member)
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Browse open rooms</h2>
+          <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
+            &times;
+          </button>
+        </div>
+
+        {error && <p className="modal-error">{error}</p>}
+
+        {loading ? (
+          <p className="modal-empty">Loading...</p>
+        ) : joinable.length === 0 ? (
+          <p className="modal-empty">No open rooms to join right now.</p>
+        ) : (
+          joinable.map((room, i) => (
+            <div key={room.id} className="modal-list-row">
+              <RoomAvatar colorIndex={i} size={30} />
+              <div className="modal-list-row-body">
+                <div className="modal-list-row-title">{room.name}</div>
+                {room.description && <div className="modal-list-row-sub">{room.description}</div>}
+              </div>
+              <button
+                type="button"
+                className="btn-secondary"
+                disabled={joiningId === room.id}
+                onClick={() => handleJoin(room.id)}
+              >
+                Join
+              </button>
+            </div>
+          ))
+        )}
+
+        <div className="modal-actions" style={{ marginTop: '1rem' }}>
+          <button type="button" className="btn-secondary" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}