this repo has no description
Keyboard shortcuts help sheet
+175
-2
+4
-1
src/app.jsx
+4
-1
src/app.jsx
···
23
23
import ComposeButton from './components/compose-button';
24
24
import Drafts from './components/drafts';
25
25
import { ICONS } from './components/icon';
26
+
import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
26
27
import Loader from './components/loader';
27
28
import MediaModal from './components/media-modal';
28
29
import Modal from './components/modal';
···
192
193
snapStates.showAccount ||
193
194
snapStates.showDrafts ||
194
195
snapStates.showMediaModal ||
195
-
snapStates.showShortcutsSettings;
196
+
snapStates.showShortcutsSettings ||
197
+
snapStates.showKeyboardShortcutsHelp;
196
198
useEffect(() => {
197
199
if (!showModal) focusDeck();
198
200
}, [showModal]);
···
433
435
<NotificationService />
434
436
<BackgroundService isLoggedIn={isLoggedIn} />
435
437
<SearchCommand onClose={focusDeck} />
438
+
<KeyboardShortcutsHelp />
436
439
</>
437
440
);
438
441
}
+1
src/components/icon.jsx
+1
src/components/icon.jsx
···
97
97
clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
98
98
'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
99
99
'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
100
+
keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
100
101
};
101
102
102
103
function Icon({
+22
src/components/keyboard-shortcuts-help.css
+22
src/components/keyboard-shortcuts-help.css
···
1
+
#keyboard-shortcuts-help-container {
2
+
table {
3
+
th {
4
+
font-weight: normal;
5
+
text-align: start;
6
+
padding: 0.25em 0;
7
+
line-height: 1;
8
+
}
9
+
td {
10
+
padding: 0.25em 1em;
11
+
}
12
+
}
13
+
14
+
kbd {
15
+
border-radius: 4px;
16
+
display: inline-block;
17
+
padding: 0.3em;
18
+
line-height: 1;
19
+
border: 1px solid var(--outline-color);
20
+
background-color: var(--bg-faded-color);
21
+
}
22
+
}
+136
src/components/keyboard-shortcuts-help.jsx
+136
src/components/keyboard-shortcuts-help.jsx
···
1
+
import './keyboard-shortcuts-help.css';
2
+
3
+
import { useHotkeys } from 'react-hotkeys-hook';
4
+
import { useSnapshot } from 'valtio';
5
+
6
+
import states from '../utils/states';
7
+
8
+
import Icon from './icon';
9
+
import Modal from './modal';
10
+
11
+
export default function KeyboardShortcutsHelp() {
12
+
const snapStates = useSnapshot(states);
13
+
14
+
function onClose() {
15
+
states.showKeyboardShortcutsHelp = false;
16
+
}
17
+
18
+
useHotkeys(
19
+
'?, shift+?',
20
+
(e) => {
21
+
console.log('help');
22
+
states.showKeyboardShortcutsHelp = true;
23
+
},
24
+
{
25
+
ignoreEventWhen: (e) => {
26
+
const hasModal = !!document.querySelector('#modal-container > *');
27
+
return hasModal;
28
+
},
29
+
},
30
+
);
31
+
32
+
const escRef = useHotkeys('esc', onClose, []);
33
+
34
+
return (
35
+
!!snapStates.showKeyboardShortcutsHelp && (
36
+
<Modal
37
+
class="light"
38
+
onClick={(e) => {
39
+
if (e.target === e.currentTarget) {
40
+
onClose();
41
+
}
42
+
}}
43
+
>
44
+
<div
45
+
id="keyboard-shortcuts-help-container"
46
+
class="sheet"
47
+
tabindex="-1"
48
+
ref={escRef}
49
+
>
50
+
<button type="button" class="sheet-close" onClick={onClose}>
51
+
<Icon icon="x" />
52
+
</button>
53
+
<header>
54
+
<h2>Keyboard shortcuts</h2>
55
+
</header>
56
+
<main>
57
+
<table>
58
+
{[
59
+
{
60
+
action: 'Keyboard shortcuts help',
61
+
keys: <kbd>?</kbd>,
62
+
},
63
+
{
64
+
action: 'Next post',
65
+
keys: <kbd>j</kbd>,
66
+
},
67
+
{
68
+
action: 'Previous post',
69
+
keys: <kbd>k</kbd>,
70
+
},
71
+
{
72
+
action: 'Skip carousel to next post',
73
+
keys: (
74
+
<>
75
+
<kbd>Shift</kbd> + <kbd>j</kbd>
76
+
</>
77
+
),
78
+
},
79
+
{
80
+
action: 'Skip carousel to previous post',
81
+
keys: (
82
+
<>
83
+
<kbd>Shift</kbd> + <kbd>k</kbd>
84
+
</>
85
+
),
86
+
},
87
+
{
88
+
action: 'Search',
89
+
keys: <kbd>/</kbd>,
90
+
},
91
+
{
92
+
action: 'Compose new post',
93
+
keys: <kbd>c</kbd>,
94
+
},
95
+
{
96
+
action: 'Send post',
97
+
keys: (
98
+
<>
99
+
<kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
100
+
<kbd>Enter</kbd>
101
+
</>
102
+
),
103
+
},
104
+
{
105
+
action: 'Open post details',
106
+
keys: (
107
+
<>
108
+
<kbd>Enter</kbd> or <kbd>o</kbd>
109
+
</>
110
+
),
111
+
},
112
+
{
113
+
action: 'Toggle expanded/collapsed thread',
114
+
keys: <kbd>x</kbd>,
115
+
},
116
+
{
117
+
action: 'Close post or dialogs',
118
+
keys: (
119
+
<>
120
+
<kbd>Esc</kbd> or <kbd>Backspace</kbd>
121
+
</>
122
+
),
123
+
},
124
+
].map(({ action, keys }) => (
125
+
<tr key={action}>
126
+
<th>{action}</th>
127
+
<td>{keys}</td>
128
+
</tr>
129
+
))}
130
+
</table>
131
+
</main>
132
+
</div>
133
+
</Modal>
134
+
)
135
+
);
136
+
}
+2
-1
src/index.css
+2
-1
src/index.css
+2
src/utils/states.js
+2
src/utils/states.js
···
38
38
showDrafts: false,
39
39
showMediaModal: false,
40
40
showShortcutsSettings: false,
41
+
showKeyboardShortcutsHelp: false,
41
42
// Shortcuts
42
43
shortcuts: store.account.get('shortcuts') ?? [],
43
44
// Settings
···
137
138
states.showDrafts = false;
138
139
states.showMediaModal = false;
139
140
states.showShortcutsSettings = false;
141
+
states.showKeyboardShortcutsHelp = false;
140
142
}
141
143
142
144
export function statusKey(id, instance) {