Add the beginnings of the customizer UI

Relates to #320

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "cSpell.words": [
+        "Customizer",
         "Hutten",
         "cadquery",
         "jscad",

app/web/src/components/Customizer/Customizer.tsx

@@ -0,0 +1,68 @@
+import { useRender } from 'src/components/IdeWrapper/useRender'
+
+const Customizer = () => {
+  const [open, setOpen] = React.useState(true)
+  const ref = React.useRef()
+  const jsCadCustomizerElement = ref.current
+  React.useEffect(() => {
+    console.log(jsCadCustomizerElement)
+    if (jsCadCustomizerElement) {
+      jsCadCustomizerElement.innerHTML = `<div>hi there</div>`
+    }
+  }, [jsCadCustomizerElement])
+  const handleRender = useRender()
+  return (
+    <div className={`absolute inset-x-0 bottom-0 bg-ch-gray-600 bg-opacity-60 text-ch-gray-300 text-lg font-fira-sans ${open ? 'h-2/3' : ''}`}>
+      <div className="flex justify-between px-6 py-2 items-center">
+        <div className="flex gap-6 items-center">
+          <button className="px-2" onClick={() => setOpen(!open)}>{open ? '⬇' : '⬆'}</button>
+          <div>Parameters</div>
+        </div>
+        <button className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800" onClick={handleRender}>Update</button>
+      </div>
+      <div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto py-3 px-12`}>
+        <div id="jscad-customizer-block" ref={ref}>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+          <p>lots of lines should cause scroll</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Customizer

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -6,6 +6,7 @@ import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 import texture from './dullFrontLitMetal.png'
 import { TextureLoader } from 'three/src/loaders/TextureLoader'
+import Customizer from 'src/components/Customizer/Customizer'
 
 const loader = new TextureLoader()
 const colorMap = loader.load(texture)
@@ -243,6 +244,7 @@ const IdeViewer = ({ Loading }) => {
           <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
         </div>
       )}
+      <Customizer />
     </div>
   )
 }