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,125 @@
+import { useState, useEffect } from 'react';
+import { api } from '../lib/api.ts';
+import { useChannelStore } from '../stores/channel.ts';
+
+interface CreateChannelModalProps {
+  serverId: string;
+  onClose: () => void;
+}
+
+interface ChannelApiResponse {
+  id: string;
+  server_id: string;
+  name: string;
+  type: 'text' | 'voice';
+  category: string;
+  position: number;
+}
+
+export function CreateChannelModal({ serverId, onClose }: CreateChannelModalProps) {
+  const [name, setName] = useState('');
+  const [type, setType] = useState<'text' | 'voice'>('text');
+  const [category, setCategory] = useState('general');
+  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 createChannel = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await api.post<ChannelApiResponse>(`/servers/${serverId}/channels`, {
+        name: name.trim(),
+        type,
+        category: category.trim() || 'general',
+      });
+      const newChannel = {
+        id: result.id,
+        serverId: result.server_id,
+        name: result.name,
+        type: result.type,
+        category: result.category || null,
+        position: result.position,
+      };
+      useChannelStore.getState().addChannel(newChannel);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create channel');
+    } 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 CHANNEL</span>
+          <button onClick={onClose} className="text-xs text-gb-red">[x]</button>
+        </div>
+
+        <form onSubmit={createChannel} 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="channel name"
+              required
+              className="terminal-input w-full"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-gb-fg-f block mb-1">TYPE:</label>
+            <select
+              value={type}
+              onChange={(e) => setType(e.target.value as 'text' | 'voice')}
+              className="terminal-input w-full"
+            >
+              <option value="text">text</option>
+              <option value="voice">voice</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-xs text-gb-fg-f block mb-1">CATEGORY:</label>
+            <input
+              type="text"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              placeholder="general"
+              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 CHANNEL]'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}