70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { IS_MAC } from '@renderer/utils/platformKeys';
|
|
import { X } from 'lucide-react';
|
|
|
|
interface KeyboardShortcutsHelpProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}
|
|
|
|
const mod = IS_MAC ? '\u2318' : 'Ctrl';
|
|
const alt = IS_MAC ? '\u2325' : 'Alt';
|
|
const shift = IS_MAC ? '\u21E7' : 'Shift';
|
|
|
|
const shortcuts = [
|
|
{ keys: [`${alt}+J`], actionKey: 'nextChange' },
|
|
{ keys: [`${alt}+K`], actionKey: 'previousChange' },
|
|
{ keys: [`${alt}+\u2193`], actionKey: 'nextFile' },
|
|
{ keys: [`${alt}+\u2191`], actionKey: 'previousFile' },
|
|
{ keys: [`${mod}+Y`], actionKey: 'acceptChange' },
|
|
{ keys: [`${mod}+N`], actionKey: 'rejectChange' },
|
|
{ keys: [`${mod}+S`], actionKey: 'saveFile' },
|
|
{ keys: [`${mod}+Z`], actionKey: 'undo' },
|
|
{ keys: [`${mod}+${shift}+Z`], actionKey: 'redo' },
|
|
{ keys: ['?'], actionKey: 'toggleShortcuts' },
|
|
{ keys: ['Esc'], actionKey: 'closeDialog' },
|
|
] as const;
|
|
|
|
export const KeyboardShortcutsHelp = ({
|
|
open,
|
|
onOpenChange,
|
|
}: KeyboardShortcutsHelpProps): React.ReactElement | null => {
|
|
const { t } = useAppTranslation('team');
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="absolute right-4 top-14 z-50 w-64 rounded-lg border border-border bg-surface-overlay p-3 shadow-lg">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="text-xs font-medium text-text">{t('review.shortcuts.title')}</span>
|
|
<button
|
|
onClick={() => onOpenChange(false)}
|
|
className="rounded p-0.5 text-text-muted hover:bg-surface-raised hover:text-text"
|
|
>
|
|
<X className="size-3" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
{shortcuts.map(({ keys, actionKey }) => (
|
|
<div key={actionKey} className="flex items-center justify-between text-xs">
|
|
<span className="text-text-secondary">
|
|
{t(`review.shortcuts.actions.${actionKey}` as const)}
|
|
</span>
|
|
<div className="flex gap-1">
|
|
{keys.map((key) => (
|
|
<kbd
|
|
key={key}
|
|
className="rounded border border-border bg-surface-raised px-1.5 py-0.5 font-mono text-[10px] text-text-muted"
|
|
>
|
|
{key}
|
|
</kbd>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|