Add customizer reset button and have two modes of customizer vs not

depending of if the customizer is open.

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

@@ -22,11 +22,12 @@ const Customizer = () => {
   const handleRender = useRender()
   const toggleOpen = () => {
     const newOpenState = !isOpen
-    thunkDispatch({type: 'setCustomizerOpenState', payload: newOpenState})
-    if(!newOpenState) {
-      // render on close
-      setTimeout(() => handleRender())
-    }
+    thunkDispatch({ type: 'setCustomizerOpenState', payload: newOpenState })
+    setTimeout(() => handleRender())
+  }
+  const handleReset = () => {
+    thunkDispatch({ type: 'resetCustomizer' })
+    setTimeout(() => handleRender(true))
   }
 
   const updateCustomizerParam = (paramName: string, paramValue: any) => {
@@ -74,11 +75,17 @@ const Customizer = () => {
                   } 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-600 mr-2"
+                onClick={handleReset}
+              >
+                Reset
+              </button>
               <button
                 className={`px-4 py-1 rounded bg-ch-gray-300 text-ch-gray-800 ${
                   shouldLiveUpdate && 'bg-opacity-30 cursor-default'
                 }`}
-                onClick={handleRender}
+                onClick={() => handleRender()}
                 disabled={shouldLiveUpdate}
               >
                 Update
@@ -87,7 +94,9 @@ const Customizer = () => {
           </>
         )}
       </div>
-      <div className={`${isOpen ? 'h-full pb-32' : 'h-0'} overflow-y-auto px-12`}>
+      <div
+        className={`${isOpen ? 'h-full pb-32' : 'h-0'} overflow-y-auto px-12`}
+      >
         <div>
           {customizerParams.map((param, index) => {
             const otherProps = {

app/web/src/components/IdeWrapper/useRender.ts

@@ -3,7 +3,7 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 
 export const useRender = () => {
   const { state, thunkDispatch } = useIdeContext()
-  return () => {
+  return (disableParams = false) => {
     thunkDispatch((dispatch, getState) => {
       const state = getState()
       dispatch({ type: 'setLoading' })
@@ -13,7 +13,7 @@ export const useRender = () => {
         code: state.code,
         viewerSize: state.viewerSize,
         camera: state.camera,
-        parameters: state.currentParameters,
+        parameters: disableParams ? {} : state.currentParameters,
       })
     })
     localStorage.setItem(makeCodeStoreKey(state.ideType), state.code)

app/web/src/helpers/hooks/useIdeState.ts

@@ -108,16 +108,24 @@ const reducer = (state: State, { type, payload }): State => {
       }
     case 'updateCode':
       return { ...state, code: payload }
+    case 'resetCustomizer':
+      const resetParameters = {}
+      state.customizerParams.forEach(({ name, initial }) => {
+        resetParameters[name] = initial
+      })
+      return {
+        ...state,
+        currentParameters: resetParameters,
+      }
     case 'healthyRender':
       const currentParameters = {}
 
       const customizerParams: CadhubParams[] = payload.customizerParams || []
       customizerParams.forEach((param) => {
-
         currentParameters[param.name] =
-          typeof state?.currentParameters?.[param.name] === 'undefined' || !state.isCustomizerOpen
-          ? param.initial
-          : state?.currentParameters?.[param.name]
+          typeof state?.currentParameters?.[param.name] === 'undefined'
+            ? param.initial
+            : state?.currentParameters?.[param.name]
       })
       return {
         ...state,
@@ -150,7 +158,7 @@ const reducer = (state: State, { type, payload }): State => {
     case 'setCustomizerOpenState':
       return {
         ...state,
-        isCustomizerOpen: payload
+        isCustomizerOpen: payload,
       }
     case 'setLayout':
       return {