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