Tweak customizer styles and hide on non-jscad screens

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

@@ -1,10 +1,12 @@
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { genParams } from 'src/helpers/cadPackages/jsCad/jscadParams'
+import { Switch } from '@headlessui/react'
+import Svg from 'src/components/Svg/Svg'
 
 const Customizer = () => {
-  const [open, setOpen] = React.useState(true)
-  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const [shouldLiveUpdate, setShouldLiveUpdate] = React.useState(false)
   const ref = React.useRef()
   const jsCadCustomizerElement = ref.current
   const { state, thunkDispatch } = useIdeContext()
@@ -20,14 +22,20 @@ const Customizer = () => {
         currentParameters || {},
         (values, source) => {
           thunkDispatch({ type: 'setCurrentCustomizerParams', payload: values })
-          if (checked) {
+          if (shouldLiveUpdate) {
             handleRender()
           }
         },
         []
       )
     }
-  }, [jsCadCustomizerElement, customizerParams, currentParameters, checked])
+  }, [
+    jsCadCustomizerElement,
+    customizerParams,
+    currentParameters,
+    shouldLiveUpdate,
+  ])
+  if (!state.customizerParams) return null
   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 ${
@@ -37,28 +45,46 @@ const Customizer = () => {
       <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 ? '⬇' : '⬆'}
+            <Svg
+              name="chevron-down"
+              className={`h-8 w-8 ${!open && 'transform rotate-180'}`}
+            />
           </button>
           <div>Parameters</div>
         </div>
-        <div className="flex items-center">
-          <input
-            className="mr-6"
-            type="checkbox"
-            checked={checked}
-            onChange={() => {
-              const newValue = !checked
-              if (newValue) handleRender()
-              setChecked(newValue)
-            }}
-          />
-          <button
-            className="px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800"
-            onClick={handleRender}
-          >
-            Update
-          </button>
-        </div>
+        {open && (
+          <>
+            <div className="flex items-center">
+              <div className="font-fira-sans text-sm mr-4">Auto Update</div>
+              <Switch
+                checked={shouldLiveUpdate}
+                onChange={(newValue) => {
+                  setShouldLiveUpdate
+                  if (newValue) handleRender()
+                  setShouldLiveUpdate(newValue)
+                }}
+                className={`${
+                  shouldLiveUpdate ? 'bg-ch-purple-600' : 'bg-ch-gray-300'
+                } relative inline-flex items-center h-6 rounded-full w-11 mr-6`}
+              >
+                <span
+                  className={`${
+                    shouldLiveUpdate ? 'translate-x-6' : 'translate-x-1'
+                  } inline-block w-4 h-4 transform bg-white rounded-full`}
+                />
+              </Switch>
+              <button
+                className={`px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800 ${
+                  shouldLiveUpdate && 'bg-opacity-30 cursor-default'
+                }`}
+                onClick={handleRender}
+                disabled={shouldLiveUpdate}
+              >
+                Update
+              </button>
+            </div>
+          </>
+        )}
       </div>
       <div className={`${open ? 'h-full' : 'h-0'} overflow-y-auto px-12`}>
         <div