feat: integrate comparison product handling and enhance view scene label management

app/src/components/layout/scenes/MainScene.tsx

@@ -24,7 +24,10 @@ import ControlsPlayer from "../controls/ControlsPlayer";
 import SelectFloorPlan from "../../temporary/SelectFloorPlan";
 import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
 import Scene from "../../../modules/scene/scene";
-import { useMainProduct } from "../../../store/simulation/useSimulationStore";
+import {
+  useComparisonProduct,
+  useMainProduct,
+} from "../../../store/simulation/useSimulationStore";
 import { useProductContext } from "../../../modules/simulation/products/productContext";
 import { useProductStore } from "../../../store/simulation/useProductStore";
 import RegularDropDown from "../../ui/inputs/RegularDropDown";
@@ -46,6 +49,8 @@ function MainScene() {
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
   const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
+  const { comparisonProduct } = useComparisonProduct();
+
   const handleSelectLayout = (option: string) => {
     const product = products.find((product) => product.productName === option);
     if (product) {
@@ -81,7 +86,10 @@ function MainScene() {
               />
             </div>
           )}
-          {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
+          {(isPlaying && activeModule === "simulation") ||
+          comparisonProduct !== null ? (
+            <SimulationPlayer />
+          ) : null}
           {isPlaying && activeModule !== "simulation" && <ControlsPlayer />}
 
           {/* remove this later */}

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -4,7 +4,10 @@ import {
   LayoutIcon,
   ResizerIcon,
 } from "../../icons/SimulationIcons";
-import { useLoadingProgress, useSaveVersion } from "../../../store/builder/store";
+import {
+  useLoadingProgress,
+  useSaveVersion,
+} from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import { useProductStore } from "../../../store/simulation/useProductStore";
@@ -13,6 +16,7 @@ import { useComparisonProduct } from "../../../store/simulation/useSimulationSto
 
 const CompareLayOut = () => {
   const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
+  console.log("comparisonProduct: ", comparisonProduct);
   const { products } = useProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
@@ -151,7 +155,7 @@ const CompareLayOut = () => {
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
                   <div className="header">Layouts</div>
-                  <Search onChange={() => { }} />
+                  <Search onChange={() => {}} />
                   <div className="layouts-container">
                     {products.map((layout) => (
                       <button

app/src/store/builder/store.ts

@@ -591,12 +591,30 @@ export const useVersionStore = create<VersionListStore>((set) => ({
     })),
 }));
 
+
+
 interface ViewSceneState {
   viewSceneLabels: boolean;
-  setViewSceneLabels: (value: boolean) => void;
+  setViewSceneLabels: (value: boolean | ((prev: boolean) => boolean)) => void;
 }
 
 export const useViewSceneStore = create<ViewSceneState>((set) => ({
-  viewSceneLabels: false,
+  viewSceneLabels: getInitialViewSceneLabels(),
-  setViewSceneLabels: (value) => set({ viewSceneLabels: value }),
+  setViewSceneLabels: (value) => {
+    set((state) => {
+      const newValue =
+        typeof value === 'function' ? value(state.viewSceneLabels) : value;
+
+      // Store in localStorage manually
+      localStorage.setItem('viewSceneLabels', JSON.stringify(newValue));
+
+      return { viewSceneLabels: newValue };
+    });
+  },
 }));
+
+function getInitialViewSceneLabels(): boolean {
+  if (typeof window === 'undefined') return false; // SSR safety
+  const saved = localStorage.getItem('viewSceneLabels');
+  return saved ? JSON.parse(saved) : false;
+}

app/src/styles/components/input.scss

@@ -46,6 +46,7 @@ textarea {
 }
 
 input[type="number"] {
+
   // Chrome, Safari, Edge, Opera
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -146,6 +147,7 @@ input[type="number"] {
       border-radius: #{$border-radius-large};
       cursor: pointer;
       background: transparent;
+
       &:hover {
         background: var(--background-color-secondary);
       }
@@ -337,6 +339,7 @@ input[type="number"] {
       max-width: 80%;
       text-overflow: ellipsis;
     }
+
     &:hover {
       background: #333333;
     }
@@ -413,6 +416,7 @@ input[type="number"] {
       cursor: pointer;
       transition: background-color 0.3s ease;
       border-radius: #{$border-radius-large};
+
       &:hover {
         color: var(--accent-color);
         background: var(--highlight-accent-color);
@@ -483,6 +487,7 @@ input[type="number"] {
     position: relative;
     cursor: pointer;
 
+
     .check-box-style {
       position: absolute;
       height: 20px;
@@ -714,21 +719,26 @@ input[type="number"] {
   .input-header-container {
     padding: 6px 12px;
     @include flex-space-between;
+
     .arrow-container {
       transition: all 0.2s;
       @include flex-center;
     }
   }
+
   .upload-custom-asset-button {
     padding: 6px 12px;
     @include flex-space-between;
+
     .title {
       white-space: nowrap;
       width: 40%;
     }
+
     input {
       display: none;
     }
+
     .upload-button {
       width: 60%;
       background: var(--highlight-accent-color);
@@ -738,6 +748,7 @@ input[type="number"] {
       text-align: center;
     }
   }
+
   .canvas-wrapper {
     height: 150px;
     width: 100%;
@@ -745,6 +756,7 @@ input[type="number"] {
     padding-right: 4px;
     overflow: hidden;
     position: relative;
+
     .canvas-container {
       width: 100%;
       height: 100%;
@@ -752,4 +764,4 @@ input[type="number"] {
       background: var(--background-color-gray);
     }
   }
-}
+}

app/src/styles/scene/scene.scss

@@ -102,21 +102,14 @@
     align-items: end;
     gap: 12px;
 
-    .label {
-      // display: none;
-    }
-
     .check-box {
+      width: 35px;
       height: 20px;
 
       .check-box-style {
         width: 16px;
         height: 16px;
-      }
+        background: var(--text-button-color) !important;
-
-      .check-box-style {
-
-        // background: var(--text-button-color) !important;
       }
     }
   }

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -11,6 +11,7 @@ import {
   useShortcutStore,
   useToggleView,
   useToolMode,
+  useViewSceneStore,
 } from "../../store/builder/store";
 import useCameraModeStore, {
   usePlayButtonStore,
@@ -37,6 +38,7 @@ const KeyPressListener: React.FC = () => {
   const { setIsVersionSaved } = useSaveVersion();
   const { isLogListVisible, setIsLogListVisible } = useLogger();
   const { hidePlayer, setHidePlayer } = usePlayerStore();
+  const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
 
   const isTextInput = (element: Element | null): boolean =>
     element instanceof HTMLInputElement ||
@@ -152,6 +154,10 @@ const KeyPressListener: React.FC = () => {
   };
 
   const handleKeyPress = (event: KeyboardEvent) => {
+    console.log(
+      "isTextInput(document.activeElement): ",
+      isTextInput(document.activeElement)
+    );
     if (isTextInput(document.activeElement)) return;
 
     const keyCombination = detectModifierKeys(event);
@@ -161,6 +167,7 @@ const KeyPressListener: React.FC = () => {
       keyCombination === "Ctrl+R"
     )
       return;
+    console.log("keyCombination: ", keyCombination);
 
     event.preventDefault();
 
@@ -200,12 +207,13 @@ const KeyPressListener: React.FC = () => {
     if (keyCombination === "Ctrl+Shift+?") {
       setShowShortcuts(!showShortcuts);
     }
-
+    if (keyCombination === "U") {
+      console.log("viewSceneLabels: ", viewSceneLabels);
+      setViewSceneLabels((prev) => !prev);
+    }
     // Placeholder for future implementation
     if (
-      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(
+      ["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+F"].includes(keyCombination)
-        keyCombination
-      )
     ) {
       // Implement undo/redo/help/find/shortcuts
     }
@@ -223,7 +231,7 @@ const KeyPressListener: React.FC = () => {
     showShortcuts,
     isPlaying,
     isLogListVisible,
-    hidePlayer
+    hidePlayer,
   ]);
 
   return null;