Newer
Older
import LineDivider from "../../ui/LineDivider";
import { mapChannelWithUnread } from "./common";
import styled, { css } from "styled-components";
import ServerIcon from "../../common/ServerIcon";
import { Children } from "../../../types/Preact";
import { Plus } from "@styled-icons/boxicons-regular";
import { connectState } from "../../../redux/connector";
import { useLocation, useParams } from "react-router-dom";
import { Unreads } from "../../../redux/reducers/unreads";
import ConditionalLink from "../../../lib/ConditionalLink";
import { Channel, Servers } from "revolt.js/dist/api/objects";
import { LastOpened } from "../../../redux/reducers/last_opened";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
import logoSVG from '../../../assets/logo.svg';
import Tooltip from "../../common/Tooltip";
function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
return (
<svg
width={size}
height={size}
aria-hidden="true"
viewBox="0 0 32 32"
>
<foreignObject x="0" y="0" width="32" height="32">
{ children }
</foreignObject>
{unread === 'unread' && (
<circle
cx="27"
cy="27"
r="5"
fill={"white"}
/>
)}
{unread === 'mention' && (
<circle
cx="27"
cy="27"
r="5"
fill={"red"}
/>
)}
</svg>
)
}
const ServersBase = styled.div`
${ isTouchscreenDevice && css`
padding-bottom: 50px;
` }
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
`;
const ServerList = styled.div`
flex-grow: 1;
display: flex;
overflow-y: scroll;
padding-bottom: 48px;
flex-direction: column;
border-inline-end: 2px solid var(--sidebar-active);
scrollbar-width: none;
> :first-child > svg {
margin: 6px 0 6px 4px;
}
&::-webkit-scrollbar {
width: 0px;
}
`;
const ServerEntry = styled.div<{ active: boolean, invert?: boolean }>`
height: 44px;
padding: 4px;
margin: 2px 0 2px 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
img {
width: 32px;
height: 32px;
}
${ props => props.active && css`
background: var(--sidebar-active);
` }
${ props => props.active && props.invert && css`
img {
filter: saturate(0) brightness(10);
}
` }
`;
interface Props {
unreads: Unreads;
export function ServerListSidebar({ unreads, lastOpened }: Props) {
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
const ctx = useForceUpdate();
const activeServers = useServers(undefined, ctx) as Servers.Server[];
const channels = (useChannels(undefined, ctx) as Channel[])
.map(x => mapChannelWithUnread(x, unreads));
const unreadChannels = channels.filter(x => x.unread)
.map(x => x._id);
const servers = activeServers.map(server => {
let alertCount = 0;
for (let id of server.channels) {
let channel = channels.find(x => x._id === id);
if (channel?.alertCount) {
alertCount += channel.alertCount;
}
}
return {
...server,
unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ?
( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined,
alertCount
}
});
const path = useLocation().pathname;
const { server: server_id } = useParams<{ server?: string }>();
const server = servers.find(x => x!._id == server_id);
let homeUnread: 'mention' | 'unread' | undefined;
let alertCount = 0;
for (let x of channels) {
if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) {
homeUnread = 'unread';
alertCount += x.alertCount ?? 0;
}
}
if (alertCount > 0) homeUnread = 'mention';
const homeActive = typeof server === 'undefined' && !path.startsWith('/invite');
<ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
<ServerEntry invert active={homeActive}>
<img src={logoSVG} />
servers.map(entry => {
const active = entry!._id === server?._id;
const id = lastOpened[entry!._id];
return (
<ConditionalLink active={active} to={`/server/${entry!._id}` + (id ? `/channel/${id}` : '')}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
<Tooltip content={entry.name} placement="right">
<Icon size={36} unread={entry.unread}>
<ServerIcon size={32} target={entry} />
</Icon>
</Tooltip>
</ServerEntry>
</ConditionalLink>
)
})
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
<PaintCounter small />
</ServerList>
</ServersBase>
)
}
export default connectState(
ServerListSidebar,
state => {
return {
unreads: state.unreads,
lastOpened: state.lastOpened