Change wasm init failed banner to a toast (#7043)

* Change wasm init failed banner to a toast
Closes #6976 for good!

* Move :(

* Rm testing bit

* Align left and bot suggestions

* Update src/components/WasmErrToast.tsx

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

src/App.tsx

@@ -42,13 +42,15 @@ import {
   TutorialRequestToast,
 } from '@src/routes/Onboarding/utils'
 import { reportRejection } from '@src/lib/trap'
-import { DownloadAppToast } from '@src/components/DownloadAppBanner'
+import { DownloadAppToast } from '@src/components/DownloadAppToast'
+import { WasmErrToast } from '@src/components/WasmErrToast'
 import openWindow from '@src/lib/openWindow'
 import {
   APP_DOWNLOAD_PATH,
   CREATE_FILE_URL_PARAM,
   DOWNLOAD_APP_TOAST_ID,
   ONBOARDING_TOAST_ID,
+  WASM_INIT_FAILED_TOAST_ID,
 } from '@src/lib/constants'
 import { isPlaywright } from '@src/lib/isPlaywright'
 import { VITE_KC_SITE_BASE_URL } from '@src/env'
@@ -181,6 +183,25 @@ export function App() {
     }
   }, [])
 
+  useEffect(() => {
+    const needsWasmInitFailedToast = !isDesktop() && kclManager.wasmInitFailed
+    if (needsWasmInitFailedToast) {
+      toast.success(
+        () =>
+          WasmErrToast({
+            onDismiss: () => {
+              toast.dismiss(WASM_INIT_FAILED_TOAST_ID)
+            },
+          }),
+        {
+          id: WASM_INIT_FAILED_TOAST_ID,
+          duration: Number.POSITIVE_INFINITY,
+          icon: null,
+        }
+      )
+    }
+  }, [kclManager.wasmInitFailed])
+
   // Only create the native file menus on desktop
   useEffect(() => {
     if (isDesktop()) {

src/Router.tsx

@@ -14,7 +14,6 @@ import { CommandBar } from '@src/components/CommandBar/CommandBar'
 import { ErrorPage } from '@src/components/ErrorPage'
 import FileMachineProvider from '@src/components/FileMachineProvider'
 import ModelingMachineProvider from '@src/components/ModelingMachineProvider'
-import { WasmErrBanner } from '@src/components/WasmErrBanner'
 import { NetworkContext } from '@src/hooks/useNetworkContext'
 import { useNetworkStatus } from '@src/hooks/useNetworkStatus'
 import { coreDump } from '@src/lang/wasm'
@@ -84,7 +83,6 @@ const router = createRouter([
                 <App />
                 <CommandBar />
               </ModelingMachineProvider>
-              <WasmErrBanner />
             </FileMachineProvider>
           </Auth>
         ),

src/components/WasmErrBanner.tsx

@@ -1,64 +0,0 @@
-import { Dialog } from '@headlessui/react'
-import { useState } from 'react'
-
-import { ActionButton } from '@src/components/ActionButton'
-import { useKclContext } from '@src/lang/KclProvider'
-
-export function WasmErrBanner() {
-  const [isBannerDismissed, setBannerDismissed] = useState(false)
-
-  const { wasmInitFailed } = useKclContext()
-
-  if (!wasmInitFailed) return null
-
-  return (
-    <Dialog
-      className="fixed inset-0 top-auto z-50 bg-warn-20 text-warn-80 px-8 py-4"
-      open={!isBannerDismissed}
-      onClose={() => ({})}
-    >
-      <Dialog.Panel className="max-w-3xl mx-auto">
-        <div className="flex gap-2 justify-between items-start">
-          <h2 className="text-xl font-bold mb-4">
-            Problem with our WASM blob :(
-          </h2>
-          <ActionButton
-            Element="button"
-            onClick={() => setBannerDismissed(true)}
-            iconStart={{
-              icon: 'close',
-              className: 'p-1',
-              bgClassName:
-                'bg-warn-70 hover:bg-warn-80 dark:bg-warn-70 dark:hover:bg-warn-80',
-              iconClassName:
-                'text-warn-10 group-hover:text-warn-10 dark:text-warn-10 dark:group-hover:text-warn-10',
-            }}
-            className="!p-0 !bg-transparent !border-transparent"
-          />
-        </div>
-        <p>
-          <a
-            href="https://webassembly.org/"
-            rel="noopener noreferrer"
-            target="_blank"
-            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
-          >
-            WASM or web assembly
-          </a>{' '}
-          is core part of how our app works. It might because you OS is not
-          up-to-date. If you're able to update your OS to a later version, try
-          that. If not create an issue on{' '}
-          <a
-            href="https://github.com/KittyCAD/modeling-app"
-            rel="noopener noreferrer"
-            target="_blank"
-            className="text-warn-80 dark:text-warn-80 dark:hover:text-warn-70 underline"
-          >
-            our Github
-          </a>
-          .
-        </p>
-      </Dialog.Panel>
-    </Dialog>
-  )
-}

src/components/WasmErrToast.tsx

@@ -0,0 +1,55 @@
+import { ActionButton } from '@src/components/ActionButton'
+
+export type WasmErrorToastProps = {
+  onDismiss: () => void
+}
+export function WasmErrToast({ onDismiss }: WasmErrorToastProps) {
+  return (
+    <div
+      data-testid="wasm-init-failed-toast"
+      className="flex items-center gap-6 min-w-md"
+    >
+      <span className="flex-none w-24 text-3xl font-mono text-center">:(</span>
+      <div className="flex flex-col justify-between gap-6 min-w-80">
+        <section>
+          <h2>Problem with our WASM blob</h2>
+          <p className="text-sm text-chalkboard-70 dark:text-chalkboard-30">
+            <a
+              href="https://webassembly.org/"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+            >
+              WASM or web assembly
+            </a>{' '}
+            is core part of how our app works. It might be because your OS is not
+            up-to-date. If you're able to update your OS to a later version, try
+            that. If not create an issue on{' '}
+            <a
+              href="https://github.com/KittyCAD/modeling-app"
+              rel="noopener noreferrer"
+              target="_blank"
+              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+            >
+              our Github
+            </a>
+            .
+          </p>
+        </section>
+        <div className="flex justify-end gap-8">
+          <ActionButton
+            Element="button"
+            iconStart={{
+              icon: 'close',
+            }}
+            data-negative-button="dismiss"
+            name="dismiss"
+            onClick={onDismiss}
+          >
+            Dismiss
+          </ActionButton>
+        </div>
+      </div>
+    </div>
+  )
+}

src/lib/constants.ts

@@ -130,6 +130,9 @@ export const ONBOARDING_TOAST_ID = 'onboarding-toast'
 /** Toast id for the download app toast on web */
 export const DOWNLOAD_APP_TOAST_ID = 'download-app-toast'
 
+/** Toast id for the wasm init err toast on web */
+export const WASM_INIT_FAILED_TOAST_ID = 'wasm-init-failed-toast'
+
 /** Local sketch axis values in KCL for operations, it could either be 'X' or 'Y' */
 export const KCL_AXIS_X = 'X'
 export const KCL_AXIS_Y = 'Y'