Implement "floating windows" style UI (#224)

* Basic transparent pane styling

* HTML and static asset cleanup

* Convert to collapsibles

* Polish up DebugPanel

* Add hotkey support, remove allotment

* Remove allotment css dependency

* Merge in from main

* Add a different resizable package

* Fix tsc errors introduced by merge

* Stream has to have at least z-index of 0

* App header has to be above stream z-index

* Applied z-index to the wrong element

* Scrollable logs, disable UI while dragging

* Fix test errors from importing CSS Modules in Jest

* Persist open panes configuration

* Style tweaks and fix camera step in onboarding

* Kurt review, make click-drag handler declarative

src/components/DebugPanel.tsx

@@ -1,4 +1,4 @@
-import { PanelHeader } from '../components/PanelHeader'
+import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
 import { useStore } from '../useStore'
 import { v4 as uuidv4 } from 'uuid'
 import { EngineCommand } from '../lang/std/engineConnection'
@@ -11,7 +11,7 @@ type SketchModeCmd = Extract<
   { type: 'default_camera_enable_sketch_mode' }
 >
 
-export const DebugPanel = () => {
+export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
   const { engineCommandManager } = useStore((s) => ({
     engineCommandManager: s.engineCommandManager,
   }))
@@ -25,59 +25,75 @@ export const DebugPanel = () => {
   })
   if (!sketchModeCmd) return null
   return (
-    <div>
-      <PanelHeader title="Debug" />
-      <Xyz onChange={setSketchModeCmd} pointKey="origin" data={sketchModeCmd} />
-      <Xyz onChange={setSketchModeCmd} pointKey="x_axis" data={sketchModeCmd} />
-      <Xyz onChange={setSketchModeCmd} pointKey="y_axis" data={sketchModeCmd} />
-      <div className="flex">
-        <div className="pr-4">distance_to_plane</div>
-        <input
-          className="w-16"
-          type="number"
-          value={sketchModeCmd.distance_to_plane}
-          onChange={({ target }) => {
-            setSketchModeCmd({
-              ...sketchModeCmd,
-              distance_to_plane: Number(target.value),
+    <CollapsiblePanel
+      {...props}
+      className={'!absolute !h-auto bottom-5 right-5 ' + className}
+    >
+      <section className="p-4 flex flex-col gap-4">
+        <Xyz
+          onChange={setSketchModeCmd}
+          pointKey="origin"
+          data={sketchModeCmd}
+        />
+        <Xyz
+          onChange={setSketchModeCmd}
+          pointKey="x_axis"
+          data={sketchModeCmd}
+        />
+        <Xyz
+          onChange={setSketchModeCmd}
+          pointKey="y_axis"
+          data={sketchModeCmd}
+        />
+        <div className="flex">
+          <div className="pr-4">distance_to_plane</div>
+          <input
+            className="w-16 dark:bg-chalkboard-90"
+            type="number"
+            value={sketchModeCmd.distance_to_plane}
+            onChange={({ target }) => {
+              setSketchModeCmd({
+                ...sketchModeCmd,
+                distance_to_plane: Number(target.value),
+              })
+            }}
+          />
+          <div className="pr-4">ortho</div>
+          <input
+            className="w-16"
+            type="checkbox"
+            checked={sketchModeCmd.ortho}
+            onChange={(a) => {
+              console.log(a, (a as any).checked)
+              setSketchModeCmd({
+                ...sketchModeCmd,
+                ortho: a.target.checked,
+              })
+            }}
+          />
+        </div>
+        <ActionButton
+          onClick={() => {
+            engineCommandManager?.sendSceneCommand({
+              type: 'modeling_cmd_req',
+              cmd: sketchModeCmd,
+              cmd_id: uuidv4(),
+              file_id: uuidv4(),
             })
           }}
-        />
-        <div className="pr-4">ortho</div>
-        <input
-          className="w-16"
-          type="checkbox"
-          checked={sketchModeCmd.ortho}
-          onChange={(a) => {
-            console.log(a, (a as any).checked)
-            setSketchModeCmd({
-              ...sketchModeCmd,
-              ortho: a.target.checked,
-            })
+          className="hover:border-succeed-50"
+          icon={{
+            icon: faCheck,
+            bgClassName:
+              'bg-succeed-80 group-hover:bg-succeed-70 hover:bg-succeed-70',
+            iconClassName:
+              'text-succeed-20 group-hover:text-succeed-10 hover:text-succeed-10',
           }}
-        />
-      </div>
-      <ActionButton
-        onClick={() => {
-          engineCommandManager?.sendSceneCommand({
-            type: 'modeling_cmd_req',
-            cmd: sketchModeCmd,
-            cmd_id: uuidv4(),
-            file_id: uuidv4(),
-          })
-        }}
-        className="hover:border-succeed-50"
-        icon={{
-          icon: faCheck,
-          bgClassName:
-            'bg-succeed-80 group-hover:bg-succeed-70 hover:bg-succeed-70',
-          iconClassName:
-            'text-succeed-20 group-hover:text-succeed-10 hover:text-succeed-10',
-        }}
-      >
-        Send sketch mode command
-      </ActionButton>
-    </div>
+        >
+          Send sketch mode command
+        </ActionButton>
+      </section>
+    </CollapsiblePanel>
   )
 }
 
@@ -99,7 +115,7 @@ const Xyz = ({
           <div key={axis} className="flex">
             <div className="w-4">{axis}</div>
             <input
-              className="w-16"
+              className="w-16 dark:bg-chalkboard-90"
               type="number"
               value={val}
               onChange={({ target }) => {