import './keyboard-shortcuts-help.css'; import { memo } from 'preact/compat'; import { useHotkeys } from 'react-hotkeys-hook'; import { useSnapshot } from 'valtio'; import states from '../utils/states'; import Icon from './icon'; import Modal from './modal'; export default memo(function KeyboardShortcutsHelp() { const snapStates = useSnapshot(states); function onClose() { states.showKeyboardShortcutsHelp = false; } useHotkeys( '?, shift+?', (e) => { console.log('help'); states.showKeyboardShortcutsHelp = true; }, { ignoreEventWhen: (e) => { const hasModal = !!document.querySelector('#modal-container > *'); return hasModal; }, }, ); const escRef = useHotkeys('esc', onClose, []); return ( !!snapStates.showKeyboardShortcutsHelp && ( { if (e.target === e.currentTarget) { onClose(); } }} >

Keyboard shortcuts

{[ { action: 'Keyboard shortcuts help', keys: ?, }, { action: 'Next post', keys: j, }, { action: 'Previous post', keys: k, }, { action: 'Skip carousel to next post', keys: ( <> Shift + j ), }, { action: 'Skip carousel to previous post', keys: ( <> Shift + k ), }, { action: 'Open post details', keys: ( <> Enter or o ), }, { action: ( <> Expand content warning or
toggle expanded/collapsed thread ), keys: x, }, { action: 'Close post or dialogs', keys: ( <> Esc or Backspace ), }, { action: 'Focus column in multi-column mode', keys: ( <> 1 to 9 ), }, { action: 'Compose new post', keys: c, }, { action: 'Compose new post (new window)', className: 'insignificant', keys: ( <> Shift + c ), }, { action: 'Send post', keys: ( <> Ctrl + Enter or +{' '} Enter ), }, { action: 'Search', keys: /, }, { action: 'Reply', keys: r, }, { action: 'Reply (new window)', className: 'insignificant', keys: ( <> Shift + r ), }, { action: 'Like (favourite)', keys: ( <> l or f ), }, { action: 'Boost', keys: ( <> Shift + b ), }, { action: 'Bookmark', keys: d, }, { action: 'Toggle Cloak mode', keys: ( <> Shift + Alt + k ), }, ].map(({ action, className, keys }) => ( ))}
{action} {keys}
) ); });