From e54c9e6e0dd718af44ed983ec21d382a01d05b76 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Mon, 31 Mar 2025 14:52:06 +0530
Subject: [PATCH] Refactor Tools component for improved readability and
 structure

---
 app/src/components/ui/Tools.tsx | 88 +++++++++++++++------------------
 1 file changed, 40 insertions(+), 48 deletions(-)

diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index 012142e..3333282 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -68,7 +68,7 @@ const Tools: React.FC = () => {
         : true
     );
   }, []);
-  useEffect(() => {}, [activeModule]);
+  useEffect(() => { }, [activeModule]);
   useEffect(() => {
     setActiveTool(activeSubTool);
     setActiveSubTool(activeSubTool);
@@ -210,9 +210,8 @@ const Tools: React.FC = () => {
               <div className="activeDropicon">
                 {activeSubTool == "cursor" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "cursor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("cursor");
                     }}
@@ -222,9 +221,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "free-hand" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "free-hand" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("free-hand");
                     }}
@@ -234,9 +232,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "delete" && (
                   <div
-                    className={`tool-button ${
-                      activeTool === "delete" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "delete" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("delete");
                     }}
@@ -308,9 +305,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-wall" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-wall");
                     }}
@@ -319,9 +315,8 @@ const Tools: React.FC = () => {
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-zone" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-zone");
                     }}
@@ -330,9 +325,8 @@ const Tools: React.FC = () => {
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-aisle" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-aisle");
                     }}
@@ -341,9 +335,8 @@ const Tools: React.FC = () => {
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
                   <div
-                    className={`tool-button ${
-                      activeTool === "draw-floor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("draw-floor");
                     }}
@@ -359,9 +352,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "measure" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "measure" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("measure");
                     }}
@@ -377,9 +369,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${
-                      activeTool === "pen" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                      }`}
                     onClick={() => {
                       setActiveTool("pen");
                     }}
@@ -411,9 +402,8 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${
-                  activeTool === "comment" ? "active" : ""
-                }`}
+                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                  }`}
                 onClick={() => {
                   setActiveTool("comment");
                 }}
@@ -422,9 +412,8 @@ const Tools: React.FC = () => {
               </div>
               {toggleThreeD && (
                 <div
-                  className={`tool-button ${
-                    activeTool === "play" ? "active" : ""
-                  }`}
+                  className={`tool-button ${activeTool === "play" ? "active" : ""
+                    }`}
                   onClick={() => {
                     setIsPlaying(!isPlaying);
                   }}
@@ -433,20 +422,23 @@ const Tools: React.FC = () => {
                 </div>
               )}
             </div>
-            <div className="split"></div>
-            <div
-              className={`toggle-threed-button${
-                toggleThreeD ? " toggled" : ""
-              }`}
-              onClick={toggleSwitch}
-            >
-              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-                2d
-              </div>
-              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-                3d
-              </div>
-            </div>
+            {activeModule === "builder" && (
+              <>
+                <div className="split"></div>
+                <div
+                  className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                    }`}
+                  onClick={toggleSwitch}
+                >
+                  <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                    2d
+                  </div>
+                  <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                    3d
+                  </div>
+                </div>
+              </>
+            )}
           </div>
         </>
       ) : (