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">

src/components/Navbar.jsx

@@ -80,7 +80,7 @@ export default function Navbar({ onMenuClick }) {
               <div className="absolute right-0 mt-2 w-56 bg-th-card rounded-xl border border-th-border shadow-th-lg overflow-hidden">
                 <div className="px-4 py-3 border-b border-th-border">
                   <p className="text-sm font-medium text-th-text">{user?.display_name || user?.name}</p>
-                  <p className="text-xs text-th-text-s">{user?.email}</p>
+                  <p className="text-xs text-th-text-s">@{user?.name}</p>
                 </div>
                 <div className="py-1">
                   <button

src/components/Sidebar.jsx

@@ -110,7 +110,7 @@ export default function Sidebar({ open, onClose }) {
               </div>
               <div className="min-w-0">
                 <p className="text-sm font-medium text-th-text truncate">{user?.display_name || user?.name}</p>
-                <p className="text-xs text-th-text-s truncate">{user?.email}</p>
+                <p className="text-xs text-th-text-s truncate">@{user?.name}</p>
               </div>
             </div>
           </div>