feat(ui): dynamically generate all keybinding hints (#21346)

This commit is contained in:
Tommaso Sciortino
2026-03-06 18:34:26 +00:00
committed by GitHub
parent 4669148a4c
commit 6d607a5953
24 changed files with 424 additions and 293 deletions
@@ -10,29 +10,41 @@ import { theme } from '../semantic-colors.js';
import { isNarrowWidth } from '../utils/isNarrowWidth.js';
import { SectionHeader } from './shared/SectionHeader.js';
import { useUIState } from '../contexts/UIStateContext.js';
import { Command } from '../../config/keyBindings.js';
import { formatCommand } from '../utils/keybindingUtils.js';
type ShortcutItem = {
key: string;
description: string;
};
const buildShortcutItems = (): ShortcutItem[] => {
const isMac = process.platform === 'darwin';
const altLabel = isMac ? 'Option' : 'Alt';
return [
{ key: '!', description: 'shell mode' },
{ key: '@', description: 'select file or folder' },
{ key: 'Esc Esc', description: 'clear & rewind' },
{ key: 'Tab Tab', description: 'focus UI' },
{ key: 'Ctrl+Y', description: 'YOLO mode' },
{ key: 'Shift+Tab', description: 'cycle mode' },
{ key: 'Ctrl+V', description: 'paste images' },
{ key: `${altLabel}+M`, description: 'raw markdown mode' },
{ key: 'Ctrl+R', description: 'reverse-search history' },
{ key: 'Ctrl+X', description: 'open external editor' },
];
};
const buildShortcutItems = (): ShortcutItem[] => [
{ key: '!', description: 'shell mode' },
{ key: '@', description: 'select file or folder' },
{ key: formatCommand(Command.REWIND), description: 'clear & rewind' },
{ key: formatCommand(Command.FOCUS_SHELL_INPUT), description: 'focus UI' },
{ key: formatCommand(Command.TOGGLE_YOLO), description: 'YOLO mode' },
{
key: formatCommand(Command.CYCLE_APPROVAL_MODE),
description: 'cycle mode',
},
{
key: formatCommand(Command.PASTE_CLIPBOARD),
description: 'paste images',
},
{
key: formatCommand(Command.TOGGLE_MARKDOWN),
description: 'raw markdown mode',
},
{
key: formatCommand(Command.REVERSE_SEARCH),
description: 'reverse-search history',
},
{
key: formatCommand(Command.OPEN_EXTERNAL_EDITOR),
description: 'open external editor',
},
];
const Shortcut: React.FC<{ item: ShortcutItem }> = ({ item }) => (
<Box flexDirection="row">