Add a "back" button to the onboarding buttons, move the dismiss button to a little corner x button (#5296)

* Add previous button to OnboardingButtons, move dismiss to popover corner

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: namespace-profile-ubuntu-8-cores)

* Clean up diagnostics

I am thoroughly enjoying nvim now

* Amend "click through" test to also click back

* fmt

* Set this test back to fixme, that work should be its own PR

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/routes/Onboarding/Introduction.tsx

@@ -1,4 +1,4 @@
-import { OnboardingButtons, useDemoCode, useDismiss, useNextClick } from '.'
+import { OnboardingButtons, useDemoCode } from '.'
 import { onboardingPaths } from 'routes/Onboarding/paths'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { Themes, getSystemTheme } from 'lib/theme'
@@ -8,13 +8,12 @@ import { isDesktop } from 'lib/isDesktop'
 import { useNavigate, useRouteLoaderData } from 'react-router-dom'
 import { codeManager, kclManager } from 'lib/singletons'
 import { APP_NAME } from 'lib/constants'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IndexLoaderData } from 'lib/types'
 import { PATHS } from 'lib/paths'
 import { useFileContext } from 'hooks/useFileContext'
 import { useLspContext } from 'components/LspProvider'
 import { reportRejection } from 'lib/trap'
-import { toSync } from 'lib/utils'
 
 /**
  * Show either a welcome screen or a warning screen
@@ -39,7 +38,7 @@ interface OnboardingResetWarningProps {
 function OnboardingResetWarning(props: OnboardingResetWarningProps) {
   return (
     <div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
-      <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
+      <div className="relative max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
         {!isDesktop() ? (
           <OnboardingWarningWeb {...props} />
         ) : (
@@ -52,7 +51,6 @@ function OnboardingResetWarning(props: OnboardingResetWarningProps) {
 
 function OnboardingWarningDesktop(props: OnboardingResetWarningProps) {
   const navigate = useNavigate()
-  const dismiss = useDismiss()
   const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const { context: fileContext } = useFileContext()
   const { onProjectClose, onProjectOpen } = useLspContext()
@@ -81,17 +79,28 @@ function OnboardingWarningDesktop(props: OnboardingResetWarningProps) {
       </section>
       <OnboardingButtons
         className="mt-6"
-        dismiss={dismiss}
-        next={toSync(onAccept, reportRejection)}
-        nextText="Make a new project"
+        onNextOverride={() => {
+          onAccept().catch(reportRejection)
+        }}
       />
     </>
   )
 }
 
 function OnboardingWarningWeb(props: OnboardingResetWarningProps) {
-  const dismiss = useDismiss()
+  useEffect(() => {
+    async function beforeNavigate() {
+      // We do want to update both the state and editor here.
+      codeManager.updateCodeStateEditor(bracket)
+      await codeManager.writeToFile()
 
+      await kclManager.executeCode(true)
+      props.setShouldShowWarning(false)
+    }
+    return () => {
+      beforeNavigate().catch(reportRejection)
+    }
+  }, [])
   return (
     <>
       <h1 className="text-3xl font-bold text-warn-80 dark:text-warn-10">
@@ -101,19 +110,7 @@ function OnboardingWarningWeb(props: OnboardingResetWarningProps) {
         We see you have some of your own code written in this project. Please
         save it somewhere else before continuing the onboarding.
       </p>
-      <OnboardingButtons
-        className="mt-6"
-        dismiss={dismiss}
-        next={toSync(async () => {
-          // We do want to update both the state and editor here.
-          codeManager.updateCodeStateEditor(bracket)
-          await codeManager.writeToFile()
-
-          await kclManager.executeCode(true)
-          props.setShouldShowWarning(false)
-        }, reportRejection)}
-        nextText="Overwrite code and continue"
-      />
+      <OnboardingButtons className="mt-6" />
     </>
   )
 }
@@ -136,12 +133,10 @@ function OnboardingIntroductionInner() {
     (theme.current === Themes.System && getSystemTheme() === Themes.Light)
       ? '-dark'
       : ''
-  const dismiss = useDismiss()
-  const next = useNextClick(onboardingPaths.CAMERA)
 
   return (
     <div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
-      <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
+      <div className="relative max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
         <h1 className="flex flex-wrap items-center gap-4 text-3xl font-bold">
           <img
             src={`${isDesktop() ? '.' : ''}/zma-logomark${getLogoTheme()}.svg`}
@@ -192,9 +187,6 @@ function OnboardingIntroductionInner() {
         <OnboardingButtons
           currentSlug={onboardingPaths.INDEX}
           className="mt-6"
-          dismiss={dismiss}
-          next={next}
-          nextText="Mouse Controls"
         />
       </div>
     </div>