New federation features

src/pages/Dashboard.jsx

@@ -3,12 +3,14 @@ import { Plus, Video, Loader2, LayoutGrid, List } from 'lucide-react';
 import api from '../services/api';
 import { useLanguage } from '../contexts/LanguageContext';
 import RoomCard from '../components/RoomCard';
+import FederatedRoomCard from '../components/FederatedRoomCard';
 import Modal from '../components/Modal';
 import toast from 'react-hot-toast';
 
 export default function Dashboard() {
   const { t } = useLanguage();
   const [rooms, setRooms] = useState([]);
+  const [federatedRooms, setFederatedRooms] = useState([]);
   const [loading, setLoading] = useState(true);
   const [showCreate, setShowCreate] = useState(false);
   const [viewMode, setViewMode] = useState('grid');
@@ -33,8 +35,18 @@ export default function Dashboard() {
     }
   };
 
+  const fetchFederatedRooms = async () => {
+    try {
+      const res = await api.get('/federation/federated-rooms');
+      setFederatedRooms(res.data.rooms || []);
+    } catch {
+      // Federation may not be enabled
+    }
+  };
+
   useEffect(() => {
     fetchRooms();
+    fetchFederatedRooms();
   }, []);
 
   const handleCreate = async (e) => {
@@ -160,6 +172,23 @@ export default function Dashboard() {
               </div>
             </div>
           )}
+
+          {/* Federated rooms (from other instances) */}
+          {federatedRooms.length > 0 && (
+            <div className="mt-8">
+              <h2 className="text-lg font-semibold text-th-text mb-1">{t('dashboard.federatedRooms')}</h2>
+              <p className="text-sm text-th-text-s mb-4">{t('dashboard.federatedRoomsSubtitle')}</p>
+              <div className={
+                viewMode === 'grid'
+                  ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'
+                  : 'space-y-3'
+              }>
+                {federatedRooms.map(room => (
+                  <FederatedRoomCard key={room.id} room={room} onRemove={fetchFederatedRooms} />
+                ))}
+              </div>
+            </div>
+          )}
         </>
       )}