fix: muted channels no longer have new messages badge (#297)

This commit is contained in:
RigidStudios 2021-11-01 01:10:42 +04:00 committed by GitHub
parent e12869fbe4
commit 856bbb598c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 10 deletions

View file

@ -31,6 +31,7 @@ type CommonProps = Omit<
alert?: "unread" | "mention";
alertCount?: number;
margin?: boolean;
muted?: boolean;
};
type UserProps = CommonProps & {
@ -39,6 +40,7 @@ type UserProps = CommonProps & {
channel?: Channel;
};
// TODO: Gray out blocked names.
export const UserButton = observer((props: UserProps) => {
const {
active,
@ -132,8 +134,16 @@ type ChannelProps = CommonProps & {
};
export const ChannelButton = observer((props: ChannelProps) => {
const { active, alert, alertCount, channel, user, compact, ...divProps } =
props;
const {
active,
alert,
alertCount,
channel,
user,
compact,
muted,
...divProps
} = props;
if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
if (channel.channel_type === "DirectMessage") {
@ -147,12 +157,13 @@ export const ChannelButton = observer((props: ChannelProps) => {
<div
{...divProps}
data-active={active}
data-alert={typeof alert === "string"}
data-alert={typeof alert === "string" && !muted}
data-muted={muted}
aria-label={channel.name}
className={classNames(styles.item, { [styles.compact]: compact })}
onContextMenu={attachContextMenu("Menu", {
channel: channel._id,
unread: typeof alert !== "undefined",
unread: !!alert,
})}>
<ChannelIcon
className={styles.avatar}
@ -164,7 +175,8 @@ export const ChannelButton = observer((props: ChannelProps) => {
{channel.channel_type === "Group" && (
<div className={styles.subText}>
{typeof channel.last_message?.content === "string" &&
alert ? (
alert &&
!muted ? (
channel.last_message.content.slice(0, 32)
) : (
<Text
@ -177,7 +189,7 @@ export const ChannelButton = observer((props: ChannelProps) => {
)}
</div>
<div className={styles.button}>
{alert && (
{alert && !muted && (
<div className={styles.alert} data-style={alert}>
{alertCount}
</div>

View file

@ -116,6 +116,10 @@
}
}
&[data-muted="true"] {
color: var(--tertiary-foreground);
}
&[data-alert="true"],
&[data-active="true"],
&:hover {

View file

@ -7,10 +7,12 @@ import { useEffect } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter";
import { internalEmit } from "../../../lib/eventEmitter";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { dispatch } from "../../../redux";
import { connectState } from "../../../redux/connector";
import { Notifications } from "../../../redux/reducers/notifications";
import { Unreads } from "../../../redux/reducers/unreads";
import { useClient } from "../../../context/revoltjs/RevoltClient";
@ -22,10 +24,10 @@ import { mapChannelWithUnread, useUnreads } from "./common";
import { ChannelButton } from "../items/ButtonItem";
import ConnectionStatus from "../items/ConnectionStatus";
import { internalEmit } from "../../../lib/eventEmitter";
interface Props {
unreads: Unreads;
notifications: Notifications;
}
const ServerBase = styled.div`
@ -65,7 +67,12 @@ const ServerSidebar = observer((props: Props) => {
const channel = channel_id ? client.channels.get(channel_id) : undefined;
// The user selected no channel, let's see if there's a channel available
if (!channel && server.channel_ids.length > 0) return <Redirect to={`/server/${server_id}/channel/${server.channel_ids[0]}`} />;
if (!channel && server.channel_ids.length > 0)
return (
<Redirect
to={`/server/${server_id}/channel/${server.channel_ids[0]}`}
/>
);
if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
if (channel) useUnreads({ ...props, channel });
@ -88,10 +95,11 @@ const ServerSidebar = observer((props: Props) => {
if (!entry) return;
const active = channel?._id === entry._id;
const muted = props.notifications[id] === "muted";
return (
<ConditionalLink
onClick={e => {
onClick={(e) => {
if (e.shiftKey) {
internalEmit(
"MessageBox",
@ -99,7 +107,7 @@ const ServerSidebar = observer((props: Props) => {
`<#${entry._id}>`,
"channel_mention",
);
e.preventDefault()
e.preventDefault();
}
}}
key={entry._id}
@ -111,6 +119,7 @@ const ServerSidebar = observer((props: Props) => {
// ! FIXME: pull it out directly
alert={mapChannelWithUnread(entry, props.unreads).unread}
compact
muted={muted}
/>
</ConditionalLink>
);
@ -157,5 +166,6 @@ const ServerSidebar = observer((props: Props) => {
export default connectState(ServerSidebar, (state) => {
return {
unreads: state.unreads,
notifications: state.notifications,
};
});