Refactor BundleColumnError to TS (#39177)

app/javascript/mastodon/components/empty_state/empty_state.module.scss

@@ -13,8 +13,7 @@
 .content {
   max-width: 370px;
 
-  svg,
-  img {
+  :where(svg, img) {
     width: 200px;
     aspect-ratio: 1;
     object-fit: contain;
@@ -22,16 +21,10 @@
     margin-bottom: 16px;
   }
 
-  h3 {
-    font-size: 17px;
-    font-weight: 500;
-    text-wrap: balance;
-    line-height: 1.2;
-  }
-
   p {
     margin-top: 8px;
     font-size: 15px;
+    line-height: 1.4;
     color: var(--color-text-secondary);
     text-wrap: pretty;
   }
@@ -41,6 +34,18 @@
   }
 }
 
+.heading {
+  font-size: 17px;
+  font-weight: 500;
+  text-wrap: balance;
+  line-height: 1.2;
+}
+
+.errorImage {
+  width: 280px;
+  margin: -10% 0;
+}
+
 [data-color-scheme='dark'] .defaultImage {
   --color-skin-1: #3a3a50;
   --color-skin-2: #67678e;

app/javascript/mastodon/components/empty_state/empty_state.stories.tsx

@@ -29,6 +29,14 @@ export const Default: Story = {
   },
 };
 
+export const Error: Story = {
+  args: {
+    image: 'error',
+    title: 'Error',
+    message: 'Something went wrong loading the page.',
+  },
+};
+
 export const WithAction: Story = {
   args: {
     ...Default.args,

app/javascript/mastodon/components/empty_state/index.tsx

@@ -4,10 +4,15 @@ import classNames from 'classnames';
 
 import ElephantImage from '@/images/elephant_ui.svg?react';
 
+import { GIF } from '../gif';
+
 import classes from './empty_state.module.scss';
 
 const images = {
   default: <ElephantImage className={classes.defaultImage} />,
+  error: (
+    <GIF src='/oops.gif' staticSrc='/oops.png' className={classes.errorImage} />
+  ),
 };
 
 /**
@@ -21,6 +26,7 @@ export const EmptyState: React.FC<{
   title?: React.ReactNode;
   message?: React.ReactNode;
   children?: React.ReactNode;
+  headingLevel?: 'h2' | 'h3' | 'h4';
   className?: string;
 }> = ({
   image = 'default',
@@ -29,6 +35,7 @@ export const EmptyState: React.FC<{
   ),
   message,
   children,
+  headingLevel: Heading = 'h2',
   className,
 }) => {
   const imageToRender = typeof image === 'string' ? images[image] : image;
@@ -38,7 +45,7 @@ export const EmptyState: React.FC<{
       {(title || message || imageToRender) && (
         <div className={classes.content}>
           {imageToRender}
-          {!!title && <h3>{title}</h3>}
+          {!!title && <Heading className={classes.heading}>{title}</Heading>}
           {!!message && <p>{message}</p>}
         </div>
       )}