refactor: update z-index values, enhance UserAuth checkbox, and improve sidebar styles; add ZoneProperties and Vector3Input components

app/src/components/ui/ModuleToggle.tsx

@@ -6,15 +6,20 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
+  const { setToggleUI } = useToggleStore();
 
   return (
     <div className="module-toggle-container">
       <div
         className={`module-list ${activeModule === "builder" && "active"}`}
-        onClick={() => setActiveModule("builder")}
+        onClick={() => {
+          setActiveModule("builder");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <BuilderIcon isActive={activeModule === "builder"} />
@@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
       </div>
       <div
         className={`module-list ${activeModule === "simulation" && "active"}`}
-        onClick={() => setActiveModule("simulation")}
+        onClick={() => {
+          setActiveModule("simulation");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <SimulationIcon isActive={activeModule === "simulation"} />
@@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${
           activeModule === "visualization" && "active"
         }`}
-        onClick={() => setActiveModule("visualization")}
+        onClick={() => {
+          setActiveModule("visualization");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <VisualizationIcon isActive={activeModule === "visualization"} />
@@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
         <div className="module">Visualization</div>
       </div>
       <div
-        className={`module-list ${
-          activeModule === "market" && "active"
-        }`}
-        onClick={() => setActiveModule("market")}
+        className={`module-list ${activeModule === "market" && "active"}`}
+        onClick={() => {
+          setActiveModule("market");
+          setToggleUI(false);
+        }}
       >
         <div className="icon">
           <CartIcon isActive={activeModule === "market"} />