feat: enhance keybinding import validation and improve error handling

3 files changed, 31 insertions, 12 deletions

diff --git a/apps/web/src/components/keybinding-editor.tsx b/apps/web/src/components/keybinding-editor.tsx
index 8735c504..bc98c5fd 100644
--- a/apps/web/src/components/keybinding-editor.tsx
+++ b/apps/web/src/components/keybinding-editor.tsx
@@ -224,10 +224,21 @@ export const KeybindingEditor = ({
     reader.onload = (e) => {
       try {
         const config = JSON.parse(e.target?.result as string);
+        // Validate config structure
+        if (!config || typeof config !== "object") {
+          throw new Error("Invalid configuration format");
+        }
+
+        // Validate each keybinding
+        for (const [key, action] of Object.entries(config)) {
+          if (typeof key !== "string" || typeof action !== "string") {
+            throw new Error(`Invalid keybinding: ${key} -> ${action}`);
+          }
+        }
         importKeybindings(config);
         toast.success("Keybindings imported successfully");
       } catch (error) {
-        toast.error("Failed to import keybindings file");
+        toast.error(`Failed to import keybindings: ${error}`);
       }
     };
     reader.readAsText(file);
diff --git a/apps/web/src/constants/actions.ts b/apps/web/src/constants/actions.ts
index 95a1e645..5f1883f1 100644
--- a/apps/web/src/constants/actions.ts
+++ b/apps/web/src/constants/actions.ts
@@ -233,19 +233,19 @@ export function useActionHandler<A extends Action>(
   // Handle ref-based isActive changes
   useEffect(() => {
     if (isActive && typeof isActive === "object" && "current" in isActive) {
-      const checkActive = () => {
+      // Poll for ref changes
+      const interval = setInterval(() => {
         const shouldBind = isActive.current;
-        if (shouldBind && !isBound) {
-          bindAction(action, stableHandler);
-          setIsBound(true);
-        } else if (!shouldBind && isBound) {
-          unbindAction(action, stableHandler);
-          setIsBound(false);
+        if (shouldBind !== isBound) {
+          if (shouldBind) {
+            bindAction(action, stableHandler);
+          } else {
+            unbindAction(action, stableHandler);
+          }
+          setIsBound(shouldBind);
         }
-      };
-
-      // Initial check
-      checkActive();
+      }, 100);
+      return () => clearInterval(interval);
     }
   }, [action, stableHandler, isActive, isBound]);
 }
diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index 6a72423f..6d9f5d54 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -112,6 +112,13 @@ export const useKeybindingsStore = create<KeybindingsState>()(
       },
 
       importKeybindings: (config: KeybindingConfig) => {
+        // Validate all keys and actions
+        for (const [key, action] of Object.entries(config)) {
+          // Validate the key format
+          if (typeof key !== "string" || key.length === 0) {
+            throw new Error(`Invalid key format: ${key}`);
+          }
+        }
         set({
           keybindings: { ...config },
           isCustomized: true,
@@ -198,6 +205,7 @@ function getPressedKey(ev: KeyboardEvent): string | null {
 
   // Check for special keys
   if (key === "tab") return "tab";
+  if (key === " " || key === "space") return "space";
   if (key === "home") return "home";
   if (key === "end") return "end";
   if (key === "delete") return "delete";