error dialog

app/components/ErrorDialog.tsx

@@ -0,0 +1,34 @@
+import { Button, TransitionDialogue } from "~/components";
+import {
+  showErrorDialog,
+  errorDialogMessage,
+  errorDialogTitle,
+} from "~/pages/PageEnigma/store";
+import { useSignals } from "@preact/signals-react/runtime";
+import { faTriangleExclamation } from "@fortawesome/pro-solid-svg-icons";
+
+export function ErrorDialog() {
+  useSignals();
+
+  return (
+    <TransitionDialogue
+      title={errorDialogTitle.value}
+      titleIcon={faTriangleExclamation}
+      titleIconClassName="text-brand-primary"
+      isOpen={showErrorDialog.value}
+      onClose={() => (showErrorDialog.value = false)}
+      showClose={false}>
+      <div>
+        {errorDialogMessage.value}
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            onClick={() => (showErrorDialog.value = false)}
+            variant="secondary">
+            Close
+          </Button>
+        </div>
+      </div>
+    </TransitionDialogue>
+  );
+}

app/components/TransitionDialogue.tsx

@@ -44,15 +44,19 @@ export const TransitionDialogue = ({
   width,
   children,
   childPadding = true,
+  titleIconClassName,
+  showClose = true,
 }: {
   isOpen: boolean;
   title?: ReactNode;
   titleIcon?: IconDefinition;
+  titleIconClassName?: string;
   onClose: () => void;
   className?: string;
   width?: number;
   children: ReactNode;
   childPadding?: boolean;
+  showClose?: boolean;
 }) => {
   return (
     <Transition appear show={isOpen} as={Fragment}>
@@ -81,16 +85,25 @@ export const TransitionDialogue = ({
                     as="div"
                     className="mb-5 flex justify-between p-5 pb-0 text-xl font-bold text-white">
                     <div className="flex items-center gap-3">
-                      {titleIcon && <FontAwesomeIcon icon={titleIcon} />}
+                      {titleIcon && (
+                        <FontAwesomeIcon
+                          icon={titleIcon}
+                          className={titleIconClassName}
+                        />
+                      )}
                       {title}
                     </div>
-                    <Tooltip position="top" content="Close">
-                      <button
-                        onClick={onClose}
-                        className="opacity-50 transition-opacity duration-150 hover:opacity-80">
-                        <FontAwesomeIcon icon={faDownLeftAndUpRightToCenter} />
-                      </button>
-                    </Tooltip>
+                    {showClose && (
+                      <Tooltip position="top" content="Close">
+                        <button
+                          onClick={onClose}
+                          className="opacity-50 transition-opacity duration-150 hover:opacity-80 focus:outline-none">
+                          <FontAwesomeIcon
+                            icon={faDownLeftAndUpRightToCenter}
+                          />
+                        </button>
+                      </Tooltip>
+                    )}
                   </Dialog.Title>
                 )}
                 <div className={`${childPadding ? "p-5 pt-0" : ""}`.trim()}>

app/components/index.tsx

@@ -21,6 +21,7 @@ import {
 import { Pill } from "./Pill";
 import { WaveformPlayer } from "./WaveformPlayer";
 import UploadModal from "./UploadModal";
+import { ErrorDialog } from "./ErrorDialog";
 
 export {
   Button,
@@ -28,6 +29,7 @@ export {
   ButtonIcon,
   ButtonLink,
   ButtonIconSelect,
+  ErrorDialog,
   FileWrapper,
   H1,
   H2,

app/pages/PageEnigma/PageEnigma.tsx

@@ -5,6 +5,7 @@ import { EngineProvider } from "~/contexts/EngineProvider";
 import { useInferenceJobManager } from "~/hooks";
 import { LoadingBar } from "~/components";
 import { MyMovies } from "~/pages/PageEnigma/comps/MyMovies/MyMovies";
+import { ErrorDialog } from "~/components/ErrorDialog";
 
 export const PageEnigma = () => {
   useInferenceJobManager();
@@ -14,6 +15,7 @@ export const PageEnigma = () => {
         <PageEnigmaComponent />
         <DragComponent />
         <MyMovies />
+        <ErrorDialog />
       </EngineProvider>
       <LoadingBar
         id="editor-loading-bar"

app/pages/PageEnigma/store/error.ts

@@ -0,0 +1,13 @@
+import { signal } from "@preact/signals-core";
+
+export const showErrorDialog = signal(false);
+export const errorDialogTitle = signal("Error!");
+export const errorDialogMessage = signal("Something went wrong.");
+
+export function setErrorDialogTitle(errorTitle: string) {
+  errorDialogTitle.value = errorTitle;
+}
+
+export function setErrorDialogMessage(errorMessage: string) {
+  errorDialogMessage.value = errorMessage;
+}

app/pages/PageEnigma/store/index.ts

@@ -10,3 +10,4 @@ export * from "./selectedItem";
 export * from "./sidePanel";
 export * from "./sizing";
 export * from "./timing";
+export * from "./error";