feat(messaging): render masqueraded messages

src/components/common/IconBase.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 
 export interface IconBaseProps<T> {
     target?: T;
+    url?: string;
     attachment?: Attachment;
 
     size: number;

src/components/common/messaging/Message.tsx

@@ -130,6 +130,7 @@ const Message = observer(
                     <MessageInfo>
                         {head ? (
                             <UserIcon
+                                url={message.generateMasqAvatarURL()}
                                 target={user}
                                 size={36}
                                 onContextMenu={userContext}
@@ -145,6 +146,7 @@ const Message = observer(
                         {head && (
                             <span className="detail">
                                 <Username
+                                    override={message.masquerade?.name}
                                     className="author"
                                     user={user}
                                     onContextMenu={userContext}

src/components/common/user/UserIcon.tsx

@@ -11,9 +11,10 @@ import { useContext } from "preact/hooks";
 import { ThemeContext } from "../../../context/Theme";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
 
+import IconBase, { IconBaseProps } from "../IconBase";
+
 type VoiceStatus = "muted" | "deaf";
 interface Props extends IconBaseProps<User> {
     mask?: string;
@@ -76,27 +77,30 @@ export default observer(
             ...svgProps
         } = props;
 
-        let override;
-        if (target && showServerIdentity) {
-            const { server } = useParams<{ server?: string }>();
-            if (server) {
-                const member = client.members.getKey({
-                    server,
-                    user: target._id,
-                });
+        let { url } = props;
+        if (!url) {
+            let override;
+            if (target && showServerIdentity) {
+                const { server } = useParams<{ server?: string }>();
+                if (server) {
+                    const member = client.members.getKey({
+                        server,
+                        user: target._id,
+                    });
 
-                if (member?.avatar) {
-                    override = member?.avatar;
+                    if (member?.avatar) {
+                        override = member?.avatar;
+                    }
                 }
             }
-        }
 
-        const iconURL =
-            client.generateFileURL(
-                override ?? target?.avatar ?? attachment,
-                { max_side: 256 },
-                animate,
-            ) ?? (target ? target.defaultAvatarURL : fallback);
+            url =
+                client.generateFileURL(
+                    override ?? target?.avatar ?? attachment,
+                    { max_side: 256 },
+                    animate,
+                ) ?? (target ? target.defaultAvatarURL : fallback);
+        }
 
         return (
             <IconBase
@@ -114,7 +118,7 @@ export default observer(
                     height="32"
                     class="icon"
                     mask={mask ?? (status ? "url(#user)" : undefined)}>
-                    {<img src={iconURL} draggable={false} loading="lazy" />}
+                    {<img src={url} draggable={false} loading="lazy" />}
                 </foreignObject>
                 {props.status && (
                     <circle

src/components/common/user/UserShort.tsx

@@ -29,11 +29,19 @@ const BotBadge = styled.div`
 
 type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
     user?: User;
+    override?: string;
     prefixAt?: boolean;
     showServerIdentity?: boolean | "both";
 };
+
 export const Username = observer(
-    ({ user, prefixAt, showServerIdentity, ...otherProps }: UsernameProps) => {
+    ({
+        user,
+        override,
+        prefixAt,
+        showServerIdentity,
+        ...otherProps
+    }: UsernameProps) => {
         let username = user?.username;
         let color;
 
@@ -75,7 +83,7 @@ export const Username = observer(
             return (
                 <>
                     <span {...otherProps} style={{ color }}>
-                        {username ?? (
+                        {override ?? username ?? (
                             <Text id="app.main.channel.unknown_user" />
                         )}
                     </span>
@@ -89,7 +97,9 @@ export const Username = observer(
         return (
             <span {...otherProps} style={{ color }}>
                 {prefixAt ? "@" : undefined}
-                {username ?? <Text id="app.main.channel.unknown_user" />}
+                {override ?? username ?? (
+                    <Text id="app.main.channel.unknown_user" />
+                )}
             </span>
         );
     },

src/pages/channels/messaging/MessageRenderer.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { X } from "@styled-icons/boxicons-regular";
+import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
+import { Masquerade } from "revolt-api/types/Channels";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import { Message as MessageI } from "revolt.js/dist/maps/Messages";
+import { Nullable } from "revolt.js/dist/util/null";
 import styled from "styled-components";
 import { decodeTime } from "ulid";
 
@@ -96,8 +99,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
     function compare(
         current: string,
         curAuthor: string,
+        currentMasq: Nullable<Masquerade>,
         previous: string,
         prevAuthor: string,
+        previousMasq: Nullable<Masquerade>,
     ) {
         const atime = decodeTime(current),
             adate = new Date(atime),
@@ -113,7 +118,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
             head = true;
         }
 
-        head = curAuthor !== prevAuthor || Math.abs(btime - atime) >= 420000;
+        head =
+            curAuthor !== prevAuthor ||
+            Math.abs(btime - atime) >= 420000 ||
+            !isEqual(currentMasq, previousMasq);
     }
 
     let blocked = 0;
@@ -135,8 +143,10 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
             compare(
                 message._id,
                 message.author_id,
+                message.masquerade,
                 previous._id,
                 previous.author_id,
+                previous.masquerade,
             );
         }
 
@@ -187,7 +197,14 @@ const MessageRenderer = observer(({ renderer, queue, highlight }: Props) => {
             if (nonces.includes(msg.id)) continue;
 
             if (previous) {
-                compare(msg.id, userId!, previous._id, previous.author_id);
+                compare(
+                    msg.id,
+                    userId!,
+                    null,
+                    previous._id,
+                    previous.author_id,
+                    previous.masquerade,
+                );
 
                 previous = {
                     _id: msg.id,