this repo has no description
Add r, f, shift+b, d
+89
-3
+20
src/components/keyboard-shortcuts-help.jsx
+20
src/components/keyboard-shortcuts-help.jsx
···
129
129
action: 'Search',
130
130
keys: <kbd>/</kbd>,
131
131
},
132
+
{
133
+
action: 'Reply',
134
+
keys: <kbd>r</kbd>,
135
+
},
136
+
{
137
+
action: 'Favourite',
138
+
keys: <kbd>f</kbd>,
139
+
},
140
+
{
141
+
action: 'Boost',
142
+
keys: (
143
+
<>
144
+
<kbd>Shift</kbd> + <kbd>b</kbd>
145
+
</>
146
+
),
147
+
},
148
+
{
149
+
action: 'Bookmark',
150
+
keys: <kbd>d</kbd>,
151
+
},
132
152
].map(({ action, keys }) => (
133
153
<tr key={action}>
134
154
<th>{action}</th>
+69
-3
src/components/status.jsx
+69
-3
src/components/status.jsx
···
19
19
useRef,
20
20
useState,
21
21
} from 'preact/hooks';
22
+
import { useHotkeys } from 'react-hotkeys-hook';
22
23
import { InView } from 'react-intersection-observer';
23
24
import { useLongPress } from 'use-long-press';
24
25
import useResizeObserver from 'use-resize-observer';
···
621
622
onClick={() => {
622
623
try {
623
624
favouriteStatus();
624
-
if (!isSizeLarge)
625
+
if (!isSizeLarge) {
625
626
showToast(favourited ? 'Unfavourited' : 'Favourited');
627
+
}
626
628
} catch (e) {}
627
629
}}
628
630
>
···
644
646
onClick={() => {
645
647
try {
646
648
bookmarkStatus();
647
-
if (!isSizeLarge)
649
+
if (!isSizeLarge) {
648
650
showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
651
+
}
649
652
} catch (e) {}
650
653
}}
651
654
>
···
832
835
833
836
const showContextMenu = size !== 'l' && !previewMode && !_deleted && !quoted;
834
837
838
+
const hotkeysEnabled = !readOnly && !previewMode;
839
+
const rRef = useHotkeys('r', replyStatus, {
840
+
enabled: hotkeysEnabled,
841
+
});
842
+
const fRef = useHotkeys(
843
+
'f',
844
+
() => {
845
+
try {
846
+
favouriteStatus();
847
+
if (!isSizeLarge) {
848
+
showToast(favourited ? 'Unfavourited' : 'Favourited');
849
+
}
850
+
} catch (e) {}
851
+
},
852
+
{
853
+
enabled: hotkeysEnabled,
854
+
},
855
+
);
856
+
const dRef = useHotkeys(
857
+
'd',
858
+
() => {
859
+
try {
860
+
bookmarkStatus();
861
+
if (!isSizeLarge) {
862
+
showToast(bookmarked ? 'Unbookmarked' : 'Bookmarked');
863
+
}
864
+
} catch (e) {}
865
+
},
866
+
{
867
+
enabled: hotkeysEnabled,
868
+
},
869
+
);
870
+
const bRef = useHotkeys(
871
+
'shift+b',
872
+
() => {
873
+
(async () => {
874
+
try {
875
+
const done = await confirmBoostStatus();
876
+
if (!isSizeLarge && done) {
877
+
showToast(reblogged ? 'Unboosted' : 'Boosted');
878
+
}
879
+
} catch (e) {}
880
+
})();
881
+
},
882
+
{
883
+
enabled: hotkeysEnabled && canBoost,
884
+
},
885
+
);
886
+
835
887
return (
836
888
<article
837
-
ref={statusRef}
889
+
ref={(node) => {
890
+
statusRef.current = node;
891
+
// Use parent node if it's in focus
892
+
// Use case: <a><status /></a>
893
+
// When navigating (j/k), the <a> is focused instead of <status />
894
+
// Hotkey binding doesn't bubble up thus this hack
895
+
const nodeRef =
896
+
node?.closest?.(
897
+
'.timeline-item, .timeline-item-alt, .status-link, .status-focus',
898
+
) || node;
899
+
rRef.current = nodeRef;
900
+
fRef.current = nodeRef;
901
+
dRef.current = nodeRef;
902
+
bRef.current = nodeRef;
903
+
}}
838
904
tabindex="-1"
839
905
class={`status ${
840
906
!withinContext && inReplyToId && inReplyToAccount