Fix the error boundary so it is actually functional (#6)

Author: SeriousBug

src/lib/components/Modal.tsx

@@ -0,0 +1,52 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { stopPropagation } from "@lib/utils/dom/stopPropagation";
+import { clsx } from "@lib/utils/clsx";
+
+const MODAL = "fixed left-0 top-0 bottom-0 right-0 z-20";
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  className,
+}: {
+  isOpen: boolean;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <AnimatePresence>
+      {isOpen ? (
+        <>
+          <motion.div
+            initial={{
+              opacity: 0,
+            }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className={clsx(MODAL, "bg-black bg-opacity-50 backdrop-blur")}
+          />
+          <motion.div
+            initial={{ opacity: 0, y: 200 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 200 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className={clsx(MODAL, "flex justify-center items-center")}
+            aria-hidden
+            onClick={onClose}
+          >
+            <div
+              // Stop propagation of the click event to prevent the modal from closing
+              onClick={stopPropagation}
+              className={clsx("bg-background p-4 rounded", className)}
+            >
+              {children}
+            </div>
+          </motion.div>
+        </>
+      ) : null}
+    </AnimatePresence>
+  );
+}

src/lib/hooks/storage/useModalDismissed.ts

@@ -0,0 +1,39 @@
+import { z } from "zod";
+import { useStorage } from "../useStorage";
+import { useCallback } from "react";
+
+const ModalKey = z.literal("error-boundary");
+type ModalKey = z.infer<typeof ModalKey>;
+
+const ModalDismissed = z.record(
+  ModalKey,
+  z.object({
+    at: z.coerce.date(),
+    duration: z.literal("permanent"),
+  }),
+);
+type ModalDismissed = z.infer<typeof ModalDismissed>;
+
+export function useModalDismissed({ key }: { key: ModalKey }) {
+  const { data, error, setData, mutate, isLoading } = useStorage({
+    key: "modal-dismissed",
+    validator: ModalDismissed.parseAsync,
+    storageType: "local",
+  });
+
+  const dismiss = useCallback(() => {
+    return setData({ [key]: { at: new Date(), duration: "permanent" } });
+  }, [setData, key]);
+  const restore = useCallback(() => {
+    return setData({ [key]: undefined });
+  }, [setData, key]);
+
+  return {
+    isLoading,
+    isDismissed: data?.[key] !== undefined,
+    error,
+    mutate,
+    dismiss,
+    restore,
+  };
+}

src/lib/hooks/useStorage.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import useSWR from "swr";
 
-type Key = "prompts";
+type Key = "modal-dismissed";
 
 type Listener = Parameters<
   typeof chrome.storage.local.onChanged.addListener

src/lib/integrations/error.ts

@@ -1,6 +1,6 @@
 import { EError, EErrorOptions } from "@lib/utils/error";
 import { IntegrationPlatform } from "./core";
-import { WithPartial } from "@lib/utils/WithPartial";
+import { WithPartial } from "@lib/utils/typeUtils/WithPartial";
 
 type EIntegrationTargetErrorData = {
   url: string;

src/lib/integrations/github.ts

@@ -1,13 +1,13 @@
-import { findDOMNodeByContent } from "@lib/utils/findDOMNodeByContent";
+import { WithPartial } from "@lib/utils/typeUtils/WithPartial";
 import { Integration } from "./core";
 import {
   EIntegrationParseError,
   EIntegrationParseErrorData,
   EIntegrationTargetError,
 } from "./error";
 import { EErrorOptions } from "@lib/utils/error";
-import { WithPartial } from "@lib/utils/WithPartial";
 import _ from "lodash";
+import { findDOMNodeByContent } from "@lib/utils/dom/findDOMNodeByContent";
 
 type EGithubParseErrorData = EIntegrationParseErrorData & {
   integration: "github";

src/lib/utils/findDOMNodeByContent.ts src/lib/utils/dom/findDOMNodeByContent.tssrc/lib/utils/findDOMNodeByContent.ts renamed to src/lib/utils/dom/findDOMNodeByContent.ts

@@ -0,0 +1 @@
+export type PortalProps = { portal: HTMLElement | DocumentFragment };

src/lib/utils/dom/portal.ts

@@ -0,0 +1,33 @@
+import { EError, EErrorOptions } from "../error";
+import styles from "../../../tailwind.css?inline";
+import { WithPartial } from "../typeUtils/WithPartial";
+
+type EShadowErrorData = {
+  selector: { content: string };
+};
+export class EShadowError extends EError<EShadowErrorData> {
+  constructor({
+    message = "open-devpod-browser-extension is unable to attach an element to the page.",
+    data,
+  }: WithPartial<EErrorOptions<EShadowErrorData>, "message">) {
+    super({ message, data });
+    this.name = "EShadowError";
+  }
+}
+
+function attachStyles(target: HTMLElement | DocumentFragment) {
+  const style = document.createElement("style");
+  style.innerHTML = styles;
+  target.appendChild(style);
+}
+
+export function attachShadow<E extends Element = Element>(target: E | null) {
+  if (!target) {
+    throw new EShadowError({});
+  }
+  const shadowTarget = document.createElement("div");
+  target.appendChild(shadowTarget);
+  const shadow = shadowTarget.attachShadow({ mode: "closed" });
+  attachStyles(shadow);
+  return { shadow, target: shadowTarget };
+}

src/lib/utils/dom/shadow.ts

@@ -1,4 +1,4 @@
-import { WithPartial } from "./WithPartial";
+import { WithPartial } from "./typeUtils/WithPartial";
 import { safeStringify } from "./safeStringify";
 
 export type EErrorOptions<T = unknown> = {
@@ -73,22 +73,7 @@ export class EError<T = unknown> extends Error {
   }
 
   public static encode(error: unknown): string {
-    return Buffer.from(safeStringify(this.serialize(error))).toString(
-      "base64url",
-    );
-  }
-}
-
-type EShadowErrorData = {
-  selector: { content: string };
-};
-export class EShadowError extends EError<EShadowErrorData> {
-  constructor({
-    message = "open-devpod-browser-extension is unable to attach an element to the page.",
-    data,
-  }: WithPartial<EErrorOptions<EShadowErrorData>, "message">) {
-    super({ message, data });
-    this.name = "EShadowError";
+    return btoa(safeStringify(this.serialize(error)));
   }
 }