From d6dceb400f065a91d93a6bb6b1035c498458a34b Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Thu, 15 May 2025 18:19:35 +0530
Subject: [PATCH] refactor: Update layout styles and improve KeyPressListener
 for better UI responsiveness and shortcut handling

---
 app/src/styles/layout/compareLayout.scss      | 21 ++++--
 .../utils/shortcutkeys/handleShortcutKeys.ts  | 71 +++++++++++--------
 2 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index 22556c2..bc4fc18 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -70,15 +70,20 @@
             position: relative;
 
             .icon {
+                width: 100%;
                 margin-bottom: 15px;
                 text-align: center;
 
+                svg {
+
+                    width: 100%;
+                }
 
             }
 
             .value {
                 margin-bottom: 15px;
-                font-size: 16px;
+                font-size: var(--font-size-small);
                 font-weight: 500;
                 color: var(--text-primary);
             }
@@ -154,6 +159,7 @@
                             border-radius: 4px;
 
                             svg {
+
                                 path {
 
                                     fill: var(--background-color-accent);
@@ -185,9 +191,10 @@
 }
 
 
-body.compare-layout-open {
-    main {
-        padding-right: 10px; // Adjust as needed
-        transition: padding 0.3s ease;
-    }
-}
\ No newline at end of file
+// body.compare-layout-open {
+//     main {
+//         padding-right: 10px;
+
+//         transition: padding 0.3s ease;
+//     }
+// }
\ No newline at end of file
diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
index ab736bd..df27712 100644
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -12,25 +12,28 @@ import {
   useToggleView,
   useToolMode,
 } from "../../store/builder/store";
-import useCameraModeStore, { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import useCameraModeStore, {
+  usePlayButtonStore,
+} from "../../store/usePlayButtonStore";
 import { detectModifierKeys } from "./detectModifierKeys";
 import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
 
 const KeyPressListener: React.FC = () => {
-    const { activeModule, setActiveModule } = useModuleStore();
-    const { setActiveSubTool } = useActiveSubTool();
-    const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
-    const { setToggleThreeD } = useThreeDStore();
-    const { setToolMode } = useToolMode();
-    const { isPlaying, setIsPlaying } = usePlayButtonStore();
-    const { toggleView, setToggleView } = useToggleView();
-    const { setDeleteTool } = useDeleteTool();
-    const { setAddAction } = useAddAction();
-    const { setSelectedWallItem } = useSelectedWallItem();
-    const { setActiveTool } = useActiveTool();
-    const { clearSelectedZone } = useSelectedZoneStore();
-    const { showShortcuts, setShowShortcuts } = useShortcutStore();
-    const { setWalkMode } = useCameraModeStore();
+  const { activeModule, setActiveModule } = useModuleStore();
+  const { setActiveSubTool } = useActiveSubTool();
+  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
+  const { setToggleThreeD } = useThreeDStore();
+  const { setToolMode } = useToolMode();
+  const { isPlaying, setIsPlaying } = usePlayButtonStore();
+  const { toggleView, setToggleView } = useToggleView();
+  const { setDeleteTool } = useDeleteTool();
+  const { setAddAction } = useAddAction();
+  const { setSelectedWallItem } = useSelectedWallItem();
+  const { setActiveTool } = useActiveTool();
+  const { clearSelectedZone } = useSelectedZoneStore();
+  const { showShortcuts, setShowShortcuts } = useShortcutStore();
+  const { setWalkMode } = useCameraModeStore();
+  const { setIsVersionSaved } = useSaveVersion();
 
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
@@ -67,8 +70,8 @@ const KeyPressListener: React.FC = () => {
     }
   };
 
-    const handleBuilderShortcuts = (key: string) => {
-        if (activeModule !== "builder" || isPlaying) return;
+  const handleBuilderShortcuts = (key: string) => {
+    if (activeModule !== "builder" || isPlaying) return;
 
     if (key === "TAB") {
       const toggleTo2D = toggleView;
@@ -172,14 +175,15 @@ const KeyPressListener: React.FC = () => {
       setIsPlaying(true);
     }
 
-        if (keyCombination === "ESCAPE") {
-            setWalkMode(false);
-            setActiveTool("cursor");
-            setActiveSubTool("cursor");
-            setIsPlaying(false);
-            clearSelectedZone();
-            setShowShortcuts(false);
-        }
+    if (keyCombination === "ESCAPE") {
+      setWalkMode(false);
+      setActiveTool("cursor");
+      setActiveSubTool("cursor");
+      setIsPlaying(false);
+      clearSelectedZone();
+      setShowShortcuts(false);
+      setIsVersionSaved(false);
+    }
 
     if (keyCombination === "Ctrl+Shift+?") {
       setShowShortcuts(!showShortcuts);
@@ -195,11 +199,18 @@ const KeyPressListener: React.FC = () => {
     }
   };
 
-    useEffect(() => {
-        window.addEventListener("keydown", handleKeyPress);
-        return () => window.removeEventListener("keydown", handleKeyPress);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeModule, toggleUIRight, toggleUILeft, toggleView, showShortcuts, isPlaying]);
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    activeModule,
+    toggleUIRight,
+    toggleUILeft,
+    toggleView,
+    showShortcuts,
+    isPlaying,
+  ]);
 
   return null;
 };