1 files changed, 21 insertions, 26 deletions

diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 4c8bfff5..f6f2f222 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -6,11 +6,11 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
-import { getPlatformSpecialKey } from "@/lib/utils";
 import { Keyboard } from "lucide-react";
 import {
   useKeyboardShortcutsHelp,
@@ -19,30 +19,13 @@ 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,
+  isRecording,
   onStartRecording,
 }: {
   shortcut: KeyboardShortcut;
-  recordingKey: string | null;
+  isRecording: boolean;
   onStartRecording: (keyId: string, shortcut: KeyboardShortcut) => void;
 }) => {
   // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
@@ -76,10 +59,10 @@ const ShortcutItem = ({
                     keyId={keyId}
                     originalKey={key}
                     shortcut={shortcut}
-                    isRecording={recordingKey === keyId}
+                    isRecording={isRecording}
                     onStartRecording={() => onStartRecording(keyId, shortcut)}
                   >
-                    {getKeyWithModifier(keyPart)}
+                    {keyPart}
                   </EditableShortcutKey>
                 );
               })}
@@ -144,6 +127,8 @@ export const KeyboardShortcutsHelp = () => {
     getKeybindingString,
     validateKeybinding,
     getKeybindingsForAction,
+    setIsRecording,
+    resetToDefaults,
   } = useKeybindingsStore();
 
   // Get shortcuts from centralized hook
@@ -163,11 +148,11 @@ export const KeyboardShortcutsHelp = () => {
         // Auto-save the new keybinding
         const conflict = validateKeybinding(
           keyString,
-          recordingShortcut.action
+          recordingShortcut.action,
         );
         if (conflict) {
           toast.error(
-            `Key "${keyString}" is already bound to "${conflict.existingAction}"`
+            `Key "${keyString}" is already bound to "${conflict.existingAction}"`,
           );
           setRecordingKey(null);
           setRecordingShortcut(null);
@@ -181,14 +166,16 @@ export const KeyboardShortcutsHelp = () => {
         // Add new keybinding
         updateKeybinding(keyString, recordingShortcut.action);
 
+        setIsRecording(false);
         setRecordingKey(null);
         setRecordingShortcut(null);
       }
     };
 
-    const handleClickOutside = (e: MouseEvent) => {
+    const handleClickOutside = () => {
       setRecordingKey(null);
       setRecordingShortcut(null);
+      setIsRecording(false);
     };
 
     document.addEventListener("keydown", handleKeyDown);
@@ -211,6 +198,7 @@ export const KeyboardShortcutsHelp = () => {
   const handleStartRecording = (keyId: string, shortcut: KeyboardShortcut) => {
     setRecordingKey(keyId);
     setRecordingShortcut(shortcut);
+    setIsRecording(true);
   };
 
   return (
@@ -246,7 +234,9 @@ export const KeyboardShortcutsHelp = () => {
                     <ShortcutItem
                       key={index}
                       shortcut={shortcut}
-                      recordingKey={recordingKey}
+                      isRecording={
+                        shortcut.action === recordingShortcut?.action
+                      }
                       onStartRecording={handleStartRecording}
                     />
                   ))}
@@ -254,6 +244,11 @@ export const KeyboardShortcutsHelp = () => {
             </div>
           ))}
         </div>
+        <DialogFooter>
+          <Button size="sm" className="mt-4" onClick={resetToDefaults}>
+            Reset to Default
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );