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,108 @@
+import { useState, useEffect } from 'react';
+import { api } from '../lib/api.ts';
+import { useServerStore } from '../stores/server.ts';
+
+interface CreateServerModalProps {
+  onClose: () => void;
+}
+
+interface ServerApiResponse {
+  id: string;
+  name: string;
+  icon: string | null;
+  owner_id: string;
+}
+
+export function CreateServerModal({ onClose }: CreateServerModalProps) {
+  const [name, setName] = useState('');
+  const [icon, setIcon] = 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 createServer = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await api.post<ServerApiResponse>('/servers', {
+        name: name.trim(),
+        icon: icon.trim() || undefined,
+      });
+      const newServer = {
+        id: result.id,
+        name: result.name,
+        icon: result.icon,
+        ownerId: result.owner_id,
+      };
+      useServerStore.getState().addServer(newServer);
+      useServerStore.getState().setActiveServer(newServer.id);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create 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">CREATE SERVER</span>
+          <button onClick={onClose} className="text-xs text-gb-red">[x]</button>
+        </div>
+
+        <form onSubmit={createServer} className="space-y-3">
+          <div>
+            <label className="text-xs text-gb-fg-f block mb-1">NAME:</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="server name"
+              required
+              className="terminal-input w-full"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-gb-fg-f block mb-1">ICON URL:</label>
+            <input
+              type="text"
+              value={icon}
+              onChange={(e) => setIcon(e.target.value)}
+              placeholder="https://..."
+              className="terminal-input w-full"
+            />
+          </div>
+          {error && <div className="text-xs text-gb-red">{error}</div>}
+          <button
+            type="submit"
+            disabled={loading || !name.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 ? 'CREATING...' : '[CREATE SERVER]'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}