feat: implement federation for inter-instance meeting invitations with dedicated API, UI, and configuration.

src/pages/FederationInbox.jsx

@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react';
+import { Globe, Mail, Check, X, ExternalLink, Loader2, Inbox } from 'lucide-react';
+import api from '../services/api';
+import { useLanguage } from '../contexts/LanguageContext';
+import toast from 'react-hot-toast';
+
+export default function FederationInbox() {
+    const { t } = useLanguage();
+    const [invitations, setInvitations] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const fetchInvitations = async () => {
+        try {
+            const res = await api.get('/federation/invitations');
+            setInvitations(res.data.invitations || []);
+        } catch {
+            toast.error(t('federation.loadFailed'));
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchInvitations();
+    }, []);
+
+    const handleAccept = async (id) => {
+        try {
+            const res = await api.post(`/federation/invitations/${id}/accept`);
+            if (res.data.join_url) {
+                window.open(res.data.join_url, '_blank');
+            }
+            toast.success(t('federation.accepted'));
+            fetchInvitations();
+        } catch {
+            toast.error(t('federation.acceptFailed'));
+        }
+    };
+
+    const handleDecline = async (id) => {
+        try {
+            await api.delete(`/federation/invitations/${id}`);
+            toast.success(t('federation.declined'));
+            fetchInvitations();
+        } catch {
+            toast.error(t('federation.declineFailed'));
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center py-20">
+                <Loader2 size={32} className="animate-spin text-th-accent" />
+            </div>
+        );
+    }
+
+    const pending = invitations.filter(i => i.status === 'pending');
+    const past = invitations.filter(i => i.status !== 'pending');
+
+    return (
+        <div>
+            {/* Header */}
+            <div className="mb-8">
+                <div className="flex items-center gap-3 mb-1">
+                    <Globe size={24} className="text-th-accent" />
+                    <h1 className="text-2xl font-bold text-th-text">{t('federation.inbox')}</h1>
+                </div>
+                <p className="text-sm text-th-text-s mt-1">{t('federation.inboxSubtitle')}</p>
+            </div>
+
+            {/* Pending invitations */}
+            {pending.length > 0 && (
+                <div className="mb-8">
+                    <h2 className="text-sm font-semibold text-th-text uppercase tracking-wider mb-4">
+                        {t('federation.pending')} ({pending.length})
+                    </h2>
+                    <div className="space-y-3">
+                        {pending.map(inv => (
+                            <div key={inv.id} className="card p-5 border-l-4 border-l-th-accent">
+                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                                    <div className="min-w-0">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <Mail size={16} className="text-th-accent flex-shrink-0" />
+                                            <h3 className="text-base font-semibold text-th-text truncate">{inv.room_name}</h3>
+                                        </div>
+                                        <p className="text-sm text-th-text-s">
+                                            {t('federation.from')}: <span className="font-medium text-th-text">{inv.from_user}</span>
+                                        </p>
+                                        {inv.message && (
+                                            <p className="text-sm text-th-text-s mt-2 italic">"{inv.message}"</p>
+                                        )}
+                                        <p className="text-xs text-th-text-s mt-1">
+                                            {new Date(inv.created_at).toLocaleString()}
+                                        </p>
+                                    </div>
+                                    <div className="flex items-center gap-2 flex-shrink-0">
+                                        <button
+                                            onClick={() => handleAccept(inv.id)}
+                                            className="btn-primary text-sm"
+                                        >
+                                            <Check size={16} />
+                                            {t('federation.accept')}
+                                        </button>
+                                        <button
+                                            onClick={() => handleDecline(inv.id)}
+                                            className="btn-secondary text-sm"
+                                        >
+                                            <X size={16} />
+                                            {t('federation.decline')}
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Past invitations */}
+            {past.length > 0 && (
+                <div className="mb-8">
+                    <h2 className="text-sm font-semibold text-th-text uppercase tracking-wider mb-4">
+                        {t('federation.previousInvites')}
+                    </h2>
+                    <div className="space-y-2">
+                        {past.map(inv => (
+                            <div key={inv.id} className="card p-4 opacity-60">
+                                <div className="flex items-center justify-between gap-4">
+                                    <div className="min-w-0">
+                                        <h3 className="text-sm font-medium text-th-text truncate">{inv.room_name}</h3>
+                                        <p className="text-xs text-th-text-s">{inv.from_user}</p>
+                                    </div>
+                                    <div className="flex items-center gap-3 flex-shrink-0">
+                                        <span className={`text-xs font-medium px-2 py-1 rounded-full ${inv.status === 'accepted'
+                                                ? 'bg-th-success/15 text-th-success'
+                                                : 'bg-th-error/15 text-th-error'
+                                            }`}>
+                                            {inv.status === 'accepted' ? t('federation.statusAccepted') : t('federation.statusDeclined')}
+                                        </span>
+                                        {inv.status === 'accepted' && (
+                                            <button
+                                                onClick={() => window.open(inv.join_url, '_blank')}
+                                                className="btn-ghost text-xs py-1.5 px-2"
+                                                title={t('federation.openLink')}
+                                            >
+                                                <ExternalLink size={14} />
+                                            </button>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Empty state */}
+            {invitations.length === 0 && (
+                <div className="card p-12 text-center">
+                    <Inbox size={48} className="mx-auto text-th-text-s/40 mb-4" />
+                    <h3 className="text-lg font-semibold text-th-text mb-2">{t('federation.noInvitations')}</h3>
+                    <p className="text-sm text-th-text-s">{t('federation.noInvitationsSubtitle')}</p>
+                </div>
+            )}
+        </div>
+    );
+}

src/pages/RoomDetail.jsx

@@ -3,8 +3,9 @@ import { useParams, useNavigate } from 'react-router-dom';
 import {
   ArrowLeft, Play, Square, Users, Settings, FileVideo, Radio,
   Loader2, Copy, ExternalLink, Lock, Mic, MicOff, UserCheck,
-  Shield, Save, UserPlus, X, Share2,
+  Shield, Save, UserPlus, X, Share2, Globe, Send,
 } from 'lucide-react';
+import Modal from '../components/Modal';
 import api from '../services/api';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -30,6 +31,12 @@ export default function RoomDetail() {
   const [shareResults, setShareResults] = useState([]);
   const [shareSearching, setShareSearching] = useState(false);
 
+  // Federation invite state
+  const [showFedInvite, setShowFedInvite] = useState(false);
+  const [fedAddress, setFedAddress] = useState('');
+  const [fedMessage, setFedMessage] = useState('');
+  const [fedSending, setFedSending] = useState(false);
+
   const isOwner = room && user && room.user_id === user.id;
   const isShared = room && !!room.shared;
   const canManage = isOwner || isShared;
@@ -151,6 +158,31 @@ export default function RoomDetail() {
     toast.success(t('room.linkCopied'));
   };
 
+  // Federation invite handler
+  const handleFedInvite = async (e) => {
+    e.preventDefault();
+    if (!fedAddress.includes('@')) {
+      toast.error(t('federation.addressHint'));
+      return;
+    }
+    setFedSending(true);
+    try {
+      await api.post('/federation/invite', {
+        room_uid: uid,
+        to: fedAddress,
+        message: fedMessage || undefined,
+      });
+      toast.success(t('federation.sent'));
+      setShowFedInvite(false);
+      setFedAddress('');
+      setFedMessage('');
+    } catch (err) {
+      toast.error(err.response?.data?.error || t('federation.sendFailed'));
+    } finally {
+      setFedSending(false);
+    }
+  };
+
   // Share functions
   const searchUsers = async (query) => {
     setShareSearch(query);
@@ -252,6 +284,16 @@ export default function RoomDetail() {
           </div>
 
           <div className="flex items-center gap-2">
+            {canManage && (
+              <button
+                onClick={() => setShowFedInvite(true)}
+                className="btn-ghost text-sm"
+                title={t('federation.inviteRemote')}
+              >
+                <Globe size={16} />
+                <span className="hidden sm:inline">{t('federation.inviteRemote')}</span>
+              </button>
+            )}
             {canManage && !status.running && (
               <button onClick={handleStart} disabled={actionLoading === 'start'} className="btn-primary">
                 {actionLoading === 'start' ? <Loader2 size={16} className="animate-spin" /> : <Play size={16} />}
@@ -280,11 +322,10 @@ export default function RoomDetail() {
           <button
             key={tab.id}
             onClick={() => setActiveTab(tab.id)}
-            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
-              activeTab === tab.id
-                ? 'border-th-accent text-th-accent'
-                : 'border-transparent text-th-text-s hover:text-th-text hover:border-th-border'
-            }`}
+            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${activeTab === tab.id
+              ? 'border-th-accent text-th-accent'
+              : 'border-transparent text-th-text-s hover:text-th-text hover:border-th-border'
+              }`}
           >
             <tab.icon size={16} />
             {tab.label}
@@ -393,7 +434,7 @@ export default function RoomDetail() {
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.maxParticipants')}</label>
               <input
                 type="number"
                 value={editRoom.max_participants}
@@ -403,7 +444,7 @@ export default function RoomDetail() {
               />
             </div>
             <div>
-                <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('room.accessCode')}</label>
               <input
                 type="text"
                 value={editRoom.access_code || ''}
@@ -589,6 +630,46 @@ export default function RoomDetail() {
           </div>
         </form>
       )}
+
+      {/* Federation Invite Modal */}
+      {showFedInvite && (
+        <Modal title={t('federation.inviteTitle')} onClose={() => setShowFedInvite(false)}>
+          <p className="text-sm text-th-text-s mb-4">{t('federation.inviteSubtitle')}</p>
+          <form onSubmit={handleFedInvite} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.addressLabel')}</label>
+              <input
+                type="text"
+                value={fedAddress}
+                onChange={e => setFedAddress(e.target.value)}
+                className="input-field"
+                placeholder={t('federation.addressPlaceholder')}
+                required
+              />
+              <p className="text-xs text-th-text-s mt-1">{t('federation.addressHint')}</p>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-th-text mb-1.5">{t('federation.messageLabel')}</label>
+              <textarea
+                value={fedMessage}
+                onChange={e => setFedMessage(e.target.value)}
+                className="input-field resize-none"
+                rows={2}
+                placeholder={t('federation.messagePlaceholder')}
+              />
+            </div>
+            <div className="flex items-center gap-3 pt-2 border-t border-th-border">
+              <button type="button" onClick={() => setShowFedInvite(false)} className="btn-secondary flex-1">
+                {t('common.cancel')}
+              </button>
+              <button type="submit" disabled={fedSending} className="btn-primary flex-1">
+                {fedSending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+                {t('federation.send')}
+              </button>
+            </div>
+          </form>
+        </Modal>
+      )}
     </div>
   );
 }