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,149 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { listMyInvites } from '../api/invites'
+import { listMyRooms, listRoomMembers } from '../api/rooms'
+import { BrowseRoomsModal } from '../components/BrowseRoomsModal'
+import { ChatPane } from '../components/ChatPane'
+import { InvitesModal } from '../components/InvitesModal'
+import { NewRoomModal } from '../components/NewRoomModal'
+import { RoomInfoPanel } from '../components/RoomInfoPanel'
+import { Sidebar } from '../components/Sidebar'
+import { TopBar } from '../components/TopBar'
+import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
+import type { MyRoomItem, RoomMember } from '../types'
+import './ChatShellPage.css'
+
+type ModalKind = 'new' | 'browse' | 'invites' | null
+
+export function ChatShellPage() {
+  const { roomId } = useParams<{ roomId?: string }>()
+  const navigate = useNavigate()
+  const width = useWindowWidth()
+  const isMobile = width < MOBILE_BREAKPOINT
+
+  const [rooms, setRooms] = useState<MyRoomItem[]>([])
+  const [search, setSearch] = useState('')
+  const [members, setMembers] = useState<RoomMember[]>([])
+  const [inviteCount, setInviteCount] = useState(0)
+  const [infoOpen, setInfoOpen] = useState(false)
+  const [modal, setModal] = useState<ModalKind>(null)
+
+  const activeRoom = rooms.find((r) => r.id === roomId)
+
+  const refreshRooms = useCallback(async () => {
+    const list = await listMyRooms()
+    setRooms(list)
+    return list
+  }, [])
+
+  const refreshMembers = useCallback(() => {
+    if (!roomId) return
+    listRoomMembers(roomId).then(setMembers).catch(() => setMembers([]))
+  }, [roomId])
+
+  useEffect(() => {
+    refreshRooms().catch(() => {})
+  }, [refreshRooms])
+
+  useEffect(() => {
+    listMyInvites()
+      .then((list) => setInviteCount(list.length))
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    refreshMembers()
+  }, [refreshMembers])
+
+  function goToRoom(id: string) {
+    navigate(`/rooms/${id}`)
+  }
+
+  return (
+    <div className="chat-shell">
+      <TopBar />
+      <div className="chat-shell-body">
+        {(!isMobile || !roomId) && (
+          <Sidebar
+            rooms={rooms}
+            activeRoomId={roomId}
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onOpenNewRoom={() => setModal('new')}
+            onOpenBrowse={() => setModal('browse')}
+            onOpenInvites={() => setModal('invites')}
+            inviteCount={inviteCount}
+          />
+        )}
+
+        {(!isMobile || roomId) &&
+          (activeRoom ? (
+            <ChatPane
+              key={activeRoom.id}
+              room={activeRoom}
+              members={members}
+              isMobile={isMobile}
+              onBack={() => navigate('/rooms')}
+              onToggleInfo={() => setInfoOpen((v) => !v)}
+              infoOpen={infoOpen}
+            />
+          ) : (
+            !isMobile && (
+              <div className="chat-empty-state">
+                <p>Select a room to start chatting.</p>
+              </div>
+            )
+          ))}
+
+        {!isMobile && infoOpen && activeRoom && (
+          <RoomInfoPanel
+            room={activeRoom}
+            members={members}
+            onClose={() => setInfoOpen(false)}
+            onMembersChanged={refreshMembers}
+            onRoomUpdated={() => refreshRooms()}
+            onRoomDeleted={() => {
+              setInfoOpen(false)
+              navigate('/rooms')
+              refreshRooms()
+            }}
+            onLeft={() => {
+              setInfoOpen(false)
+              navigate('/rooms')
+              refreshRooms()
+            }}
+          />
+        )}
+      </div>
+
+      {modal === 'new' && (
+        <NewRoomModal
+          onClose={() => setModal(null)}
+          onCreated={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+      {modal === 'browse' && (
+        <BrowseRoomsModal
+          onClose={() => setModal(null)}
+          onJoined={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+      {modal === 'invites' && (
+        <InvitesModal
+          onClose={() => setModal(null)}
+          onInvitesChanged={setInviteCount}
+          onAccepted={(id) => {
+            setModal(null)
+            refreshRooms().then(() => goToRoom(id))
+          }}
+        />
+      )}
+    </div>
+  )
+}