Franknoirot/fix onboarding units (#366)

* Fix up camera step copy and pane opacity for step

* Fix broken onboarding redirect with double slash

* Fix pane height for web bug from blur filter
I found a bug with browser behavior, at least on Chrome.
If you use `backdrop-filter: blur()` at all, you can't
have any children that overflow. The browser will ignore
any attempt and make those children max full-height.
This broke our side panels after I added blur, but
only in Chrome/browser target.

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Fix bug with unit system
Changing the unit system didn't also change the
base unit in the onboarding anymore. It needed
updated to use XState the same way as `/settings`

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Fix AppHeader item spacing when there's no toolbar

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>

src/App.tsx

@@ -154,7 +154,7 @@ export function App() {
   useHotkeys('shift + d', () => togglePane('debug'))
 
   const paneOpacity =
-    onboardingStatus === 'camera'
+    onboardingStatus === '/camera'
       ? 'opacity-20'
       : didDragInStream
       ? 'opacity-40'

src/Router.tsx

@@ -162,7 +162,9 @@ const router = createBrowserRouter(
           notEnRouteToOnboarding && hasValidOnboardingStatus
 
         if (shouldRedirectToOnboarding) {
-          return redirect(makeUrlPathRelative(paths.ONBOARDING.INDEX) + status)
+          return redirect(
+            makeUrlPathRelative(paths.ONBOARDING.INDEX) + status.slice(1)
+          )
         }
 
         if (params.id && params.id !== 'new') {

src/components/AppHeader.module.css

@@ -3,6 +3,5 @@
   in Tailwind, such as complex grid layouts.
  */
 .header {
-  display: grid;
   grid-template-columns: 1fr auto 1fr;
 }

src/components/AppHeader.tsx

@@ -28,8 +28,9 @@ export const AppHeader = ({
   return (
     <header
       className={
+        (showToolbar ? 'grid ' : 'flex justify-between ') +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 backdrop-blur-sm dark:bg-chalkboard-100/50 dark:backdrop-blur-0 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
+        ' overlaid-panes sticky top-0 z-20 py-1 px-5 bg-chalkboard-10/70 dark:bg-chalkboard-100/50 border-b dark:border-b-2 border-chalkboard-30 dark:border-chalkboard-90 items-center ' +
         className
       }
     >

src/routes/Onboarding/Camera.tsx

@@ -20,9 +20,25 @@ export default function Units() {
       >
         <h1 className="text-2xl font-bold">Camera</h1>
         <p className="mt-6">
-          Moving the camera is easy. Just click and drag anywhere in the scene
+          Moving the camera is easy! The controls are as you might expect:
-          to rotate the camera, or hold down the <kbd>Ctrl</kbd> key and drag to
+        </p>
-          pan the camera.
+        <ul className="list-disc list-outside ms-8 mb-4">
+          <li>Click and drag anywhere in the scene to rotate the camera</li>
+          <li>
+            Hold down the <kbd>Shift</kbd> key while clicking and dragging to
+            pan the camera
+          </li>
+          <li>
+            Hold down the <kbd>Ctrl</kbd> key while dragging to zoom. You can
+            also use the scroll wheel to zoom in and out.
+          </li>
+        </ul>
+        <p>
+          What you're seeing here is just a video, and your interactions are
+          being sent to our Geometry Engine API, which sends back video frames
+          in real time. How cool is that? It means that you can use KittyCAD
+          Modeling App (or whatever you want to build) on any device, even if it
+          doesn't have a GPU!
         </p>
         <div className="flex justify-between mt-6">
           <ActionButton

src/routes/Onboarding/Units.tsx

@@ -16,15 +16,6 @@ export default function Units() {
       context: { unitSystem, baseUnit },
     },
   } = useGlobalStateContext()
-  const [tempUnitSystem, setTempUnitSystem] = useState(unitSystem)
-  const [tempBaseUnit, setTempBaseUnit] = useState(baseUnit)
-
-  function handleNextClick() {
-    send({ type: 'Set Unit System', data: { unitSystem: tempUnitSystem } })
-    send({ type: 'Set Base Unit', data: { baseUnit: tempBaseUnit } })
-
-    next()
-  }
 
   return (
     <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
@@ -38,10 +29,14 @@ export default function Units() {
             offLabel="Imperial"
             onLabel="Metric"
             name="settings-units"
-            checked={tempUnitSystem === 'metric'}
+            checked={unitSystem === 'metric'}
-            onChange={(e) =>
+            onChange={(e) => {
-              setTempUnitSystem(e.target.checked ? 'metric' : 'imperial')
+              const newUnitSystem = e.target.checked ? 'metric' : 'imperial'
-            }
+              send({
+                type: 'Set Unit System',
+                data: { unitSystem: newUnitSystem },
+              })
+            }}
           />
         </SettingsSection>
         <SettingsSection
@@ -51,8 +46,13 @@ export default function Units() {
           <select
             id="base-unit"
             className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
-            value={tempBaseUnit}
+            value={baseUnit}
-            onChange={(e) => setTempBaseUnit(e.target.value as BaseUnit)}
+            onChange={(e) => {
+              send({
+                type: 'Set Base Unit',
+                data: { baseUnit: e.target.value as BaseUnit },
+              })
+            }}
           >
             {baseUnits[unitSystem].map((unit) => (
               <option key={unit} value={unit}>
@@ -77,7 +77,7 @@ export default function Units() {
           </ActionButton>
           <ActionButton
             Element="button"
-            onClick={handleNextClick}
+            onClick={next}
             icon={{ icon: faArrowRight }}
           >
             Next: Camera