refactor: clean up key mapping logic for human-readable shortcuts

apps/web/src/components/keyboard-shortcuts-help.tsx

@@ -10,7 +10,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
-import { getPlatformSpecialKey } from "@/lib/utils";
 import { Keyboard } from "lucide-react";
 import {
   useKeyboardShortcutsHelp,
@@ -19,23 +18,6 @@ import {
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { toast } from "sonner";
 
-const modifier: {
-  [key: string]: string;
-} = {
-  Shift: "Shift",
-  Alt: "Alt",
-  ArrowLeft: "←",
-  ArrowRight: "→",
-  ArrowUp: "↑",
-  ArrowDown: "↓",
-  Space: "Space",
-};
-
-function getKeyWithModifier(key: string) {
-  if (key === "Ctrl") return getPlatformSpecialKey();
-  return modifier[key] || key;
-}
-
 const ShortcutItem = ({
   shortcut,
   recordingKey,
@@ -79,7 +61,7 @@ const ShortcutItem = ({
                     isRecording={recordingKey === keyId}
                     onStartRecording={() => onStartRecording(keyId, shortcut)}
                   >
-                    {getKeyWithModifier(keyPart)}
+                    {keyPart}
                   </EditableShortcutKey>
                 );
               })}

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

@@ -71,10 +71,10 @@ const formatKey = (key: string): string => {
     .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")