feat(web): SPA de chat (React + Vite + Mantine v9)

Cliente web sobre el gateway (REST + SSE). El navegador no habla NATS ni cripto: el peer Go del gateway lo hace. - Pantalla de conexión: gateway URL + identidad (persistidas en localStorage). - Navbar: crear room (con toggle de cifrado E2E), unirse por id, lista de rooms. - Centro: mensajes en vivo por SSE, burbujas con autor y hora, composer. - Lateral: miembros (rol owner), invitar por peer conectado, expulsar (owner). - Mantine v9 (createTheme + MantineProvider), @tabler/icons-react, layout con AppShell/Stack/Group; sin Tailwind ni CSS manual. React 19 (peer dep de v9). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-06 18:43:10 +02:00
parent 915f926136
commit d33ca6278a
20 changed files with 2626 additions and 0 deletions
@@ -0,0 +1,116 @@
+import { useState } from "react";
+import {
+  Button,
+  Card,
+  Center,
+  Group,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Alert,
+  ThemeIcon,
+} from "@mantine/core";
+import { IconBolt, IconPlugConnected, IconAlertTriangle } from "@tabler/icons-react";
+import { GatewayClient } from "../api";
+import type { Peer } from "../types";
+
+const LS_GATEWAY = "unibus.gateway";
+const LS_PEER = "unibus.peer";
+
+interface Props {
+  onConnect: (client: GatewayClient, peer: Peer) => void;
+}
+
+// ConnectScreen asks for the gateway URL and the identity (peer name) to connect
+// as. Both persist in localStorage so a reload reconnects with one click. The
+// gateway hosts the real Go bus peer; the browser only drives it.
+export function ConnectScreen({ onConnect }: Props) {
+  const [gateway, setGateway] = useState(
+    () => localStorage.getItem(LS_GATEWAY) ?? "http://localhost:7700",
+  );
+  const [name, setName] = useState(() => localStorage.getItem(LS_PEER) ?? "");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const connect = async () => {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setError("Elige un nombre de identidad");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const client = new GatewayClient(gateway.trim());
+      const peer = await client.connect(trimmed);
+      localStorage.setItem(LS_GATEWAY, client.baseURL);
+      localStorage.setItem(LS_PEER, trimmed);
+      onConnect(client, peer);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Center h="100vh" p="md">
+      <Card withBorder shadow="md" radius="lg" p="xl" w={420} maw="100%">
+        <Stack gap="lg">
+          <Group gap="sm">
+            <ThemeIcon size="xl" radius="md" variant="light" color="violet">
+              <IconBolt size={26} />
+            </ThemeIcon>
+            <div>
+              <Title order={3}>unibus</Title>
+              <Text size="sm" c="dimmed">
+                chat cifrado extremo a extremo sobre NATS
+              </Text>
+            </div>
+          </Group>
+
+          <TextInput
+            label="Gateway"
+            description="URL del gateway web de unibus"
+            placeholder="http://localhost:7700"
+            value={gateway}
+            onChange={(e) => setGateway(e.currentTarget.value)}
+            disabled={busy}
+          />
+          <TextInput
+            label="Identidad"
+            description="Tu nombre de peer en el bus (persistente)"
+            placeholder="ana"
+            value={name}
+            onChange={(e) => setName(e.currentTarget.value)}
+            onKeyDown={(e) => e.key === "Enter" && connect()}
+            disabled={busy}
+            data-autofocus
+          />
+
+          {error && (
+            <Alert
+              color="red"
+              variant="light"
+              icon={<IconAlertTriangle size={18} />}
+              title="No se pudo conectar"
+            >
+              {error}
+            </Alert>
+          )}
+
+          <Button
+            leftSection={<IconPlugConnected size={18} />}
+            onClick={connect}
+            loading={busy}
+            fullWidth
+            size="md"
+          >
+            Conectar
+          </Button>
+        </Stack>
+      </Card>
+    </Center>
+  );
+}