feat: enhance keybinding management by integrating keybindingsEnabled state and updating related hooks

apps/web/src/hooks/use-keybindings.ts

@@ -1,21 +1,15 @@
 import { useEffect } from "react";
-import { ActionWithOptionalArgs, invokeAction } from "../constants/actions";
+import { invokeAction } from "../constants/actions";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 
-/**
- * This variable keeps track whether keybindings are being accepted
- * true -> Keybindings are checked
- * false -> Key presses are ignored (Keybindings are not checked)
- */
-let keybindingsEnabled = true;
-
 /**
  * A composable that hooks to the caller component's
  * lifecycle and hooks to the keyboard events to fire
  * the appropriate actions based on keybindings
  */
 export function useKeybindingsListener() {
-  const { keybindings, getKeybindingString } = useKeybindingsStore();
+  const { keybindings, getKeybindingString, keybindingsEnabled } =
+    useKeybindingsStore();
 
   useEffect(() => {
     const handleKeyDown = (ev: KeyboardEvent) => {
@@ -51,20 +45,14 @@ export function useKeybindingsListener() {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [keybindings, getKeybindingString]);
+  }, [keybindings, getKeybindingString, keybindingsEnabled]);
 }
 
 /**
  * This composable allows for the UI component to be disabled if the component in question is mounted
  */
 export function useKeybindingDisabler() {
-  const disableKeybindings = () => {
+  const { disableKeybindings, enableKeybindings } = useKeybindingsStore();
-    keybindingsEnabled = false;
-  };
-
-  const enableKeybindings = () => {
-    keybindingsEnabled = true;
-  };
 
   return {
     disableKeybindings,

apps/web/src/stores/keybindings-store.ts

@@ -43,6 +43,7 @@ export interface KeybindingConflict {
 interface KeybindingsState {
   keybindings: KeybindingConfig;
   isCustomized: boolean;
+  keybindingsEnabled: boolean;
 
   // Actions
   updateKeybinding: (key: string, action: ActionWithOptionalArgs) => void;
@@ -50,6 +51,8 @@ interface KeybindingsState {
   resetToDefaults: () => void;
   importKeybindings: (config: KeybindingConfig) => void;
   exportKeybindings: () => KeybindingConfig;
+  enableKeybindings: () => void;
+  disableKeybindings: () => void;
 
   // Validation
   validateKeybinding: (
@@ -67,6 +70,7 @@ export const useKeybindingsStore = create<KeybindingsState>()(
     (set, get) => ({
       keybindings: { ...defaultKeybindings },
       isCustomized: false,
+      keybindingsEnabled: true,
 
       updateKeybinding: (key: string, action: ActionWithOptionalArgs) => {
         set((state) => {
@@ -99,6 +103,14 @@ export const useKeybindingsStore = create<KeybindingsState>()(
         });
       },
 
+      enableKeybindings: () => {
+        set({ keybindingsEnabled: true });
+      },
+
+      disableKeybindings: () => {
+        set({ keybindingsEnabled: false });
+      },
+
       importKeybindings: (config: KeybindingConfig) => {
         set({
           keybindings: { ...config },