✨(frontend) add phone number and pin display in info side panel

Create minimal UI to show telephony access details for testing SIP
functionality in staging deployment. Basic implementation for feature
validation.

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

@@ -3,9 +3,11 @@ import { useEffect, useState } from 'react'
 import { VStack } from '@/styled-system/jsx'
 import { css } from '@/styled-system/css'
 import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
-import { Button, Div, Text } from '@/primitives'
+import { Bold, Button, Div, Text } from '@/primitives'
 import { getRouteUrl } from '@/navigation/getRouteUrl'
 import { useRoomData } from '../hooks/useRoomData'
+import { formatPinCode } from '../../utils/telephony'
+import { useTelephony } from '../hooks/useTelephony'
 
 export const Info = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'info' })
@@ -22,6 +24,8 @@ export const Info = () => {
   const data = useRoomData()
   const roomUrl = getRouteUrl('room', data?.slug)
 
+  const telephony = useTelephony()
+
   return (
     <Div
       display="flex"
@@ -41,9 +45,29 @@ export const Info = () => {
         >
           {t('roomInformation.title')}
         </Text>
-        <Text as="p" variant="xsNote" wrap="pretty">
-          {roomUrl}
-        </Text>
+        <div
+          className={css({
+            gap: '0.15rem',
+            display: 'flex',
+            flexDirection: 'column',
+          })}
+        >
+          <Text as="p" variant="xsNote" wrap="pretty">
+            {roomUrl}
+          </Text>
+          {telephony?.enabled && data?.pin_code && (
+            <>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.call')}</Bold> (
+                {telephony?.country}) {telephony?.internationalPhoneNumber}
+              </Text>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.pinCode')}</Bold>{' '}
+                {formatPinCode(data?.pin_code)}
+              </Text>
+            </>
+          )}
+        </div>
         <Button
           size="sm"
           variant={isCopied ? 'success' : 'tertiaryText'}

src/frontend/src/features/rooms/livekit/hooks/useTelephony.ts

@@ -0,0 +1,20 @@
+import { useConfig } from '@/api/useConfig.ts'
+import { useMemo } from 'react'
+import { parseConfigPhoneNumber } from '../../utils/telephony'
+
+export const useTelephony = () => {
+  const { data } = useConfig()
+
+  const parsedPhoneNumber = useMemo(() => {
+    return parseConfigPhoneNumber(
+      data?.telephony?.phone_number,
+      data?.telephony?.default_country
+    )
+  }, [data?.telephony])
+
+  return {
+    enabled: data?.telephony?.enabled && parsedPhoneNumber,
+    country: parsedPhoneNumber?.country,
+    internationalPhoneNumber: parsedPhoneNumber?.formatInternational(),
+  }
+}

src/frontend/src/features/rooms/utils/telephony.ts

@@ -0,0 +1,23 @@
+import { CountryCode, parsePhoneNumberWithError } from 'libphonenumber-js'
+
+export const parseConfigPhoneNumber = (
+  rawPhoneNumber?: string,
+  defaultCountry?: string
+) => {
+  if (!rawPhoneNumber || !defaultCountry) {
+    return null
+  }
+  try {
+    return parsePhoneNumberWithError(
+      rawPhoneNumber,
+      defaultCountry as CountryCode
+    )
+  } catch (error) {
+    console.warn('Invalid phone number format:', rawPhoneNumber, error)
+    return null
+  }
+}
+
+export function formatPinCode(pinCode?: string) {
+  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')} #`
+}

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

@@ -213,6 +213,10 @@
         "ariaLabel": "Kopiere deine Meeting-Adresse",
         "copy": "Adresse kopieren",
         "copied": "Adresse kopiert"
+      },
+      "phone": {
+        "call": "Rufen Sie an:",
+        "pinCode": "Code:"
       }
     }
   },

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

@@ -213,6 +213,10 @@
         "ariaLabel": "Copy your meeting address",
         "copy": "Copy address",
         "copied": "Address copied"
+      },
+      "phone": {
+        "call": "Call:",
+        "pinCode": "Code:"
       }
     }
   },

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

@@ -213,6 +213,10 @@
         "ariaLabel": "Copier l'adresse de votre réunion",
         "copy": "Copier l'adresse",
         "copied": "Adresse copiée"
+      },
+      "phone": {
+        "call": "Appelez le :",
+        "pinCode": "Code :"
       }
     }
   },

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

@@ -213,6 +213,10 @@
         "ariaLabel": "Kopieer je vergaderadres",
         "copy": "Adres kopiëren",
         "copied": "Adres gekopieerd"
+      },
+      "phone": {
+        "call": "Bel:",
+        "pinCode": "Code:"
       }
     }
   },