feat(sidebar): show DMs under home button

This commit is contained in:
Paul 2021-12-24 23:53:26 +00:00
parent 3b3ec69edd
commit 56ab2a2917
2 changed files with 60 additions and 28 deletions

View file

@ -48,6 +48,11 @@ export default observer(() => {
a.last_message_id_or_past.localeCompare(b.last_message_id_or_past), a.last_message_id_or_past.localeCompare(b.last_message_id_or_past),
); );
// ! FIXME: must be a better way
const incoming = [...client.users.values()].filter(
(user) => user?.relationship === RelationshipStatus.Incoming,
);
return ( return (
<GenericSidebarBase mobilePadding> <GenericSidebarBase mobilePadding>
<ConnectionStatus /> <ConnectionStatus />
@ -68,14 +73,9 @@ export default observer(() => {
<ButtonItem <ButtonItem
active={pathname === "/friends"} active={pathname === "/friends"}
alert={ alert={
typeof [...client.users.values()].find( incoming.length > 0 ? "mention" : undefined
(user) => }
user?.relationship === alertCount={incoming.length}>
RelationshipStatus.Incoming,
) !== "undefined"
? "unread"
: undefined
}>
<UserDetail size={20} /> <UserDetail size={20} />
<span> <span>
<Text id="app.navigation.tabs.friends" /> <Text id="app.navigation.tabs.friends" />

View file

@ -18,6 +18,7 @@ import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
import { useIntermediate } from "../../../context/intermediate/Intermediate"; import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient"; import { useClient } from "../../../context/revoltjs/RevoltClient";
import ChannelIcon from "../../common/ChannelIcon";
import ServerIcon from "../../common/ServerIcon"; import ServerIcon from "../../common/ServerIcon";
import Tooltip from "../../common/Tooltip"; import Tooltip from "../../common/Tooltip";
import UserHover from "../../common/user/UserHover"; import UserHover from "../../common/user/UserHover";
@ -214,28 +215,10 @@ export default observer(() => {
const path = useLocation().pathname; const path = useLocation().pathname;
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
let homeUnread: "mention" | "unread" | undefined; let alertCount = [...client.users.values()].filter(
let alertCount = 0;
for (const channel of channels) {
if (channel?.channel_type === "Group" && channel.unread) {
homeUnread = "unread";
alertCount += channel.mentions.length;
}
if (
channel.channel_type === "DirectMessage" &&
channel.active &&
channel.unread
) {
alertCount++;
}
}
alertCount += [...client.users.values()].filter(
(x) => x.relationship === RelationshipStatus.Incoming, (x) => x.relationship === RelationshipStatus.Incoming,
).length; ).length;
if (alertCount > 0) homeUnread = "mention";
const homeActive = const homeActive =
typeof server === "undefined" && !path.startsWith("/invite"); typeof server === "undefined" && !path.startsWith("/invite");
@ -255,7 +238,9 @@ export default observer(() => {
<UserHover user={client.user ?? undefined}> <UserHover user={client.user ?? undefined}>
<Icon <Icon
size={42} size={42}
unread={homeUnread} unread={
alertCount > 0 ? "mention" : undefined
}
count={alertCount}> count={alertCount}>
<UserIcon <UserIcon
target={client.user ?? undefined} target={client.user ?? undefined}
@ -268,6 +253,53 @@ export default observer(() => {
</div> </div>
</ServerEntry> </ServerEntry>
</ConditionalLink> </ConditionalLink>
{channels
.filter(
(x) =>
(x.channel_type === "DirectMessage" ||
x.channel_type === "Group") &&
x.unread,
)
.map((x) => {
const unreadCount = x.mentions.length;
return (
<Link to={`/channel/${x._id}`}>
<ServerEntry
home
active={false}
onContextMenu={attachContextMenu("Menu", {
channel: x._id,
unread: true,
})}>
<div>
<Icon
size={42}
unread={
unreadCount > 0
? "mention"
: "unread"
}
count={unreadCount}>
{x.channel_type ===
"DirectMessage" ? (
<UserIcon
target={x.recipient}
size={32}
hover
/>
) : (
<ChannelIcon
target={x}
size={32}
hover
/>
)}
</Icon>
</div>
</ServerEntry>
</Link>
);
})}
<LineDivider /> <LineDivider />
{servers.map((server) => { {servers.map((server) => {
const active = server._id === server_id; const active = server._id === server_id;