revite/src/pages/channels/ChannelHeader.tsx

142 lines
4.4 KiB
TypeScript
Raw Normal View History

import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
2021-07-05 06:23:23 -04:00
import { Notepad, Group } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite";
import { Channel } from "revolt.js/dist/maps/Channels";
import { User } from "revolt.js/dist/maps/Users";
2021-07-05 06:23:23 -04:00
import styled from "styled-components";
import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../context/intermediate/Intermediate";
import { getChannelName } from "../../context/revoltjs/util";
import { useStatusColour } from "../../components/common/user/UserIcon";
2021-07-05 06:23:23 -04:00
import UserStatus from "../../components/common/user/UserStatus";
import Header from "../../components/ui/Header";
import Markdown from "../../components/markdown/Markdown";
import HeaderActions from "./actions/HeaderActions";
2021-06-23 09:52:33 -04:00
export interface ChannelHeaderProps {
2021-07-05 06:25:20 -04:00
channel: Channel;
toggleSidebar?: () => void;
}
const Info = styled.div`
2021-07-05 06:25:20 -04:00
flex-grow: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
2021-07-05 06:25:20 -04:00
display: flex;
gap: 8px;
align-items: center;
2021-07-05 06:25:20 -04:00
* {
display: inline-block;
}
2021-07-05 06:25:20 -04:00
.divider {
height: 20px;
margin: 0 5px;
padding-left: 1px;
background-color: var(--tertiary-background);
}
2021-07-05 06:25:20 -04:00
.status {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-inline-end: 6px;
}
2021-07-05 06:25:20 -04:00
.desc {
cursor: pointer;
margin-top: 2px;
font-size: 0.8em;
font-weight: 400;
color: var(--secondary-foreground);
> * {
pointer-events: none;
}
2021-07-05 06:25:20 -04:00
}
`;
export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
2021-07-05 06:25:20 -04:00
const { openScreen } = useIntermediate();
const name = getChannelName(channel);
2021-07-29 10:11:21 -04:00
let icon, recipient: User | undefined;
2021-07-05 06:25:20 -04:00
switch (channel.channel_type) {
case "SavedMessages":
icon = <Notepad size={24} />;
break;
case "DirectMessage":
icon = <At size={24} />;
recipient = channel.recipient;
2021-07-05 06:25:20 -04:00
break;
case "Group":
icon = <Group size={24} />;
break;
case "TextChannel":
icon = <Hash size={24} />;
break;
}
2021-07-05 06:25:20 -04:00
return (
<Header placement="primary">
{isTouchscreenDevice && (
<div className="menu">
<Menu size={27} />
</div>
)}
2021-07-05 06:25:20 -04:00
{icon}
<Info>
<span className="name">{name}</span>
{isTouchscreenDevice &&
channel.channel_type === "DirectMessage" && (
<>
<div className="divider" />
<span className="desc">
<div
className="status"
style={{
2021-07-29 10:11:21 -04:00
backgroundColor:
useStatusColour(recipient),
2021-07-05 06:25:20 -04:00
}}
/>
2021-07-29 10:11:21 -04:00
<UserStatus user={recipient} />
2021-07-05 06:25:20 -04:00
</span>
</>
)}
{!isTouchscreenDevice &&
(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") &&
channel.description && (
<>
<div className="divider" />
<span
className="desc"
onClick={() =>
openScreen({
id: "channel_info",
2021-07-29 13:41:01 -04:00
channel,
2021-07-05 06:25:20 -04:00
})
}>
<Markdown
content={
channel.description.split("\n")[0] ?? ""
}
disallowBigEmoji
/>
</span>
</>
)}
</Info>
<HeaderActions channel={channel} toggleSidebar={toggleSidebar} />
</Header>
);
2021-07-29 10:11:21 -04:00
});