2023-09-06 17:54:05 +03:00
|
|
|
import './keyboard-shortcuts-help.css';
|
|
|
|
|
2023-09-09 09:09:50 +03:00
|
|
|
import { memo } from 'preact/compat';
|
2023-09-06 17:54:05 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
|
|
import { useSnapshot } from 'valtio';
|
|
|
|
|
|
|
|
import states from '../utils/states';
|
|
|
|
|
|
|
|
import Icon from './icon';
|
|
|
|
import Modal from './modal';
|
|
|
|
|
2023-09-09 09:09:50 +03:00
|
|
|
export default memo(function KeyboardShortcutsHelp() {
|
2023-09-06 17:54:05 +03:00
|
|
|
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 && (
|
|
|
|
<Modal
|
|
|
|
class="light"
|
|
|
|
onClick={(e) => {
|
|
|
|
if (e.target === e.currentTarget) {
|
|
|
|
onClose();
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
id="keyboard-shortcuts-help-container"
|
|
|
|
class="sheet"
|
|
|
|
tabindex="-1"
|
|
|
|
ref={escRef}
|
|
|
|
>
|
|
|
|
<button type="button" class="sheet-close" onClick={onClose}>
|
|
|
|
<Icon icon="x" />
|
|
|
|
</button>
|
|
|
|
<header>
|
|
|
|
<h2>Keyboard shortcuts</h2>
|
|
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<table>
|
|
|
|
{[
|
|
|
|
{
|
|
|
|
action: 'Keyboard shortcuts help',
|
|
|
|
keys: <kbd>?</kbd>,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Next post',
|
|
|
|
keys: <kbd>j</kbd>,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Previous post',
|
|
|
|
keys: <kbd>k</kbd>,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Skip carousel to next post',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>j</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Skip carousel to previous post',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>k</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2023-09-07 11:17:52 +03:00
|
|
|
action: 'Open post details',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Enter</kbd> or <kbd>o</kbd>
|
|
|
|
</>
|
|
|
|
),
|
2023-09-06 17:54:05 +03:00
|
|
|
},
|
|
|
|
{
|
2023-12-20 11:42:36 +03:00
|
|
|
action: (
|
|
|
|
<>
|
|
|
|
Expand content warning or
|
|
|
|
<br />
|
|
|
|
toggle expanded/collapsed thread
|
|
|
|
</>
|
|
|
|
),
|
2023-09-07 11:17:52 +03:00
|
|
|
keys: <kbd>x</kbd>,
|
2023-09-06 17:54:05 +03:00
|
|
|
},
|
|
|
|
{
|
2023-09-07 11:17:52 +03:00
|
|
|
action: 'Close post or dialogs',
|
2023-09-06 17:54:05 +03:00
|
|
|
keys: (
|
|
|
|
<>
|
2023-09-07 11:17:52 +03:00
|
|
|
<kbd>Esc</kbd> or <kbd>Backspace</kbd>
|
2023-09-06 17:54:05 +03:00
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2023-09-07 11:17:52 +03:00
|
|
|
action: 'Focus column in multi-column mode',
|
2023-09-06 17:54:05 +03:00
|
|
|
keys: (
|
|
|
|
<>
|
2023-09-07 11:17:52 +03:00
|
|
|
<kbd>1</kbd> to <kbd>9</kbd>
|
2023-09-06 17:54:05 +03:00
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
2023-09-07 11:17:52 +03:00
|
|
|
action: 'Compose new post',
|
|
|
|
keys: <kbd>c</kbd>,
|
2023-09-06 17:54:05 +03:00
|
|
|
},
|
2023-11-06 15:15:13 +03:00
|
|
|
{
|
|
|
|
action: 'Compose new post (new window)',
|
|
|
|
className: 'insignificant',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>c</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
2023-09-06 17:54:05 +03:00
|
|
|
{
|
2023-09-07 11:17:52 +03:00
|
|
|
action: 'Send post',
|
2023-09-06 17:54:05 +03:00
|
|
|
keys: (
|
|
|
|
<>
|
2023-09-07 11:17:52 +03:00
|
|
|
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
|
|
|
|
<kbd>Enter</kbd>
|
2023-09-06 17:54:05 +03:00
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
2023-09-07 11:17:52 +03:00
|
|
|
{
|
|
|
|
action: 'Search',
|
|
|
|
keys: <kbd>/</kbd>,
|
|
|
|
},
|
2023-09-08 10:32:55 +03:00
|
|
|
{
|
|
|
|
action: 'Reply',
|
|
|
|
keys: <kbd>r</kbd>,
|
|
|
|
},
|
2023-11-06 15:15:13 +03:00
|
|
|
{
|
|
|
|
action: 'Reply (new window)',
|
|
|
|
className: 'insignificant',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>r</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
2023-09-08 10:32:55 +03:00
|
|
|
{
|
2023-10-25 08:55:12 +03:00
|
|
|
action: 'Like (favourite)',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>l</kbd> or <kbd>f</kbd>
|
|
|
|
</>
|
|
|
|
),
|
2023-09-08 10:32:55 +03:00
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Boost',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>b</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
action: 'Bookmark',
|
|
|
|
keys: <kbd>d</kbd>,
|
|
|
|
},
|
2023-10-31 15:50:27 +03:00
|
|
|
{
|
|
|
|
action: 'Toggle Cloak mode',
|
|
|
|
keys: (
|
|
|
|
<>
|
|
|
|
<kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
|
|
|
|
</>
|
|
|
|
),
|
|
|
|
},
|
2023-11-06 15:15:13 +03:00
|
|
|
].map(({ action, className, keys }) => (
|
2023-09-06 17:54:05 +03:00
|
|
|
<tr key={action}>
|
2023-11-06 15:15:13 +03:00
|
|
|
<th class={className}>{action}</th>
|
2023-09-06 17:54:05 +03:00
|
|
|
<td>{keys}</td>
|
|
|
|
</tr>
|
|
|
|
))}
|
|
|
|
</table>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</Modal>
|
|
|
|
)
|
|
|
|
);
|
2023-09-09 09:09:50 +03:00
|
|
|
});
|