mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-08 01:45:28 +00:00
Use tabWidth 4 without actual tabs.
This commit is contained in:
Paul
@@ -1,8 +1,8 @@
|
||||
import {
|
||||
Home,
|
||||
UserDetail,
|
||||
Wrench,
|
||||
Notepad,
|
||||
Home,
|
||||
UserDetail,
|
||||
Wrench,
|
||||
Notepad,
|
||||
} from "@styled-icons/boxicons-solid";
|
||||
import { Link, Redirect, useLocation, useParams } from "react-router-dom";
|
||||
import { Channels } from "revolt.js/dist/api/objects";
|
||||
@@ -22,9 +22,9 @@ import { Unreads } from "../../../redux/reducers/unreads";
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import { AppContext } from "../../../context/revoltjs/RevoltClient";
|
||||
import {
|
||||
useDMs,
|
||||
useForceUpdate,
|
||||
useUsers,
|
||||
useDMs,
|
||||
useForceUpdate,
|
||||
useUsers,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
|
||||
import UserHeader from "../../common/user/UserHeader";
|
||||
@@ -37,157 +37,157 @@ import ButtonItem, { ChannelButton } from "../items/ButtonItem";
|
||||
import ConnectionStatus from "../items/ConnectionStatus";
|
||||
|
||||
type Props = {
|
||||
unreads: Unreads;
|
||||
unreads: Unreads;
|
||||
};
|
||||
|
||||
function HomeSidebar(props: Props) {
|
||||
const { pathname } = useLocation();
|
||||
const client = useContext(AppContext);
|
||||
const { channel } = useParams<{ channel: string }>();
|
||||
const { openScreen } = useIntermediate();
|
||||
const { pathname } = useLocation();
|
||||
const client = useContext(AppContext);
|
||||
const { channel } = useParams<{ channel: string }>();
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const ctx = useForceUpdate();
|
||||
const channels = useDMs(ctx);
|
||||
const ctx = useForceUpdate();
|
||||
const channels = useDMs(ctx);
|
||||
|
||||
const obj = channels.find((x) => x?._id === channel);
|
||||
if (channel && !obj) return <Redirect to="/" />;
|
||||
if (obj) useUnreads({ ...props, channel: obj });
|
||||
const obj = channels.find((x) => x?._id === channel);
|
||||
if (channel && !obj) return <Redirect to="/" />;
|
||||
if (obj) useUnreads({ ...props, channel: obj });
|
||||
|
||||
useEffect(() => {
|
||||
if (!channel) return;
|
||||
useEffect(() => {
|
||||
if (!channel) return;
|
||||
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: "home",
|
||||
child: channel,
|
||||
});
|
||||
}, [channel]);
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: "home",
|
||||
child: channel,
|
||||
});
|
||||
}, [channel]);
|
||||
|
||||
const channelsArr = channels
|
||||
.filter((x) => x.channel_type !== "SavedMessages")
|
||||
.map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
const channelsArr = channels
|
||||
.filter((x) => x.channel_type !== "SavedMessages")
|
||||
.map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
|
||||
const users = useUsers(
|
||||
(
|
||||
channelsArr as (
|
||||
| Channels.DirectMessageChannel
|
||||
| Channels.GroupChannel
|
||||
)[]
|
||||
).reduce((prev: any, cur) => [...prev, ...cur.recipients], []),
|
||||
ctx,
|
||||
);
|
||||
const users = useUsers(
|
||||
(
|
||||
channelsArr as (
|
||||
| Channels.DirectMessageChannel
|
||||
| Channels.GroupChannel
|
||||
)[]
|
||||
).reduce((prev: any, cur) => [...prev, ...cur.recipients], []),
|
||||
ctx,
|
||||
);
|
||||
|
||||
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
|
||||
channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
|
||||
|
||||
return (
|
||||
<GenericSidebarBase padding>
|
||||
<UserHeader user={client.user!} />
|
||||
<ConnectionStatus />
|
||||
<GenericSidebarList>
|
||||
{!isTouchscreenDevice && (
|
||||
<>
|
||||
<ConditionalLink active={pathname === "/"} to="/">
|
||||
<ButtonItem active={pathname === "/"}>
|
||||
<Home size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.home" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
<ConditionalLink
|
||||
active={pathname === "/friends"}
|
||||
to="/friends">
|
||||
<ButtonItem
|
||||
active={pathname === "/friends"}
|
||||
alert={
|
||||
typeof users.find(
|
||||
(user) =>
|
||||
user?.relationship ===
|
||||
UsersNS.Relationship.Incoming,
|
||||
) !== "undefined"
|
||||
? "unread"
|
||||
: undefined
|
||||
}>
|
||||
<UserDetail size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.friends" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
</>
|
||||
)}
|
||||
<ConditionalLink
|
||||
active={obj?.channel_type === "SavedMessages"}
|
||||
to="/open/saved">
|
||||
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
|
||||
<Notepad size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.saved" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
{import.meta.env.DEV && (
|
||||
<Link to="/dev">
|
||||
<ButtonItem active={pathname === "/dev"}>
|
||||
<Wrench size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.dev" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</Link>
|
||||
)}
|
||||
<Category
|
||||
text={<Text id="app.main.categories.conversations" />}
|
||||
action={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_group",
|
||||
})
|
||||
}
|
||||
/>
|
||||
{channelsArr.length === 0 && <img src={placeholderSVG} />}
|
||||
{channelsArr.map((x) => {
|
||||
let user;
|
||||
if (x.channel_type === "DirectMessage") {
|
||||
if (!x.active) return null;
|
||||
return (
|
||||
<GenericSidebarBase padding>
|
||||
<UserHeader user={client.user!} />
|
||||
<ConnectionStatus />
|
||||
<GenericSidebarList>
|
||||
{!isTouchscreenDevice && (
|
||||
<>
|
||||
<ConditionalLink active={pathname === "/"} to="/">
|
||||
<ButtonItem active={pathname === "/"}>
|
||||
<Home size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.home" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
<ConditionalLink
|
||||
active={pathname === "/friends"}
|
||||
to="/friends">
|
||||
<ButtonItem
|
||||
active={pathname === "/friends"}
|
||||
alert={
|
||||
typeof users.find(
|
||||
(user) =>
|
||||
user?.relationship ===
|
||||
UsersNS.Relationship.Incoming,
|
||||
) !== "undefined"
|
||||
? "unread"
|
||||
: undefined
|
||||
}>
|
||||
<UserDetail size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.friends" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
</>
|
||||
)}
|
||||
<ConditionalLink
|
||||
active={obj?.channel_type === "SavedMessages"}
|
||||
to="/open/saved">
|
||||
<ButtonItem active={obj?.channel_type === "SavedMessages"}>
|
||||
<Notepad size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.saved" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</ConditionalLink>
|
||||
{import.meta.env.DEV && (
|
||||
<Link to="/dev">
|
||||
<ButtonItem active={pathname === "/dev"}>
|
||||
<Wrench size={20} />
|
||||
<span>
|
||||
<Text id="app.navigation.tabs.dev" />
|
||||
</span>
|
||||
</ButtonItem>
|
||||
</Link>
|
||||
)}
|
||||
<Category
|
||||
text={<Text id="app.main.categories.conversations" />}
|
||||
action={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_group",
|
||||
})
|
||||
}
|
||||
/>
|
||||
{channelsArr.length === 0 && <img src={placeholderSVG} />}
|
||||
{channelsArr.map((x) => {
|
||||
let user;
|
||||
if (x.channel_type === "DirectMessage") {
|
||||
if (!x.active) return null;
|
||||
|
||||
let recipient = client.channels.getRecipient(x._id);
|
||||
user = users.find((x) => x?._id === recipient);
|
||||
let recipient = client.channels.getRecipient(x._id);
|
||||
user = users.find((x) => x?._id === recipient);
|
||||
|
||||
if (!user) {
|
||||
console.warn(
|
||||
`Skipped DM ${x._id} because user was missing.`,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
if (!user) {
|
||||
console.warn(
|
||||
`Skipped DM ${x._id} because user was missing.`,
|
||||
);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ConditionalLink
|
||||
active={x._id === channel}
|
||||
to={`/channel/${x._id}`}>
|
||||
<ChannelButton
|
||||
user={user}
|
||||
channel={x}
|
||||
alert={x.unread}
|
||||
alertCount={x.alertCount}
|
||||
active={x._id === channel}
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
})}
|
||||
<PaintCounter />
|
||||
</GenericSidebarList>
|
||||
</GenericSidebarBase>
|
||||
);
|
||||
return (
|
||||
<ConditionalLink
|
||||
active={x._id === channel}
|
||||
to={`/channel/${x._id}`}>
|
||||
<ChannelButton
|
||||
user={user}
|
||||
channel={x}
|
||||
alert={x.unread}
|
||||
alertCount={x.alertCount}
|
||||
active={x._id === channel}
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
})}
|
||||
<PaintCounter />
|
||||
</GenericSidebarList>
|
||||
</GenericSidebarBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState(
|
||||
HomeSidebar,
|
||||
(state) => {
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
},
|
||||
true,
|
||||
HomeSidebar,
|
||||
(state) => {
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
||||
@@ -15,10 +15,10 @@ import { Unreads } from "../../../redux/reducers/unreads";
|
||||
|
||||
import { useIntermediate } from "../../../context/intermediate/Intermediate";
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useSelf,
|
||||
useServers,
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useSelf,
|
||||
useServers,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
|
||||
import ServerIcon from "../../common/ServerIcon";
|
||||
@@ -31,268 +31,268 @@ import { mapChannelWithUnread } from "./common";
|
||||
import { Children } from "../../../types/Preact";
|
||||
|
||||
function Icon({
|
||||
children,
|
||||
unread,
|
||||
size,
|
||||
children,
|
||||
unread,
|
||||
size,
|
||||
}: {
|
||||
children: Children;
|
||||
unread?: "mention" | "unread";
|
||||
size: number;
|
||||
children: Children;
|
||||
unread?: "mention" | "unread";
|
||||
size: number;
|
||||
}) {
|
||||
return (
|
||||
<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
|
||||
<use href="#serverIndicator" />
|
||||
<foreignObject
|
||||
x="0"
|
||||
y="0"
|
||||
width="32"
|
||||
height="32"
|
||||
mask={unread ? "url(#server)" : undefined}>
|
||||
{children}
|
||||
</foreignObject>
|
||||
{unread === "unread" && (
|
||||
<circle cx="27" cy="5" r="5" fill={"white"} />
|
||||
)}
|
||||
{unread === "mention" && (
|
||||
<circle cx="27" cy="5" r="5" fill={"red"} />
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
return (
|
||||
<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
|
||||
<use href="#serverIndicator" />
|
||||
<foreignObject
|
||||
x="0"
|
||||
y="0"
|
||||
width="32"
|
||||
height="32"
|
||||
mask={unread ? "url(#server)" : undefined}>
|
||||
{children}
|
||||
</foreignObject>
|
||||
{unread === "unread" && (
|
||||
<circle cx="27" cy="5" r="5" fill={"white"} />
|
||||
)}
|
||||
{unread === "mention" && (
|
||||
<circle cx="27" cy="5" r="5" fill={"red"} />
|
||||
)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const ServersBase = styled.div`
|
||||
width: 56px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 56px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
${isTouchscreenDevice &&
|
||||
css`
|
||||
padding-bottom: 50px;
|
||||
`}
|
||||
${isTouchscreenDevice &&
|
||||
css`
|
||||
padding-bottom: 50px;
|
||||
`}
|
||||
`;
|
||||
|
||||
const ServerList = styled.div`
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 48px;
|
||||
flex-direction: column;
|
||||
// border-right: 2px solid var(--accent);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: 48px;
|
||||
flex-direction: column;
|
||||
// border-right: 2px solid var(--accent);
|
||||
|
||||
scrollbar-width: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
> :first-child > svg {
|
||||
margin: 6px 0 6px 4px;
|
||||
}
|
||||
> :first-child > svg {
|
||||
margin: 6px 0 6px 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
> * {
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
> * {
|
||||
// outline: 1px solid red;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
> div {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
border-start-start-radius: 50%;
|
||||
border-end-start-radius: 50%;
|
||||
border-start-start-radius: 50%;
|
||||
border-end-start-radius: 50%;
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.active &&
|
||||
css`
|
||||
background: var(--sidebar-active);
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
`}
|
||||
}
|
||||
${(props) =>
|
||||
props.active &&
|
||||
css`
|
||||
background: var(--sidebar-active);
|
||||
&:active {
|
||||
transform: none;
|
||||
}
|
||||
`}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 6px;
|
||||
height: 46px;
|
||||
span {
|
||||
width: 6px;
|
||||
height: 46px;
|
||||
|
||||
${(props) =>
|
||||
props.active &&
|
||||
css`
|
||||
background-color: var(--sidebar-active);
|
||||
${(props) =>
|
||||
props.active &&
|
||||
css`
|
||||
background-color: var(--sidebar-active);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
// outline: 1px solid blue;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
// outline: 1px solid blue;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
width: 31px;
|
||||
height: 72px;
|
||||
margin-top: -72px;
|
||||
margin-left: -25px;
|
||||
z-index: -1;
|
||||
width: 31px;
|
||||
height: 72px;
|
||||
margin-top: -72px;
|
||||
margin-left: -25px;
|
||||
z-index: -1;
|
||||
|
||||
background-color: var(--background);
|
||||
border-bottom-right-radius: 32px;
|
||||
background-color: var(--background);
|
||||
border-bottom-right-radius: 32px;
|
||||
|
||||
box-shadow: 0 32px 0 0 var(--sidebar-active);
|
||||
}
|
||||
box-shadow: 0 32px 0 0 var(--sidebar-active);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: scaleY(-1) translateY(-118px);
|
||||
}
|
||||
`}
|
||||
}
|
||||
&::after {
|
||||
transform: scaleY(-1) translateY(-118px);
|
||||
}
|
||||
`}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
(!props.active || props.home) &&
|
||||
css`
|
||||
cursor: pointer;
|
||||
`}
|
||||
${(props) =>
|
||||
(!props.active || props.home) &&
|
||||
css`
|
||||
cursor: pointer;
|
||||
`}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
unreads: Unreads;
|
||||
lastOpened: LastOpened;
|
||||
unreads: Unreads;
|
||||
lastOpened: LastOpened;
|
||||
}
|
||||
|
||||
export function ServerListSidebar({ unreads, lastOpened }: Props) {
|
||||
const ctx = useForceUpdate();
|
||||
const self = useSelf(ctx);
|
||||
const activeServers = useServers(undefined, ctx) as Servers.Server[];
|
||||
const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
|
||||
mapChannelWithUnread(x, unreads),
|
||||
);
|
||||
const ctx = useForceUpdate();
|
||||
const self = useSelf(ctx);
|
||||
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 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;
|
||||
}
|
||||
}
|
||||
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,
|
||||
};
|
||||
});
|
||||
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);
|
||||
const path = useLocation().pathname;
|
||||
const { server: server_id } = useParams<{ server?: string }>();
|
||||
const server = servers.find((x) => x!._id == server_id);
|
||||
|
||||
const { openScreen } = useIntermediate();
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
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");
|
||||
if (alertCount > 0) homeUnread = "mention";
|
||||
const homeActive =
|
||||
typeof server === "undefined" && !path.startsWith("/invite");
|
||||
|
||||
return (
|
||||
<ServersBase>
|
||||
<ServerList>
|
||||
<ConditionalLink
|
||||
active={homeActive}
|
||||
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
|
||||
<ServerEntry home active={homeActive}>
|
||||
<div
|
||||
onContextMenu={attachContextMenu("Status")}
|
||||
onClick={() =>
|
||||
homeActive && openContextMenu("Status")
|
||||
}>
|
||||
<Icon size={42} unread={homeUnread}>
|
||||
<UserIcon target={self} size={32} status />
|
||||
</Icon>
|
||||
</div>
|
||||
<span />
|
||||
</ServerEntry>
|
||||
</ConditionalLink>
|
||||
<LineDivider />
|
||||
{servers.map((entry) => {
|
||||
const active = entry!._id === server?._id;
|
||||
const id = lastOpened[entry!._id];
|
||||
return (
|
||||
<ServersBase>
|
||||
<ServerList>
|
||||
<ConditionalLink
|
||||
active={homeActive}
|
||||
to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
|
||||
<ServerEntry home active={homeActive}>
|
||||
<div
|
||||
onContextMenu={attachContextMenu("Status")}
|
||||
onClick={() =>
|
||||
homeActive && openContextMenu("Status")
|
||||
}>
|
||||
<Icon size={42} unread={homeUnread}>
|
||||
<UserIcon target={self} size={32} status />
|
||||
</Icon>
|
||||
</div>
|
||||
<span />
|
||||
</ServerEntry>
|
||||
</ConditionalLink>
|
||||
<LineDivider />
|
||||
{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={42} unread={entry.unread}>
|
||||
<ServerIcon size={32} target={entry} />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
<span />
|
||||
</ServerEntry>
|
||||
</ConditionalLink>
|
||||
);
|
||||
})}
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_server",
|
||||
})
|
||||
}>
|
||||
<Plus size={36} />
|
||||
</IconButton>
|
||||
<PaintCounter small />
|
||||
</ServerList>
|
||||
</ServersBase>
|
||||
);
|
||||
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={42} unread={entry.unread}>
|
||||
<ServerIcon size={32} target={entry} />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
<span />
|
||||
</ServerEntry>
|
||||
</ConditionalLink>
|
||||
);
|
||||
})}
|
||||
<IconButton
|
||||
onClick={() =>
|
||||
openScreen({
|
||||
id: "special_input",
|
||||
type: "create_server",
|
||||
})
|
||||
}>
|
||||
<Plus size={36} />
|
||||
</IconButton>
|
||||
<PaintCounter small />
|
||||
</ServerList>
|
||||
</ServersBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState(ServerListSidebar, (state) => {
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
lastOpened: state.lastOpened,
|
||||
};
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
lastOpened: state.lastOpened,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -13,9 +13,9 @@ import { connectState } from "../../../redux/connector";
|
||||
import { Unreads } from "../../../redux/reducers/unreads";
|
||||
|
||||
import {
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useServer,
|
||||
useChannels,
|
||||
useForceUpdate,
|
||||
useServer,
|
||||
} from "../../../context/revoltjs/hooks";
|
||||
|
||||
import CollapsibleSection from "../../common/CollapsibleSection";
|
||||
@@ -27,124 +27,124 @@ import { ChannelButton } from "../items/ButtonItem";
|
||||
import ConnectionStatus from "../items/ConnectionStatus";
|
||||
|
||||
interface Props {
|
||||
unreads: Unreads;
|
||||
unreads: Unreads;
|
||||
}
|
||||
|
||||
const ServerBase = styled.div`
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
background: var(--secondary-background);
|
||||
|
||||
border-start-start-radius: 8px;
|
||||
border-end-start-radius: 8px;
|
||||
overflow: hidden;
|
||||
border-start-start-radius: 8px;
|
||||
border-end-start-radius: 8px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const ServerList = styled.div`
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
padding: 6px;
|
||||
flex-grow: 1;
|
||||
overflow-y: scroll;
|
||||
|
||||
> svg {
|
||||
width: 100%;
|
||||
}
|
||||
> svg {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
function ServerSidebar(props: Props) {
|
||||
const { server: server_id, channel: channel_id } =
|
||||
useParams<{ server?: string; channel?: string }>();
|
||||
const ctx = useForceUpdate();
|
||||
const { server: server_id, channel: channel_id } =
|
||||
useParams<{ server?: string; channel?: string }>();
|
||||
const ctx = useForceUpdate();
|
||||
|
||||
const server = useServer(server_id, ctx);
|
||||
if (!server) return <Redirect to="/" />;
|
||||
const server = useServer(server_id, ctx);
|
||||
if (!server) return <Redirect to="/" />;
|
||||
|
||||
const channels = (
|
||||
useChannels(server.channels, ctx).filter(
|
||||
(entry) => typeof entry !== "undefined",
|
||||
) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
|
||||
).map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
const channels = (
|
||||
useChannels(server.channels, ctx).filter(
|
||||
(entry) => typeof entry !== "undefined",
|
||||
) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
|
||||
).map((x) => mapChannelWithUnread(x, props.unreads));
|
||||
|
||||
const channel = channels.find((x) => x?._id === channel_id);
|
||||
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
|
||||
if (channel) useUnreads({ ...props, channel }, ctx);
|
||||
const channel = channels.find((x) => x?._id === channel_id);
|
||||
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
|
||||
if (channel) useUnreads({ ...props, channel }, ctx);
|
||||
|
||||
useEffect(() => {
|
||||
if (!channel_id) return;
|
||||
useEffect(() => {
|
||||
if (!channel_id) return;
|
||||
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: server_id!,
|
||||
child: channel_id!,
|
||||
});
|
||||
}, [channel_id]);
|
||||
dispatch({
|
||||
type: "LAST_OPENED_SET",
|
||||
parent: server_id!,
|
||||
child: channel_id!,
|
||||
});
|
||||
}, [channel_id]);
|
||||
|
||||
let uncategorised = new Set(server.channels);
|
||||
let elements = [];
|
||||
let uncategorised = new Set(server.channels);
|
||||
let elements = [];
|
||||
|
||||
function addChannel(id: string) {
|
||||
const entry = channels.find((x) => x._id === id);
|
||||
if (!entry) return;
|
||||
function addChannel(id: string) {
|
||||
const entry = channels.find((x) => x._id === id);
|
||||
if (!entry) return;
|
||||
|
||||
const active = channel?._id === entry._id;
|
||||
const active = channel?._id === entry._id;
|
||||
|
||||
return (
|
||||
<ConditionalLink
|
||||
key={entry._id}
|
||||
active={active}
|
||||
to={`/server/${server!._id}/channel/${entry._id}`}>
|
||||
<ChannelButton
|
||||
channel={entry}
|
||||
active={active}
|
||||
alert={entry.unread}
|
||||
compact
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ConditionalLink
|
||||
key={entry._id}
|
||||
active={active}
|
||||
to={`/server/${server!._id}/channel/${entry._id}`}>
|
||||
<ChannelButton
|
||||
channel={entry}
|
||||
active={active}
|
||||
alert={entry.unread}
|
||||
compact
|
||||
/>
|
||||
</ConditionalLink>
|
||||
);
|
||||
}
|
||||
|
||||
if (server.categories) {
|
||||
for (let category of server.categories) {
|
||||
let channels = [];
|
||||
for (let id of category.channels) {
|
||||
uncategorised.delete(id);
|
||||
channels.push(addChannel(id));
|
||||
}
|
||||
if (server.categories) {
|
||||
for (let category of server.categories) {
|
||||
let channels = [];
|
||||
for (let id of category.channels) {
|
||||
uncategorised.delete(id);
|
||||
channels.push(addChannel(id));
|
||||
}
|
||||
|
||||
elements.push(
|
||||
<CollapsibleSection
|
||||
id={`category_${category.id}`}
|
||||
defaultValue
|
||||
summary={<Category text={category.title} />}>
|
||||
{channels}
|
||||
</CollapsibleSection>,
|
||||
);
|
||||
}
|
||||
}
|
||||
elements.push(
|
||||
<CollapsibleSection
|
||||
id={`category_${category.id}`}
|
||||
defaultValue
|
||||
summary={<Category text={category.title} />}>
|
||||
{channels}
|
||||
</CollapsibleSection>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
for (let id of Array.from(uncategorised).reverse()) {
|
||||
elements.unshift(addChannel(id));
|
||||
}
|
||||
for (let id of Array.from(uncategorised).reverse()) {
|
||||
elements.unshift(addChannel(id));
|
||||
}
|
||||
|
||||
return (
|
||||
<ServerBase>
|
||||
<ServerHeader server={server} ctx={ctx} />
|
||||
<ConnectionStatus />
|
||||
<ServerList
|
||||
onContextMenu={attachContextMenu("Menu", {
|
||||
server_list: server._id,
|
||||
})}>
|
||||
{elements}
|
||||
</ServerList>
|
||||
<PaintCounter small />
|
||||
</ServerBase>
|
||||
);
|
||||
return (
|
||||
<ServerBase>
|
||||
<ServerHeader server={server} ctx={ctx} />
|
||||
<ConnectionStatus />
|
||||
<ServerList
|
||||
onContextMenu={attachContextMenu("Menu", {
|
||||
server_list: server._id,
|
||||
})}>
|
||||
{elements}
|
||||
</ServerList>
|
||||
<PaintCounter small />
|
||||
</ServerBase>
|
||||
);
|
||||
}
|
||||
|
||||
export default connectState(ServerSidebar, (state) => {
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
return {
|
||||
unreads: state.unreads,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -8,96 +8,96 @@ import { Unreads } from "../../../redux/reducers/unreads";
|
||||
import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
|
||||
|
||||
type UnreadProps = {
|
||||
channel: Channel;
|
||||
unreads: Unreads;
|
||||
channel: Channel;
|
||||
unreads: Unreads;
|
||||
};
|
||||
|
||||
export function useUnreads(
|
||||
{ channel, unreads }: UnreadProps,
|
||||
context?: HookContext,
|
||||
{ channel, unreads }: UnreadProps,
|
||||
context?: HookContext,
|
||||
) {
|
||||
const ctx = useForceUpdate(context);
|
||||
const ctx = useForceUpdate(context);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
function checkUnread(target?: Channel) {
|
||||
if (!target) return;
|
||||
if (target._id !== channel._id) return;
|
||||
if (
|
||||
target.channel_type === "SavedMessages" ||
|
||||
target.channel_type === "VoiceChannel"
|
||||
)
|
||||
return;
|
||||
useLayoutEffect(() => {
|
||||
function checkUnread(target?: Channel) {
|
||||
if (!target) return;
|
||||
if (target._id !== channel._id) return;
|
||||
if (
|
||||
target.channel_type === "SavedMessages" ||
|
||||
target.channel_type === "VoiceChannel"
|
||||
)
|
||||
return;
|
||||
|
||||
const unread = unreads[channel._id]?.last_id;
|
||||
if (target.last_message) {
|
||||
const message =
|
||||
typeof target.last_message === "string"
|
||||
? target.last_message
|
||||
: target.last_message._id;
|
||||
if (!unread || (unread && message.localeCompare(unread) > 0)) {
|
||||
dispatch({
|
||||
type: "UNREADS_MARK_READ",
|
||||
channel: channel._id,
|
||||
message,
|
||||
});
|
||||
const unread = unreads[channel._id]?.last_id;
|
||||
if (target.last_message) {
|
||||
const message =
|
||||
typeof target.last_message === "string"
|
||||
? target.last_message
|
||||
: target.last_message._id;
|
||||
if (!unread || (unread && message.localeCompare(unread) > 0)) {
|
||||
dispatch({
|
||||
type: "UNREADS_MARK_READ",
|
||||
channel: channel._id,
|
||||
message,
|
||||
});
|
||||
|
||||
ctx.client.req(
|
||||
"PUT",
|
||||
`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.client.req(
|
||||
"PUT",
|
||||
`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkUnread(channel);
|
||||
checkUnread(channel);
|
||||
|
||||
ctx.client.channels.addListener("mutation", checkUnread);
|
||||
return () =>
|
||||
ctx.client.channels.removeListener("mutation", checkUnread);
|
||||
}, [channel, unreads]);
|
||||
ctx.client.channels.addListener("mutation", checkUnread);
|
||||
return () =>
|
||||
ctx.client.channels.removeListener("mutation", checkUnread);
|
||||
}, [channel, unreads]);
|
||||
}
|
||||
|
||||
export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
|
||||
let last_message_id;
|
||||
if (
|
||||
channel.channel_type === "DirectMessage" ||
|
||||
channel.channel_type === "Group"
|
||||
) {
|
||||
last_message_id = channel.last_message?._id;
|
||||
} else if (channel.channel_type === "TextChannel") {
|
||||
last_message_id = channel.last_message;
|
||||
} else {
|
||||
return {
|
||||
...channel,
|
||||
unread: undefined,
|
||||
alertCount: undefined,
|
||||
timestamp: channel._id,
|
||||
};
|
||||
}
|
||||
let last_message_id;
|
||||
if (
|
||||
channel.channel_type === "DirectMessage" ||
|
||||
channel.channel_type === "Group"
|
||||
) {
|
||||
last_message_id = channel.last_message?._id;
|
||||
} else if (channel.channel_type === "TextChannel") {
|
||||
last_message_id = channel.last_message;
|
||||
} else {
|
||||
return {
|
||||
...channel,
|
||||
unread: undefined,
|
||||
alertCount: undefined,
|
||||
timestamp: channel._id,
|
||||
};
|
||||
}
|
||||
|
||||
let unread: "mention" | "unread" | undefined;
|
||||
let alertCount: undefined | number;
|
||||
if (last_message_id && unreads) {
|
||||
const u = unreads[channel._id];
|
||||
if (u) {
|
||||
if (u.mentions && u.mentions.length > 0) {
|
||||
alertCount = u.mentions.length;
|
||||
unread = "mention";
|
||||
} else if (
|
||||
u.last_id &&
|
||||
last_message_id.localeCompare(u.last_id) > 0
|
||||
) {
|
||||
unread = "unread";
|
||||
}
|
||||
} else {
|
||||
unread = "unread";
|
||||
}
|
||||
}
|
||||
let unread: "mention" | "unread" | undefined;
|
||||
let alertCount: undefined | number;
|
||||
if (last_message_id && unreads) {
|
||||
const u = unreads[channel._id];
|
||||
if (u) {
|
||||
if (u.mentions && u.mentions.length > 0) {
|
||||
alertCount = u.mentions.length;
|
||||
unread = "mention";
|
||||
} else if (
|
||||
u.last_id &&
|
||||
last_message_id.localeCompare(u.last_id) > 0
|
||||
) {
|
||||
unread = "unread";
|
||||
}
|
||||
} else {
|
||||
unread = "unread";
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...channel,
|
||||
timestamp: last_message_id ?? channel._id,
|
||||
unread,
|
||||
alertCount,
|
||||
};
|
||||
return {
|
||||
...channel,
|
||||
timestamp: last_message_id ?? channel._id,
|
||||
unread,
|
||||
alertCount,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user