Merge pull request [#433](https://github.com/mazeincoding/AppCut/issues/433)

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]);
 }
 
 /**

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

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { Action } from "@/constants/actions";
+import { getPlatformAlternateKey, getPlatformSpecialKey } from "@/lib/utils";
 
 export interface KeyboardShortcut {
   id: string;
@@ -67,13 +68,13 @@ const actionDescriptions: Record<
 // Convert key binding format to display format
 const formatKey = (key: string): string => {
   return key
-    .replace("ctrl", "Cmd")
-    .replace("alt", "Alt")
+    .replace("ctrl", getPlatformSpecialKey())
+    .replace("alt", getPlatformAlternateKey())
     .replace("shift", "Shift")
-    .replace("left", "ArrowLeft")
-    .replace("right", "ArrowRight")
-    .replace("up", "ArrowUp")
-    .replace("down", "ArrowDown")
+    .replace("left", "←")
+    .replace("right", "→")
+    .replace("up", "↑")
+    .replace("down", "↓")
     .replace("space", "Space")
     .replace("home", "Home")
     .replace("end", "End")