refactor: Clean up code by removing unused imports, enhancing component props, and improving styles for better maintainability

app/src/components/footer/Footer.tsx

@@ -10,7 +10,6 @@ import {
 import ShortcutHelper from "./shortcutHelper";
 import { useShortcutStore } from "../../store/builder/store";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
-import OuterClick from "../../utils/outerClick";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
@@ -19,11 +18,6 @@ const Footer: React.FC = () => {
   const { isPlaying } = usePlayButtonStore();
   const { showShortcuts, setShowShortcuts } = useShortcutStore();
 
-  OuterClick({
-    contextClassName: ["shortcut-helper-overlay"],
-    setMenuVisible: () => setShowShortcuts(false),
-  });
-
   return (
     <div className="footer-container">
       <div className="footer-wrapper">
@@ -82,7 +76,7 @@ const Footer: React.FC = () => {
             showShortcuts ? "visible" : ""
           }`}
         >
-          <ShortcutHelper />
+          <ShortcutHelper setShowShortcuts={setShowShortcuts}/>
         </div>
       )}
     </div>

app/src/components/footer/shortcutHelper.tsx

@@ -29,8 +29,8 @@ import {
   DublicateIcon,
   DuplicateInstanceIcon,
   PlayIcon,
-  BrowserIcon,
 } from "../icons/ShortcutIcons";
+import { CloseIcon } from "../icons/ExportCommonIcons";
 
 interface ShortcutItem {
   keys: string[];
@@ -44,7 +44,13 @@ interface ShortcutGroup {
   items: ShortcutItem[];
 }
 
-const ShortcutHelper = () => {
+interface ShortcutHelperProps {
+  setShowShortcuts: (value: boolean) => void;
+}
+
+const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
+  setShowShortcuts,
+}) => {
   const shortcuts: ShortcutGroup[] = [
     {
       category: "Essential",
@@ -256,27 +262,26 @@ const ShortcutHelper = () => {
         },
       ],
     },
-    {
-      category: "Miscellaneous",
-      items: [
-        {
-          keys: ["F5", "F11", "F12", "CTRL", "+", "R"],
-          name: "Browser Defaults",
-          description: "Reserved for browser defaults",
-          icon: <BrowserIcon />,
-        },
-      ],
-    },
   ];
 
   const [activeCategory, setActiveCategory] =
     React.useState<string>("Essential");
 
   const activeShortcuts =
-    shortcuts.find((group) => group.category === activeCategory)?.items || [];
+    shortcuts.find((group) => group.category === activeCategory)?.items ?? [];
 
   return (
     <div className="shortcut-helper-container">
+      <button
+        id="close-shortcuts-helper"
+        className="close-button"
+        title="close-btn"
+        onClick={() => {
+          setShowShortcuts(false);
+        }}
+      >
+        <CloseIcon />
+      </button>
       <div className="header">
         <div className="header-wrapper">
           {shortcuts.map((group) => (
@@ -313,7 +318,7 @@ const ShortcutHelper = () => {
               {item.keys.map((key, i) => (
                 <span
                   key={`${key}-${i}`}
-                  className={`key ${key === "+" || key === "OR" ? "add" : ""}`}
+                  className={`key${key === "+" || key === "OR" ? " add" : ""}`}
                 >
                   {key}
                 </span>

app/src/components/ui/Tools.tsx

@@ -335,6 +335,7 @@ const Tools: React.FC = () => {
         {activeModule !== "visualization" && (
           <button
             id="drop-down-button"
+            title="drop-down"
             className="drop-down-option-button"
             ref={dropdownRef}
             onClick={() => setOpenDrop(!openDrop)}

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import { arrayMove } from "@dnd-kit/sortable";
-import { useAsset3dWidget, useSocketStore } from "../../../../store/builder/store";
+import { useSocketStore } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import { DraggableWidget } from "../2d/DraggableWidget";
@@ -47,7 +47,7 @@ interface PanelProps {
 }
 
 const generateUniqueId = () =>
-  `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 
 const Panel: React.FC<PanelProps> = ({
   selectedZone,
@@ -56,7 +56,6 @@ const Panel: React.FC<PanelProps> = ({
   setZonesData,
   waitingPanels,
 }) => {
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
@@ -183,7 +182,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Add widget to panel
   const addWidgetToPanel = async (asset: any, panel: Side) => {
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     const newWidget = {
@@ -285,7 +284,7 @@ const Panel: React.FC<PanelProps> = ({
       {selectedZone.activeSides.map((side) => (
         <div
           key={side}
-          id="panel-wrapper"
+          id={`panel-wrapper-${side}`}
           className={`panel ${side}-panel absolute ${
             hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
           }`}
@@ -301,14 +300,14 @@ const Panel: React.FC<PanelProps> = ({
           }}
         >
           <div
-            className={`panel-content
+            className={`panel-content ${
-  ${waitingPanels === side ? `${side}-closing` : ""}
+              waitingPanels === side ? `${side}-closing` : ""
-  ${
+            }${
-    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
-      ? `${side}-opening`
+              waitingPanels !== side
-      : ""
+                ? `${side}-opening`
-  }
+                : ""
-  ${isPlaying ? "fullScreen" : ""}`}
+            } ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||

app/src/pages/Project.tsx

@@ -71,7 +71,7 @@ const Project: React.FC = () => {
   const { toggleThreeD } = useThreeDStore();
 
   // simulation store
-  const { isPlaying, setIsPlaying } = usePlayButtonStore();
+  const { isPlaying } = usePlayButtonStore();
 
   // collaboration store
   const { selectedUser } = useSelectedUserStore();

app/src/services/visulization/zone/panel.ts

@@ -1,5 +1,4 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 type Side = "top" | "bottom" | "left" | "right";
 
 export const panelData = async (

app/src/styles/components/footer/footer.scss

@@ -1,7 +1,6 @@
 @use "../../abstracts/variables" as *;
 @use "../../abstracts/mixins" as *;
 
-
 .footer-container {
   width: 100%;
   position: fixed;
@@ -34,7 +33,7 @@
 
         .selector {
           color: var(--text-color);
-          font-size: var(--font-size-small)
+          font-size: var(--font-size-small);
         }
 
         .icon {
@@ -48,7 +47,7 @@
       gap: 6px;
       position: relative;
       pointer-events: all;
-      // dummy 
+      // dummy
       .bg-dummy {
         background: var(--background-color-solid);
         position: absolute;
@@ -166,11 +165,23 @@
     min-height: 320px;
     height: 320px;
     border-radius: 18px;
-
+    pointer-events: all;
-
     background: var(--background-color);
     backdrop-filter: blur(20px);
-
+    .close-button {
+      position: absolute;
+      @include flex-center;
+      height: 26px;
+      width: 26px;
+      right: 12px;
+      top: 10px;
+      background: var(--background-color);
+      border-radius: #{$border-radius-medium};
+      outline: 1px solid var(--border-color);
+      &:hover{
+        background: var(--background-color-solid);
+      }
+    }
     .header {
       display: flex;
       justify-content: center;
@@ -192,7 +203,7 @@
           padding-left: 10px;
 
           &::before {
-            content: '';
+            content: "";
             position: absolute;
             top: 0;
             left: 0;
@@ -244,7 +255,6 @@
 
         .shortcut-intro {
           display: flex;
-          // align-items: center;
           gap: 6px;
 
           .value-wrapper {
@@ -254,7 +264,6 @@
 
             .description {
               font-size: var(--font-size-tiny);
-
             }
           }
         }
@@ -265,14 +274,22 @@
           gap: 6px;
           flex-wrap: wrap;
 
-
           .key {
-            background: linear-gradient(135.11deg, #656DC2 3.48%, #9526E5 91.33%);
+            background: linear-gradient(
+              135.11deg,
+              #656dc2 3.48%,
+              #9526e5 91.33%
+            );
+            @include flex-center;
             padding: 4px 10px;
+            height: 25px;
             border-radius: 4px;
             font-family: monospace;
             font-size: var(--font-size-tiny);
             color: var(--icon-default-color-active);
+            &:last-child{
+              background: var(--background-color-button);
+            }
           }
 
           .key.add {
@@ -295,19 +312,12 @@
       align-items: flex-start;
       /* or center if vertical centering is desired */
     }
-
-
-
   }
-
-
-
 }
 
 .shortcut-helper-overlay {
   max-height: 0;
   overflow: hidden;
-  // opacity: 0;
   transform: translateY(20px);
   transition: all 0.3s ease-in-out;
 
@@ -316,4 +326,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}

app/src/styles/components/simulation/simulation.scss

@@ -347,6 +347,77 @@
   }
 }
 
+.controls-player-container {
+  max-width: 50vw;
+  border-radius: 15px;
+  gap: 40px;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  cursor: pointer;
+  @include flex-center;
+  justify-content: space-between;
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  color: var(--accent-color);
+  z-index: 100;
+  isolation: isolate;
+  font-weight: 700;
+  padding: 8px;
+
+  .controls-left,
+  .controls-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: var(--font-size-small);
+
+    .label {
+      text-transform: capitalize;
+      font-size: var(--font-size-small);
+    }
+
+    .walkMode-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      .input-toggle-container {
+        padding: 0;
+        gap: 4px;
+
+        .label {
+          font-size: var(--font-size-small);
+        }
+      }
+    }
+
+    .btn-wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 8px;
+      min-width: 64px;
+      background: var(--background-color);
+      border-radius: 20px;
+      height: fit-content;
+      cursor: pointer;
+      transition: color .2s;
+      &:hover {
+        outline: 1px solid var(--border-color);
+        color: var(--accent-color);
+      }
+      .icon {
+        width: 16px;
+        height: 16px;
+        @include flex-center;
+      }
+    }
+  }
+}
+
 .processDisplayer {
   border-radius: #{$border-radius-large};
   outline: 1px solid var(--border-color);
@@ -454,7 +525,7 @@
             }
           }
         }
-        .storage-container{
+        .storage-container {
           font-size: var(--font-size-tiny);
           color: var(--highlight-text-color);
         }

app/src/styles/components/tools.scss

@@ -12,12 +12,16 @@
   box-shadow: #{$box-shadow-medium};
   border-radius: #{$border-radius-large};
   width: fit-content;
-  transition: width 0.2s;
   background: var(--background-color);
   backdrop-filter: blur(20px);
   z-index: 2;
   outline: 1px solid var(--border-color);
   outline-offset: -1px;
+  transition: transform 0.4s ease-in-out 0.01s;
+
+  &.visible {
+    transform: translate(-50%, -310px);
+  }
 
   .split {
     height: 20px;
@@ -47,9 +51,11 @@
       position: relative;
 
       &:hover {
-        background: color-mix(in srgb,
+        background: color-mix(
-            var(--highlight-accent-color) 60%,
+          in srgb,
-            transparent);
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
 
         .tooltip {
           opacity: 1;
@@ -78,9 +84,11 @@
       position: relative;
 
       &:hover {
-        background: color-mix(in srgb,
+        background: color-mix(
-            var(--highlight-accent-color) 60%,
+          in srgb,
-            transparent);
+          var(--highlight-accent-color) 60%,
+          transparent
+        );
       }
 
       .drop-down-container {
@@ -178,88 +186,6 @@
 }
 
 
-.tools-container {
-  transition: transform 0.4s ease-in-out 0.01s;
-
-  &.visible {
-    transform: translate(-50%, -310px);
-  }
-}
-
-
-.controls-player-container {
-  width: 663px;
-  height: 30px;
-  border-radius: 15px;
-
-  background: var(--background-color);
-  backdrop-filter: blur(20px);
-  cursor: pointer;
-  @include flex-center;
-  justify-content: space-between;
-  position: fixed;
-  bottom: 40px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  color: var(--accent-color);
-  z-index: 100;
-  isolation: isolate;
-  font-weight: 700;
-  padding: 8px;
-
-  .controls-left,
-  .controls-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: var(--font-size-small);
-
-    .label {
-      text-transform: capitalize;
-      font-size: var(--font-size-small);
-    }
-
-    .walkMode-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-
-      .input-toggle-container {
-        padding: 0;
-        gap: 4px;
-
-        .label {
-
-          font-size: var(--font-size-small);
-        }
-      }
-    }
-
-    .btn-wrapper {
-      background: var(--background-color);
-      backdrop-filter: blur(8px);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 5px;
-      border-radius: 15px;
-      padding: 2px 8px;
-      color: var(--highlight-text-color);
-      cursor: pointer;
-      font-size: var(--font-size-small);
-
-      .icon {
-        width: 16px;
-        height: 16px;
-        @include flex-center;
-      }
-    }
-  }
-
-
-}
-
 @keyframes pulse {
   0% {
     opacity: 0;
@@ -286,4 +212,4 @@
     width: fit-content;
     opacity: 1;
   }
-}
+}