🚸(frontend) add alert dialog for recording start failures

Implement modal alert dialog when recording initialization fails. Provides
clear error feedback to users when API cannot start recording process,
improving error state communication.

src/frontend/src/features/recording/api/startRecording.ts

@@ -27,5 +27,6 @@ export function useStartRecording(
   return useMutation<ApiRoom, ApiError, StartRecordingParams>({
     mutationFn: startRecording,
     onSuccess: options?.onSuccess,
+    onError: options?.onError,
   })
 }

src/frontend/src/features/recording/api/stopRecording.ts

@@ -19,5 +19,6 @@ export function useStopRecording(
   return useMutation<ApiRoom, ApiError, StopRecordingParams>({
     mutationFn: stopRecording,
     onSuccess: options?.onSuccess,
+    onError: options?.onError,
   })
 }

src/frontend/src/features/recording/components/ScreenRecordingSidePanel.tsx

@@ -1,4 +1,4 @@
-import { A, Button, Div, H, Text } from '@/primitives'
+import { A, Button, Dialog, Div, H, P, Text } from '@/primitives'
 
 import fourthSlide from '@/assets/intro-slider/4_record.png'
 import { css } from '@/styled-system/css'
@@ -29,14 +29,20 @@ export const ScreenRecordingSidePanel = () => {
   const recordingSnap = useSnapshot(recordingStore)
   const { t } = useTranslation('rooms', { keyPrefix: 'screenRecording' })
 
+  const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('')
+
   const { notifyParticipants } = useNotifyParticipants()
 
   const roomId = useRoomId()
 
   const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
-    useStartRecording()
+    useStartRecording({
+      onError: () => setIsErrorDialogOpen('start'),
+    })
   const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
-    useStopRecording()
+    useStopRecording({
+      onError: () => setIsErrorDialogOpen('stop'),
+    })
 
   const statuses = useMemo(() => {
     return {
@@ -208,6 +214,20 @@ export const ScreenRecordingSidePanel = () => {
           )}
         </>
       )}
+      <Dialog
+        isOpen={!!isErrorDialogOpen}
+        role="alertdialog"
+        aria-label={t('alert.title')}
+      >
+        <P>{t(`alert.body.${isErrorDialogOpen}`)}</P>
+        <Button
+          variant="text"
+          size="sm"
+          onPress={() => setIsErrorDialogOpen('')}
+        >
+          {t('alert.button')}
+        </Button>
+      </Dialog>
     </Div>
   )
 }

src/frontend/src/features/recording/components/TranscriptSidePanel.tsx

@@ -1,4 +1,4 @@
-import { A, Button, Div, H, LinkButton, Text } from '@/primitives'
+import { A, Button, Dialog, Div, H, LinkButton, P, Text } from '@/primitives'
 
 import thirdSlide from '@/assets/intro-slider/3_resume.png'
 import { css } from '@/styled-system/css'
@@ -32,6 +32,8 @@ export const TranscriptSidePanel = () => {
   const [isLoading, setIsLoading] = useState(false)
   const { t } = useTranslation('rooms', { keyPrefix: 'transcript' })
 
+  const [isErrorDialogOpen, setIsErrorDialogOpen] = useState('')
+
   const recordingSnap = useSnapshot(recordingStore)
 
   const { notifyParticipants } = useNotifyParticipants()
@@ -43,10 +45,14 @@ export const TranscriptSidePanel = () => {
   const roomId = useRoomId()
 
   const { mutateAsync: startRecordingRoom, isPending: isPendingToStart } =
-    useStartRecording()
+    useStartRecording({
+      onError: () => setIsErrorDialogOpen('start'),
+    })
 
   const { mutateAsync: stopRecordingRoom, isPending: isPendingToStop } =
-    useStopRecording()
+    useStopRecording({
+      onError: () => setIsErrorDialogOpen('stop'),
+    })
 
   const statuses = useMemo(() => {
     return {
@@ -243,6 +249,20 @@ export const TranscriptSidePanel = () => {
           )}
         </>
       )}
+      <Dialog
+        isOpen={!!isErrorDialogOpen}
+        role="alertdialog"
+        aria-label={t('alert.title')}
+      >
+        <P>{t(`alert.body.${isErrorDialogOpen}`)}</P>
+        <Button
+          variant="text"
+          size="sm"
+          onPress={() => setIsErrorDialogOpen('')}
+        >
+          {t('alert.button')}
+        </Button>
+      </Dialog>
     </Div>
   )
 }

