phanpy/src/components/menu.jsx

186 lines
5.6 KiB
React
Raw Normal View History

2023-02-16 12:51:54 +03:00
import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
import { useLongPress } from 'use-long-press';
2023-02-12 12:38:50 +03:00
import { useSnapshot } from 'valtio';
2023-02-10 19:05:18 +03:00
import { api } from '../utils/api';
import states from '../utils/states';
import store from '../utils/store';
import Avatar from './avatar';
import Icon from './icon';
2023-03-28 10:59:20 +03:00
import MenuLink from './menu-link';
function NavMenu(props) {
2023-02-12 12:38:50 +03:00
const snapStates = useSnapshot(states);
2023-02-11 14:39:30 +03:00
const { instance, authenticated } = api();
2023-03-28 18:47:20 +03:00
const accounts = store.local.getJSON('accounts') || [];
const currentAccount = accounts.find(
(account) => account.info.id === store.session.get('currentAccount'),
);
const moreThanOneAccount = accounts.length > 1;
// Home = Following
// But when in multi-column mode, Home becomes columns of anything
// User may choose pin or not to pin Following
// If user doesn't pin Following, we show it in the menu
const showFollowing =
2023-04-08 14:25:49 +03:00
(snapStates.settings.shortcutsColumnsMode ||
snapStates.settings.shortcutsViewMode === 'multi-column') &&
!snapStates.shortcuts.find((pin) => pin.type === 'following');
const bindLongPress = useLongPress(
() => {
states.showAccounts = true;
},
{
2023-04-24 16:36:03 +03:00
threshold: 600,
detect: 'touch',
cancelOnMovement: true,
},
);
return (
<Menu
2023-02-10 19:05:18 +03:00
portal={{
target: document.body,
}}
{...props}
overflow="auto"
2023-02-11 01:25:38 +03:00
viewScroll="close"
boundingBoxPadding="8 8 8 8"
menuButton={({ open }) => (
<button
type="button"
class={`button plain nav-menu-button ${
moreThanOneAccount ? 'with-avatar' : ''
} ${open ? 'active' : ''}`}
style={{ position: 'relative' }}
onContextMenu={(e) => {
e.preventDefault();
states.showAccounts = true;
}}
{...bindLongPress()}
>
{moreThanOneAccount && (
<Avatar
url={
currentAccount?.info?.avatar ||
currentAccount?.info?.avatarStatic
}
size="l"
2023-04-10 19:26:43 +03:00
squircle={currentAccount?.info?.bot}
/>
)}
<Icon icon="menu" size={moreThanOneAccount ? 's' : 'l'} />
</button>
)}
>
2023-02-28 10:27:42 +03:00
{!!snapStates.appVersion?.commitHash &&
__COMMIT_HASH__ !== snapStates.appVersion.commitHash && (
<>
<MenuItem
onClick={() => {
const yes = confirm('Reload page now to update?');
if (yes) {
(async () => {
try {
location.reload();
} catch (e) {}
})();
}
}}
>
<Icon icon="sparkles" size="l" />{' '}
<span>New update available</span>
</MenuItem>
<MenuDivider />
</>
)}
<MenuLink to="/">
<Icon icon="home" size="l" /> <span>Home</span>
</MenuLink>
2023-02-11 14:39:30 +03:00
{authenticated && (
<>
{showFollowing && (
<MenuLink to="/following">
<Icon icon="following" size="l" /> <span>Following</span>
</MenuLink>
)}
2023-04-06 14:32:26 +03:00
<MenuLink to="/mentions">
<Icon icon="at" size="l" /> <span>Mentions</span>
</MenuLink>
2023-02-11 14:39:30 +03:00
<MenuLink to="/notifications">
<Icon icon="notification" size="l" /> <span>Notifications</span>
2023-02-12 12:38:50 +03:00
{snapStates.notificationsShowNew && (
<sup title="New" style={{ opacity: 0.5 }}>
{' '}
&bull;
</sup>
)}
2023-02-11 14:39:30 +03:00
</MenuLink>
<MenuDivider />
<MenuLink to="/l">
<Icon icon="list" size="l" /> <span>Lists</span>
</MenuLink>
<MenuLink to="/ft">
<Icon icon="hashtag" size="l" /> <span>Followed Hashtags</span>
</MenuLink>
<MenuLink to="/b">
<Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
</MenuLink>
<MenuLink to="/f">
<Icon icon="heart" size="l" /> <span>Favourites</span>
</MenuLink>
</>
)}
2023-02-10 19:05:18 +03:00
<MenuDivider />
<MenuLink to={`/search`}>
2023-02-10 19:05:18 +03:00
<Icon icon="search" size="l" /> <span>Search</span>
</MenuLink>
2023-02-10 19:05:18 +03:00
<MenuLink to={`/${instance}/p/l`}>
<Icon icon="group" size="l" /> <span>Local</span>
</MenuLink>
<MenuLink to={`/${instance}/p`}>
<Icon icon="earth" size="l" /> <span>Federated</span>
</MenuLink>
2023-04-05 20:14:38 +03:00
<MenuLink to={`/${instance}/trending`}>
<Icon icon="chart" size="l" /> <span>Trending</span>
</MenuLink>
2023-02-11 14:39:30 +03:00
{authenticated && (
<>
<MenuDivider />
{currentAccount?.info?.id && (
<MenuLink to={`/${instance}/a/${currentAccount.info.id}`}>
<Icon icon="user" size="l" /> <span>Profile</span>
</MenuLink>
)}
<MenuItem
onClick={() => {
states.showAccounts = true;
}}
>
<Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
</MenuItem>
2023-02-16 12:51:54 +03:00
<MenuItem
onClick={() => {
states.showShortcutsSettings = true;
}}
>
<Icon icon="shortcut" size="l" />{' '}
<span>Shortcuts Settings&hellip;</span>
</MenuItem>
2023-02-11 14:39:30 +03:00
<MenuItem
onClick={() => {
states.showSettings = true;
}}
>
2023-02-16 12:51:54 +03:00
<Icon icon="gear" size="l" /> <span>Settings&hellip;</span>
2023-02-11 14:39:30 +03:00
</MenuItem>
</>
)}
</Menu>
);
}
export default NavMenu;