111 lines
5.1 KiB
TypeScript
111 lines
5.1 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Flex, Menu, Text } from "@mantine/core";
|
|
import { IconBuildingBroadcastTower, IconDoorExit, IconEdit, IconNote, IconPalette, IconPencil, IconUser, IconUsersGroup } from "@tabler/icons-react";
|
|
import { DialogsSearch } from "../DialogsSearch/DialogsSearch";
|
|
import { useLogout } from "@/app/providers/AccountProvider/useLogout";
|
|
import { useHotkeys } from "@mantine/hooks";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
|
import { DialogHeaderText } from "../DialogHeaderText/DialogHeaderText";
|
|
|
|
export function DialogsPanelHeader() {
|
|
const colors = useRosettaColors();
|
|
const logout = useLogout();
|
|
const navigate = useNavigate();
|
|
const publicKey = usePublicKey();
|
|
const viewKeys = window.platform == 'darwin' ? '⌘' : 'Ctrl+';
|
|
const triggerKeys = window.platform == 'darwin' ? 'mod' : 'Ctrl';
|
|
|
|
useHotkeys([
|
|
[`${triggerKeys}+L`, () => logout()],
|
|
[`${triggerKeys}+P`, () => navigate('/main/profile/me')],
|
|
], [], true);
|
|
|
|
return (
|
|
<Flex direction={'column'}>
|
|
<Flex direction={'row'} p={'sm'} justify={'space-between'} align={'center'}>
|
|
<Menu withArrow width={150} shadow="md">
|
|
<Menu.Target>
|
|
<IconUser style={{
|
|
cursor: 'pointer'
|
|
}} stroke={1.3} size={20} color={colors.brandColor}></IconUser>
|
|
</Menu.Target>
|
|
<Menu.Dropdown style={{
|
|
userSelect: 'none'
|
|
}} fz={'xs'} fw={500}>
|
|
<Menu.Label>Profile</Menu.Label>
|
|
<Menu.Item
|
|
fz={'xs'}
|
|
onClick={() => navigate('/main/profile/me')}
|
|
leftSection={<IconPencil color={colors.brandColor} size={14} />}
|
|
rightSection={
|
|
<Text size="xs" c="dimmed">
|
|
{viewKeys}P
|
|
</Text>
|
|
}
|
|
>
|
|
Edit
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
fz={'xs'}
|
|
onClick={() => navigate('/main/theme')}
|
|
leftSection={<IconPalette color={colors.brandColor} size={14} />}
|
|
>
|
|
Theme
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
fz={'xs'}
|
|
onClick={logout}
|
|
leftSection={<IconDoorExit color={colors.error} size={14} />}
|
|
rightSection={
|
|
<Text size="xs" c="dimmed">
|
|
{viewKeys}L
|
|
</Text>
|
|
}
|
|
>
|
|
Lock
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
<DialogHeaderText></DialogHeaderText>
|
|
<Menu withArrow width={150} shadow="md">
|
|
<Menu.Target>
|
|
<IconEdit style={{
|
|
cursor: 'pointer'
|
|
}} stroke={1.3} size={22} color={colors.brandColor}></IconEdit>
|
|
</Menu.Target>
|
|
<Menu.Dropdown style={{
|
|
userSelect: 'none'
|
|
}} fz={'xs'} fw={500}>
|
|
<Menu.Label>Write</Menu.Label>
|
|
<Menu.Item
|
|
fz={'xs'}
|
|
onClick={() => navigate('/main/chat/' + publicKey)}
|
|
leftSection={<IconNote color={colors.brandColor} size={14} />}
|
|
>
|
|
Note
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
fz={'xs'}
|
|
onClick={() => navigate('/main/newgroup')}
|
|
leftSection={<IconUsersGroup color={colors.brandColor} size={14} />}
|
|
>
|
|
Group chat
|
|
</Menu.Item>
|
|
<Menu.Item disabled
|
|
fz={'xs'}
|
|
//onClick={() => navigate('/main/chat/' + publicKey)}
|
|
leftSection={<IconBuildingBroadcastTower color={colors.brandColor} size={14} />}
|
|
>
|
|
Channel
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
</Flex>
|
|
<Flex w={'100%'} justify={'center'} align={'center'}
|
|
pl={'sm'} pr={'sm'} pb={'xs'}>
|
|
<DialogsSearch></DialogsSearch>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
} |