Refactor code structure for improved readability and maintainability

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;
 };