✨(frontend) add noise reduction toggle setting with beta label

Implement settings option to enable/disable noise suppression with clear
beta indicator. Label will be removed after production battle-testing.

Note: Settings styling needs polish, will address in future commits.

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

@@ -22,6 +22,9 @@ export function usePersistentUserChoices() {
     saveUsername: (username: string) => {
       userChoicesStore.username = username
     },
+    saveNoiseReductionEnabled: (enabled: boolean) => {
+      userChoicesStore.noiseReductionEnabled = enabled
+    },
     saveProcessorSerialized: (
       processorSerialized: ProcessorSerialized | undefined
     ) => {

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

@@ -1,4 +1,4 @@
-import { DialogProps, Field, H } from '@/primitives'
+import { DialogProps, Field, H, Switch } from '@/primitives'
 
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import {
@@ -13,16 +13,44 @@ import { HStack } from '@/styled-system/jsx'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 import { ReactNode } from 'react'
+import { css } from '@/styled-system/css'
 
 type RowWrapperProps = {
   heading: string
   children: ReactNode[]
+  beta?: boolean
 }
 
-const RowWrapper = ({ heading, children }: RowWrapperProps) => {
+const BetaBadge = () => (
+  <span
+    className={css({
+      content: '"Beta"',
+      display: 'block',
+      letterSpacing: '-0.02rem',
+      padding: '0 0.25rem',
+      backgroundColor: '#E8EDFF',
+      color: '#0063CB',
+      fontSize: '12px',
+      fontWeight: 500,
+      margin: '0 0 0.9375rem 0.3125rem',
+      lineHeight: '1rem',
+      borderRadius: '4px',
+      width: 'fit-content',
+      height: 'fit-content',
+      marginTop: { base: '10px', sm: '5px' },
+    })}
+  >
+    Beta
+  </span>
+)
+
+const RowWrapper = ({ heading, children, beta }: RowWrapperProps) => {
   return (
     <>
-      <H lvl={2}>{heading}</H>
+      <HStack>
+        <H lvl={2}>{heading}</H>
+        {beta && <BetaBadge />}
+      </HStack>
       <HStack
         gap={0}
         style={{
@@ -61,7 +89,11 @@ export const AudioTab = ({ id }: AudioTabProps) => {
   const { t } = useTranslation('settings')
   const { localParticipant } = useRoomContext()
 
-  const { saveAudioInputDeviceId } = usePersistentUserChoices()
+  const {
+    userChoices: { noiseReductionEnabled },
+    saveAudioInputDeviceId,
+    saveNoiseReductionEnabled,
+  } = usePersistentUserChoices()
 
   const isSpeaking = useIsSpeaking(localParticipant)
 
@@ -158,6 +190,20 @@ export const AudioTab = ({ id }: AudioTabProps) => {
           <SoundTester />
         </RowWrapper>
       )}
+      <RowWrapper heading={t('audio.noiseReduction.heading')} beta>
+        <Switch
+          aria-label={t(
+            `audio.noiseReduction.ariaLabel.${noiseReductionEnabled ? 'disable' : 'enable'}`
+          )}
+          isSelected={noiseReductionEnabled}
+          onChange={(v) => {
+            saveNoiseReductionEnabled(v)
+          }}
+        >
+          {t('audio.noiseReduction.label')}
+        </Switch>
+        <div />
+      </RowWrapper>
     </TabPanel>
   )
 }

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

@@ -12,6 +12,14 @@
       "label": "Wählen Sie Ihre Audioeingabe",
       "disabled": "Mikrofon deaktiviert"
     },
+    "noiseReduction": {
+      "label": "Rauschunterdrückung",
+      "heading": "Rauschunterdrückung",
+      "ariaLabel": {
+        "enable": "Rauschunterdrückung aktivieren",
+        "disable": "Rauschunterdrückung deaktivieren"
+      }
+    },
     "speakers": {
       "heading": "Lautsprecher",
       "label": "Wählen Sie Ihre Audioausgabe",

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

@@ -12,6 +12,14 @@
       "label": "Select your audio input",
       "disabled": "Microphone disabled"
     },
+    "noiseReduction": {
+      "label": "Noise reduction",
+      "heading": "Noise reduction",
+      "ariaLabel": {
+        "enable": "Enable noise reduction",
+        "disable": "Disable noise reduction"
+      }
+    },
     "speakers": {
       "heading": "Speakers",
       "label": "Select your audio output",

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

@@ -12,6 +12,14 @@
       "label": "Sélectionner votre entrée audio",
       "disabled": "Micro désactivé"
     },
+    "noiseReduction": {
+      "label": "Réduction de bruit",
+      "heading": "Réduction de bruit",
+      "ariaLabel": {
+        "enable": "Activer la réduction du bruit",
+        "disable": "Désactiver la réduction du bruit"
+      }
+    },
     "speakers": {
       "heading": "Haut-parleurs",
       "label": "Sélectionner votre sortie audio",

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

@@ -12,6 +12,14 @@
       "label": "Selecteer uw audioinvoer",
       "disabled": "Microfoon uitgeschakeld"
     },
+    "noiseReduction": {
+      "label": "Ruisonderdrukking",
+      "heading": "Ruisonderdrukking",
+      "ariaLabel": {
+        "enable": "Ruisonderdrukking inschakelen",
+        "disable": "Ruisonderdrukking uitschakelen"
+      }
+    },
     "speakers": {
       "heading": "Luidsprekers",
       "label": "Selecteer uw audio-uitvoer",

src/frontend/src/stores/userChoices.ts

@@ -8,6 +8,7 @@ import {
 
 export type LocalUserChoices = LocalUserChoicesLK & {
   processorSerialized?: ProcessorSerialized
+  noiseReductionEnabled?: boolean
 }
 
 function getUserChoicesState(): LocalUserChoices {