this repo has no description
1import './keyboard-shortcuts-help.css';
2
3import { Trans, useLingui } from '@lingui/react/macro';
4import { memo } from 'preact/compat';
5import { useHotkeys } from 'react-hotkeys-hook';
6import { useSnapshot } from 'valtio';
7
8import states from '../utils/states';
9
10import Icon from './icon';
11import Modal from './modal';
12
13export default memo(function KeyboardShortcutsHelp() {
14 const { t } = useLingui();
15 const snapStates = useSnapshot(states);
16
17 function onClose() {
18 states.showKeyboardShortcutsHelp = false;
19 }
20
21 useHotkeys(
22 '?',
23 () => {
24 console.log('help');
25 states.showKeyboardShortcutsHelp = true;
26 },
27 {
28 useKey: true,
29 ignoreEventWhen: (e) => {
30 const isCatchUpPage = /\/catchup/i.test(location.hash);
31 return isCatchUpPage || e.metaKey || e.ctrlKey || e.altKey;
32 // const hasModal = !!document.querySelector('#modal-container > *');
33 // return hasModal;
34 },
35 },
36 );
37
38 return (
39 !!snapStates.showKeyboardShortcutsHelp && (
40 <Modal onClose={onClose}>
41 <div id="keyboard-shortcuts-help-container" class="sheet" tabindex="-1">
42 <button type="button" class="sheet-close" onClick={onClose}>
43 <Icon icon="x" alt={t`Close`} />
44 </button>
45 <header>
46 <h2>
47 <Trans>Keyboard shortcuts</Trans>
48 </h2>
49 </header>
50 <main>
51 <table>
52 <tbody>
53 {[
54 {
55 action: t`Keyboard shortcuts help`,
56 keys: <kbd>?</kbd>,
57 },
58 {
59 action: t`Next post`,
60 keys: <kbd>j</kbd>,
61 },
62 {
63 action: t`Previous post`,
64 keys: <kbd>k</kbd>,
65 },
66 {
67 action: t`Skip carousel to next post`,
68 keys: (
69 <Trans>
70 <kbd>Shift</kbd> + <kbd>j</kbd>
71 </Trans>
72 ),
73 },
74 {
75 action: t`Skip carousel to previous post`,
76 keys: (
77 <Trans>
78 <kbd>Shift</kbd> + <kbd>k</kbd>
79 </Trans>
80 ),
81 },
82 {
83 action: t`Load new posts`,
84 keys: <kbd>.</kbd>,
85 },
86 {
87 action: t`Open post details`,
88 keys: (
89 <Trans>
90 <kbd>Enter</kbd> or <kbd>o</kbd>
91 </Trans>
92 ),
93 },
94 {
95 action: (
96 <Trans>
97 Expand content warning or
98 <br />
99 toggle expanded/collapsed thread
100 </Trans>
101 ),
102 keys: <kbd>x</kbd>,
103 },
104 {
105 action: t`Close post or dialogs`,
106 keys: (
107 <Trans>
108 <kbd>Esc</kbd> or <kbd>Backspace</kbd>
109 </Trans>
110 ),
111 },
112 {
113 action: t`Focus column in multi-column mode`,
114 keys: (
115 <Trans>
116 <kbd>1</kbd> to <kbd>9</kbd>
117 </Trans>
118 ),
119 },
120 {
121 action: t`Focus next column in multi-column mode`,
122 keys: <kbd>]</kbd>,
123 },
124 {
125 action: t`Focus previous column in multi-column mode`,
126 keys: <kbd>[</kbd>,
127 },
128 {
129 action: t`Compose new post`,
130 keys: <kbd>c</kbd>,
131 },
132 {
133 action: t`Compose new post (new window)`,
134 className: 'insignificant',
135 keys: (
136 <Trans>
137 <kbd>Shift</kbd> + <kbd>c</kbd>
138 </Trans>
139 ),
140 },
141 {
142 action: t`Send post`,
143 keys: (
144 <Trans>
145 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
146 <kbd>Enter</kbd>
147 </Trans>
148 ),
149 },
150 {
151 action: t`Search`,
152 keys: <kbd>/</kbd>,
153 },
154 {
155 action: t`Reply`,
156 keys: <kbd>r</kbd>,
157 },
158 {
159 action: t`Reply (new window)`,
160 className: 'insignificant',
161 keys: (
162 <Trans>
163 <kbd>Shift</kbd> + <kbd>r</kbd>
164 </Trans>
165 ),
166 },
167 {
168 action: t`Like (favourite)`,
169 keys: (
170 <Trans>
171 <kbd>l</kbd> or <kbd>f</kbd>
172 </Trans>
173 ),
174 },
175 {
176 action: t`Boost`,
177 keys: (
178 <Trans>
179 <kbd>Shift</kbd> + <kbd>b</kbd>
180 </Trans>
181 ),
182 },
183 {
184 action: t`Bookmark`,
185 keys: <kbd>d</kbd>,
186 },
187 {
188 action: t`Toggle Cloak mode`,
189 keys: (
190 <Trans>
191 <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
192 </Trans>
193 ),
194 },
195 ].map(({ action, className, keys }) => (
196 <tr key={action}>
197 <th class={className}>{action}</th>
198 <td>{keys}</td>
199 </tr>
200 ))}
201 </tbody>
202 </table>
203 </main>
204 </div>
205 </Modal>
206 )
207 );
208});