feat: UI for server/channel creation, settings link, role management backend

Frontend: - Settings link in header next to logout - [+] button to create server (name + optional icon) - [#] button to join server via invite code - [+] button to create channel (name, type, category) - Server name shown instead of UUID in channel list header - /invites/:code route wired for JoinServer component Backend: - Wire role CRUD + member-role assignment routes (MANAGE_SERVER gated) - Seed @everyone default role on server creation
2026-06-29 12:50:46 -04:00
parent 3072cda051
commit 3f33859f4a
11 changed files with 778 additions and 27 deletions
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { api } from '../lib/api.ts';
+import { useServerStore } from '../stores/server.ts';
+
+interface JoinServerModalProps {
+  onClose: () => void;
+}
+
+interface JoinServerApiResponse {
+  server_id: string;
+  message: string;
+}
+
+export function JoinServerModal({ onClose }: JoinServerModalProps) {
+  const [code, setCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const joinServer = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!code.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await api.post<JoinServerApiResponse>(`/invites/${code.trim()}/join`);
+      await useServerStore.getState().fetchServers();
+      useServerStore.getState().setActiveServer(result.server_id);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to join server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-gb-bg border border-gb-bg-t p-4 min-w-[350px] font-mono"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm text-gb-orange">JOIN SERVER</span>
+          <button onClick={onClose} className="text-xs text-gb-red">[x]</button>
+        </div>
+
+        <form onSubmit={joinServer} className="space-y-3">
+          <div>
+            <label className="text-xs text-gb-fg-f block mb-1">INVITE CODE:</label>
+            <input
+              type="text"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              placeholder="enter invite code"
+              required
+              className="terminal-input w-full"
+            />
+          </div>
+          {error && <div className="text-xs text-gb-red">{error}</div>}
+          <button
+            type="submit"
+            disabled={loading || !code.trim()}
+            className="w-full px-3 py-1.5 bg-gb-orange text-gb-bg text-xs font-mono hover:bg-gb-yellow transition-colors disabled:opacity-50"
+          >
+            {loading ? 'JOINING...' : '[JOIN SERVER]'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}