src/frontend/src/locales/de/rooms.json

@@ -237,6 +237,14 @@
       "heading": "",
       "body": "",
       "button": ""
+    },
+    "alert": {
+      "title": "",
+      "body": {
+        "stop": "",
+        "start": ""
+      },
+      "button": ""
     }
   },
   "screenRecording": {
@@ -254,6 +262,14 @@
       "heading": "",
       "body": "",
       "button": ""
+    },
+    "alert": {
+      "title": "",
+      "body": {
+        "stop": "",
+        "start": ""
+      },
+      "button": ""
     }
   },
   "admin": {

src/frontend/src/locales/en/rooms.json

@@ -237,6 +237,14 @@
       "heading": "Become a beta tester",
       "body": "Record your meeting for later. You will receive a summary by email once the meeting is finished.",
       "button": "Sign up"
+    },
+    "alert": {
+      "title": "Transcription Failed",
+      "body": {
+        "stop": "We were unable to stop the transcription. Please try again in a moment.",
+        "start": "We were unable to start the transcription. Please try again in a moment."
+      },
+      "button": "OK"
     }
   },
   "screenRecording": {
@@ -255,6 +263,14 @@
       "heading": "Recording in progress…",
       "body": "You will receive the result by email once the recording is complete.",
       "button": "Stop recording"
+    },
+    "alert": {
+      "title": "Recording Failed",
+      "body": {
+        "stop": "We were unable to stop the recording. Please try again in a moment.",
+        "start": "We were unable to start the recording. Please try again in a moment."
+      },
+      "button": "OK"
     }
   },
   "admin": {

src/frontend/src/locales/fr/rooms.json

@@ -237,6 +237,14 @@
       "heading": "Devenez beta testeur",
       "body": "Enregistrer votre réunion pour plus tard. Vous recevrez un compte-rendu par email une fois la réunion terminée.",
       "button": "Inscrivez-vous"
+    },
+    "alert": {
+      "title": "Échec de transcription",
+      "body": {
+        "stop": "Nous n'avons pas pu stopper la transcription. Veuillez réessayer dans quelques instants.",
+        "start": "Nous n'avons pas pu démarrer la transcription. Veuillez réessayer dans quelques instants."
+      },
+      "button": "OK"
     }
   },
   "screenRecording": {
@@ -255,6 +263,14 @@
       "heading": "Enregistrement en cours …",
       "body": "Vous recevrez le resultat par email une fois l'enregistrement terminé.",
       "button": "Arrêter l'enregistrement"
+    },
+    "alert": {
+      "title": "Échec de l'enregistrement",
+      "body": {
+        "stop": "Nous n'avons pas pu stopper l'enregistrement. Veuillez réessayer dans quelques instants.",
+        "start": "Nous n'avons pas pu démarrer l'enregistrement. Veuillez réessayer dans quelques instants."
+      },
+      "button": "OK"
     }
   },
   "admin": {

src/frontend/src/locales/nl/rooms.json

@@ -237,6 +237,14 @@
       "heading": "Word betatester",
       "body": "Neem uw vergadering op voor later. U ontvangt een samenvatting per e-mail zodra de vergadering is afgelopen.",
       "button": "Aanmelden"
+    },
+    "alert": {
+      "title": "Transcriptie mislukt",
+      "body": {
+        "stop": "We konden de transcriptie niet stoppen. Probeer het over enkele ogenblikken opnieuw.",
+        "start": "We konden de transcriptie niet starten. Probeer het over enkele ogenblikken opnieuw."
+      },
+      "button": "Opnieuw proberen"
     }
   },
   "screenRecording": {
@@ -255,6 +263,14 @@
       "heading": "Opname bezig …",
       "body": "Je ontvangt het resultaat per e-mail zodra de opname is voltooid.",
       "button": "Opname stoppen"
+    },
+    "alert": {
+      "title": "Opname mislukt",
+      "body": {
+        "stop": "We konden de opname niet stoppen. Probeer het over enkele ogenblikken opnieuw.",
+        "start": "We konden de opname niet starten. Probeer het over enkele ogenblikken opnieuw."
+      },
+      "button": "Opnieuw proberen"
     }
   },
   "admin": {