🎨(frontend) personalize permission modal for Safari UX differences

Provides Safari-specific UI guidance that matches the browser's unique
permission flow, ensuring users receive appropriate instructions for
their specific browser environment.

src/frontend/src/features/rooms/components/Permissions.tsx

@@ -7,6 +7,7 @@ import { useSnapshot } from 'valtio'
 import { closePermissionsDialog, permissionsStore } from '@/stores/permissions'
 import { useTranslation } from 'react-i18next'
 import { injectIconIntoTranslation } from '@/utils/translation'
+import { isSafari } from '@/utils/livekit'
 
 /**
  * Singleton component - ensures permissions sync runs only once across the app.
@@ -33,7 +34,7 @@ export const Permissions = () => {
   }, [permissions])
 
   const [descriptionBeforeIcon, descriptionAfterIcon] =
-    injectIconIntoTranslation(t('body.openMenu'))
+    injectIconIntoTranslation(t('body.openMenu.others'))
 
   useEffect(() => {
     if (
@@ -86,13 +87,21 @@ export const Permissions = () => {
           </H>
           <ol className={css({ listStyle: 'decimal', paddingLeft: '24px' })}>
             <li>
-              {descriptionBeforeIcon}
+              {isSafari() ? (
-              <span
+                t('body.openMenu.safari', {
-                style={{ display: 'inline-block', verticalAlign: 'middle' }}
+                  appDomain: window.origin.replace('https://', ''),
-              >
+                })
-                <RiEqualizer2Line />
+              ) : (
-              </span>
+                <>
-              {descriptionAfterIcon}
+                  {descriptionBeforeIcon}
+                  <span
+                    style={{ display: 'inline-block', verticalAlign: 'middle' }}
+                  >
+                    <RiEqualizer2Line />
+                  </span>
+                  {descriptionAfterIcon}
+                </>
+              )}
             </li>
             <li>{t(`body.details.${permissionLabel}`)}</li>
           </ol>

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

@@ -95,7 +95,10 @@
       "default": "{{appTitle}} hat keine Berechtigung für bestimmte Zugriffe"
     },
     "body": {
-      "openMenu": "Klicken Sie auf das Einstellungen-Symbol ICON_PLACEHOLDER in der Adressleiste Ihres Browsers",
+      "openMenu": {
+        "others": "Klicken Sie auf das Einstellungen-Symbol ICON_PLACEHOLDER in der Adressleiste Ihres Browsers",
+        "safari": "Klicken Sie auf das Menü 'Safari' und öffnen Sie 'Einstellungen für {{appDomain}}'."
+      },
       "details": {
         "camera": "Zugriff auf die Kamera erlauben",
         "microphone": "Zugriff auf das Mikrofon erlauben",

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

@@ -95,7 +95,10 @@
       "default": "{{appTitle}} is not allowed to use certain permissions"
     },
     "body": {
-      "openMenu": "Click on the settings icon ICON_PLACEHOLDER in your browser’s address bar",
+      "openMenu": {
+        "others": "Click on the settings icon ICON_PLACEHOLDER in your browser’s address bar",
+        "safari": "Click the 'Safari' menu, and open 'Settings for {{appDomain}}'."
+      },
       "details": {
         "camera": "Allow access to the camera",
         "microphone": "Allow access to the microphone",

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

@@ -95,7 +95,10 @@
       "default": "{{appTitle}} n'est pas autorisé à utiliser certaines fonctionnalités nécessaires."
     },
     "body": {
-      "openMenu": "Cliquez sur l'icône des paramètres ICON_PLACEHOLDER dans la barre d'adresse de votre navigateur",
+      "openMenu": {
+        "others": "Cliquez sur l'icône des paramètres ICON_PLACEHOLDER dans la barre d'adresse de votre navigateur",
+        "safari": "Cliquez sur le menu \"Safari\", et ouvrez \"Paramètres pour {{appDomain}}\"."
+      },
       "details": {
         "camera": "Autorisez l'accès à la caméra",
         "microphone": "Autorisez l'accès au microphone",

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

@@ -95,7 +95,10 @@
       "default": "{{appTitle}} heeft geen toestemming voor bepaalde rechten"
     },
     "body": {
-      "openMenu": "Klik op het instellingenpictogram ICON_PLACEHOLDER in de adresbalk van uw browser",
+      "openMenu": {
+        "others": "Klik op het instellingenpictogram ICON_PLACEHOLDER in de adresbalk van uw browser",
+        "safari": "Klik op het menu 'Safari' en open 'Instellingen voor {{appDomain}}'."
+      },
       "details": {
         "camera": "Toegang tot de camera toestaan",
         "microphone": "Toegang tot de microfoon toestaan",