♻️(frontend) generalize transcript notification for all recording types

Convert transcript-specific toast notification into a flexible component
that works with any recording type. Create extensible design that can
accommodate screen recordings and future recording formats. Implementation
is functional though not perfect, with room for future enhancement.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -90,6 +90,8 @@ export const MainNotificationToast = () => {
           break
         case NotificationType.TranscriptionStarted:
         case NotificationType.TranscriptionStopped:
+        case NotificationType.ScreenRecordingStarted:
+        case NotificationType.ScreenRecordingStopped:
           toastQueue.add(
             {
               participant,

src/frontend/src/features/notifications/NotificationType.ts

@@ -8,4 +8,6 @@ export enum NotificationType {
   ParticipantWaiting = 'participantWaiting',
   TranscriptionStarted = 'transcriptionStarted',
   TranscriptionStopped = 'transcriptionStopped',
+  ScreenRecordingStarted = 'screenRecordingStarted',
+  ScreenRecordingStopped = 'screenRecordingStopped',
 }

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

@@ -1,20 +1,34 @@
 import { useToast } from '@react-aria/toast'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 
 import { StyledToastContainer, ToastProps } from './Toast'
 import { HStack } from '@/styled-system/jsx'
 import { useTranslation } from 'react-i18next'
 import { NotificationType } from '../NotificationType'
 
-export function ToastTranscript({ state, ...props }: ToastProps) {
-  const { t } = useTranslation('notifications', { keyPrefix: 'transcript' })
+export function ToastAnyRecording({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
   const ref = useRef(null)
   const { toastProps, contentProps } = useToast(props, state, ref)
   const participant = props.toast.content.participant
   const type = props.toast.content.type
 
-  const key =
-    type == NotificationType.TranscriptionStarted ? 'started' : 'stopped'
+  const key = useMemo(() => {
+    switch (type) {
+      case NotificationType.TranscriptionStarted:
+        return 'transcript.started'
+      case NotificationType.TranscriptionStopped:
+        return 'transcript.stopped'
+      case NotificationType.ScreenRecordingStarted:
+        return 'screenRecording.started'
+      case NotificationType.ScreenRecordingStopped:
+        return 'screenRecording.stopped'
+      default:
+        return
+    }
+  }, [type])
+
+  if (!key) return
 
   return (
     <StyledToastContainer {...toastProps} ref={ref}>

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

@@ -9,7 +9,7 @@ import { ToastRaised } from './ToastRaised'
 import { ToastMuted } from './ToastMuted'
 import { ToastMessageReceived } from './ToastMessageReceived'
 import { ToastLowerHand } from './ToastLowerHand'
-import { ToastTranscript } from './ToastTranscript'
+import { ToastAnyRecording } from './ToastAnyRecording'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
@@ -39,7 +39,9 @@ const renderToast = (
 
     case NotificationType.TranscriptionStarted:
     case NotificationType.TranscriptionStopped:
-      return <ToastTranscript key={toast.key} toast={toast} state={state} />
+    case NotificationType.ScreenRecordingStarted:
+    case NotificationType.ScreenRecordingStopped:
+      return <ToastAnyRecording key={toast.key} toast={toast} state={state} />
 
     default:
       return <Toast key={toast.key} toast={toast} state={state} />

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

@@ -25,5 +25,9 @@
   "transcript": {
     "started": "",
     "stopped": ""
+  },
+  "screenRecording": {
+    "started": "",
+    "stopped": ""
   }
 }

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

@@ -25,5 +25,9 @@
   "transcript": {
     "started": "{{name}} started the meeting transcription.",
     "stopped": "{{name}} stopped the meeting transcription."
+  },
+  "screenRecording": {
+    "started": "{{name}} started the meeting recording.",
+    "stopped": "{{name}} stopped the meeting recording."
   }
 }

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

@@ -25,5 +25,9 @@
   "transcript": {
     "started": "{{name}} a démarré la transcription de la réunion.",
     "stopped": "{{name}} a arrêté la transcription de la réunion."
+  },
+  "screenRecording": {
+    "started": "{{name}} a démarré l'enregistrement de la réunion.",
+    "stopped": "{{name}} a arrêté l'enregistrement de la réunion."
   }
 }

src/frontend/src/locales/nl/notifications.json

@@ -25,5 +25,9 @@
   "transcript": {
     "started": "{{name}} is de transcriptie van de vergadering gestart.",
     "stopped": "{{name}} heeft de transcriptie van de vergadering gestopt."
+  },
+  "screenRecording": {
+    "started": "{{name}} is begonnen met het opnemen van de vergadering.",
+    "stopped": "{{name}} is gestopt met het opnemen van de vergadering."
   }
 }