🚸(frontend) add Safari warning for unavailable speaker settings

Display notice explaining that missing browser settings are due to Safari
limitations, not app bugs, to prevent user confusion.

src/frontend/src/features/settings/components/SettingsDialogExtended.tsx

@@ -14,7 +14,6 @@ import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
 import { GeneralTab } from './tabs/GeneralTab'
 import { AudioTab } from './tabs/AudioTab'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
 import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 

src/frontend/src/features/settings/components/tabs/AudioTab.tsx

@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch } from '@/primitives'
+import { DialogProps, Field, H, Switch, Text } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -174,7 +174,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
       </RowWrapper>
       {/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
         To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
-      {!isSafari() && (
+      {!isSafari() ? (
         <RowWrapper heading={t('audio.speakers.heading')}>
           <Field
             type="select"
@@ -193,6 +193,13 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           />
           <SoundTester />
         </RowWrapper>
+      ) : (
+        <RowWrapper heading={t('audio.speakers.heading')}>
+          <Text variant="warning" margin="md">
+            {t('audio.speakers.safariWarning')}
+          </Text>
+          <div />
+        </RowWrapper>
       )}
       {noiseReductionAvailable && (
         <RowWrapper heading={t('audio.noiseReduction.heading')} beta>

src/frontend/src/locales/de/settings.json

@@ -25,7 +25,8 @@
       "heading": "Lautsprecher",
       "label": "Wählen Sie Ihre Audioausgabe",
       "test": "Testen",
-      "ongoingTest": "Soundtest läuft…"
+      "ongoingTest": "Soundtest läuft…",
+      "safariWarning": "Die Lautsprecherauswahl ist auf Safari aufgrund von Browser-Einschränkungen noch nicht verfügbar."
     },
     "permissionsRequired": "Berechtigungen erforderlich"
   },

src/frontend/src/locales/en/settings.json

@@ -25,7 +25,8 @@
       "heading": "Speakers",
       "label": "Select your audio output",
       "test": "Test",
-      "ongoingTest": "Testing sound…"
+      "ongoingTest": "Testing sound…",
+      "safariWarning": "Speaker selection is not available yet on Safari due to browser limitations."
     },
     "permissionsRequired": "Permissions required"
   },

src/frontend/src/locales/fr/settings.json

@@ -25,7 +25,8 @@
       "heading": "Haut-parleurs",
       "label": "Sélectionner votre sortie audio",
       "test": "Tester",
-      "ongoingTest": "Test du son…"
+      "ongoingTest": "Test du son…",
+      "safariWarning": "La sélection du haut-parleur n'est pas encore disponible sur Safari en raison de limitations du navigateur."
     },
     "permissionsRequired": "Autorisations nécessaires"
   },

src/frontend/src/locales/nl/settings.json

@@ -25,7 +25,8 @@
       "heading": "Luidsprekers",
       "label": "Selecteer uw audio-uitvoer",
       "test": "Test",
-      "ongoingTest": "Testgeluid ..."
+      "ongoingTest": "Testgeluid ...",
+      "safariWarning": "Luidsprekerselectie is nog niet beschikbaar op Safari vanwege browserbeperkingen."
     },
     "permissionsRequired": "Machtigingen vereist"
   },

src/frontend/src/primitives/Text.tsx

@@ -53,6 +53,9 @@ export const text = cva({
       note: {
         color: 'default.subtle-text',
       },
+      warning: {
+        color: 'danger.subtle-text',
+      },
       smNote: {
         color: 'default.subtle-text',
         textStyle: 'sm',