fix: use masquerade everywhere applicable

fixes #400

src/components/common/messaging/Message.tsx

@@ -146,12 +146,12 @@ const Message = observer(
                         {head && (
                             <span className="detail">
                                 <Username
-                                    override={message.masquerade?.name}
-                                    className="author"
                                     user={user}
-                                    onContextMenu={userContext}
+                                    className="author"
-                                    onClick={handleUserClick}
                                     showServerIdentity
+                                    onClick={handleUserClick}
+                                    onContextMenu={userContext}
+                                    masquerade={message.masquerade!}
                                 />
                                 <MessageDetail
                                     message={message}

src/components/common/messaging/attachments/MessageReply.tsx

@@ -182,9 +182,10 @@ export const MessageReply = observer(
                             <>
                                 <div className="user">
                                     <UserShort
-                                        user={message.author}
                                         size={16}
                                         showServerIdentity
+                                        user={message.author}
+                                        masquerade={message.masquerade!}
                                         prefixAt={parent_mentions.includes(
                                             message.author_id,
                                         )}

src/components/common/messaging/bars/ReplyBar.tsx

@@ -9,13 +9,10 @@ import { Text } from "preact-i18n";
 import { StateUpdater, useEffect } from "preact/hooks";
 
 import { internalSubscribe } from "../../../../lib/eventEmitter";
-import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { dispatch, getState } from "../../../../redux";
 import { Reply } from "../../../../redux/reducers/queue";
 
-import { useClient } from "../../../../context/revoltjs/RevoltClient";
-
 import IconButton from "../../../ui/IconButton";
 
 import Markdown from "../../../markdown/Markdown";
@@ -133,9 +130,10 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                             <ReplyIcon size={22} />
                             <div class="username">
                                 <UserShort
-                                    user={message.author}
                                     size={16}
                                     showServerIdentity
+                                    user={message.author}
+                                    masquerade={message.masquerade!}
                                 />
                             </div>
                             <div class="message">

src/components/common/user/UserIcon.tsx

@@ -2,8 +2,10 @@ import { MicrophoneOff } from "@styled-icons/boxicons-regular";
 import { VolumeMute } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
+import { Masquerade } from "revolt-api/types/Channels";
 import { Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
+import { Nullable } from "revolt.js/dist/util/null";
 import styled, { css } from "styled-components";
 
 import { useContext } from "preact/hooks";
@@ -17,9 +19,9 @@ import IconBase, { IconBaseProps } from "../IconBase";
 
 type VoiceStatus = "muted" | "deaf";
 interface Props extends IconBaseProps<User> {
-    mask?: string;
     status?: boolean;
     voice?: VoiceStatus;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean;
 }
 
@@ -74,11 +76,14 @@ export default observer(
             mask,
             hover,
             showServerIdentity,
+            masquerade,
             ...svgProps
         } = props;
 
         let { url } = props;
-        if (!url) {
+        if (masquerade?.avatar) {
+            url = masquerade.avatar;
+        } else if (!url) {
             let override;
             if (target && showServerIdentity) {
                 const { server } = useParams<{ server?: string }>();

src/components/common/user/UserShort.tsx

@@ -1,6 +1,8 @@
 import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
+import { Masquerade } from "revolt-api/types/Channels";
 import { User } from "revolt.js/dist/maps/Users";
+import { Nullable } from "revolt.js/dist/util/null";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
@@ -29,16 +31,16 @@ const BotBadge = styled.div`
 
 type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
     user?: User;
-    override?: string;
     prefixAt?: boolean;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean | "both";
 };
 
 export const Username = observer(
     ({
         user,
-        override,
         prefixAt,
+        masquerade,
         showServerIdentity,
         ...otherProps
     }: UsernameProps) => {
@@ -83,7 +85,7 @@ export const Username = observer(
             return (
                 <>
                     <span {...otherProps} style={{ color }}>
-                        {override ?? username ?? (
+                        {masquerade?.name ?? username ?? (
                             <Text id="app.main.channel.unknown_user" />
                         )}
                     </span>
@@ -97,7 +99,7 @@ export const Username = observer(
         return (
             <span {...otherProps} style={{ color }}>
                 {prefixAt ? "@" : undefined}
-                {override ?? username ?? (
+                {masquerade?.name ?? username ?? (
                     <Text id="app.main.channel.unknown_user" />
                 )}
             </span>
@@ -109,11 +111,13 @@ export default function UserShort({
     user,
     size,
     prefixAt,
+    masquerade,
     showServerIdentity,
 }: {
     user?: User;
     size?: number;
     prefixAt?: boolean;
+    masquerade?: Masquerade;
     showServerIdentity?: boolean;
 }) {
     const { openScreen } = useIntermediate();
@@ -132,16 +136,18 @@ export default function UserShort({
     return (
         <>
             <UserIcon
-                size={size ?? 24}
                 target={user}
+                size={size ?? 24}
+                masquerade={masquerade}
                 onClick={handleUserClick}
                 showServerIdentity={showServerIdentity}
             />
             <Username
                 user={user}
-                showServerIdentity={showServerIdentity}
-                onClick={handleUserClick}
                 prefixAt={prefixAt}
+                masquerade={masquerade}
+                onClick={handleUserClick}
+                showServerIdentity={showServerIdentity}
             />
         </>
     );