Update onboarding to be more complete (#551)

* Update Introduction

* Update Camera step

* Change link to expectations

Co-authored-by: Josh Gomez <114548659+jgomez720@users.noreply.github.com>

* Set outline for onboarding

* Add Streaming step

* Remove Units step

* Add default kcl script

* Add Code Editor step

* Add Parametric Modeling step

* Add Interactive Numbers step

* Update bracket to use sqrt

* Add Command K step

* Assuage @jessfraz's code itchies

* Add User Menu step

* Add Project Menu step

* Add Export step

* Improve error page to actually show error

* Update the sketch step

* Add Future Work section

* Bring back the bracket code on the final step

* Set up the code to the bracket when starting onboarding

* Fix missing import

* Don't throw away users code if not empty

* Prompt the user if they have content in their file

---------

Co-authored-by: Josh Gomez <114548659+jgomez720@users.noreply.github.com>

src/routes/Onboarding/Camera.tsx

@@ -2,13 +2,28 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useStore } from '../../useStore'
+import { SettingsSection } from 'routes/Settings'
+import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
+import {
+  CameraSystem,
+  cameraMouseDragGuards,
+  cameraSystems,
+} from 'lib/cameraControls'
 
 export default function Units() {
   const { buttonDownInStream } = useStore((s) => ({
     buttonDownInStream: s.buttonDownInStream,
   }))
   const dismiss = useDismiss()
-  const next = useNextClick(onboardingPaths.SKETCHING)
+  const next = useNextClick(onboardingPaths.STREAMING)
+  const {
+    settings: {
+      send,
+      state: {
+        context: { cameraControls },
+      },
+    },
+  } = useGlobalStateContext()
 
   return (
     <div className="fixed grid justify-center items-end inset-0 z-50 pointer-events-none">
@@ -18,29 +33,43 @@ export default function Units() {
           (buttonDownInStream ? '' : ' pointer-events-auto')
         }
       >
-        <h1 className="text-2xl font-bold">Camera</h1>
-        <p className="mt-6">
-          Moving the camera is easy! The controls are as you might expect:
-        </p>
-        <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 a
-          cheap laptop with no graphics card!
-        </p>
-        <div className="flex justify-between mt-6">
+        <SettingsSection
+          title="Camera Controls"
+          description="How you want to control the camera in the 3D view. Try them out in the 3D view."
+        >
+          <select
+            id="camera-controls"
+            className="block w-full px-3 py-1 border border-chalkboard-30 bg-transparent"
+            value={cameraControls}
+            onChange={(e) => {
+              send({
+                type: 'Set Camera Controls',
+                data: { cameraControls: e.target.value as CameraSystem },
+              })
+            }}
+          >
+            {cameraSystems.map((program) => (
+              <option key={program} value={program}>
+                {program}
+              </option>
+            ))}
+          </select>
+          <ul className="text-sm my-2 mx-4 leading-relaxed">
+            <li>
+              <strong>Pan:</strong>{' '}
+              {cameraMouseDragGuards[cameraControls].pan.description}
+            </li>
+            <li>
+              <strong>Zoom:</strong>{' '}
+              {cameraMouseDragGuards[cameraControls].zoom.description}
+            </li>
+            <li>
+              <strong>Rotate:</strong>{' '}
+              {cameraMouseDragGuards[cameraControls].rotate.description}
+            </li>
+          </ul>
+        </SettingsSection>
+        <div className="flex justify-between">
           <ActionButton
             Element="button"
             onClick={() => dismiss('../../')}
@@ -59,7 +88,7 @@ export default function Units() {
             onClick={next}
             icon={{ icon: faArrowRight }}
           >
-            Next: Sketching
+            Next: Streaming
           </ActionButton>
         </div>
       </div>