♻️(frontend) refactor notification preferences to use Field switch

Adopt unified switch component pattern for notification preferences to
enable future addition of descriptive text per notification type,
improving consistency and providing clearer explanation capability
for notification behaviors.

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

@@ -1,5 +1,5 @@
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
-import { H, Switch } from '@/primitives'
+import { Field, H } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
@@ -23,15 +23,19 @@ export const NotificationsTab = ({ id }: NotificationsTabProps) => {
         {Array.from(notificationsSnap.soundNotifications).map(
           ([key, value]) => (
             <li key={key}>
-              <Switch
+              <Field
-                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}`)}"`}
+                type="switch"
+                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}.label`)}"`}
+                label={t(`items.${key}.label`)}
                 isSelected={value}
                 onChange={(v) => {
                   notificationsStore.soundNotifications.set(key, v)
                 }}
-              >
+                wrapperProps={{
-                {t(`items.${key}`)}
+                  noMargin: true,
-              </Switch>
+                  fullWidth: true,
+                }}
+              />
             </li>
           )
         )}

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

@@ -76,9 +76,15 @@
       "enable": "Aktivieren"
     },
     "items": {
-      "participantJoined": "Teilnehmer beigetreten",
+      "participantJoined": {
-      "handRaised": "Hand gehoben",
+        "label": "Teilnehmer beigetreten"
-      "messageReceived": "Nachricht erhalten"
+      },
+      "handRaised": {
+        "label": "Hand gehoben"
+      },
+      "messageReceived": {
+        "label": "Nachricht erhalten"
+      }
     }
   },
   "dialog": {

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

@@ -76,9 +76,15 @@
       "enable": "Enable"
     },
     "items": {
-      "participantJoined": "Participant joined",
+      "participantJoined": {
-      "handRaised": "Hand raised",
+        "label": "Participant joined"
-      "messageReceived": "Message received"
+      },
+      "handRaised": {
+        "label": "Hand raised"
+      },
+      "messageReceived": {
+        "label": "Message received"
+      }
     }
   },
   "dialog": {

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

@@ -76,9 +76,15 @@
       "enable": "Activer"
     },
     "items": {
-      "participantJoined": "Un nouveau participant",
+      "participantJoined": {
-      "handRaised": "Une main levée",
+        "label": "Un nouveau participant"
-      "messageReceived": "Un message reçu"
+      },
+      "handRaised": {
+        "label": "Une main levée"
+      },
+      "messageReceived": {
+        "label": "Un message reçu"
+      }
     }
   },
   "dialog": {

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

@@ -76,9 +76,15 @@
       "enable": "Inschakelen"
     },
     "items": {
-      "participantJoined": "Deelnemer is toegevoegd",
+      "participantJoined": {
-      "handRaised": "Hand opgestoken",
+        "label": "Deelnemer is toegevoegd"
-      "messageReceived": "Bericht ontvangen"
+      },
+      "handRaised": {
+        "label": "Hand opgestoken"
+      },
+      "messageReceived": {
+        "label": "Bericht ontvangen"
+      }
     }
   },
   "dialog": {