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

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -5,6 +5,7 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import useModuleStore from "../../../store/useModuleStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,6 +61,7 @@ const RealTimeVisulization: React.FC = () => {
   });
 
   const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
 
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   useEffect(() => {
@@ -75,33 +77,44 @@ const RealTimeVisulization: React.FC = () => {
       id="real-time-vis-canvas"
       className="realTime-viz canvas"
       style={{
-        height: isPlaying ? "100vh" : "",
-        width: isPlaying ? "100%" : "",
-        left: isPlaying ? "0%" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
       <div
         className="scene-container"
-        style={{ height: "100%", width: "100%" }}
+        style={{
+          height: "100%",
+          width: "100%",
+          borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
       >
         <Scene />
       </div>
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
+      {activeModule === "visualization" && (
+        <>
+          <DisplayZone
+            zonesData={zonesData}
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
 
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
+          {!isPlaying && (
+            <AddButtons
+              hiddenPanels={hiddenPanels}
+              setHiddenPanels={setHiddenPanels}
+              selectedZone={selectedZone}
+              setSelectedZone={setSelectedZone}
+            />
+          )}
+
+          <Panel
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+        </>
       )}
-
-      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
     </div>
   );
 };