♻️(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
-                aria-label={`${t(`actions.${value ? 'disable' : 'enable'}`)} ${t('label')} "${t(`items.${key}`)}"`}
+              <Field
+                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)
                 }}
-              >
-                {t(`items.${key}`)}
-              </Switch>
+                wrapperProps={{
+                  noMargin: true,
+                  fullWidth: true,
+                }}
+              />
             </li>
           )
         )}

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

@@ -76,9 +76,15 @@
       "enable": "Aktivieren"
     },
     "items": {
-      "participantJoined": "Teilnehmer beigetreten",
-      "handRaised": "Hand gehoben",
-      "messageReceived": "Nachricht erhalten"
+      "participantJoined": {
+        "label": "Teilnehmer beigetreten"
+      },
+      "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",
-      "handRaised": "Hand raised",
-      "messageReceived": "Message received"
+      "participantJoined": {
+        "label": "Participant joined"
+      },
+      "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",
-      "handRaised": "Une main levée",
-      "messageReceived": "Un message reçu"
+      "participantJoined": {
+        "label": "Un nouveau participant"
+      },
+      "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",
-      "handRaised": "Hand opgestoken",
-      "messageReceived": "Bericht ontvangen"
+      "participantJoined": {
+        "label": "Deelnemer is toegevoegd"
+      },
+      "handRaised": {
+        "label": "Hand opgestoken"
+      },
+      "messageReceived": {
+        "label": "Bericht ontvangen"
+      }
     }
   },
   "dialog": {