Refactor code structure for improved readability and maintainability

app/src/components/footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { HelpIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
@@ -15,25 +15,9 @@ const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
   const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
 
-  const { showShortcuts, setShowShortcuts } = useShortcutStore();
+  const { showShortcuts } = useShortcutStore();
   const { isPlaying } = usePlayButtonStore();
 
-  // Listen for Ctrl + Shift + ?
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.ctrlKey &&
-        e.shiftKey &&
-        (e.key === "?" || e.key === "/") // for some keyboards ? and / share the same key
-      ) {
-        e.preventDefault();
-        setShowShortcuts(!showShortcuts); // toggle visibility directly
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [showShortcuts, setShowShortcuts]);
 
   return (
     <div className="footer-container">

app/src/components/footer/shortcutHelper.tsx

@@ -162,11 +162,23 @@ const ShortcutHelper = () => {
           icon: <ToogleViewIcon />,
         },
         {
-          keys: ["CTRL", "+", "."],
+          keys: ["CTRL", "+", "\\"],
           name: "Toggle UI",
           description: "Toggle UI Visibility",
           icon: <UIVisiblityIcon />,
         },
+        {
+          keys: ["CTRL", "+", "["],
+          name: "Toggle UI",
+          description: "Left Sidebar Visibility",
+          icon: <UIVisiblityIcon />,
+        },
+        {
+          keys: ["CTRL", "+", "]"],
+          name: "Toggle UI",
+          description: "Right Sidebar Visibility",
+          icon: <UIVisiblityIcon />,
+        },
         {
           keys: ["/"],
           name: "First Person View",
@@ -276,7 +288,6 @@ const ShortcutHelper = () => {
               {group.category}
             </button>
           ))}
-          <div className="type">Keyboard</div>
         </div>
       </div>
 

app/src/components/icons/ShortcutIcons.tsx

@@ -197,12 +197,12 @@ export function MeasurementToolIcon() {
       <path
         d="M0.402344 9.34082C0.601078 9.51641 0.81855 9.68176 1.05371 9.83594L1.29883 9.98926C2.50601 10.7059 4.04736 11.1172 5.67578 11.1807H19.1543C19.4004 11.1808 19.5994 11.3799 19.5996 11.626V16.3164C19.5994 16.5626 19.4005 16.7616 19.1543 16.7617H18.4463V15.8613C18.4462 15.3192 18.007 14.88 17.4648 14.8799C16.9226 14.8799 16.4835 15.3191 16.4834 15.8613V16.7617H16.0361V14.498C16.0361 13.9559 15.5968 13.5168 15.0547 13.5166C14.5124 13.5166 14.0732 13.9557 14.0732 14.498V16.7617H13.625V15.8613C13.6249 15.3191 13.1858 14.8799 12.6436 14.8799C12.1015 14.8801 11.6622 15.3192 11.6621 15.8613V16.7617H11.2148V14.498C11.2148 13.9557 10.7757 13.5166 10.2334 13.5166C9.69113 13.5166 9.25195 13.9558 9.25195 14.498V16.7617H8.80469V15.8613C8.80459 15.3192 8.36541 14.88 7.82324 14.8799C7.281 14.8799 6.8419 15.3191 6.8418 15.8613V16.7617H6.11426C4.4855 16.7617 3.03028 16.368 1.99609 15.7529C0.9536 15.1328 0.402397 14.333 0.402344 13.5273V9.34082Z"
         stroke="var(--text-color)"
-        stroke-width="0.8"
+        strokeWidth="0.8"
       />
       <path
         d="M6.1123 3.22852C7.74123 3.22852 9.19625 3.62154 10.2305 4.23633C11.2731 4.8562 11.8252 5.65597 11.8252 6.46289C11.8252 6.82463 11.7175 7.18064 11.5049 7.51953L11.4072 7.66309L11.4062 7.66406C10.5765 8.8129 8.56553 9.69717 6.11523 9.69727C6.03208 9.69727 5.94957 9.69551 5.8623 9.69336H5.86328C3.67006 9.63747 1.86351 8.87579 0.982422 7.86816L0.818359 7.66309C0.542765 7.28046 0.400421 6.87494 0.400391 6.46289C0.400391 5.65713 0.951389 4.85653 1.99414 4.23633C3.02833 3.62125 4.48355 3.22858 6.1123 3.22852ZM6.11523 4.44141C5.30316 4.44141 4.54863 4.63609 3.98438 4.97168C3.46367 5.28142 3.04694 5.75161 2.99805 6.33984L2.99316 6.45898C2.99325 6.743 3.07951 7.00517 3.22363 7.23633L3.28906 7.33301C3.76857 7.99795 4.75288 8.40763 5.82324 8.46973V8.4707C5.92262 8.47795 6.02029 8.48047 6.11523 8.48047C7.30572 8.48037 8.42116 8.05532 8.94238 7.33301L8.94141 7.33203C9.00567 7.24348 9.06173 7.14976 9.10742 7.04785L9.1084 7.04883C9.19323 6.86454 9.23824 6.66587 9.23828 6.46094C9.23828 5.81632 8.80107 5.30238 8.24512 4.97168C7.68051 4.63594 6.9262 4.44147 6.11523 4.44141Z"
         stroke="var(--text-color)"
-        stroke-width="0.8"
+        strokeWidth="0.8"
       />
     </svg>
   );
