From 901ddb509db23695cf9d71bf733e6a7185317960 Mon Sep 17 00:00:00 2001
From: Kha Nguyen <hi@khanguyen.com>
Date: Tue, 22 Jul 2025 18:52:49 -0500
Subject: [PATCH] fix: prevent action to perform on key press when edit
 keybindings

---
 .../src/components/keyboard-shortcuts-help.tsx   | 10 +++++++---
 apps/web/src/hooks/use-keybindings.ts            |  6 ++++--
 apps/web/src/stores/keybindings-store.ts         | 16 +++++++++++-----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 4c8bfff5..65f879a3 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -144,6 +144,7 @@ export const KeyboardShortcutsHelp = () => {
     getKeybindingString,
     validateKeybinding,
     getKeybindingsForAction,
+    setIsRecording,
   } = useKeybindingsStore();
 
   // Get shortcuts from centralized hook
@@ -163,11 +164,11 @@ export const KeyboardShortcutsHelp = () => {
         // Auto-save the new keybinding
         const conflict = validateKeybinding(
           keyString,
-          recordingShortcut.action
+          recordingShortcut.action,
         );
         if (conflict) {
           toast.error(
-            `Key "${keyString}" is already bound to "${conflict.existingAction}"`
+            `Key "${keyString}" is already bound to "${conflict.existingAction}"`,
           );
           setRecordingKey(null);
           setRecordingShortcut(null);
@@ -181,14 +182,16 @@ export const KeyboardShortcutsHelp = () => {
         // Add new keybinding
         updateKeybinding(keyString, recordingShortcut.action);
 
+        setIsRecording(false);
         setRecordingKey(null);
         setRecordingShortcut(null);
       }
     };
 
-    const handleClickOutside = (e: MouseEvent) => {
+    const handleClickOutside = () => {
       setRecordingKey(null);
       setRecordingShortcut(null);
+      setIsRecording(false);
     };
 
     document.addEventListener("keydown", handleKeyDown);
@@ -211,6 +214,7 @@ export const KeyboardShortcutsHelp = () => {
   const handleStartRecording = (keyId: string, shortcut: KeyboardShortcut) => {
     setRecordingKey(keyId);
     setRecordingShortcut(shortcut);
+    setIsRecording(true);
   };
 
   return (
diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts
index 7887f3f1..0e2045ac 100644
--- a/apps/web/src/hooks/use-keybindings.ts
+++ b/apps/web/src/hooks/use-keybindings.ts
@@ -8,13 +8,15 @@ import { useKeybindingsStore } from "@/stores/keybindings-store";
  * the appropriate actions based on keybindings
  */
 export function useKeybindingsListener() {
-  const { keybindings, getKeybindingString, keybindingsEnabled } =
+  const { keybindings, getKeybindingString, keybindingsEnabled, isRecording } =
     useKeybindingsStore();
 
   useEffect(() => {
     const handleKeyDown = (ev: KeyboardEvent) => {
       // Do not check keybinds if the mode is disabled
       if (!keybindingsEnabled) return;
+      // ignore key events if user is changing keybindings
+      if (isRecording) return;
 
       const binding = getKeybindingString(ev);
       if (!binding) return;
@@ -45,7 +47,7 @@ export function useKeybindingsListener() {
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [keybindings, getKeybindingString, keybindingsEnabled]);
+  }, [keybindings, getKeybindingString, keybindingsEnabled, isRecording]);
 }
 
 /**
diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index 3e525b86..ce2d839d 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -39,6 +39,7 @@ interface KeybindingsState {
   keybindings: KeybindingConfig;
   isCustomized: boolean;
   keybindingsEnabled: boolean;
+  isRecording: boolean;
 
   // Actions
   updateKeybinding: (key: ShortcutKey, action: ActionWithOptionalArgs) => void;
@@ -48,11 +49,12 @@ interface KeybindingsState {
   exportKeybindings: () => KeybindingConfig;
   enableKeybindings: () => void;
   disableKeybindings: () => void;
+  setIsRecording: (isRecording: boolean) => void;
 
   // Validation
   validateKeybinding: (
     key: ShortcutKey,
-    action: ActionWithOptionalArgs
+    action: ActionWithOptionalArgs,
   ) => KeybindingConflict | null;
   getKeybindingsForAction: (action: ActionWithOptionalArgs) => ShortcutKey[];
 
@@ -66,6 +68,7 @@ export const useKeybindingsStore = create<KeybindingsState>()(
       keybindings: { ...defaultKeybindings },
       isCustomized: false,
       keybindingsEnabled: true,
+      isRecording: false,
 
       updateKeybinding: (key: ShortcutKey, action: ActionWithOptionalArgs) => {
         set((state) => {
@@ -126,7 +129,7 @@ export const useKeybindingsStore = create<KeybindingsState>()(
 
       validateKeybinding: (
         key: ShortcutKey,
-        action: ActionWithOptionalArgs
+        action: ActionWithOptionalArgs,
       ) => {
         const { keybindings } = get();
         const existingAction = keybindings[key];
@@ -141,11 +144,14 @@ export const useKeybindingsStore = create<KeybindingsState>()(
 
         return null;
       },
+      setIsRecording: (isRecording: boolean) => {
+        set({ isRecording });
+      },
 
       getKeybindingsForAction: (action: ActionWithOptionalArgs) => {
         const { keybindings } = get();
         return Object.keys(keybindings).filter(
-          (key) => keybindings[key as ShortcutKey] === action
+          (key) => keybindings[key as ShortcutKey] === action,
         ) as ShortcutKey[];
       },
 
@@ -156,8 +162,8 @@ export const useKeybindingsStore = create<KeybindingsState>()(
     {
       name: "opencut-keybindings",
       version: 1,
-    }
-  )
+    },
+  ),
 );
 
 // Utility functions