✨(frontend) allow customization of error title and description

Enhanced the error screen to support customizable titles and descriptions.

Allows for more detailed and informative error messages for users.
By default, the error screen displays a standard heading. You can
now pass custom title and body content to provide additional context
and clarity.

src/frontend/src/components/ErrorScreen.tsx

@@ -1,12 +1,25 @@
 import { CenteredContent } from '@/layout/CenteredContent'
 import { Screen } from '@/layout/Screen'
 import { useTranslation } from 'react-i18next'
+import { Center } from '@/styled-system/jsx'
+import { Text } from '@/primitives'
 
-export const ErrorScreen = () => {
+export const ErrorScreen = ({ title, body }: {
+  title?: string
+  body?: string
+}) => {
   const { t } = useTranslation()
   return (
     <Screen layout="centered">
-      <CenteredContent title={t('error.heading')} withBackButton />
+      <CenteredContent title={title || t('error.heading')} withBackButton>
+        {!!body && (
+          <Center>
+            <Text as="p" variant="h3">
+              {body}
+            </Text>
+          </Center>
+        )}
+      </CenteredContent>
     </Screen>
   )
 }

src/frontend/src/features/rooms/components/Conference.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 import {
   formatChatMessageLinks,
   LiveKitRoom,
@@ -12,6 +13,7 @@ import { queryClient } from '@/api/queryClient'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
+import { ErrorScreen } from '@/components/ErrorScreen'
 import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
@@ -30,7 +32,7 @@ export const Conference = ({
 }) => {
   const fetchKey = [keys.room, roomId, userConfig.username]
 
-  const { mutateAsync: createRoom, status: createStatus} = useCreateRoom({
+  const { mutateAsync: createRoom, status: createStatus, isError: isCreateError} = useCreateRoom({
     onSuccess: (data) => {
       queryClient.setQueryData(fetchKey, data)
     },
@@ -87,6 +89,12 @@ export const Conference = ({
     }
   }, [])
 
+  const { t } = useTranslation('rooms')
+  if (isCreateError) {
+    // this error screen should be replaced by a proper waiting room for anonymous user.
+    return <ErrorScreen title={t('error.createRoom.heading')} body={t('error.createRoom.body')} />
+  }
+
   return (
     <QueryAware status={isFetchError ? createStatus : fetchStatus}>
       <Screen>

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

@@ -16,5 +16,11 @@
     "copy": "",
     "heading": "",
     "inputLabel": ""
+  },
+  "error": {
+    "createRoom": {
+      "heading": "",
+      "body": ""
+    }
   }
 }

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

@@ -16,5 +16,11 @@
     "copy": "Copy",
     "heading": "Share the meeting link",
     "inputLabel": "Meeting link"
+  },
+  "error": {
+    "createRoom": {
+      "heading": "Authentication Required",
+      "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so."
+    }
   }
 }

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

@@ -16,5 +16,11 @@
     "copy": "Copier le lien",
     "heading": "Partager le lien vers la réunion",
     "inputLabel": "Lien vers la réunion"
+  },
+  "error": {
+    "createRoom": {
+      "heading": "Authentification requise",
+      "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse."
+    }
   }
 }