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

src/components/navigation/items/ButtonItem.tsx

@@ -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>

src/components/navigation/items/Item.module.scss

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

src/components/navigation/left/ServerSidebar.tsx

@@ -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,
     };
 });