From f3d5eb9d08ed681977a4dd06fcacb0407be17384 Mon Sep 17 00:00:00 2001
From: Kha Nguyen <hi@khanguyen.com>
Date: Tue, 22 Jul 2025 19:02:37 -0500
Subject: [PATCH] refactor: clean up key mapping logic for human-readable
 shortcuts

---
 .../components/keyboard-shortcuts-help.tsx    | 20 +------------------
 .../src/hooks/use-keyboard-shortcuts-help.ts  |  8 ++++----
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 65f879a3..db31c527 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/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>
                 );
               })}
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
index 808bf25f..2f1a4d4a 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
+++ b/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")