Work towards removing useUsers.

src/components/common/user/UserHover.tsx

@@ -1,7 +1,7 @@
-import { InfoCircle } from "@styled-icons/boxicons-regular";
-import { User } from "revolt.js";
 import styled from "styled-components";
 
+import { User } from "../../../mobx";
+
 import { Children } from "../../../types/Preact";
 import Tooltip from "../Tooltip";
 import { Username } from "./UserShort";

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

src/components/common/user/UserShort.tsx

@@ -1,8 +1,10 @@
+import { observer } from "mobx-react-lite";
 import { useParams } from "react-router-dom";
-import { User } from "revolt.js";
 
 import { Text } from "preact-i18n";
 
+import { User } from "../../../mobx";
+
 import {
     useForceUpdate,
     useMember,
@@ -11,44 +13,46 @@ import {
 
 import UserIcon from "./UserIcon";
 
-export function Username({
-    user,
-    ...otherProps
-}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
-    let username = user?.username;
-    let color;
+export const Username = observer(
+    ({
+        user,
+        ...otherProps
+    }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
+        let username = user?.username;
+        let color;
 
-    // ! FIXME: this must be really bad for perf.
-    if (user) {
-        let { server } = useParams<{ server?: string }>();
-        if (server) {
-            let ctx = useForceUpdate();
-            let member = useMember(`${server}${user._id}`, ctx);
-            if (member) {
-                if (member.nickname) {
-                    username = member.nickname;
-                }
+        // ! FIXME: this must be really bad for perf.
+        if (user) {
+            let { server } = useParams<{ server?: string }>();
+            if (server) {
+                let ctx = useForceUpdate();
+                let member = useMember(`${server}${user._id}`, ctx);
+                if (member) {
+                    if (member.nickname) {
+                        username = member.nickname;
+                    }
 
-                if (member.roles && member.roles.length > 0) {
-                    let s = useServer(server, ctx);
-                    for (let role of member.roles) {
-                        let c = s?.roles?.[role].colour;
-                        if (c) {
-                            color = c;
-                            continue;
+                    if (member.roles && member.roles.length > 0) {
+                        let s = useServer(server, ctx);
+                        for (let role of member.roles) {
+                            let c = s?.roles?.[role].colour;
+                            if (c) {
+                                color = c;
+                                continue;
+                            }
                         }
                     }
                 }
             }
         }
-    }
 
-    return (
-        <span {...otherProps} style={{ color }}>
-            {username ?? <Text id="app.main.channel.unknown_user" />}
-        </span>
-    );
-}
+        return (
+            <span {...otherProps} style={{ color }}>
+                {username ?? <Text id="app.main.channel.unknown_user" />}
+            </span>
+        );
+    },
+);
 
 export default function UserShort({
     user,

src/components/common/user/UserStatus.tsx

@@ -1,8 +1,9 @@
-import { User } from "revolt.js";
+import { observer } from "mobx-react-lite";
 import { Users } from "revolt.js/dist/api/objects";
 
 import { Text } from "preact-i18n";
 
+import { User } from "../../../mobx";
 import Tooltip from "../Tooltip";
 
 interface Props {
@@ -10,7 +11,7 @@ interface Props {
     tooltip?: boolean;
 }
 
-export default function UserStatus({ user, tooltip }: Props) {
+export default observer(({ user, tooltip }: Props) => {
     if (user?.online) {
         if (user.status?.text) {
             if (tooltip) {
@@ -40,4 +41,4 @@ export default function UserStatus({ user, tooltip }: Props) {
     }
 
     return <Text id="app.status.offline" />;
-}
+});