feat: refactor keybinding management and add keybinding editor component

apps/web/src/hooks/use-keybinding-conflicts.ts

@@ -0,0 +1,59 @@
+"use client";
+
+import { useMemo } from "react";
+import { useKeybindingsStore } from "@/stores/keybindings-store";
+import { ActionWithOptionalArgs } from "@/constants/actions";
+
+export interface KeybindingConflictInfo {
+  key: string;
+  actions: ActionWithOptionalArgs[];
+  isConflict: boolean;
+}
+
+export const useKeybindingConflicts = () => {
+  const { keybindings } = useKeybindingsStore();
+
+  const conflicts = useMemo(() => {
+    const keyToActions: Record<string, ActionWithOptionalArgs[]> = {};
+    const conflictList: KeybindingConflictInfo[] = [];
+
+    // Group actions by key
+    Object.entries(keybindings).forEach(([key, action]) => {
+      if (!keyToActions[key]) {
+        keyToActions[key] = [];
+      }
+      keyToActions[key].push(action);
+    });
+
+    // Find conflicts
+    Object.entries(keyToActions).forEach(([key, actions]) => {
+      const uniqueActions = [...new Set(actions)];
+      conflictList.push({
+        key,
+        actions: uniqueActions,
+        isConflict: uniqueActions.length > 1,
+      });
+    });
+
+    return conflictList.filter((item) => item.isConflict);
+  }, [keybindings]);
+
+  const hasConflicts = conflicts.length > 0;
+
+  const getConflictsForKey = (key: string): KeybindingConflictInfo | null => {
+    return conflicts.find((conflict) => conflict.key === key) || null;
+  };
+
+  const getConflictsForAction = (
+    action: ActionWithOptionalArgs
+  ): KeybindingConflictInfo[] => {
+    return conflicts.filter((conflict) => conflict.actions.includes(action));
+  };
+
+  return {
+    conflicts,
+    hasConflicts,
+    getConflictsForKey,
+    getConflictsForAction,
+  };
+};

apps/web/src/hooks/use-keyboard-shortcuts-help.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { bindings } from "@/constants/keybindings";
+import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { Action } from "@/constants/actions";
 
 export interface KeyboardShortcut {
@@ -83,13 +83,15 @@ const formatKey = (key: string): string => {
 };
 
 export const useKeyboardShortcutsHelp = () => {
+  const { keybindings } = useKeybindingsStore();
+
   const shortcuts = useMemo(() => {
     const result: KeyboardShortcut[] = [];
 
     // Group keybindings by action
     const actionToKeys: Record<Action, string[]> = {} as any;
 
-    Object.entries(bindings).forEach(([key, action]) => {
+    Object.entries(keybindings).forEach(([key, action]) => {
       if (action) {
         if (!actionToKeys[action]) {
           actionToKeys[action] = [];
@@ -113,7 +115,7 @@ export const useKeyboardShortcutsHelp = () => {
     });
 
     return result;
-  }, []);
+  }, [keybindings]);
 
   return {
     shortcuts,