From 6dfc80cd70db08f847d114bdbae582c9983bb83e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 26 Jul 2025 12:54:50 +0200
Subject: Merge pull request
 [#433](https://github.com/mazeincoding/AppCut/issues/433)

---
 apps/web/src/hooks/use-keybindings.ts             |  6 ++++--
 apps/web/src/hooks/use-keyboard-shortcuts-help.ts | 13 +++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'apps/web/src/hooks')

diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts
index 7224c1c8..10616900 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/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
index c7de8466..2f1a4d4a 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
+++ b/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")
-- 
cgit v1.3.1