2023-02-16 12:51:54 +03:00
|
|
|
import './shortcuts.css';
|
|
|
|
|
|
|
|
import { Menu, MenuItem } from '@szhsin/react-menu';
|
2023-10-22 14:24:59 +03:00
|
|
|
import { memo } from 'preact/compat';
|
2023-02-23 16:42:38 +03:00
|
|
|
import { useMemo, useRef } from 'preact/hooks';
|
2023-02-16 12:51:54 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { useSnapshot } from 'valtio';
|
|
|
|
|
|
|
|
import { SHORTCUTS_META } from '../components/shortcuts-settings';
|
2023-04-14 06:13:14 +03:00
|
|
|
import { api } from '../utils/api';
|
2023-02-16 12:51:54 +03:00
|
|
|
import states from '../utils/states';
|
|
|
|
|
|
|
|
import AsyncText from './AsyncText';
|
|
|
|
import Icon from './icon';
|
2023-02-27 19:17:00 +03:00
|
|
|
import Link from './link';
|
2023-03-28 10:59:20 +03:00
|
|
|
import MenuLink from './menu-link';
|
2023-02-16 12:51:54 +03:00
|
|
|
|
|
|
|
function Shortcuts() {
|
2023-04-14 06:13:14 +03:00
|
|
|
const { instance } = api();
|
2023-02-16 12:51:54 +03:00
|
|
|
const snapStates = useSnapshot(states);
|
2023-10-21 12:40:03 +03:00
|
|
|
const { shortcuts, settings } = snapStates;
|
2023-02-16 12:51:54 +03:00
|
|
|
|
|
|
|
if (!shortcuts.length) {
|
|
|
|
return null;
|
|
|
|
}
|
2023-10-21 12:40:03 +03:00
|
|
|
if (
|
2023-11-02 07:59:52 +03:00
|
|
|
settings.shortcutsViewMode === 'multi-column' ||
|
|
|
|
(!settings.shortcutsViewMode && settings.shortcutsColumnsMode)
|
2023-10-21 12:40:03 +03:00
|
|
|
) {
|
|
|
|
return null;
|
|
|
|
}
|
2023-02-16 12:51:54 +03:00
|
|
|
|
|
|
|
const menuRef = useRef();
|
|
|
|
|
2023-02-23 16:42:38 +03:00
|
|
|
const formattedShortcuts = useMemo(
|
|
|
|
() =>
|
|
|
|
shortcuts
|
|
|
|
.map((pin, i) => {
|
|
|
|
const { type, ...data } = pin;
|
|
|
|
if (!SHORTCUTS_META[type]) return null;
|
2023-04-08 15:42:38 +03:00
|
|
|
let { id, path, title, subtitle, icon } = SHORTCUTS_META[type];
|
2023-02-16 12:51:54 +03:00
|
|
|
|
2023-02-27 18:59:41 +03:00
|
|
|
if (typeof id === 'function') {
|
2023-02-28 14:12:16 +03:00
|
|
|
id = id(data, i);
|
2023-02-27 18:59:41 +03:00
|
|
|
}
|
2023-02-23 16:42:38 +03:00
|
|
|
if (typeof path === 'function') {
|
2023-04-14 06:13:14 +03:00
|
|
|
path = path(
|
|
|
|
{
|
|
|
|
...data,
|
|
|
|
instance: data.instance || instance,
|
|
|
|
},
|
|
|
|
i,
|
|
|
|
);
|
2023-02-23 16:42:38 +03:00
|
|
|
}
|
|
|
|
if (typeof title === 'function') {
|
2023-02-28 14:12:16 +03:00
|
|
|
title = title(data, i);
|
2023-02-23 16:42:38 +03:00
|
|
|
}
|
2023-04-08 15:42:38 +03:00
|
|
|
if (typeof subtitle === 'function') {
|
|
|
|
subtitle = subtitle(data, i);
|
|
|
|
}
|
2023-02-23 16:42:38 +03:00
|
|
|
if (typeof icon === 'function') {
|
2023-02-28 14:12:16 +03:00
|
|
|
icon = icon(data, i);
|
2023-02-23 16:42:38 +03:00
|
|
|
}
|
2023-02-16 12:51:54 +03:00
|
|
|
|
2023-02-23 16:42:38 +03:00
|
|
|
return {
|
2023-02-27 18:59:41 +03:00
|
|
|
id,
|
2023-02-23 16:42:38 +03:00
|
|
|
path,
|
|
|
|
title,
|
2023-04-08 15:42:38 +03:00
|
|
|
subtitle,
|
2023-02-23 16:42:38 +03:00
|
|
|
icon,
|
|
|
|
};
|
|
|
|
})
|
|
|
|
.filter(Boolean),
|
|
|
|
[shortcuts],
|
|
|
|
);
|
2023-02-16 12:51:54 +03:00
|
|
|
|
|
|
|
const navigate = useNavigate();
|
|
|
|
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
|
|
|
|
const index = parseInt(handler.keys[0], 10) - 1;
|
|
|
|
if (index < formattedShortcuts.length) {
|
|
|
|
const { path } = formattedShortcuts[index];
|
|
|
|
if (path) {
|
|
|
|
navigate(path);
|
2023-02-19 17:07:15 +03:00
|
|
|
menuRef.current?.closeMenu?.();
|
2023-02-16 12:51:54 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div id="shortcuts">
|
2023-02-27 18:59:41 +03:00
|
|
|
{snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? (
|
|
|
|
<nav class="tab-bar">
|
|
|
|
<ul>
|
2023-04-08 15:42:38 +03:00
|
|
|
{formattedShortcuts.map(
|
|
|
|
({ id, path, title, subtitle, icon }, i) => {
|
|
|
|
return (
|
|
|
|
<li key={i + title}>
|
|
|
|
<Link
|
|
|
|
class={subtitle ? 'has-subtitle' : ''}
|
|
|
|
to={path}
|
|
|
|
onClick={(e) => {
|
|
|
|
if (e.target.classList.contains('is-active')) {
|
|
|
|
e.preventDefault();
|
|
|
|
const page = document.getElementById(`${id}-page`);
|
|
|
|
console.log(id, page);
|
|
|
|
if (page) {
|
|
|
|
page.scrollTop = 0;
|
|
|
|
const updatesButton =
|
|
|
|
page.querySelector('.updates-button');
|
|
|
|
if (updatesButton) {
|
|
|
|
updatesButton.click();
|
|
|
|
}
|
2023-02-27 18:59:41 +03:00
|
|
|
}
|
|
|
|
}
|
2023-04-08 15:42:38 +03:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon icon={icon} size="xl" alt={title} />
|
|
|
|
<span>
|
|
|
|
<AsyncText>{title}</AsyncText>
|
|
|
|
{subtitle && (
|
|
|
|
<>
|
|
|
|
<br />
|
|
|
|
<small>{subtitle}</small>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
</Link>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
)}
|
2023-02-27 18:59:41 +03:00
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
) : (
|
|
|
|
<Menu
|
|
|
|
instanceRef={menuRef}
|
|
|
|
overflow="auto"
|
|
|
|
viewScroll="close"
|
|
|
|
boundingBoxPadding="8 8 8 8"
|
|
|
|
menuClassName="glass-menu shortcuts-menu"
|
2023-06-13 12:46:37 +03:00
|
|
|
gap={8}
|
2023-02-27 18:59:41 +03:00
|
|
|
position="anchor"
|
|
|
|
menuButton={
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
id="shortcuts-button"
|
|
|
|
class="plain"
|
|
|
|
onTransitionStart={(e) => {
|
|
|
|
// Close menu if the button disappears
|
|
|
|
try {
|
|
|
|
const { target } = e;
|
|
|
|
if (getComputedStyle(target).pointerEvents === 'none') {
|
|
|
|
menuRef.current?.closeMenu?.();
|
|
|
|
}
|
|
|
|
} catch (e) {}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Icon icon="shortcut" size="xl" alt="Shortcuts" />
|
|
|
|
</button>
|
|
|
|
}
|
|
|
|
>
|
2023-04-08 15:42:38 +03:00
|
|
|
{formattedShortcuts.map(({ path, title, subtitle, icon }, i) => {
|
2023-02-27 18:59:41 +03:00
|
|
|
return (
|
|
|
|
<MenuLink to={path} key={i + title} class="glass-menu-item">
|
|
|
|
<Icon icon={icon} size="l" />{' '}
|
|
|
|
<span class="menu-grow">
|
2023-04-08 15:42:38 +03:00
|
|
|
<span>
|
|
|
|
<AsyncText>{title}</AsyncText>
|
|
|
|
</span>
|
|
|
|
{subtitle && (
|
|
|
|
<>
|
|
|
|
{' '}
|
|
|
|
<small class="more-insignificant">{subtitle}</small>
|
|
|
|
</>
|
|
|
|
)}
|
2023-02-27 18:59:41 +03:00
|
|
|
</span>
|
|
|
|
<span class="menu-shortcut hide-until-focus-visible">
|
|
|
|
{i + 1}
|
|
|
|
</span>
|
|
|
|
</MenuLink>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</Menu>
|
|
|
|
)}
|
2023-02-16 12:51:54 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2023-10-22 14:24:59 +03:00
|
|
|
export default memo(Shortcuts);
|