more details with federation

src/components/FederatedRoomCard.jsx

@@ -1,4 +1,4 @@
-import { Globe, Play, Trash2, ExternalLink } from 'lucide-react';
+import { Globe, Trash2, ExternalLink, Hash, Users, Video, VideoOff } from 'lucide-react';
 import { useLanguage } from '../contexts/LanguageContext';
 import api from '../services/api';
 import toast from 'react-hot-toast';
@@ -22,6 +22,8 @@ export default function FederatedRoomCard({ room, onRemove }) {
     }
   };
 
+  const recordingOn = room.allow_recording === 1 || room.allow_recording === true;
+
   return (
     <div className="card-hover group p-5">
       <div className="flex items-start justify-between mb-3">
@@ -41,6 +43,38 @@ export default function FederatedRoomCard({ room, onRemove }) {
         </div>
       </div>
 
+      {/* Basic room info */}
+      <div className="grid grid-cols-2 gap-2 mb-4">
+        {room.meet_id && (
+          <div className="flex items-center gap-1.5 text-xs text-th-text-s">
+            <Hash size={12} className="text-th-accent flex-shrink-0" />
+            <span className="truncate font-mono" title={room.meet_id}>{room.meet_id.slice(0, 10)}…</span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5 text-xs text-th-text-s">
+          <Users size={12} className="text-th-accent flex-shrink-0" />
+          <span>
+            {t('federation.maxParticipants')}:{' '}
+            <span className="text-th-text font-medium">
+              {room.max_participants > 0 ? room.max_participants : t('federation.unlimited')}
+            </span>
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 text-xs col-span-2">
+          {recordingOn ? (
+            <>
+              <Video size={12} className="text-amber-500 flex-shrink-0" />
+              <span className="text-amber-500 font-medium">{t('federation.recordingOn')}</span>
+            </>
+          ) : (
+            <>
+              <VideoOff size={12} className="text-th-text-s flex-shrink-0" />
+              <span className="text-th-text-s">{t('federation.recordingOff')}</span>
+            </>
+          )}
+        </div>
+      </div>
+
       {/* Read-only notice */}
       <p className="text-xs text-th-text-s mb-4 italic">{t('federation.readOnlyNotice')}</p>