♿️(frontend) structure 5xx error alerts

Use h1/p for 500/502/503; pass status from doc and version views.

Author: Ovgodd

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 ### Changed
 
 - 💄(frontend) improve comments highlights #1961
+- ♿️(frontend) structure correctly 5xx error alerts #2128
 
 ## [v4.8.3] - 2026-03-23
 

src/frontend/apps/impress/src/components/TextErrors.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text, TextType } from '@/components';
+import { useHttpErrorMessages } from '@/hooks';
 
 const AlertStyled = styled(Alert)`
   & .c__button--tertiary:hover {
@@ -16,13 +17,15 @@ interface TextErrorsProps extends TextType {
   defaultMessage?: string;
   icon?: ReactNode;
   canClose?: boolean;
+  status?: number;
 }
 
 export const TextErrors = ({
   causes,
   defaultMessage,
   icon,
   canClose = false,
+  status,
   ...textProps
 }: TextErrorsProps) => {
   return (
@@ -35,6 +38,7 @@ export const TextErrors = ({
       <TextOnlyErrors
         causes={causes}
         defaultMessage={defaultMessage}
+        status={status}
         {...textProps}
       />
     </AlertStyled>
@@ -44,9 +48,39 @@ export const TextErrors = ({
 export const TextOnlyErrors = ({
   causes,
   defaultMessage,
+  status,
   ...textProps
 }: TextErrorsProps) => {
   const { t } = useTranslation();
+  const httpError = useHttpErrorMessages(status);
+
+  if (httpError) {
+    return (
+      <Box $direction="column" $gap="0.2rem">
+        <Text
+          as="h1"
+          $theme="error"
+          $textAlign="center"
+          $margin="0"
+          $size="1rem"
+          $weight="unset"
+          {...textProps}
+        >
+          {httpError.title}
+        </Text>
+        <Text
+          as="p"
+          $theme="error"
+          $textAlign="center"
+          $margin="0"
+          $size="0.875rem"
+          {...textProps}
+        >
+          {httpError.detail}
+        </Text>
+      </Box>
+    );
+  }
 
   return (
     <Box $direction="column" $gap="0.2rem">

src/frontend/apps/impress/src/features/docs/doc-versioning/components/DocVersionEditor.tsx

@@ -58,6 +58,7 @@ export const DocVersionEditor = ({
       <Box $margin="large" className="--docs--doc-version-editor-error">
         <TextErrors
           causes={error.cause}
+          status={error.status}
           icon={
             error.status === 502 ? (
               <Text

src/frontend/apps/impress/src/features/docs/doc-versioning/components/VersionList.tsx

@@ -62,6 +62,7 @@ const VersionListState = ({
         >
           <TextErrors
             causes={error.cause}
+            status={error.status}
             icon={
               error.status === 502 ? (
                 <Icon iconName="wifi_off" $theme="danger" />

src/frontend/apps/impress/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useClipboard';
 export * from './useCmdK';
 export * from './useDate';
+export * from './useHttpErrorMessages';
 export * from './useKeyboardAction';

src/frontend/apps/impress/src/hooks/useHttpErrorMessages.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+export const useHttpErrorMessages = (status?: number) => {
+  const { t } = useTranslation();
+
+  const messages: Record<number, { title: string; detail: string }> = {
+    500: {
+      title: t('500 - Internal Server Error'),
+      detail: t('The server met an unexpected condition.'),
+    },
+    502: {
+      title: t('502 - Bad Gateway'),
+      detail: t(
+        'The server received an invalid response. Please check your connection and try again.',
+      ),
+    },
+    503: {
+      title: t('503 - Service Unavailable'),
+      detail: t(
+        'The service is temporarily unavailable. Please try again later.',
+      ),
+    },
+  };
+
+  return status ? messages[status] : undefined;
+};

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -216,6 +216,7 @@ const DocPage = ({ id }: DocProps) => {
       <Box $margin="large">
         <TextErrors
           causes={error.cause}
+          status={error.status}
           icon={
             error.status === 502 ? (
               <Icon iconName="wifi_off" $theme="danger" $withThemeInherited />