Phase 1 MVP: gateway, CRUD handlers, frontend components

Backend: - WebSocket gateway (hub, client, events) with fanout broadcast - Server CRUD handlers (create, list, get, update, delete) - Channel CRUD handlers (create, list, get, update, delete) - Message CRUD handlers (list with cursor pagination, create, update, delete) - cmd/migrate standalone migration CLI (up/down) - cmd/server wired to all handlers + WebSocket + static file serving Frontend: - Zustand stores: auth, server, channel, message, websocket - API client with fetch wrapper - Terminal-styled components: Layout, LoginForm, ChatArea, ChannelList, ServerBar, MemberList - React Router with login and main routes - Gruvbox dark palette throughout Ops: - Docker Compose with app service (multi-stage build) - Caddyfile with WebSocket upgrade support - Makefile for common tasks
2026-06-26 14:47:29 -04:00
parent aa7854aee2
commit bb5a56816b
32 changed files with 2310 additions and 339 deletions
@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { useMessageStore } from '../stores/message.ts';
+import { useChannelStore } from '../stores/channel.ts';
+
+function formatTime(iso: string): string {
+  const date = new Date(iso);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+export function ChatArea() {
+  const activeChannelId = useChannelStore((state) => state.activeChannelId);
+  const messages = useMessageStore((state) =>
+    activeChannelId ? state.messagesByChannel[activeChannelId] || [] : []
+  );
+  const isLoading = useMessageStore((state) => state.isLoading);
+  const fetchMessages = useMessageStore((state) => state.fetchMessages);
+  const sendMessage = useMessageStore((state) => state.sendMessage);
+  const [input, setInput] = useState('');
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (activeChannelId) {
+      fetchMessages(activeChannelId);
+    }
+  }, [activeChannelId, fetchMessages]);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: 'auto' });
+  }, [messages]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (!activeChannelId || !input.trim()) {
+      return;
+    }
+    await sendMessage(activeChannelId, input.trim());
+    setInput('');
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-gb-bg">
+      <div className="terminal-border border-t-0 border-x-0 px-3 py-2 text-gb-fg-s">
+        {activeChannelId ? `#${activeChannelId}` : '[NO CHANNEL SELECTED]'}
+      </div>
+      <div className="flex-1 overflow-y-auto p-3 space-y-1 font-mono text-sm">
+        {isLoading && <p className="text-gb-fg-f">[loading...]</p>}
+        {!isLoading && messages.length === 0 && (
+          <p className="text-gb-fg-f">[no messages in this channel]</p>
+        )}
+        {messages.map((message) => (
+          <div key={message.id} className="break-words">
+            <span className="text-gb-fg-f">[{formatTime(message.createdAt)}]</span>{' '}
+            <span className="text-gb-aqua">&lt;{message.author.username}&gt;</span>{' '}
+            <span className="text-gb-fg">{message.content}</span>
+          </div>
+        ))}
+        <div ref={bottomRef} />
+      </div>
+      <form onSubmit={handleSubmit} className="p-3 flex items-center gap-2">
+        <span className="text-gb-fg-f select-none">{'>'}</span>
+        <input
+          type="text"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="_"
+          className="terminal-input"
+          disabled={!activeChannelId}
+        />
+      </form>
+    </div>
+  );
+}