From 09027fe9f18b8532322ff6c999e91012f3eb28c0 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Mon, 22 Sep 2025 13:20:19 +0530
Subject: [PATCH] refactor(MenuBar): replace divs with spans for menu buttons
 to improve semantics refactor(Controls): format code for better readability
 and maintainability

---
 app/src/components/ui/menu/menu.tsx         | 26 +++---
 app/src/modules/scene/controls/controls.tsx | 93 ++++++++++++++-------
 2 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx
index c9eac89..39e64a2 100644
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -172,15 +172,15 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
                             setActiveSubMenu(null);
                         }}
                     >
-                        <div className="menu-button">
+                        <span className="menu-button">
                             {menu}
                             <span className="dropdown-icon">
                                 <ArrowIcon />
                             </span>
-                        </div>
+                        </span>
 
                         {activeMenu === menu && (
-                            <div className="dropdown-menu">
+                            <span className="dropdown-menu">
                                 {items.map((item) =>
                                     item.submenu ? (
                                         <button
@@ -190,19 +190,19 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
                                             onMouseEnter={() => setActiveSubMenu(item.label)}
                                             onMouseLeave={() => setActiveSubMenu(null)}
                                         >
-                                            <div className="menu-item">
+                                            <span className="menu-item">
                                                 <span>{item.label}</span>
                                                 <span className="dropdown-icon">
                                                     <ArrowIcon />
                                                 </span>
-                                            </div>
+                                            </span>
                                             {activeSubMenu === item.label && renderSubMenu(item.submenu, item.label)}
                                         </button>
                                     ) : (
                                         renderMenuItem(item)
                                     )
                                 )}
-                            </div>
+                            </span>
                         )}
                     </button>
                 ))}
@@ -222,9 +222,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
                         setActiveModule("builder");
                     }}
                 >
-                    <div className="menu-button">
-                        Version history <div className="value">Ctrl + H</div>
-                    </div>
+                    <span className="menu-button">
+                        Version history <span className="value">Ctrl + H</span>
+                    </span>
                 </button>
 
                 {/* Theme */}
@@ -238,14 +238,14 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
                     }}
                     onClick={handleThemeChange}
                 >
-                    <div className="menu-button">
-                        Theme <div className="value">{savedTheme}</div>
-                    </div>
+                    <span className="menu-button">
+                        Theme <span className="value">{savedTheme}</span>
+                    </span>
                 </button>
 
                 {/* Log out */}
                 <button id="logout" className="menu-button-container" onClick={handleLogout}>
-                    <div className="menu-button">Log out</div>
+                    <span className="menu-button">Log out</span>
                 </button>
             </div>
         </div>
diff --git a/app/src/modules/scene/controls/controls.tsx b/app/src/modules/scene/controls/controls.tsx
index b20f91a..58a40fe 100644
--- a/app/src/modules/scene/controls/controls.tsx
+++ b/app/src/modules/scene/controls/controls.tsx
@@ -37,15 +37,21 @@ export default function Controls() {
 
     useEffect(() => {
         if (controlsRef.current) {
-            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
-            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
+            (controlsRef.current as any).mouseButtons.left =
+                CONSTANTS.thirdPersonControls.leftMouse;
+            (controlsRef.current as any).mouseButtons.right =
+                CONSTANTS.thirdPersonControls.rightMouse;
         }
 
         if (!projectId) return;
         getCameraApi(projectId)
             .then((data) => {
                 if (data?.position && data?.target) {
-                    controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
+                    controlsRef.current?.setPosition(
+                        data.position.x,
+                        data.position.y,
+                        data.position.z
+                    );
                     controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
                 } else {
                     controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
@@ -56,46 +62,68 @@ export default function Controls() {
     }, [projectId]);
 
     useEffect(() => {
-        if (resetCamera && projectId && (layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) {
+        if (resetCamera && projectId) {
             controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
             controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
             controlsRef.current?.rotateAzimuthTo(CONSTANTS.threeDimension.defaultAzimuth);
 
-            if (!builderSocket?.connected) {
-                setCameraApi(
-                    projectId,
-                    new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
-                    new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
-                    new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation)
-                );
-            } else {
-                const camData = {
-                    organization,
-                    userId: userId,
-                    position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
-                    target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
-                    rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
-                    socketId: builderSocket.id,
-                    projectId,
-                };
-                builderSocket.emit("v1:Camera:set", camData);
-            }
+            if (
+                layoutType === "default" ||
+                (layoutType === "useCase" && organization === ALPHA_ORG)
+            )
+                if (!builderSocket?.connected) {
+                    setCameraApi(
+                        projectId,
+                        new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
+                        new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
+                        new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation)
+                    );
+                } else {
+                    const camData = {
+                        organization,
+                        userId: userId,
+                        position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
+                        target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
+                        rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
+                        socketId: builderSocket.id,
+                        projectId,
+                    };
+                    builderSocket.emit("v1:Camera:set", camData);
+                }
 
             setResetCamera(false);
         }
     }, [resetCamera, builderSocket, projectId, layoutType]);
 
     useEffect(() => {
-        controlsRef.current?.setBoundary(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)));
+        controlsRef.current?.setBoundary(
+            new THREE.Box3(
+                new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom),
+                new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)
+            )
+        );
         // state.scene.add(new THREE.Box3Helper(new THREE.Box3(new THREE.Vector3(...CONSTANTS.threeDimension.boundaryBottom), new THREE.Vector3(...CONSTANTS.threeDimension.boundaryTop)), 0xffff00));
         let hasInteracted = false;
         let intervalId: NodeJS.Timeout | null = null;
 
         const handleRest = () => {
-            if (hasInteracted && controlsRef.current && state.camera.position && !toggleView && builderSocket && camType === "perspective") {
+            if (
+                hasInteracted &&
+                controlsRef.current &&
+                state.camera.position &&
+                !toggleView &&
+                builderSocket &&
+                camType === "perspective"
+            ) {
                 const position = state.camera.position;
                 if (position.x === 0 && position.y === 0 && position.z === 0) return;
-                updateCamPosition(controlsRef, builderSocket, position, state.camera.rotation, projectId);
+                updateCamPosition(
+                    controlsRef,
+                    builderSocket,
+                    position,
+                    state.camera.rotation,
+                    projectId
+                );
                 stopInterval();
             }
         };
@@ -119,7 +147,12 @@ export default function Controls() {
         };
 
         const controls = controlsRef.current;
-        if (controls && !toggleView && camType === "perspective" && (layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))) {
+        if (
+            controls &&
+            !toggleView &&
+            camType === "perspective" &&
+            (layoutType === "default" || (layoutType === "useCase" && organization === ALPHA_ORG))
+        ) {
             controls.addEventListener("sleep", handleRest);
             controls.addEventListener("control", startInterval);
             controls.addEventListener("controlend", stopInterval);
@@ -140,7 +173,11 @@ export default function Controls() {
             <CameraControls
                 makeDefault
                 ref={controlsRef}
-                minDistance={toggleView || camType === "orthographic" ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
+                minDistance={
+                    toggleView || camType === "orthographic"
+                        ? CONSTANTS.twoDimension.minDistance
+                        : CONSTANTS.threeDimension.minDistance
+                }
                 maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
                 minZoom={CONSTANTS.thirdPersonControls.minZoom}
                 maxZoom={CONSTANTS.thirdPersonControls.maxZoom}