add hub get logic and part of client

2026-04-28 21:22:33 +02:00
parent a49f9f4615
commit 221fb47495
24 changed files with 1788 additions and 22 deletions
@@ -0,0 +1,50 @@
+import { useApp } from '../context/AppContext'
+import { colorToCss } from '../utils/color'
+import MessageList from './MessageList'
+import MessageInput from './MessageInput'
+
+export default function ChatArea() {
+  const { state, userId } = useApp()
+  const conn = state.connections.find(c => c.id === state.selectedId)
+
+  let header = null
+  if (conn) {
+    const otherId = conn.requestorId === userId ? conn.recipientId : conn.requestorId
+    const other = state.userMap[otherId]
+    header = (
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-gray-700/60 shrink-0">
+        <div
+          className="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-semibold shrink-0"
+          style={{ backgroundColor: colorToCss(other?.color) }}
+        >
+          {other?.name?.[0]?.toUpperCase() ?? '?'}
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-white">{other?.name ?? '…'}</p>
+          {other?.pronouns && (
+            <p className="text-xs text-gray-500">{other.pronouns}</p>
+          )}
+        </div>
+        {conn.state === 1 && (
+          <span className="ml-auto text-xs text-green-400">● friend</span>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col bg-gray-800 min-w-0">
+      {header}
+      {state.selectedId ? (
+        <>
+          <MessageList />
+          <MessageInput />
+        </>
+      ) : (
+        <div className="flex-1 flex items-center justify-center text-gray-600 text-sm">
+          Select a conversation
+        </div>
+      )}
+    </div>
+  )
+}