pl-fe: Allow more hotkeys when unauthenticated

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-10-10 22:51:31 +02:00
parent 4d1231387d
commit c76db99fc9
2 changed files with 216 additions and 191 deletions

View file

@ -1,3 +1,4 @@
import clsx from 'clsx';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -12,8 +13,8 @@ const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
</kbd>
);
const TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<td className='px-2 pb-3'>
const TableCell: React.FC<{ className?: string; children: React.ReactNode }> = ({ className, children }) => (
<td className={clsx(className, 'px-2 pb-3')}>
{children}
</td>
);
@ -21,6 +22,111 @@ const TableCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
const features = useFeatures();
const hotkeys = [
{
key: <Hotkey>r</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' />,
},
{
key: <Hotkey>m</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' />,
},
{
key: <Hotkey>p</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" />,
},
{
key: <Hotkey>f</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' />,
},
features.emojiReacts && {
key: <Hotkey>e</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' />,
},
{
key: <Hotkey>b</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' />,
},
{
key: <><Hotkey>enter</Hotkey>, <Hotkey>o</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' />,
},
{
key: <Hotkey>a</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' />,
},
features.spoilers && {
key: <Hotkey>x</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' />,
},
features.spoilers && {
key: <Hotkey>h</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' />,
},
{
key: <><Hotkey>up</Hotkey>, <Hotkey>k</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' />,
},
{
key: <><Hotkey>down</Hotkey>, <Hotkey>j</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' />,
},
{
key: <Hotkey>n</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to open the compose textarea' />,
},
{
key: <><Hotkey>alt</Hotkey> + <Hotkey>n</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' />,
},
{
key: <Hotkey>backspace</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' />,
},
{
key: <><Hotkey>s</Hotkey>, <Hotkey>/</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' />,
},
{
key: <Hotkey>esc</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>h</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>n</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications list' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>f</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>p</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>b</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' />,
},
{
key: <><Hotkey>g</Hotkey> + <Hotkey>m</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' />,
},
features.followRequests && {
key: <><Hotkey>g</Hotkey> + <Hotkey>r</Hotkey></>,
label: <FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' />,
},
{
key: <Hotkey>?</Hotkey>,
label: <FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' />,
},
].filter(hotkey => hotkey !== false);
const columnSize = Math.ceil(hotkeys.length / 3);
return (
<Modal
title={<FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' />}
@ -35,40 +141,12 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
</tr>
</thead>
<tbody>
<tr>
<TableCell><Hotkey>r</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>m</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>p</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.profile' defaultMessage="to open author's profile" /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>f</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to like' /></TableCell>
</tr>
{features.emojiReacts && (
<tr>
<TableCell><Hotkey>e</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.react' defaultMessage='to react' /></TableCell>
{hotkeys.slice(0, columnSize).map((hotkey, i) => (
<tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell>
</tr>
)}
<tr>
<TableCell><Hotkey>b</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to repost' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>enter</Hotkey>, <Hotkey>o</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open post' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>a</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.open_media' defaultMessage='to open media' /></TableCell>
</tr>
))}
</tbody>
</table>
<table>
@ -78,46 +156,12 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
</tr>
</thead>
<tbody>
{features.spoilers && (
<tr>
<TableCell><Hotkey>x</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.toggle_hidden' defaultMessage='to show/hide text behind CW' /></TableCell>
{hotkeys.slice(columnSize, columnSize * 2).map((hotkey, i) => (
<tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell>
</tr>
)}
{features.spoilers && (
<tr>
<TableCell><Hotkey>h</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.toggle_sensitivity' defaultMessage='to show/hide media' /></TableCell>
</tr>
)}
<tr>
<TableCell><Hotkey>up</Hotkey>, <Hotkey>k</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>down</Hotkey>, <Hotkey>j</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>n</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to open the compose textarea' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>alt</Hotkey> + <Hotkey>n</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a new post' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>backspace</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>s</Hotkey>, <Hotkey>/</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>esc</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></TableCell>
</tr>
))}
</tbody>
</table>
<table>
@ -127,40 +171,12 @@ const HotkeysModal: React.FC<BaseModalProps> = ({ onClose }) => {
</tr>
</thead>
<tbody>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>h</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.home' defaultMessage='to open home timeline' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>n</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.notifications' defaultMessage='to open notifications list' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>f</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.favourites' defaultMessage='to open likes list' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>p</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.my_profile' defaultMessage='to open your profile' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>b</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.blocked' defaultMessage='to open blocked users list' /></TableCell>
</tr>
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>m</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.muted' defaultMessage='to open muted users list' /></TableCell>
</tr>
{features.followRequests && (
<tr>
<TableCell><Hotkey>g</Hotkey> + <Hotkey>r</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.requests' defaultMessage='to open follow requests list' /></TableCell>
{hotkeys.slice(columnSize * 2).map((hotkey, i) => (
<tr key={i}>
<TableCell className='whitespace-nowrap'>{hotkey.key}</TableCell>
<TableCell>{hotkey.label}</TableCell>
</tr>
)}
<tr>
<TableCell><Hotkey>?</Hotkey></TableCell>
<TableCell><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></TableCell>
</tr>
))}
</tbody>
</table>
</div>

View file

@ -1,9 +1,9 @@
import React, { useRef } from 'react';
import React, { useMemo, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import { resetCompose } from 'pl-fe/actions/compose';
import { FOCUS_EDITOR_COMMAND } from 'pl-fe/features/compose/editor/plugins/focus-plugin';
import { useAppSelector, useAppDispatch, useOwnAccount } from 'pl-fe/hooks';
import { useAppDispatch, useOwnAccount } from 'pl-fe/hooks';
import { useModalsStore } from 'pl-fe/stores';
import { HotKeys } from '../components/hotkeys';
@ -46,111 +46,120 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
const history = useHistory();
const dispatch = useAppDispatch();
const me = useAppSelector(state => state.me);
const { account } = useOwnAccount();
const { openModal } = useModalsStore();
const handleHotkeyNew = (e?: KeyboardEvent) => {
e?.preventDefault();
const element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
if (element) {
((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
} else {
openModal('COMPOSE');
}
};
const handleHotkeySearch = (e?: KeyboardEvent) => {
e?.preventDefault();
if (!node.current) return;
const element = node.current.querySelector('input#search') as HTMLInputElement;
if (element?.checkVisibility()) {
element.focus();
} else {
history.push('/search');
}
};
const handleHotkeyForceNew = (e?: KeyboardEvent) => {
handleHotkeyNew(e);
dispatch(resetCompose());
};
const handleHotkeyBack = () => {
if (window.history && window.history.length === 1) {
history.push('/');
} else {
history.goBack();
}
};
const setHotkeysRef: React.LegacyRef<typeof HotKeys> = (c: any) => {
hotkeys.current = c;
if (!me || !hotkeys.current) return;
if (!account || !hotkeys.current) return;
// @ts-ignore
hotkeys.current.__mousetrap__.stopCallback = (_e, element) =>
['TEXTAREA', 'SELECT', 'INPUT', 'EM-EMOJI-PICKER'].includes(element.tagName) || !!element.closest('[contenteditable]');
};
const handleHotkeyToggleHelp = () => {
openModal('HOTKEYS');
};
const handlers = useMemo(() => {
const handleHotkeyNew = (e?: KeyboardEvent) => {
e?.preventDefault();
const handleHotkeyGoToHome = () => {
history.push('/');
};
const element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
const handleHotkeyGoToNotifications = () => {
history.push('/notifications');
};
if (element) {
((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
} else {
openModal('COMPOSE');
}
};
const handleHotkeyGoToFavourites = () => {
if (!account) return;
history.push(`/@${account.username}/favorites`);
};
const handleHotkeySearch = (e?: KeyboardEvent) => {
e?.preventDefault();
if (!node.current) return;
const handleHotkeyGoToProfile = () => {
if (!account) return;
history.push(`/@${account.username}`);
};
const element = node.current.querySelector('input#search') as HTMLInputElement;
const handleHotkeyGoToBlocked = () => {
history.push('/blocks');
};
if (element?.checkVisibility()) {
element.focus();
} else {
history.push('/search');
}
};
const handleHotkeyGoToMuted = () => {
history.push('/mutes');
};
const handleHotkeyForceNew = (e?: KeyboardEvent) => {
handleHotkeyNew(e);
dispatch(resetCompose());
};
const handleHotkeyGoToRequests = () => {
history.push('/follow_requests');
};
const handleHotkeyBack = () => {
if (window.history && window.history.length === 1) {
history.push('/');
} else {
history.goBack();
}
};
type HotkeyHandlers = { [key: string]: (keyEvent?: KeyboardEvent) => void };
const handleHotkeyToggleHelp = () => {
openModal('HOTKEYS');
};
const handleHotkeyGoToHome = () => {
history.push('/');
};
const handleHotkeyGoToNotifications = () => {
history.push('/notifications');
};
const handleHotkeyGoToFavourites = () => {
if (!account) return;
history.push(`/@${account.username}/favorites`);
};
const handleHotkeyGoToProfile = () => {
if (!account) return;
history.push(`/@${account.username}`);
};
const handleHotkeyGoToBlocked = () => {
history.push('/blocks');
};
const handleHotkeyGoToMuted = () => {
history.push('/mutes');
};
const handleHotkeyGoToRequests = () => {
history.push('/follow_requests');
};
type HotkeyHandlers = { [key: string]: (keyEvent?: KeyboardEvent) => void };
let handlers: HotkeyHandlers = {
help: handleHotkeyToggleHelp,
search: handleHotkeySearch,
back: handleHotkeyBack,
};
if (account) {
handlers = {
...handlers,
new: handleHotkeyNew,
forceNew: handleHotkeyForceNew,
goToHome: handleHotkeyGoToHome,
goToNotifications: handleHotkeyGoToNotifications,
goToFavourites: handleHotkeyGoToFavourites,
goToProfile: handleHotkeyGoToProfile,
goToBlocked: handleHotkeyGoToBlocked,
goToMuted: handleHotkeyGoToMuted,
goToRequests: handleHotkeyGoToRequests,
};
}
return handlers;
}, [account?.id]);
const handlers: HotkeyHandlers = {
help: handleHotkeyToggleHelp,
new: handleHotkeyNew,
search: handleHotkeySearch,
forceNew: handleHotkeyForceNew,
back: handleHotkeyBack,
goToHome: handleHotkeyGoToHome,
goToNotifications: handleHotkeyGoToNotifications,
goToFavourites: handleHotkeyGoToFavourites,
goToProfile: handleHotkeyGoToProfile,
goToBlocked: handleHotkeyGoToBlocked,
goToMuted: handleHotkeyGoToMuted,
goToRequests: handleHotkeyGoToRequests,
};
return (
<HotKeys keyMap={keyMap} handlers={me ? handlers : undefined} ref={setHotkeysRef} attach={window} focused>
<HotKeys keyMap={keyMap} handlers={handlers} ref={setHotkeysRef} attach={window} focused>
{children}
</HotKeys>
);