feat(room): add copy link functionality with clipboard support and update translations

src/components/RoomCard.jsx

@@ -1,6 +1,6 @@
-import { Users, Play, Trash2, Radio, Loader2, Share2 } from 'lucide-react';
+import { Users, Play, Trash2, Radio, Loader2, Share2, Copy, Link } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import api from '../services/api';
 import { useLanguage } from '../contexts/LanguageContext';
 import toast from 'react-hot-toast';
@@ -10,6 +10,24 @@ export default function RoomCard({ room, onDelete }) {
   const { t } = useLanguage();
   const [status, setStatus] = useState({ running: false, participantCount: 0 });
   const [starting, setStarting] = useState(false);
+  const [showCopyMenu, setShowCopyMenu] = useState(false);
+  const copyMenuRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (copyMenuRef.current && !copyMenuRef.current.contains(e.target)) {
+        setShowCopyMenu(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const copyToClipboard = (url) => {
+    navigator.clipboard.writeText(url);
+    toast.success(t('room.linkCopied'));
+    setShowCopyMenu(false);
+  };
 
   useEffect(() => {
     const checkStatus = async () => {
@@ -99,6 +117,33 @@ export default function RoomCard({ room, onDelete }) {
           {starting ? <Loader2 size={14} className="animate-spin" /> : <Play size={14} />}
           {status.running ? t('room.join') : t('room.startMeeting')}
         </button>
+        <div className="relative" ref={copyMenuRef}>
+          <button
+            onClick={(e) => { e.stopPropagation(); setShowCopyMenu(v => !v); }}
+            className="btn-ghost text-xs py-1.5 px-2"
+            title={t('room.copyLink')}
+          >
+            <Copy size={14} />
+          </button>
+          {showCopyMenu && (
+            <div className="absolute bottom-full right-0 mb-1 bg-th-surface border border-th-border rounded-lg shadow-lg z-50 min-w-[150px] py-1">
+              <button
+                onClick={(e) => { e.stopPropagation(); copyToClipboard(`${window.location.origin}/rooms/${room.uid}`); }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-th-text hover:bg-th-accent/10 transition-colors"
+              >
+                <Link size={12} />
+                {t('room.copyRoomLink')}
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); copyToClipboard(`${window.location.origin}/join/${room.uid}`); }}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs text-th-text hover:bg-th-accent/10 transition-colors"
+              >
+                <Users size={12} />
+                {t('room.copyGuestLink')}
+              </button>
+            </div>
+          )}
+        </div>
         {onDelete && !room.shared && (
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(room); }}

src/i18n/de.json

@@ -158,6 +158,8 @@
     "settings": "Einstellungen",
     "participants": "{count} Teilnehmer",
     "copyLink": "Link kopieren",
+    "copyRoomLink": "Raum-Link",
+    "copyGuestLink": "Gast-Link",
     "linkCopied": "Link kopiert!",
     "meetingDetails": "Meeting-Details",
     "meetingId": "Meeting ID",

src/i18n/en.json

@@ -158,6 +158,8 @@
     "settings": "Settings",
     "participants": "{count} participants",
     "copyLink": "Copy link",
+    "copyRoomLink": "Room Link",
+    "copyGuestLink": "Guest Link",
     "linkCopied": "Link copied!",
     "meetingDetails": "Meeting details",
     "meetingId": "Meeting ID",