Work towards removing useUsers.

src/components/common/user/UserIcon.tsx

@@ -1,5 +1,5 @@
 import { MicrophoneOff } from "@styled-icons/boxicons-regular";
-import { User } from "revolt.js";
+import { observer } from "mobx-react-lite";
 import { Users } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";
 
@@ -8,6 +8,7 @@ import { useContext } from "preact/hooks";
 import { ThemeContext } from "../../../context/Theme";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import { User } from "../../../mobx";
 import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
 
@@ -50,55 +51,63 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
         `}
 `;
 
-export default function UserIcon(
-    props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
-) {
-    const client = useContext(AppContext);
+export default observer(
+    (props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) => {
+        const client = useContext(AppContext);
 
-    const {
-        target,
-        attachment,
-        size,
-        voice,
-        status,
-        animate,
-        mask,
-        children,
-        as,
-        ...svgProps
-    } = props;
-    const iconURL =
-        client.generateFileURL(
-            target?.avatar ?? attachment,
-            { max_side: 256 },
+        const {
+            target,
+            attachment,
+            size,
+            voice,
+            status,
             animate,
-        ) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
+            mask,
+            children,
+            as,
+            ...svgProps
+        } = props;
+        const iconURL =
+            client.generateFileURL(
+                target?.avatar ?? attachment,
+                { max_side: 256 },
+                animate,
+            ) ??
+            (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
 
-    return (
-        <IconBase
-            {...svgProps}
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32">
-            <foreignObject
-                x="0"
-                y="0"
-                width="32"
-                height="32"
-                mask={mask ?? (status ? "url(#user)" : undefined)}>
-                {<img src={iconURL} draggable={false} loading="lazy" />}
-            </foreignObject>
-            {props.status && (
-                <circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
-            )}
-            {props.voice && (
-                <foreignObject x="22" y="22" width="10" height="10">
-                    <VoiceIndicator status={props.voice}>
-                        {props.voice === "muted" && <MicrophoneOff size={6} />}
-                    </VoiceIndicator>
+        return (
+            <IconBase
+                {...svgProps}
+                width={size}
+                height={size}
+                aria-hidden="true"
+                viewBox="0 0 32 32">
+                <foreignObject
+                    x="0"
+                    y="0"
+                    width="32"
+                    height="32"
+                    mask={mask ?? (status ? "url(#user)" : undefined)}>
+                    {<img src={iconURL} draggable={false} loading="lazy" />}
                 </foreignObject>
-            )}
-        </IconBase>
-    );
-}
+                {props.status && (
+                    <circle
+                        cx="27"
+                        cy="27"
+                        r="5"
+                        fill={useStatusColour(target)}
+                    />
+                )}
+                {props.voice && (
+                    <foreignObject x="22" y="22" width="10" height="10">
+                        <VoiceIndicator status={props.voice}>
+                            {props.voice === "muted" && (
+                                <MicrophoneOff size={6} />
+                            )}
+                        </VoiceIndicator>
+                    </foreignObject>
+                )}
+            </IconBase>
+        );
+    },
+);