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,51 @@
+import { useEffect } from 'react';
+import { useServerStore } from '../stores/server.ts';
+import { useChannelStore } from '../stores/channel.ts';
+
+function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+
+export function ServerBar() {
+  const servers = useServerStore((state) => state.servers);
+  const activeServerId = useServerStore((state) => state.activeServerId);
+  const fetchServers = useServerStore((state) => state.fetchServers);
+  const setActiveServer = useServerStore((state) => state.setActiveServer);
+  const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
+
+  useEffect(() => {
+    fetchServers();
+  }, [fetchServers]);
+
+  const handleSelect = (id: string) => {
+    setActiveServer(id);
+    setActiveChannel(null);
+  };
+
+  return (
+    <div className="h-full w-16 bg-gb-bg-h border-r border-gb-bg-t flex flex-col items-center py-3 gap-2 overflow-y-auto">
+      {servers.map((server) => (
+        <button
+          key={server.id}
+          onClick={() => handleSelect(server.id)}
+          className={`w-11 h-11 flex items-center justify-center font-mono text-sm border ${
+            server.id === activeServerId
+              ? 'bg-gb-bg-t text-gb-orange border-gb-orange'
+              : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t hover:text-gb-aqua'
+          }`}
+          title={server.name}
+        >
+          {server.unread && server.id !== activeServerId ? (
+            <span className="text-gb-aqua">[{getInitials(server.name)}]</span>
+          ) : (
+            `[${getInitials(server.name)}]`
+          )}
+        </button>
+      ))}
+    </div>
+  );
+}