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,79 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { getRoomMessages } from '../api/rooms'
+import { useChatSocket } from '../ws/useChatSocket'
+import type { ChatMessageEnvelope, Message, MyRoomItem, RoomMember, ServerEnvelope } from '../types'
+import { Composer } from './Composer'
+import { MessageList } from './MessageList'
+import './ChatPane.css'
+
+interface ChatPaneProps {
+  room: MyRoomItem
+  members: RoomMember[]
+  isMobile: boolean
+  onBack: () => void
+  onToggleInfo: () => void
+  infoOpen: boolean
+}
+
+export function ChatPane({ room, members, isMobile, onBack, onToggleInfo, infoOpen }: ChatPaneProps) {
+  const navigate = useNavigate()
+  const [history, setHistory] = useState<Message[]>([])
+  const [live, setLive] = useState<ChatMessageEnvelope[]>([])
+  const [wsError, setWsError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setHistory([])
+    setLive([])
+    setWsError(null)
+    getRoomMessages(room.id).then(setHistory).catch((err) => setWsError(String(err)))
+  }, [room.id])
+
+  const onMessage = useCallback((envelope: ServerEnvelope) => {
+    if (envelope.type === 'message') {
+      setLive((prev) => [...prev, envelope])
+    } else if (envelope.type === 'error') {
+      setWsError(envelope.detail)
+    }
+  }, [])
+
+  const onUnauthenticated = useCallback(() => navigate('/login'), [navigate])
+
+  const { connected, send } = useChatSocket({ roomId: room.id, onMessage, onUnauthenticated })
+
+  return (
+    <section className="chat-pane">
+      <header className="chat-pane-header">
+        {isMobile && (
+          <button type="button" className="chat-pane-back" onClick={onBack} aria-label="Back to rooms">
+            <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+              <polyline points="14,4 6,10 14,16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        )}
+        <div className="chat-pane-title-block">
+          <div className="chat-pane-title">#{room.name}</div>
+          <div className="chat-pane-subtitle">{members.length} member{members.length === 1 ? '' : 's'}</div>
+        </div>
+        <button
+          type="button"
+          className={`chat-pane-info-btn${infoOpen ? ' chat-pane-info-btn-active' : ''}`}
+          onClick={onToggleInfo}
+          aria-label="Room details"
+          aria-pressed={infoOpen}
+        >
+          <svg width="15" height="15" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="1.6" />
+            <circle cx="10" cy="6.4" r="1" fill="currentColor" />
+            <rect x="9" y="9" width="2" height="6" rx="1" fill="currentColor" />
+          </svg>
+        </button>
+      </header>
+
+      {wsError && <p className="chat-pane-error">{wsError}</p>}
+
+      <MessageList messages={[...history, ...live]} members={members} />
+      <Composer roomName={room.name} disabled={!connected} onSend={send} />
+    </section>
+  )
+}