@@ -217,53 +217,53 @@ export function WallToolIcon() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_3986_5423)">
+      <g clipPath="url(#clip0_3986_5423)">
         <path
           d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
@@ -271,7 +271,7 @@ export function WallToolIcon() {
           d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
           fill="var(--text-color)"
           stroke="#3A383D"
-          stroke-width="1.08709"
+          strokeWidth="1.08709"
         />
       </g>
       <defs>
@@ -292,53 +292,53 @@ export function ZoneToolIcon() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_3986_5423)">
+      <g clipPath="url(#clip0_3986_5423)">
         <path
           d="M12.6101 7.17188H6.72173V10.7049H12.6101V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M18.4986 7.17188H12.6102V10.7049H18.4986V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M6.72174 7.17188H0.833328V10.7049H6.72174V7.17188Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M15.5544 10.7031H9.66596V14.2362H15.5544V10.7031Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.66594 10.7031H3.77753V14.2362H9.66594V10.7031Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M15.5544 3.64062H9.66596V7.17367H15.5544V3.64062Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.66594 3.64062H3.77753V7.17367H9.66594V3.64062Z"
           stroke="var(--text-color)"
-          stroke-miterlimit="10"
+          strokeMiterlimit="10"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
@@ -346,7 +346,7 @@ export function ZoneToolIcon() {
           d="M20.7192 8.96582L11.3705 18.3154H7.89982V14.8447L17.2485 5.49512L20.7192 8.96582Z"
           fill="var(--text-color)"
           stroke="#3A383D"
-          stroke-width="1.08709"
+          strokeWidth="1.08709"
         />
       </g>
       <defs>
@@ -411,7 +411,7 @@ export function FloorToolIcon() {
         width="12.5"
         height="12.5"
         fill="#F3F3FD"
-        fill-opacity="0.85"
+        fillOpacity="0.85"
       />
       <path
         d="M15.834 15.8281V3.32812H3.33398V15.8281"
@@ -460,28 +460,28 @@ export function RotateIcon() {
       <path
         d="M11.6094 11.6094H14.29V14.2899"
         stroke="var(--text-color)"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M4.63995 13.7509H7.3205V11.0703"
         stroke="var(--text-color)"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M14.2899 11.8218C13.9146 12.2507 13.5394 12.6795 13.1105 13.1084C9.35771 16.8612 4.908 18.5768 3.19244 16.8612C1.47689 15.1457 3.13883 10.6959 6.94521 6.94317C10.7516 3.1904 15.1477 1.47485 16.8632 3.1904C17.6138 3.94095 17.721 5.1204 17.2921 6.56789"
         stroke="var(--text-color)"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M7.32051 13.4832C7.15968 13.3759 7.05246 13.2151 6.89163 13.0543C3.13886 9.3015 1.4233 4.85178 3.13886 3.13623C4.85441 1.42068 9.30412 3.08262 13.0569 6.889C16.8097 10.6954 18.5252 15.0915 16.8097 16.807C15.8983 17.7184 14.2363 17.6648 12.3063 16.8607"
         stroke="var(--text-color)"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -541,41 +541,41 @@ export function FirstPersonViewIcon() {
       <path
         d="M10.04 11.8262C11.0513 11.8262 11.8711 11.0064 11.8711 9.99512C11.8711 8.98385 11.0513 8.16406 10.04 8.16406C9.02878 8.16406 8.20898 8.98385 8.20898 9.99512C8.20898 11.0064 9.02878 11.8262 10.04 11.8262Z"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
       />
       <path
         d="M14.6021 9.54529C14.6963 9.73096 14.7434 9.82375 14.7434 9.99902C14.7434 10.1743 14.6963 10.2671 14.6021 10.4528C14.1433 11.3564 12.8336 13.2949 10.0416 13.2949C7.24964 13.2949 5.94002 11.3564 5.4812 10.4528C5.38696 10.2671 5.33984 10.1743 5.33984 9.99902C5.33984 9.82375 5.38696 9.73096 5.4812 9.54529C5.94002 8.64163 7.24964 6.70312 10.0416 6.70312C12.8336 6.70312 14.1433 8.64163 14.6021 9.54529Z"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
       />
       <path
         d="M14.0703 3.77344H14.2168C15.5288 3.77344 16.1848 3.77344 16.5924 4.18103C17 4.58862 17 5.24462 17 6.55664V6.70312"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
         strokeLinecap="round"
       />
       <path
         d="M14.0703 16.2266H14.2168C15.5288 16.2266 16.1848 16.2266 16.5924 15.819C17 15.4114 17 14.7553 17 13.4434V13.2969"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
         strokeLinecap="round"
       />
       <path
         d="M6.01367 3.77344H5.86719C4.55517 3.77344 3.89916 3.77344 3.49158 4.18103C3.08398 4.58862 3.08398 5.24462 3.08398 6.55664V6.70312"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
         strokeLinecap="round"
       />
       <path
         d="M6.01367 16.2266H5.86719C4.55517 16.2266 3.89916 16.2266 3.49158 15.819C3.08398 15.4114 3.08398 14.7553 3.08398 13.4434V13.2969"
         stroke="#F3F3FD"
-        stroke-opacity="0.85"
+        strokeOpacity="0.85"
-        stroke-width="0.732422"
+        strokeWidth="0.732422"
         strokeLinecap="round"
       />
     </svg>
@@ -594,7 +594,7 @@ export function BuilderIcon() {
       <path
         d="M3.5 12.5H11.5C11.9142 12.5 12.25 12.8358 12.25 13.25V15C12.25 15.4142 11.9142 15.75 11.5 15.75H3.5C3.08579 15.75 2.75 15.4142 2.75 15V13.25C2.75 12.8358 3.08579 12.5 3.5 12.5ZM14.125 12.5H16.5C16.9142 12.5 17.25 12.8358 17.25 13.25V15C17.25 15.4142 16.9142 15.75 16.5 15.75H14.125C13.7108 15.75 13.375 15.4142 13.375 15V13.25C13.375 12.8358 13.7108 12.5 14.125 12.5ZM3.5 8.125H5.875C6.28921 8.125 6.625 8.46079 6.625 8.875V10.625C6.625 11.0392 6.28921 11.375 5.875 11.375H3.5C3.08579 11.375 2.75 11.0392 2.75 10.625V8.875C2.75 8.46079 3.08579 8.125 3.5 8.125ZM8.5 8.125H16.5C16.9142 8.125 17.25 8.46079 17.25 8.875V10.625C17.25 11.0392 16.9142 11.375 16.5 11.375H8.5C8.08579 11.375 7.75 11.0392 7.75 10.625V8.875C7.75 8.46079 8.08579 8.125 8.5 8.125ZM3.5 3.75H11.5C11.9142 3.75 12.25 4.08579 12.25 4.5V6.25C12.25 6.66421 11.9142 7 11.5 7H3.5C3.08579 7 2.75 6.66421 2.75 6.25V4.5C2.75 4.08579 3.08579 3.75 3.5 3.75ZM14.125 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V6.25C17.25 6.66421 16.9142 7 16.5 7H14.125C13.7108 7 13.375 6.66421 13.375 6.25V4.5C13.375 4.08579 13.7108 3.75 14.125 3.75Z"
         stroke="var(--text-color)"
-        stroke-width="0.5"
+        strokeWidth="0.5"
       />
     </svg>
   );
@@ -612,44 +612,44 @@ export function SimulationIcon() {
       <path
         d="M12.2632 11.0672C12.2632 11.4899 12.1379 11.9032 11.903 12.2547C11.6681 12.6062 11.3343 12.8802 10.9437 13.0419C10.5532 13.2037 10.1234 13.246 9.70876 13.1636C9.29413 13.0811 8.91327 12.8775 8.61434 12.5786C8.3154 12.2797 8.11183 11.8988 8.02935 11.4842C7.94688 11.0695 7.98921 10.6398 8.15099 10.2492C8.31277 9.85862 8.58674 9.52479 8.93824 9.28992C9.28975 9.05505 9.70301 8.92969 10.1258 8.92969C10.6927 8.92969 11.2363 9.15489 11.6372 9.55574C12.038 9.9566 12.2632 10.5003 12.2632 11.0672Z"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M10.1254 6.26248C10.7156 6.26248 11.1941 5.78399 11.1941 5.19374C11.1941 4.60349 10.7156 4.125 10.1254 4.125C9.53513 4.125 9.05664 4.60349 9.05664 5.19374C9.05664 5.78399 9.53513 6.26248 10.1254 6.26248Z"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M5.31874 15.8719C5.90899 15.8719 6.38748 15.3934 6.38748 14.8031C6.38748 14.2129 5.90899 13.7344 5.31874 13.7344C4.72849 13.7344 4.25 14.2129 4.25 14.8031C4.25 15.3934 4.72849 15.8719 5.31874 15.8719Z"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M14.932 15.8719C15.5223 15.8719 16.0008 15.3934 16.0008 14.8031C16.0008 14.2129 15.5223 13.7344 14.932 13.7344C14.3418 13.7344 13.8633 14.2129 13.8633 14.8031C13.8633 15.3934 14.3418 15.8719 14.932 15.8719Z"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M8.43583 12.375L6.16406 14.1488"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M14.0862 14.1488L11.8145 12.375"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
       <path
         d="M10.125 8.93468V6.26562"
         stroke="var(--text-color)"
-        stroke-width="0.671459"
+        strokeWidth="0.671459"
-        stroke-miterlimit="10"
+        strokeMiterlimit="10"
       />
     </svg>
   );
@@ -748,7 +748,7 @@ export function PasteIcon() {
       <path
         d="M11.8521 5.3385H12.4447C13.0033 5.3385 13.2826 5.3385 13.4562 5.51422C13.6297 5.68995 13.6297 5.97278 13.6297 6.53843V8.67163M11.8521 5.3385V5.8718C11.8521 6.15462 11.8521 6.29604 11.7653 6.3839C11.6785 6.47177 11.5389 6.47177 11.2596 6.47177H7.70421C7.42488 6.47177 7.28521 6.47177 7.19843 6.3839C7.11166 6.29604 7.11166 6.15462 7.11166 5.8718V5.3385M11.8521 5.3385C11.8521 5.05568 11.8521 4.8476 11.7653 4.75974C11.6785 4.67188 11.5389 4.67188 11.2596 4.67188H7.70421C7.42488 4.67188 7.28521 4.67188 7.19843 4.75974C7.11166 4.8476 7.11166 5.05568 7.11166 5.3385M7.11166 5.3385H6.5191C5.96043 5.3385 5.6811 5.3385 5.50754 5.51422C5.33398 5.68995 5.33398 5.97278 5.33398 6.53843V13.4686C5.33398 14.0343 5.33398 14.3171 5.50754 14.4928C5.6811 14.6685 5.96043 14.6685 6.5191 14.6685H9.1856M12.0002 15.3379H14.6667C15.2952 15.3379 15.6095 15.3379 15.8047 15.1426C16 14.9474 16 14.6331 16 14.0046V11.3381C16 10.7096 16 10.3954 15.8047 10.2001C15.6095 10.0049 15.2952 10.0049 14.6667 10.0049H12.0002C11.3717 10.0049 11.0575 10.0049 10.8622 10.2001C10.667 10.3954 10.667 10.7096 10.667 11.3381V14.0046C10.667 14.6331 10.667 14.9474 10.8622 15.1426C11.0575 15.3379 11.3717 15.3379 12.0002 15.3379Z"
         stroke="var(--text-color)"
-        stroke-width="0.666626"
+        strokeWidth="0.666626"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -7,6 +7,7 @@ import {
     useAddAction,
     useDeleteTool,
     useSelectedWallItem,
+    useShortcutStore,
     useToggleView,
     useToolMode,
 } from "../../store/store";
@@ -27,6 +28,7 @@ const KeyPressListener: React.FC = () => {
     const { setSelectedWallItem } = useSelectedWallItem();
     const { setActiveTool } = useActiveTool();
     const { clearSelectedZone } = useSelectedZoneStore();
+    const { showShortcuts, setShowShortcuts } = useShortcutStore();
 
     const isTextInput = (element: Element | null): boolean =>
         element instanceof HTMLInputElement ||
@@ -170,10 +172,15 @@ const KeyPressListener: React.FC = () => {
             setActiveSubTool("cursor");
             setIsPlaying(false);
             clearSelectedZone();
+            setShowShortcuts(false);
+        }
+
+        if (keyCombination === "Ctrl+Shift+?") {
+            setShowShortcuts(!showShortcuts);
         }
 
         // Placeholder for future implementation
-        if (["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F", "Ctrl+?"].includes(keyCombination)) {
+        if (["Ctrl+Z", "Ctrl+Y", "Ctrl+Shift+Z", "Ctrl+H", "Ctrl+F"].includes(keyCombination)) {
             // Implement undo/redo/help/find/shortcuts
         }
     };
@@ -182,7 +189,7 @@ const KeyPressListener: React.FC = () => {
         window.addEventListener("keydown", handleKeyPress);
         return () => window.removeEventListener("keydown", handleKeyPress);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeModule, toggleUIRight, toggleUILeft, toggleView]);
+    }, [activeModule, toggleUIRight, toggleUILeft, toggleView, showShortcuts]);
 
     return null;
 };