Error: use a close button instead of go to home when in widget mode

src/ErrorView.tsx

@@ -12,13 +12,16 @@ import {
   type FC,
   type ReactNode,
   type SVGAttributes,
+  type ReactElement,
 } from "react";
 import { useTranslation } from "react-i18next";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { RageshakeButton } from "./settings/RageshakeButton";
 import styles from "./ErrorView.module.css";
 import { useUrlParams } from "./UrlParams";
 import { LinkButton } from "./button";
+import { ElementWidgetActions, type WidgetHelpers } from "./widget.ts";
 
 interface Props {
   Icon: ComponentType<SVGAttributes<SVGElement>>;
@@ -35,6 +38,7 @@ interface Props {
    */
   fatal?: boolean;
   children: ReactNode;
+  widget: WidgetHelpers | null;
 }
 
 export const ErrorView: FC<Props> = ({
@@ -43,6 +47,7 @@ export const ErrorView: FC<Props> = ({
   rageshake,
   fatal,
   children,
+  widget,
 }) => {
   const { t } = useTranslation();
   const { confineToRoom } = useUrlParams();
@@ -51,6 +56,46 @@ export const ErrorView: FC<Props> = ({
     window.location.href = "/";
   }, []);
 
+  const CloseWidgetButton: FC<{ widget: WidgetHelpers }> = ({
+    widget,
+  }): ReactElement => {
+    // in widget mode we don't want to show the return home button but a close button
+    const closeWidget = (): void => {
+      widget.api.transport
+        .send(ElementWidgetActions.Close, {})
+        .catch((e) => {
+          // What to do here?
+          logger.error("Failed to send close action", e);
+        })
+        .finally(() => {
+          widget.api.transport.stop();
+        });
+    };
+    return (
+      <Button kind="primary" onClick={closeWidget}>
+        {t("action.close")}
+      </Button>
+    );
+  };
+
+  // Whether the error is considered fatal or pathname is `/` then reload the all app.
+  // If not then navigate to home page.
+  const ReturnToHomeButton = (): ReactElement => {
+    if (fatal || location.pathname === "/") {
+      return (
+        <Button kind="tertiary" className={styles.homeLink} onClick={onReload}>
+          {t("return_home_button")}
+        </Button>
+      );
+    } else {
+      return (
+        <LinkButton kind="tertiary" className={styles.homeLink} to="/">
+          {t("return_home_button")}
+        </LinkButton>
+      );
+    }
+  };
+
   return (
     <div className={styles.error}>
       <BigIcon className={styles.icon}>
@@ -63,20 +108,11 @@ export const ErrorView: FC<Props> = ({
       {rageshake && (
         <RageshakeButton description={`***Error View***: ${title}`} />
       )}
-      {!confineToRoom &&
-        (fatal || location.pathname === "/" ? (
-          <Button
-            kind="tertiary"
-            className={styles.homeLink}
-            onClick={onReload}
-          >
-            {t("return_home_button")}
-          </Button>
-        ) : (
-          <LinkButton kind="tertiary" className={styles.homeLink} to="/">
-            {t("return_home_button")}
-          </LinkButton>
-        ))}
+      {widget ? (
+        <CloseWidgetButton widget={widget} />
+      ) : (
+        !confineToRoom && <ReturnToHomeButton />
+      )}
     </div>
   );
 };