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,63 @@
+import { useRef, useState, type KeyboardEvent } from 'react'
+import './Composer.css'
+
+interface ComposerProps {
+  roomName: string
+  disabled?: boolean
+  onSend: (content: string) => void
+}
+
+export function Composer({ roomName, disabled, onSend }: ComposerProps) {
+  const [value, setValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  function autoGrow() {
+    const el = textareaRef.current
+    if (!el) return
+    el.style.height = 'auto'
+    el.style.height = `${Math.min(el.scrollHeight, 120)}px`
+  }
+
+  function handleSend() {
+    const trimmed = value.trim()
+    if (!trimmed) return
+    onSend(trimmed)
+    setValue('')
+    requestAnimationFrame(autoGrow)
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSend()
+    }
+  }
+
+  return (
+    <div className="composer">
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        disabled={disabled}
+        onChange={(e) => {
+          setValue(e.target.value)
+          autoGrow()
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={`Message #${roomName}`}
+      />
+      <button
+        type="button"
+        className="composer-send"
+        onClick={handleSend}
+        disabled={disabled || !value.trim()}
+        aria-label="Send message"
+      >
+        <svg width="15" height="15" viewBox="0 0 20 20" aria-hidden="true">
+          <polygon points="2,2 18,10 2,18 6,10" fill="currentColor" />
+        </svg>
+      </button>
+    </div>
+  )
+}