diff options
| -rw-r--r-- | apps/web/src/components/keyboard-shortcuts-help.tsx | 76 | ||||
| -rw-r--r-- | apps/web/src/hooks/use-keyboard-shortcuts.ts | 1 |
2 files changed, 54 insertions, 23 deletions
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx index 95fb6031..936254be 100644 --- a/apps/web/src/components/keyboard-shortcuts-help.tsx +++ b/apps/web/src/components/keyboard-shortcuts-help.tsx @@ -15,41 +15,73 @@ import { Keyboard } from "lucide-react"; import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts"; const KeyBadge = ({ keyName }: { keyName: string }) => { - // Replace common key names with symbols + // Replace common key names with symbols or friendly names const displayKey = keyName .replace("Cmd", "⌘") - .replace("Shift", "⇧") + .replace("Shift", "Shift") + .replace("ArrowLeft", "Arrow Left") + .replace("ArrowRight", "Arrow Right") + .replace("ArrowUp", "Arrow Up") + .replace("ArrowDown", "Arrow Down") .replace("←", "◀") .replace("→", "▶") .replace("Space", "Space"); return ( - <Badge variant="secondary" className="font-mono text-xs px-2 py-1"> + <Badge variant="secondary" className="font-mono text-xs px-1 py-1"> {displayKey} </Badge> ); }; -const ShortcutItem = ({ shortcut }: { shortcut: any }) => ( - <div className="flex items-center justify-between"> - <div className="flex items-center gap-3"> - {shortcut.icon && ( - <div className="text-muted-foreground">{shortcut.icon}</div> - )} - <span className="text-sm">{shortcut.description}</span> - </div> - <div className="flex items-center gap-1"> - {shortcut.keys.map((key: string, index: number) => ( - <div key={index} className="flex items-center gap-1"> - <KeyBadge keyName={key} /> - {index < shortcut.keys.length - 1 && ( - <span className="text-xs text-muted-foreground">+</span> - )} - </div> - ))} +const ShortcutItem = ({ shortcut }: { shortcut: any }) => { + // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J" + const displayKeys = shortcut.keys.filter((key: string) => { + const lowerKey = key.toLowerCase(); + const upperKey = key.toUpperCase(); + + // If this is a lowercase letter and the uppercase version exists, skip it + if ( + key === lowerKey && + key !== upperKey && + shortcut.keys.includes(upperKey) + ) { + return false; + } + + return true; + }); + + return ( + <div className="flex items-center justify-between"> + <div className="flex items-center gap-3"> + {shortcut.icon && ( + <div className="text-muted-foreground">{shortcut.icon}</div> + )} + <span className="text-sm">{shortcut.description}</span> + </div> + <div className="flex items-center gap-1"> + {displayKeys.map((key: string, index: number) => ( + <div key={index} className="flex items-center gap-1"> + <div className="flex items-center"> + {key.split("+").map((keyPart: string, partIndex: number) => ( + <div key={partIndex} className="flex items-center gap-1"> + <KeyBadge keyName={keyPart} /> + {partIndex < key.split("+").length - 1 && ( + <span className="text-xs text-muted-foreground">+</span> + )} + </div> + ))} + </div> + {index < displayKeys.length - 1 && ( + <span className="text-xs text-muted-foreground">or</span> + )} + </div> + ))} + </div> </div> - </div> -); + ); +}; export const KeyboardShortcutsHelp = () => { const [open, setOpen] = useState(false); diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts index d8fc032e..84cb78f8 100644 --- a/apps/web/src/hooks/use-keyboard-shortcuts.ts +++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts @@ -15,7 +15,6 @@ export interface KeyboardShortcut { enabled?: boolean;
requiresSelection?: boolean;
icon?: React.ReactNode;
- displayKeys?: string[]; // Keys to show in help (defaults to keys if not provided)
}
interface UseKeyboardShortcutsOptions {
|