🚸(frontend) fix copy to include all meeting info from side panel

Rework clipboard functionality to copy complete meeting information when
users click the copy button in the information side panel.

Previously only partial data was copied, causing user confusion. Now
includes all relevant meeting details as expected.

Improves user experience by meeting user expectations for copy behavior.

src/frontend/src/features/rooms/livekit/components/Info.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
@@ -26,6 +26,29 @@ export const Info = () => {
 
   const telephony = useTelephony()
 
+  const isTelephonyReadyForUse = useMemo(() => {
+    return telephony?.enabled && data?.pin_code
+  }, [telephony?.enabled, data?.pin_code])
+
+  const clipboardContent = useMemo(() => {
+    if (isTelephonyReadyForUse) {
+      return [
+        t('roomInformation.clipboard.url', { roomUrl }),
+        t('roomInformation.clipboard.numberAndPin', {
+          phoneNumber: telephony?.internationalPhoneNumber,
+          pinCode: formatPinCode(data?.pin_code),
+        }),
+      ].join('\n')
+    }
+    return roomUrl
+  }, [
+    isTelephonyReadyForUse,
+    roomUrl,
+    telephony?.internationalPhoneNumber,
+    data?.pin_code,
+    t,
+  ])
+
   return (
     <Div
       display="flex"
@@ -55,7 +78,7 @@ export const Info = () => {
           <Text as="p" variant="xsNote" wrap="pretty">
             {roomUrl}
           </Text>
-          {telephony?.enabled && data?.pin_code && (
+          {isTelephonyReadyForUse && (
             <>
               <Text as="p" variant="xsNote" wrap="pretty">
                 <Bold>{t('roomInformation.phone.call')}</Bold> (
@@ -73,7 +96,7 @@ export const Info = () => {
           variant={isCopied ? 'success' : 'tertiaryText'}
           aria-label={t('roomInformation.button.ariaLabel')}
           onPress={() => {
-            navigator.clipboard.writeText(roomUrl)
+            navigator.clipboard.writeText(clipboardContent)
             setIsCopied(true)
           }}
           data-attr="copy-info-sidepannel"

src/frontend/src/locales/de/rooms.json

@@ -233,6 +233,10 @@
       "phone": {
         "call": "Rufen Sie an:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "Um an der Videokonferenz teilzunehmen, klicken Sie auf diesen Link: {{roomUrl}}",
+        "numberAndPin": "Um telefonisch teilzunehmen, wählen Sie {{phoneNumber}} und geben Sie diesen Code ein: {{pinCode}}"
       }
     }
   },

src/frontend/src/locales/en/rooms.json

@@ -233,6 +233,10 @@
       "phone": {
         "call": "Call:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "To join the video conference, click on this link: {{roomUrl}}",
+        "numberAndPin": "To join by phone, dial {{phoneNumber}} and enter this code: {{pinCode}}"
       }
     }
   },

src/frontend/src/locales/fr/rooms.json

@@ -233,6 +233,10 @@
       "phone": {
         "call": "Appelez le :",
         "pinCode": "Code :"
+      },
+      "clipboard": {
+        "url": "Pour participer à la visioconférence, cliquez sur ce lien : {{roomUrl}}",
+        "numberAndPin": "Pour participer par téléphone, composez le {{phoneNumber}} et saisissez ce code : {{pinCode}}"
       }
     }
   },

src/frontend/src/locales/nl/rooms.json

@@ -233,6 +233,10 @@
       "phone": {
         "call": "Bel:",
         "pinCode": "Code:"
+      },
+      "clipboard": {
+        "url": "Klik op deze link om deel te nemen aan de videoconferentie: {{roomUrl}}",
+        "numberAndPin": "Bel {{phoneNumber}} en voer deze code in om telefonisch deel te nemen: {{pinCode}}"
       }
     }
   },