Add federated room detail page and improve address parsing in invites

src/components/FederatedRoomCard.jsx

@@ -1,12 +1,15 @@
 import { Globe, Trash2, ExternalLink, Hash, Users, Video, VideoOff } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 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 navigate = useNavigate();
 
-  const handleJoin = () => {
+  const handleJoin = (e) => {
+    e.stopPropagation();
     window.open(room.join_url, '_blank');
   };
 
@@ -25,7 +28,7 @@ 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="card-hover group p-5 cursor-pointer" onClick={() => navigate(`/federation/rooms/${room.id}`)}>
       <div className="flex items-start justify-between mb-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">