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,112 @@
+import { useEffect, useState } from 'react'
+import { acceptInvite, declineInvite, listMyInvites } from '../api/invites'
+import { ApiError } from '../api/client'
+import type { MyInvite } from '../types'
+import './Modal.css'
+
+interface InvitesModalProps {
+  onClose: () => void
+  onAccepted: (roomId: string) => void
+  onInvitesChanged: (count: number) => void
+}
+
+export function InvitesModal({ onClose, onAccepted, onInvitesChanged }: InvitesModalProps) {
+  const [invites, setInvites] = useState<MyInvite[]>([])
+  const [loading, setLoading] = useState(true)
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function refresh() {
+    const list = await listMyInvites()
+    setInvites(list)
+    onInvitesChanged(list.length)
+  }
+
+  useEffect(() => {
+    refresh()
+      .catch((err) => setError(err instanceof ApiError ? err.message : String(err)))
+      .finally(() => setLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  async function handleAccept(invite: MyInvite) {
+    setBusyId(invite.id)
+    setError(null)
+    try {
+      await acceptInvite(invite.id)
+      await refresh()
+      onAccepted(invite.room_id)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  async function handleDecline(invite: MyInvite) {
+    setBusyId(invite.id)
+    setError(null)
+    try {
+      await declineInvite(invite.id)
+      await refresh()
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : String(err))
+    } finally {
+      setBusyId(null)
+    }
+  }
+
+  return (
+    <div className="modal-scrim" onClick={onClose}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Your invites</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>
+        ) : invites.length === 0 ? (
+          <p className="modal-empty">No pending invites.</p>
+        ) : (
+          invites.map((invite) => (
+            <div key={invite.id} className="modal-list-row">
+              <div className="modal-list-row-body">
+                <div className="modal-list-row-title">{invite.room_name}</div>
+                <div className="modal-list-row-sub">Invited by {invite.invited_by_username}</div>
+              </div>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button
+                  type="button"
+                  className="btn-secondary"
+                  disabled={busyId === invite.id}
+                  onClick={() => handleDecline(invite)}
+                >
+                  Decline
+                </button>
+                <button
+                  type="button"
+                  className="btn-primary"
+                  disabled={busyId === invite.id}
+                  onClick={() => handleAccept(invite)}
+                >
+                  Accept
+                </button>
+              </div>
+            </div>
+          ))
+        )}
+
+        <div className="modal-actions" style={{ marginTop: '1rem' }}>
+          <button type="button" className="btn-secondary" onClick={onClose}>
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}