✨(frontend) introduce a new notification type

This notification alert the user when her was muted by another one.
Simple copywritting.

src/frontend/src/features/notifications/components/ToastMuted.tsx

@@ -0,0 +1,26 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+
+export function ToastMuted({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t('muted', { name: participant.name })}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -5,7 +5,8 @@ import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
+import { ToastRaised } from './ToastRaised'
+import { ToastMuted } from './ToastMuted'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -23,6 +24,9 @@ export function ToastRegion({ state, ...props }: ToastRegionProps) {
         if (toast.content?.type === NotificationType.HandRaised) {
           return <ToastRaised key={toast.key} toast={toast} state={state} />
         }
+        if (toast.content?.type === NotificationType.ParticipantMuted) {
+          return <ToastMuted key={toast.key} toast={toast} state={state} />
+        }
         return <Toast key={toast.key} toast={toast} state={state} />
       })}
     </div>

src/frontend/src/locales/de/notifications.json

@@ -6,5 +6,6 @@
   "raised": {
     "description": "",
     "cta": ""
-  }
+  },
+  "muted": ""
 }

src/frontend/src/locales/en/notifications.json

@@ -6,5 +6,6 @@
   "raised": {
     "description": "{{name}} has raised their hand.",
     "cta": "Open waiting list"
-  }
+  },
+  "muted": "{{name}} has muted your microphone. No participant can hear you."
 }

src/frontend/src/locales/fr/notifications.json

@@ -6,5 +6,6 @@
   "raised": {
     "description": "{{name}} a levé la main.",
     "cta": "Ouvrir la file d'attente"
-  }
+  },
+  "muted": "{{name}} a coupé votre micro. Aucun participant ne peut l'entendre."
 }