feat(messaging): render masqueraded messages

VERSION

@@ -1 +1 @@
-1.0.0-vite
+0.5.3-1

external/lang

@@ -1 +1 @@
-Subproject commit 4dee74edcd717057235301496d41492d9836b51b
+Subproject commit bf0fd028b7702801483d4d491960b3f8af1b8c81

package.json

@@ -53,6 +53,7 @@
         "@fontsource/comic-neue": "^4.4.5",
         "@fontsource/fira-code": "^4.4.5",
         "@fontsource/inter": "^4.4.5",
+        "@fontsource/jetbrains-mono": "^4.4.5",
         "@fontsource/lato": "^4.4.5",
         "@fontsource/montserrat": "^4.4.5",
         "@fontsource/noto-sans": "^4.4.5",
@@ -65,7 +66,6 @@
         "@fontsource/space-mono": "^4.4.5",
         "@fontsource/ubuntu": "^4.4.5",
         "@fontsource/ubuntu-mono": "^4.4.5",
-        "@fontsource/jetbrains-mono": "^4.4.5",
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@preact/preset-vite": "^2.0.0",
         "@rollup/plugin-replace": "^2.4.2",
@@ -124,8 +124,8 @@
         "react-virtualized-auto-sizer": "^1.0.5",
         "react-virtuoso": "^1.10.4",
         "redux": "^4.1.0",
-        "revolt-api": "0.5.3-alpha.0-patch.0",
-        "revolt.js": "5.1.0-alpha.6",
+        "revolt-api": "^0.5.3-alpha.8-patch.0",
+        "revolt.js": "^5.1.0-alpha.7",
         "rimraf": "^3.0.2",
         "sass": "^1.35.1",
         "shade-blend-color": "^1.0.0",

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,

yarn.lock

@@ -3647,15 +3647,15 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-revolt-api@0.5.3-alpha.0-patch.0:
-  version "0.5.3-alpha.0-patch.0"
-  resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.0-patch.0.tgz#158556832843bb06cb06a4df50ffca24ab64be3b"
-  integrity sha512-76l+kGyrUy6uGMSIziyAHE27r9gD97OEh5gSzb2OJRsQM55TN0NurAsfFIEiB9hUzDDlwsXchtJiqdS4UVAwQw==
+revolt-api@^0.5.3-alpha.8-patch.0:
+  version "0.5.3-alpha.8-patch.0"
+  resolved "https://registry.yarnpkg.com/revolt-api/-/revolt-api-0.5.3-alpha.8-patch.0.tgz#3c9f981f8100a89aec1299bc110453cf01c51f89"
+  integrity sha512-ghupcB1nJS7fCiD41L4u+QudFoBWGE381uW4s8cuHsQS3bFXgzAH1lgtjYNoFgrVUekqQAcHWote8Kn2sOABAQ==
 
-revolt.js@5.1.0-alpha.6:
-  version "5.1.0-alpha.6"
-  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.6.tgz#bdd1c9f3bdd7e0f45e309a3e1fa5239138e1cb1a"
-  integrity sha512-XqdP24tGc+En9M8ccWkk74z/v2DBtH7OboTbFQBQTjWIT4fLMP/ox+GLdDVWSF7Zg6M/xPrMbg4oL/nP+xqZHQ==
+revolt.js@^5.1.0-alpha.7:
+  version "5.1.0-alpha.7"
+  resolved "https://registry.yarnpkg.com/revolt.js/-/revolt.js-5.1.0-alpha.7.tgz#20fe8d3390b95f351361e5bc70e8a1b31467ae69"
+  integrity sha512-4FLh4MEql0kt83h6++jmQ2F4KGNer3odKkRs7avliu4wEJpQDmUD21anChO41Uv1gHBZMXIFdrYt5OCK384pSg==
   dependencies:
     axios "^0.21.4"
     eventemitter3 "^4.0.7"