New federation features

src/components/FederatedRoomCard.jsx

@@ -0,0 +1,66 @@
+import { Globe, Play, Trash2, ExternalLink } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';
+import api from '../services/api';
+import toast from 'react-hot-toast';
+
+export default function FederatedRoomCard({ room, onRemove }) {
+  const { t } = useLanguage();
+
+  const handleJoin = () => {
+    window.open(room.join_url, '_blank');
+  };
+
+  const handleRemove = async (e) => {
+    e.stopPropagation();
+    if (!confirm(t('federation.removeRoomConfirm'))) return;
+    try {
+      await api.delete(`/federation/federated-rooms/${room.id}`);
+      toast.success(t('federation.roomRemoved'));
+      onRemove?.();
+    } catch {
+      toast.error(t('federation.roomRemoveFailed'));
+    }
+  };
+
+  return (
+    <div className="card-hover group p-5">
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <Globe size={14} className="text-th-accent flex-shrink-0" />
+            <h3 className="text-base font-semibold text-th-text truncate group-hover:text-th-accent transition-colors">
+              {room.room_name}
+            </h3>
+            <span className="flex-shrink-0 px-2 py-0.5 bg-th-accent/15 text-th-accent rounded-full text-xs font-medium">
+              {t('federation.federated')}
+            </span>
+          </div>
+          <p className="text-sm text-th-text-s mt-0.5 truncate">
+            {t('federation.from')}: <span className="font-medium">{room.from_user}</span>
+          </p>
+        </div>
+      </div>
+
+      {/* Read-only notice */}
+      <p className="text-xs text-th-text-s mb-4 italic">{t('federation.readOnlyNotice')}</p>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2 pt-3 border-t border-th-border">
+        <button
+          onClick={handleJoin}
+          className="btn-primary text-xs py-1.5 px-3 flex-1"
+        >
+          <ExternalLink size={14} />
+          {t('federation.joinMeeting')}
+        </button>
+        <button
+          onClick={handleRemove}
+          className="btn-ghost text-xs py-1.5 px-2 text-th-error hover:text-th-error"
+          title={t('federation.removeRoom')}
+        >
+          <Trash2 size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}