everyone

src/components/common/messaging/Message.tsx

@@ -120,9 +120,10 @@ const Message = observer(
                     contrast={contrast}
                     sending={typeof queued !== "undefined"}
                     mention={
-                        message.mention_ids && client.user
+                        client.user && (
-                            ? message.mention_ids.includes(client.user._id)
+                            (message.mention_ids?.includes(client.user._id)) ||
-                            : undefined
+                            (message as any).mentionsEveryone
+                        ) || undefined
                     }
                     failed={typeof queued?.error !== "undefined"}
                     {...(attachContext

src/components/markdown/RemarkRenderer.tsx

@@ -23,7 +23,7 @@ import { RenderAnchor } from "./plugins/anchors";
 import { remarkChannels, RenderChannel } from "./plugins/channels";
 import { isOnlyEmoji, remarkEmoji, RenderEmoji } from "./plugins/emoji";
 import { remarkHtmlToText } from "./plugins/htmlToText";
-import { remarkMention, RenderMention } from "./plugins/mentions";
+import { remarkMention, RenderMention, remarkEveryone, RenderEveryoneMention } from "./plugins/mentions";
 import { remarkSpoiler, RenderSpoiler } from "./plugins/spoiler";
 import { remarkTimestamps } from "./plugins/timestamps";
 import "./prism";
@@ -39,6 +39,7 @@ const Null: React.FC = () => null;
 const components = {
     emoji: RenderEmoji,
     mention: RenderMention,
+    everyone: RenderEveryoneMention,
     spoiler: RenderSpoiler,
     channel: RenderChannel,
     a: RenderAnchor,
@@ -143,6 +144,7 @@ const render = unified()
     .use(remarkTimestamps)
     .use(remarkEmoji)
     .use(remarkMention)
+    .use(remarkEveryone)
     .use(remarkHtmlToText)
     .use(remarkRehype, {
         handlers,

src/components/markdown/hast.ts

@@ -2,6 +2,6 @@ import { passThroughComponents } from "./plugins/remarkRegexComponent";
 import { timestampHandler } from "./plugins/timestamps";
 
 export const handlers = {
-    ...passThroughComponents("emoji", "spoiler", "mention", "channel"),
+    ...passThroughComponents("emoji", "spoiler", "mention", "channel", "everyone"),
     timestamp: timestampHandler,
 };

src/components/markdown/plugins/mentions.tsx

@@ -1,6 +1,5 @@
-import { RE_MENTIONS } from "revolt.js";
+import { RE_MENTIONS, RE_EVERYONE } from "revolt.js";
 import styled from "styled-components";
-
 import { clientController } from "../../../controllers/client/ClientController";
 import UserShort from "../../common/user/UserShort";
 import { createComponent, CustomComponentProps } from "./remarkRegexComponent";
@@ -48,6 +47,33 @@ export function RenderMention({ match }: CustomComponentProps) {
     );
 }
 
+const EveryoneMention = styled.span`
+    padding: 0 4px;
+    flex-shrink: 0;
+    
+    font-weight: 600;
+    cursor: default;
+    color: var(--foreground);
+    background: var(--secondary-background);
+    border-radius: calc(var(--border-radius) * 2);
+    
+    transition: 0.1s ease filter;
+    
+    &:hover {
+        filter: brightness(0.75);
+    }
+`;
+
+export function RenderEveryoneMention() {
+    return (
+        <EveryoneMention>
+            @everyone
+        </EveryoneMention>
+    );
+}
+
 export const remarkMention = createComponent("mention", RE_MENTIONS, (match) =>
     clientController.getAvailableClient().users.has(match),
 );
+
+export const remarkEveryone = createComponent("everyone", RE_EVERYONE, () => true);

src/mobx/State.ts

@@ -164,6 +164,14 @@ export default class State {
 
             // Register events for notifications.
             client.addListener("message", this.notifications.onMessage);
+            client.addListener(
+                "message/mention",
+                this.notifications.onMessage,
+            );
+            client.addListener(
+                "message/mention/everyone", 
+                this.notifications.onMessage,
+            );
             client.addListener(
                 "user/relationship",
                 this.notifications.onRelationship,
@@ -268,6 +276,14 @@ export default class State {
                 client.removeListener("message", this.queue.onMessage);
                 client.removeListener("packet", this.onPacket);
                 client.removeListener("message", this.notifications.onMessage);
+                client.removeListener(
+                    "message/mention",
+                    this.notifications.onMessage,
+                );
+                client.removeListener(
+                    "message/mention/everyone",
+                    this.notifications.onMessage,
+                );
                 client.removeListener(
                     "user/relationship",
                     this.notifications.onRelationship,

src/mobx/stores/NotificationOptions.ts

@@ -157,7 +157,8 @@ export default class NotificationOptions
         }
 
         // Check channel notification settings
-        const mentioned = message.mention_ids?.includes(user._id);
+        const mentioned = message.mention_ids?.includes(user._id) || 
+                         (message as any).mentionsEveryone;
         switch (this.computeForChannel(message.channel!)) {
             case "muted":
             case "none":