fix: construct invite URL from code on frontend

web/src/components/InviteModal.tsx

@@ -7,17 +7,18 @@ interface InviteModalProps {
   onClose: () => void;
 }
 
-interface Invite {
+interface InviteResult {
   code: string;
-  url: string;
+  server_name: string;
-  expires_at: string | null;
   max_uses: number | null;
+  use_count: number;
+  expires_at: string | null;
 }
 
 export function InviteModal({ serverId, serverName, onClose }: InviteModalProps) {
   const [expiresHours, setExpiresHours] = useState(24);
   const [maxUses, setMaxUses] = useState<number | ''>('');
-  const [invite, setInvite] = useState<Invite | null>(null);
+  const [invite, setInvite] = useState<InviteResult | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
@@ -32,7 +33,7 @@ export function InviteModal({ serverId, serverName, onClose }: InviteModalProps)
       if (maxUses !== '') {
         payload.max_uses = maxUses;
       }
-      const result = await api.post<Invite>(`/servers/${serverId}/invites`, payload);
+      const result = await api.post<InviteResult>(`/servers/${serverId}/invites`, payload);
       setInvite(result);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create invite');
@@ -41,9 +42,11 @@ export function InviteModal({ serverId, serverName, onClose }: InviteModalProps)
     }
   };
 
+  const inviteUrl = invite ? `${window.location.origin}/invites/${invite.code}` : '';
+
   const copyLink = () => {
-    if (invite) {
+    if (inviteUrl) {
-      navigator.clipboard.writeText(invite.url);
+      navigator.clipboard.writeText(inviteUrl);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     }
@@ -58,53 +61,51 @@ export function InviteModal({ serverId, serverName, onClose }: InviteModalProps)
         </div>
 
         {!invite ? (
-          <>
+          <div className="space-y-3">
-            <div className="space-y-3">
+            <div>
-              <div>
+              <label className="text-xs text-gb-fg-f block mb-1">EXPIRES IN:</label>
-                <label className="text-xs text-gb-fg-f block mb-1">EXPIRES IN:</label>
+              <select
-                <select
+                value={expiresHours}
-                  value={expiresHours}
+                onChange={(e) => setExpiresHours(Number(e.target.value))}
-                  onChange={(e) => setExpiresHours(Number(e.target.value))}
+                className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
-                  className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
-                >
-                  <option value={1}>1 hour</option>
-                  <option value={6}>6 hours</option>
-                  <option value={12}>12 hours</option>
-                  <option value={24}>24 hours</option>
-                  <option value={168}>7 days</option>
-                  <option value={0}>Never</option>
-                </select>
-              </div>
-              <div>
-                <label className="text-xs text-gb-fg-f block mb-1">MAX USES:</label>
-                <input
-                  type="number"
-                  value={maxUses}
-                  onChange={(e) => setMaxUses(e.target.value === '' ? '' : Number(e.target.value))}
-                  placeholder="unlimited"
-                  min={1}
-                  className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
-                />
-              </div>
-              {error && (
-                <div className="text-xs text-gb-red">{error}</div>
-              )}
-              <button
-                onClick={createInvite}
-                disabled={loading}
-                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...' : '[GENERATE LINK]'}
+                <option value={1}>1 hour</option>
-              </button>
+                <option value={6}>6 hours</option>
+                <option value={12}>12 hours</option>
+                <option value={24}>24 hours</option>
+                <option value={168}>7 days</option>
+                <option value={0}>Never</option>
+              </select>
             </div>
-          </>
+            <div>
+              <label className="text-xs text-gb-fg-f block mb-1">MAX USES:</label>
+              <input
+                type="number"
+                value={maxUses}
+                onChange={(e) => setMaxUses(e.target.value === '' ? '' : Number(e.target.value))}
+                placeholder="unlimited"
+                min={1}
+                className="w-full px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
+              />
+            </div>
+            {error && (
+              <div className="text-xs text-gb-red">{error}</div>
+            )}
+            <button
+              onClick={createInvite}
+              disabled={loading}
+              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...' : '[GENERATE LINK]'}
+            </button>
+          </div>
         ) : (
           <div className="space-y-3">
             <div className="text-xs text-gb-fg-f">Share this link:</div>
             <div className="flex gap-2">
               <input
                 type="text"
-                value={invite.url}
+                value={inviteUrl}
                 readOnly
                 className="flex-1 px-2 py-1 bg-gb-bg-s text-gb-fg text-xs border-none outline-none"
               />