src/context/Voice.tsx

+import { Channel } from "revolt.js/dist/maps/Channels";
+
 import { createContext } from "preact";
-import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "preact/hooks";
 
 import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
 import type VoiceClient from "../lib/vortex/VoiceClient";
 
 import { Children } from "../types/Preact";
 import { SoundContext } from "./Settings";
-import { AppContext } from "./revoltjs/RevoltClient";
-import { useForceUpdate } from "./revoltjs/hooks";
 
 export enum VoiceStatus {
     LOADING = 0,
@@ -22,7 +29,7 @@ export enum VoiceStatus {
 }
 
 export interface VoiceOperations {
-    connect: (channelId: string) => Promise<void>;
+    connect: (channel: Channel) => Promise<Channel>;
     disconnect: () => void;
     isProducing: (type: ProduceType) => boolean;
     startProducing: (type: ProduceType) => Promise<void>;
@@ -44,20 +51,22 @@ type Props = {
 };
 
 export default function Voice({ children }: Props) {
-    const revoltClient = useContext(AppContext);
     const [client, setClient] = useState<VoiceClient | undefined>(undefined);
     const [state, setState] = useState<VoiceState>({
         status: VoiceStatus.LOADING,
         participants: new Map(),
     });
 
-    function setStatus(status: VoiceStatus, roomId?: string) {
-        setState({
-            status,
-            roomId: roomId ?? client?.roomId,
-            participants: client?.participants ?? new Map(),
-        });
-    }
+    const setStatus = useCallback(
+        (status: VoiceStatus, roomId?: string) => {
+            setState({
+                status,
+                roomId: roomId ?? client?.roomId,
+                participants: client?.participants ?? new Map(),
+            });
+        },
+        [client?.participants, client?.roomId],
+    );
 
     useEffect(() => {
         import("../lib/vortex/VoiceClient")
@@ -75,32 +84,30 @@ export default function Voice({ children }: Props) {
                 console.error("Failed to load voice library!", err);
                 setStatus(VoiceStatus.UNAVAILABLE);
             });
-    }, []);
+    }, [setStatus]);
 
     const isConnecting = useRef(false);
     const operations: VoiceOperations = useMemo(() => {
         return {
-            connect: async (channelId) => {
+            connect: async (channel) => {
                 if (!client?.supported()) throw new Error("RTC is unavailable");
 
                 isConnecting.current = true;
-                setStatus(VoiceStatus.CONNECTING, channelId);
+                setStatus(VoiceStatus.CONNECTING, channel._id);
 
                 try {
-                    const call = await revoltClient.channels.joinCall(
-                        channelId,
-                    );
+                    const call = await channel.joinCall();
 
                     if (!isConnecting.current) {
                         setStatus(VoiceStatus.READY);
-                        return;
+                        return channel;
                     }
 
-                    // ! FIXME: use configuration to check if voso is enabled
+                    // ! TODO: use configuration to check if voso is enabled
                     // await client.connect("wss://voso.revolt.chat/ws");
                     await client.connect(
                         "wss://voso.revolt.chat/ws",
-                        channelId,
+                        channel._id,
                     );
 
                     setStatus(VoiceStatus.AUTHENTICATING);
@@ -112,11 +119,12 @@ export default function Voice({ children }: Props) {
                 } catch (error) {
                     console.error(error);
                     setStatus(VoiceStatus.READY);
-                    return;
+                    return channel;
                 }
 
                 setStatus(VoiceStatus.CONNECTED);
                 isConnecting.current = false;
+                return channel;
             },
             disconnect: () => {
                 if (!client?.supported()) throw new Error("RTC is unavailable");
@@ -138,9 +146,9 @@ export default function Voice({ children }: Props) {
                 switch (type) {
                     case "audio": {
                         if (client?.audioProducer !== undefined)
-                            return console.log("No audio producer."); // ! FIXME: let the user know
+                            return console.log("No audio producer."); // ! TODO: let the user know
                         if (navigator.mediaDevices === undefined)
-                            return console.log("No media devices."); // ! FIXME: let the user know
+                            return console.log("No media devices."); // ! TODO: let the user know
                         const mediaStream =
                             await navigator.mediaDevices.getUserMedia({
                                 audio: true,
@@ -158,44 +166,49 @@ export default function Voice({ children }: Props) {
                 return client?.stopProduce(type);
             },
         };
-    }, [client]);
+    }, [client, setStatus]);
 
-    const { forceUpdate } = useForceUpdate();
     const playSound = useContext(SoundContext);
 
     useEffect(() => {
         if (!client?.supported()) return;
 
-        // ! FIXME: message for fatal:
+        // ! TODO: message for fatal:
         // ! get rid of these force updates
         // ! handle it through state or smth
 
-        client.on("startProduce", forceUpdate);
-        client.on("stopProduce", forceUpdate);
+        function stateUpdate() {
+            setStatus(state.status);
+        }
+
+        client.on("startProduce", stateUpdate);
+        client.on("stopProduce", stateUpdate);
 
         client.on("userJoined", () => {
             playSound("call_join");
-            forceUpdate();
+            stateUpdate();
         });
         client.on("userLeft", () => {
             playSound("call_leave");
-            forceUpdate();
+            stateUpdate();
         });
-        client.on("userStartProduce", forceUpdate);
-        client.on("userStopProduce", forceUpdate);
-        client.on("close", forceUpdate);
+
+        client.on("userStartProduce", stateUpdate);
+        client.on("userStopProduce", stateUpdate);
+
+        client.on("close", stateUpdate);
 
         return () => {
-            client.removeListener("startProduce", forceUpdate);
-            client.removeListener("stopProduce", forceUpdate);
-
-            client.removeListener("userJoined", forceUpdate);
-            client.removeListener("userLeft", forceUpdate);
-            client.removeListener("userStartProduce", forceUpdate);
-            client.removeListener("userStopProduce", forceUpdate);
-            client.removeListener("close", forceUpdate);
+            client.removeListener("startProduce", stateUpdate);
+            client.removeListener("stopProduce", stateUpdate);
+
+            client.removeListener("userJoined", stateUpdate);
+            client.removeListener("userLeft", stateUpdate);
+            client.removeListener("userStartProduce", stateUpdate);
+            client.removeListener("userStopProduce", stateUpdate);
+            client.removeListener("close", stateUpdate);
         };
-    }, [client, state]);
+    }, [client, state, playSound, setStatus]);
 
     return (
         <VoiceContext.Provider value={state}>

src/context/intermediate/Intermediate.tsx

 import { Prompt } from "react-router";
 import { useHistory } from "react-router-dom";
-import {
-    Attachment,
-    Channels,
-    EmbedImage,
-    Servers,
-    Users,
-} from "revolt.js/dist/api/objects";
+import type { Attachment } from "revolt-api/types/Autumn";
+import type { EmbedImage } from "revolt-api/types/January";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
 
 import { createContext } from "preact";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
@@ -32,21 +31,21 @@ export type Screen =
           actions: Action[];
       }
     | ({ id: "special_prompt" } & (
-          | { type: "leave_group"; target: Channels.GroupChannel }
-          | { type: "close_dm"; target: Channels.DirectMessageChannel }
-          | { type: "leave_server"; target: Servers.Server }
-          | { type: "delete_server"; target: Servers.Server }
-          | { type: "delete_channel"; target: Channels.TextChannel }
-          | { type: "delete_message"; target: Channels.Message }
+          | { type: "leave_group"; target: Channel }
+          | { type: "close_dm"; target: Channel }
+          | { type: "leave_server"; target: Server }
+          | { type: "delete_server"; target: Server }
+          | { type: "delete_channel"; target: Channel }
+          | { type: "delete_message"; target: Message }
           | {
                 type: "create_invite";
-                target: Channels.TextChannel | Channels.GroupChannel;
+                target: Channel;
             }
-          | { type: "kick_member"; target: Servers.Server; user: string }
-          | { type: "ban_member"; target: Servers.Server; user: string }
-          | { type: "unfriend_user"; target: Users.User }
-          | { type: "block_user"; target: Users.User }
-          | { type: "create_channel"; target: Servers.Server }
+          | { type: "kick_member"; target: Server; user: User }
+          | { type: "ban_member"; target: Server; user: User }
+          | { type: "unfriend_user"; target: User }
+          | { type: "block_user"; target: User }
+          | { type: "create_channel"; target: Server }
       ))
     | ({ id: "special_input" } & (
           | {
@@ -58,7 +57,7 @@ export type Screen =
             }
           | {
                 type: "create_role";
-                server: string;
+                server: Server;
                 callback: (id: string) => void;
             }
       ))
@@ -81,8 +80,8 @@ export type Screen =
     | { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
     | { id: "modify_account"; field: "username" | "email" | "password" }
     | { id: "profile"; user_id: string }
-    | { id: "channel_info"; channel_id: string }
-    | { id: "pending_requests"; users: string[] }
+    | { id: "channel_info"; channel: Channel }
+    | { id: "pending_requests"; users: User[] }
     | {
           id: "user_picker";
           omit?: string[];
@@ -90,13 +89,16 @@ export type Screen =
       };
 
 export const IntermediateContext = createContext({
-    screen: { id: "none" } as Screen,
+    screen: { id: "none" },
     focusTaken: false,
 });
 
-export const IntermediateActionsContext = createContext({
-    openScreen: (screen: Screen) => {},
-    writeClipboard: (text: string) => {},
+export const IntermediateActionsContext = createContext<{
+    openScreen: (screen: Screen) => void;
+    writeClipboard: (text: string) => void;
+}>({
+    openScreen: null!,
+    writeClipboard: null!,
 });
 
 interface Props {
@@ -131,12 +133,20 @@ export default function Intermediate(props: Props) {
         const navigate = (path: string) => history.push(path);
 
         const subs = [
-            internalSubscribe("Intermediate", "openProfile", openProfile),
-            internalSubscribe("Intermediate", "navigate", navigate),
+            internalSubscribe(
+                "Intermediate",
+                "openProfile",
+                openProfile as (...args: unknown[]) => void,
+            ),
+            internalSubscribe(
+                "Intermediate",
+                "navigate",
+                navigate as (...args: unknown[]) => void,
+            ),
         ];
 
         return () => subs.map((unsub) => unsub());
-    }, []);
+    }, [history]);
 
     return (
         <IntermediateContext.Provider value={value}>

src/context/intermediate/Modals.tsx

-import { isModalClosing } from "../../components/ui/Modal";
 import { internalEmit } from "../../lib/eventEmitter";
+
+import { isModalClosing } from "../../components/ui/Modal";
+
 import { Screen } from "./Intermediate";
 import { ClipboardModal } from "./modals/Clipboard";
 import { ErrorModal } from "./modals/Error";
@@ -10,11 +12,14 @@ import { SignedOutModal } from "./modals/SignedOut";
 
 export interface Props {
     screen: Screen;
-    openScreen: (id: any) => void;
+    openScreen: (screen: Screen) => void;
 }
 
 export default function Modals({ screen, openScreen }: Props) {
-    const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
+    const onClose = () =>
+        isModalClosing || screen.id === "onboarding"
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "_prompt":

src/context/intermediate/Popovers.tsx

 import { useContext } from "preact/hooks";
-import { isModalClosing } from "../../components/ui/Modal";
+
 import { internalEmit } from "../../lib/eventEmitter";
 
+import { isModalClosing } from "../../components/ui/Modal";
+
 import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
@@ -16,7 +18,10 @@ export default function Popovers() {
     const { screen } = useContext(IntermediateContext);
     const { openScreen } = useIntermediate();
 
-    const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
+    const onClose = () =>
+        isModalClosing
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "profile":

src/context/intermediate/modals/Input.tsx

 import { useHistory } from "react-router";
+import { Server } from "revolt.js/dist/maps/Servers";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
@@ -81,7 +82,7 @@ type SpecialProps = { onClose: () => void } & (
               | "set_custom_status"
               | "add_friend";
       }
-    | { type: "create_role"; server: string; callback: (id: string) => void }
+    | { type: "create_role"; server: Server; callback: (id: string) => void }
 );
 
 export function SpecialInputModal(props: SpecialProps) {
@@ -134,10 +135,7 @@ export function SpecialInputModal(props: SpecialProps) {
                     }
                     field={<Text id="app.settings.permissions.role_name" />}
                     callback={async (name) => {
-                        const role = await client.servers.createRole(
-                            props.server,
-                            name,
-                        );
+                        const role = await props.server.createRole(name);
                         props.callback(role.id);
                     }}
                 />
@@ -151,7 +149,7 @@ export function SpecialInputModal(props: SpecialProps) {
                     field={<Text id="app.context_menu.custom_status" />}
                     defaultValue={client.user?.status?.text}
                     callback={(text) =>
-                        client.users.editUser({
+                        client.users.edit({
                             status: {
                                 ...client.user?.status,
                                 text: text.trim().length > 0 ? text : undefined,
@@ -166,7 +164,14 @@ export function SpecialInputModal(props: SpecialProps) {
                 <InputModal
                     onClose={onClose}
                     question={"Add Friend"}
-                    callback={(username) => client.users.addFriend(username)}
+                    callback={(username) =>
+                        client
+                            .req(
+                                "PUT",
+                                `/users/${username}/friend` as "/users/id/friend",
+                            )
+                            .then(undefined)
+                    }
                 />
             );
         }

src/context/intermediate/modals/Onboarding.module.scss

@@ -26,7 +26,7 @@
                 margin: auto;
                 display: block;
                 max-height: 420px;
-                border-radius: 8px;
+                border-radius: var(--border-radius);
             }
 
             input {

src/context/intermediate/modals/Onboarding.tsx

@@ -28,8 +28,8 @@ export function OnboardingModal({ onClose, callback }: Props) {
     const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
         setLoading(true);
         callback(username, true)
-            .then(onClose)
-            .catch((err: any) => {
+            .then(() => onClose())
+            .catch((err: unknown) => {
                 setError(takeError(err));
                 setLoading(false);
             });
@@ -40,7 +40,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
             <div className={styles.header}>
                 <h1>
                     <Text id="app.special.modals.onboarding.welcome" />
-                    <img src={wideSVG} />
+                    <img src={wideSVG} loading="eager" />
                 </h1>
             </div>
             <div className={styles.form}>

src/context/intermediate/modals/Prompt.module.scss

@@ -7,7 +7,7 @@
         user-select: all;
         font-size: 1.4em;
         text-align: center;
-        font-family: var(--monoscape-font);
+        font-family: var(--monospace-font);
     }
 }
 

src/context/intermediate/modals/Prompt.tsx

+import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
-import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message as MessageI } from "revolt.js/dist/maps/Messages";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
 import { ulid } from "ulid";
 
 import styles from "./Prompt.module.scss";
@@ -17,7 +21,7 @@ import Radio from "../../../components/ui/Radio";
 
 import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
-import { mapMessage, takeError } from "../../revoltjs/util";
+import { takeError } from "../../revoltjs/util";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
@@ -51,24 +55,24 @@ export function PromptModal({
 }
 
 type SpecialProps = { onClose: () => void } & (
-    | { type: "leave_group"; target: Channels.GroupChannel }
-    | { type: "close_dm"; target: Channels.DirectMessageChannel }
-    | { type: "leave_server"; target: Servers.Server }
-    | { type: "delete_server"; target: Servers.Server }
-    | { type: "delete_channel"; target: Channels.TextChannel }
-    | { type: "delete_message"; target: Channels.Message }
+    | { type: "leave_group"; target: Channel }
+    | { type: "close_dm"; target: Channel }
+    | { type: "leave_server"; target: Server }
+    | { type: "delete_server"; target: Server }
+    | { type: "delete_channel"; target: Channel }
+    | { type: "delete_message"; target: MessageI }
     | {
           type: "create_invite";
-          target: Channels.TextChannel | Channels.GroupChannel;
+          target: Channel;
       }
-    | { type: "kick_member"; target: Servers.Server; user: string }
-    | { type: "ban_member"; target: Servers.Server; user: string }
-    | { type: "unfriend_user"; target: Users.User }
-    | { type: "block_user"; target: Users.User }
-    | { type: "create_channel"; target: Servers.Server }
+    | { type: "kick_member"; target: Server; user: User }
+    | { type: "ban_member"; target: Server; user: User }
+    | { type: "unfriend_user"; target: User }
+    | { type: "block_user"; target: User }
+    | { type: "create_channel"; target: Server }
 );
 
-export function SpecialPromptModal(props: SpecialProps) {
+export const SpecialPromptModal = observer((props: SpecialProps) => {
     const client = useContext(AppContext);
     const [processing, setProcessing] = useState(false);
     const [error, setError] = useState<undefined | string>(undefined);
@@ -92,7 +96,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                 block_user: ["block_user", "block"],
             };
 
-            let event = EVENTS[props.type];
+            const event = EVENTS[props.type];
             let name;
             switch (props.type) {
                 case "unfriend_user":
@@ -100,9 +104,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                     name = props.target.username;
                     break;
                 case "close_dm":
-                    name = client.users.get(
-                        client.channels.getRecipient(props.target._id),
-                    )?.username;
+                    name = props.target.recipient?.username;
                     break;
                 default:
                     name = props.target.name;
@@ -133,27 +135,19 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 try {
                                     switch (props.type) {
                                         case "unfriend_user":
-                                            await client.users.removeFriend(
-                                                props.target._id,
-                                            );
+                                            await props.target.removeFriend();
                                             break;
                                         case "block_user":
-                                            await client.users.blockUser(
-                                                props.target._id,
-                                            );
+                                            await props.target.blockUser();
                                             break;
                                         case "leave_group":
                                         case "close_dm":
                                         case "delete_channel":
-                                            await client.channels.delete(
-                                                props.target._id,
-                                            );
+                                            props.target.delete();
                                             break;
                                         case "leave_server":
                                         case "delete_server":
-                                            await client.servers.delete(
-                                                props.target._id,
-                                            );
+                                            props.target.delete();
                                             break;
                                     }
 
@@ -199,11 +193,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 setProcessing(true);
 
                                 try {
-                                    await client.channels.deleteMessage(
-                                        props.target.channel,
-                                        props.target._id,
-                                    );
-
+                                    props.target.delete();
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -225,7 +215,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 id={`app.special.modals.prompt.confirm_delete_message_long`}
                             />
                             <Message
-                                message={mapMessage(props.target)}
+                                message={props.target}
                                 head={true}
                                 contrast
                             />
@@ -243,12 +233,12 @@ export function SpecialPromptModal(props: SpecialProps) {
             useEffect(() => {
                 setProcessing(true);
 
-                client.channels
-                    .createInvite(props.target._id)
+                props.target
+                    .createInvite()
                     .then((code) => setCode(code))
                     .catch((err) => setError(takeError(err)))
                     .finally(() => setProcessing(false));
-            }, []);
+            }, [props.target]);
 
             return (
                 <PromptModal
@@ -286,8 +276,6 @@ export function SpecialPromptModal(props: SpecialProps) {
             );
         }
         case "kick_member": {
-            const user = client.users.get(props.user);
-
             return (
                 <PromptModal
                     onClose={onClose}
@@ -304,10 +292,13 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 setProcessing(true);
 
                                 try {
-                                    await client.servers.members.kickMember(
-                                        props.target._id,
-                                        props.user,
-                                    );
+                                    client.members
+                                        .getKey({
+                                            server: props.target._id,
+                                            user: props.user._id,
+                                        })
+                                        ?.kick();
+
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -324,10 +315,10 @@ export function SpecialPromptModal(props: SpecialProps) {
                     ]}
                     content={
                         <div className={styles.column}>
-                            <UserIcon target={user} size={64} />
+                            <UserIcon target={props.user} size={64} />
                             <Text
                                 id="app.special.modals.prompt.confirm_kick"
-                                fields={{ name: user?.username }}
+                                fields={{ name: props.user?.username }}
                             />
                         </div>
                     }
@@ -338,7 +329,6 @@ export function SpecialPromptModal(props: SpecialProps) {
         }
         case "ban_member": {
             const [reason, setReason] = useState<string | undefined>(undefined);
-            const user = client.users.get(props.user);
 
             return (
                 <PromptModal
@@ -356,11 +346,9 @@ export function SpecialPromptModal(props: SpecialProps) {
                                 setProcessing(true);
 
                                 try {
-                                    await client.servers.banUser(
-                                        props.target._id,
-                                        props.user,
-                                        { reason },
-                                    );
+                                    await props.target.banUser(props.user._id, {
+                                        reason,
+                                    });
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -377,10 +365,10 @@ export function SpecialPromptModal(props: SpecialProps) {
                     ]}
                     content={
                         <div className={styles.column}>
-                            <UserIcon target={user} size={64} />
+                            <UserIcon target={props.user} size={64} />
                             <Text
                                 id="app.special.modals.prompt.confirm_ban"
-                                fields={{ name: user?.username }}
+                                fields={{ name: props.user?.username }}
                             />
                             <Overline>
                                 <Text id="app.special.modals.prompt.confirm_ban_reason" />
@@ -419,14 +407,11 @@ export function SpecialPromptModal(props: SpecialProps) {
 
                                 try {
                                     const channel =
-                                        await client.servers.createChannel(
-                                            props.target._id,
-                                            {
-                                                type,
-                                                name,
-                                                nonce: ulid(),
-                                            },
-                                        );
+                                        await props.target.createChannel({
+                                            type,
+                                            name,
+                                            nonce: ulid(),
+                                        });
 
                                     history.push(
                                         `/server/${props.target._id}/channel/${channel._id}`,
@@ -477,4 +462,4 @@ export function SpecialPromptModal(props: SpecialProps) {
         default:
             return null;
     }
-}
+});

src/context/intermediate/popovers/ChannelInfo.tsx

 import { X } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Channel } from "revolt.js/dist/maps/Channels";
 
 import styles from "./ChannelInfo.module.scss";
 
 import Modal from "../../../components/ui/Modal";
 
 import Markdown from "../../../components/markdown/Markdown";
-import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
 import { getChannelName } from "../../revoltjs/util";
 
 interface Props {
-    channel_id: string;
+    channel: Channel;
     onClose: () => void;
 }
 
-export function ChannelInfo({ channel_id, onClose }: Props) {
-    const ctx = useForceUpdate();
-    const channel = useChannel(channel_id, ctx);
-    if (!channel) return null;
-
+export const ChannelInfo = observer(({ channel, onClose }: Props) => {
     if (
         channel.channel_type === "DirectMessage" ||
         channel.channel_type === "SavedMessages"
@@ -30,15 +27,15 @@ export function ChannelInfo({ channel_id, onClose }: Props) {
         <Modal visible={true} onClose={onClose}>
             <div className={styles.info}>
                 <div className={styles.header}>
-                    <h1>{getChannelName(ctx.client, channel, true)}</h1>
+                    <h1>{getChannelName(channel, true)}</h1>
                     <div onClick={onClose}>
                         <X size={36} />
                     </div>
                 </div>
                 <p>
-                    <Markdown content={channel.description} />
+                    <Markdown content={channel.description!} />
                 </p>
             </div>
         </Modal>
     );
-}
+});

src/context/intermediate/popovers/ImageViewer.tsx

-import {
-    Attachment,
-    AttachmentMetadata,
-    EmbedImage,
-} from "revolt.js/dist/api/objects";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Attachment, AttachmentMetadata } from "revolt-api/types/Autumn";
+import { EmbedImage } from "revolt-api/types/January";
 
 import styles from "./ImageViewer.module.scss";
-import { useContext, useEffect } from "preact/hooks";
 
 import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
 import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
 import Modal from "../../../components/ui/Modal";
 
-import { AppContext } from "../../revoltjs/RevoltClient";
+import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
     onClose: () => void;
@@ -22,12 +19,6 @@ interface Props {
 type ImageMetadata = AttachmentMetadata & { type: "Image" };
 
 export function ImageViewer({ attachment, embed, onClose }: Props) {
-    // ! FIXME: temp code
-    // ! add proxy function to client
-    function proxyImage(url: string) {
-        return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
-    }
-
     if (attachment && attachment.metadata.type !== "Image") {
         console.warn(
             `Attempted to use a non valid attatchment type in the image viewer: ${attachment.metadata.type}`,
@@ -35,7 +26,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
         return null;
     }
 
-    const client = useContext(AppContext);
+    const client = useClient();
 
     return (
         <Modal visible={true} onClose={onClose} noBackground>
@@ -43,6 +34,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
                 {attachment && (
                     <>
                         <img
+                            loading="eager"
                             src={client.generateFileURL(attachment)}
                             width={(attachment.metadata as ImageMetadata).width}
                             height={
@@ -55,7 +47,8 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
                 {embed && (
                     <>
                         <img
-                            src={proxyImage(embed.url)}
+                            loading="eager"
+                            src={client.proxyFile(embed.url)}
                             width={embed.width}
                             height={embed.height}
                         />

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -85,11 +85,13 @@ export function ModifyAccountModal({ onClose, field }: Props) {
             ]}>
             {/* Preact / React typing incompatabilities */}
             <form
-                onSubmit={
+                onSubmit={(e) => {
+                    e.preventDefault();
                     handleSubmit(
                         onSubmit,
-                    ) as JSX.GenericEventHandler<HTMLFormElement>
-                }>
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    )(e as any);
+                }}>
                 {field === "email" && (
                     <FormField
                         type="email"

src/context/intermediate/popovers/PendingRequests.tsx

+import { observer } from "mobx-react-lite";
+import { User } from "revolt.js/dist/maps/Users";
+
 import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 
 import Modal from "../../../components/ui/Modal";
 
 import { Friend } from "../../../pages/friends/Friend";
-import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
-    users: string[];
+    users: User[];
     onClose: () => void;
 }
 
-export function PendingRequests({ users: ids, onClose }: Props) {
-    const users = useUsers(ids);
-
+export const PendingRequests = observer(({ users, onClose }: Props) => {
     return (
         <Modal
             visible={true}
             title={<Text id="app.special.friends.pending" />}
             onClose={onClose}>
             <div className={styles.list}>
-                {users
-                    .filter((x) => typeof x !== "undefined")
-                    .map((x) => (
-                        <Friend user={x!} key={x!._id} />
-                    ))}
+                {users.map((x) => (
+                    <Friend user={x!} key={x!._id} />
+                ))}
             </div>
         </Modal>
     );
-}
+});

src/context/intermediate/popovers/UserPicker.module.scss

@@ -4,7 +4,6 @@
     max-height: 360px;
     overflow-y: scroll;
 
-    // ! FIXME: very temporary code
     > label {
         > span {
             align-items: flex-start !important;
@@ -18,4 +17,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file

src/context/intermediate/popovers/UserPicker.tsx

-import { User, Users } from "revolt.js/dist/api/objects";
+import { RelationshipStatus } from "revolt-api/types/Users";
 
 import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
@@ -7,7 +7,7 @@ import { useState } from "preact/hooks";
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
 import Modal from "../../../components/ui/Modal";
 
-import { useUsers } from "../../revoltjs/hooks";
+import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
     omit?: string[];
@@ -19,7 +19,7 @@ export function UserPicker(props: Props) {
     const [selected, setSelected] = useState<string[]>([]);
     const omit = [...(props.omit || []), "00000000000000000000000000"];
 
-    const users = useUsers();
+    const client = useClient();
 
     return (
         <Modal
@@ -33,24 +33,18 @@ export function UserPicker(props: Props) {
                 },
             ]}>
             <div className={styles.list}>
-                {(
-                    users.filter(
+                {[...client.users.values()]
+                    .filter(
                         (x) =>
                             x &&
-                            x.relationship === Users.Relationship.Friend &&
+                            x.relationship === RelationshipStatus.Friend &&
                             !omit.includes(x._id),
-                    ) as User[]
-                )
-                    .map((x) => {
-                        return {
-                            ...x,
-                            selected: selected.includes(x._id),
-                        };
-                    })
+                    )
                     .map((x) => (
                         <UserCheckbox
+                            key={x._id}
                             user={x}
-                            checked={x.selected}
+                            checked={selected.includes(x._id)}
                             onChange={(v) => {
                                 if (v) {
                                     setSelected([...selected, x._id]);

src/context/intermediate/popovers/UserProfile.module.scss

@@ -7,7 +7,7 @@
 
 .header {
     background-size: cover;
-    border-radius: 8px 8px 0 0;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
     background-position: center;
     background-color: var(--secondary-background);
 
@@ -57,13 +57,13 @@
     gap: 8px;
     display: flex;
     padding: 0 1.5em;
-    font-size: .875rem;
+    font-size: 0.875rem;
 
     > div {
         padding: 8px;
         cursor: pointer;
         border-bottom: 2px solid transparent;
-        transition: border-bottom .3s;
+        transition: border-bottom 0.3s;
 
         &[data-active="true"] {
             border-bottom: 2px solid var(--foreground);
@@ -81,7 +81,10 @@
     height: 100%;
     display: flex;
     padding: 1em 1.5em;
+
     max-width: 560px;
+    max-height: 240px;
+
     overflow-y: auto;
     flex-direction: column;
     background: var(--primary-background);
@@ -140,11 +143,11 @@
         padding: 12px;
         display: flex;
         cursor: pointer;
-        border-radius: 4px;
         align-items: center;
+        transition: background-color 0.1s;
         color: var(--secondary-foreground);
+        border-radius: var(--border-radius);
         background-color: var(--secondary-background);
-        transition: background-color .1s;
 
         &:hover {
             background-color: var(--primary-background);

src/context/intermediate/popovers/UserProfile.tsx

 import { Money } from "@styled-icons/boxicons-regular";
 import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link, useHistory } from "react-router-dom";
-import { Users } from "revolt.js/dist/api/objects";
+import { Profile, RelationshipStatus } from "revolt-api/types/Users";
 import { UserPermission } from "revolt.js/dist/api/permissions";
 import { Route } from "revolt.js/dist/api/routes";
-import { decodeTime } from "ulid";
 
 import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
@@ -20,23 +20,17 @@ import Preloader from "../../../components/ui/Preloader";
 
 import Markdown from "../../../components/markdown/Markdown";
 import {
-    AppContext,
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../revoltjs/RevoltClient";
-import {
-    useChannels,
-    useForceUpdate,
-    useUserPermission,
-    useUsers,
-} from "../../revoltjs/hooks";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
     user_id: string;
     dummy?: boolean;
-    onClose: () => void;
-    dummyProfile?: Users.Profile;
+    onClose?: () => void;
+    dummyProfile?: Profile;
 }
 
 enum Badges {
@@ -47,311 +41,313 @@ enum Badges {
     EarlyAdopter = 256,
 }
 
-export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
-    const { openScreen, writeClipboard } = useIntermediate();
-
-    const [profile, setProfile] = useState<undefined | null | Users.Profile>(
-        undefined,
-    );
-    const [mutual, setMutual] = useState<
-        undefined | null | Route<"GET", "/users/id/mutual">["response"]
-    >(undefined);
+export const UserProfile = observer(
+    ({ user_id, onClose, dummy, dummyProfile }: Props) => {
+        const { openScreen, writeClipboard } = useIntermediate();
 
-    const history = useHistory();
-    const client = useContext(AppContext);
-    const status = useContext(StatusContext);
-    const [tab, setTab] = useState("profile");
+        const [profile, setProfile] = useState<undefined | null | Profile>(
+            undefined,
+        );
+        const [mutual, setMutual] = useState<
+            undefined | null | Route<"GET", "/users/id/mutual">["response"]
+        >(undefined);
 
-    const ctx = useForceUpdate();
-    const all_users = useUsers(undefined, ctx);
-    const channels = useChannels(undefined, ctx);
+        const history = useHistory();
+        const client = useClient();
+        const status = useContext(StatusContext);
+        const [tab, setTab] = useState("profile");
 
-    const user = all_users.find((x) => x!._id === user_id);
-    const users = mutual?.users
-        ? all_users.filter((x) => mutual.users.includes(x!._id))
-        : undefined;
-
-    if (!user) {
-        useEffect(onClose, []);
-        return null;
-    }
+        const user = client.users.get(user_id);
+        if (!user) {
+            if (onClose) useEffect(onClose, []);
+            return null;
+        }
 
-    const permissions = useUserPermission(user!._id, ctx);
+        const users = mutual?.users.map((id) => client.users.get(id));
 
-    useLayoutEffect(() => {
-        if (!user_id) return;
-        if (typeof profile !== "undefined") setProfile(undefined);
-        if (typeof mutual !== "undefined") setMutual(undefined);
-    }, [user_id]);
+        const mutualGroups = [...client.channels.values()].filter(
+            (channel) =>
+                channel?.channel_type === "Group" &&
+                channel.recipient_ids!.includes(user_id),
+        );
 
-    if (dummy) {
         useLayoutEffect(() => {
-            setProfile(dummyProfile);
-        }, [dummyProfile]);
-    }
+            if (!user_id) return;
+            if (typeof profile !== "undefined") setProfile(undefined);
+            if (typeof mutual !== "undefined") setMutual(undefined);
+            // eslint-disable-next-line
+        }, [user_id]);
 
-    useEffect(() => {
-        if (dummy) return;
-        if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
-            setMutual(null);
-            client.users.fetchMutual(user_id).then((data) => setMutual(data));
-        }
-    }, [mutual, status]);
-
-    useEffect(() => {
-        if (dummy) return;
-        if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
-            setProfile(null);
+        useEffect(() => {
+            if (dummy) {
+                setProfile(dummyProfile);
+            }
+        }, [dummy, dummyProfile]);
 
-            if (permissions & UserPermission.ViewProfile) {
-                client.users
-                    .fetchProfile(user_id)
-                    .then((data) => setProfile(data))
-                    .catch(() => {});
+        useEffect(() => {
+            if (dummy) return;
+            if (
+                status === ClientStatus.ONLINE &&
+                typeof mutual === "undefined"
+            ) {
+                setMutual(null);
+                user.fetchMutual().then(setMutual);
             }
-        }
-    }, [profile, status]);
+        }, [mutual, status, dummy, user]);
 
-    const mutualGroups = channels.filter(
-        (channel) =>
-            channel?.channel_type === "Group" &&
-            channel.recipients.includes(user_id),
-    );
+        useEffect(() => {
+            if (dummy) return;
+            if (
+                status === ClientStatus.ONLINE &&
+                typeof profile === "undefined"
+            ) {
+                setProfile(null);
 
-    const backgroundURL =
-        profile &&
-        client.users.getBackgroundURL(profile, { width: 1000 }, true);
-    const badges =
-        (user.badges ?? 0) |
-        (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
+                if (user.permission & UserPermission.ViewProfile) {
+                    user.fetchProfile().then(setProfile);
+                }
+            }
+        }, [profile, status, dummy, user]);
 
-    return (
-        <Modal
-            visible
-            border={dummy}
-            padding={false}
-            onClose={onClose}
-            dontModal={dummy}>
-            <div
-                className={styles.header}
-                data-force={profile?.background ? "light" : undefined}
-                style={{
-                    backgroundImage:
-                        backgroundURL &&
-                        `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
-                }}>
-                <div className={styles.profile}>
-                    <UserIcon size={80} target={user} status />
-                    <div className={styles.details}>
-                        <Localizer>
-                            <span
-                                className={styles.username}
-                                onClick={() => writeClipboard(user.username)}>
-                                @{user.username}
-                            </span>
-                        </Localizer>
-                        {user.status?.text && (
-                            <span className={styles.status}>
-                                <UserStatus user={user} tooltip />
-                            </span>
-                        )}
-                    </div>
-                    {user.relationship === Users.Relationship.Friend && (
-                        <Localizer>
-                            <Tooltip
-                                content={
-                                    <Text id="app.context_menu.message_user" />
-                                }>
-                                <IconButton
-                                    onClick={() => {
-                                        onClose();
-                                        history.push(`/open/${user_id}`);
-                                    }}>
-                                    <Envelope size={30} />
-                                </IconButton>
-                            </Tooltip>
-                        </Localizer>
-                    )}
-                    {user.relationship === Users.Relationship.User && (
-                        <IconButton
-                            onClick={() => {
-                                onClose();
-                                if (dummy) return;
-                                history.push(`/settings/profile`);
-                            }}>
-                            <Edit size={28} />
-                        </IconButton>
-                    )}
-                    {(user.relationship === Users.Relationship.Incoming ||
-                        user.relationship === Users.Relationship.None) && (
-                        <IconButton
-                            onClick={() =>
-                                client.users.addFriend(user.username)
-                            }>
-                            <UserPlus size={28} />
-                        </IconButton>
-                    )}
-                </div>
-                <div className={styles.tabs}>
-                    <div
-                        data-active={tab === "profile"}
-                        onClick={() => setTab("profile")}>
-                        <Text id="app.special.popovers.user_profile.profile" />
-                    </div>
-                    {user.relationship !== Users.Relationship.User && (
-                        <>
-                            <div
-                                data-active={tab === "friends"}
-                                onClick={() => setTab("friends")}>
-                                <Text id="app.special.popovers.user_profile.mutual_friends" />
-                            </div>
-                            <div
-                                data-active={tab === "groups"}
-                                onClick={() => setTab("groups")}>
-                                <Text id="app.special.popovers.user_profile.mutual_groups" />
-                            </div>
-                        </>
-                    )}
-                </div>
-            </div>
-            <div className={styles.content}>
-                {tab === "profile" && (
-                    <div>
-                        {!(profile?.content || badges > 0) && (
-                            <div className={styles.empty}>
-                                <Text id="app.special.popovers.user_profile.empty" />
-                            </div>
+        const backgroundURL =
+            profile &&
+            client.generateFileURL(profile.background, { width: 1000 }, true);
+        const badges = user.badges ?? 0;
+
+        return (
+            <Modal
+                visible
+                border={dummy}
+                padding={false}
+                onClose={onClose}
+                dontModal={dummy}>
+                <div
+                    className={styles.header}
+                    data-force={profile?.background ? "light" : undefined}
+                    style={{
+                        backgroundImage:
+                            backgroundURL &&
+                            `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
+                    }}>
+                    <div className={styles.profile}>
+                        <UserIcon size={80} target={user} status animate />
+                        <div className={styles.details}>
+                            <Localizer>
+                                <span
+                                    className={styles.username}
+                                    onClick={() =>
+                                        writeClipboard(user.username)
+                                    }>
+                                    @{user.username}
+                                </span>
+                            </Localizer>
+                            {user.status?.text && (
+                                <span className={styles.status}>
+                                    <UserStatus user={user} tooltip />
+                                </span>
+                            )}
+                        </div>
+                        {user.relationship === RelationshipStatus.Friend && (
+                            <Localizer>
+                                <Tooltip
+                                    content={
+                                        <Text id="app.context_menu.message_user" />
+                                    }>
+                                    <IconButton
+                                        onClick={() => {
+                                            onClose?.();
+                                            history.push(`/open/${user_id}`);
+                                        }}>
+                                        <Envelope size={30} />
+                                    </IconButton>
+                                </Tooltip>
+                            </Localizer>
                         )}
-                        {badges > 0 && (
-                            <div className={styles.category}>
-                                <Text id="app.special.popovers.user_profile.sub.badges" />
-                            </div>
+                        {user.relationship === RelationshipStatus.User && (
+                            <IconButton
+                                onClick={() => {
+                                    onClose?.();
+                                    if (dummy) return;
+                                    history.push(`/settings/profile`);
+                                }}>
+                                <Edit size={28} />
+                            </IconButton>
                         )}
-                        {badges > 0 && (
-                            <div className={styles.badges}>
-                                <Localizer>
-                                    {badges & Badges.Developer ? (
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.navigation.tabs.dev" />
-                                            }>
-                                            <img src="/assets/badges/developer.svg" />
-                                        </Tooltip>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {badges & Badges.Translator ? (
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.special.popovers.user_profile.badges.translator" />
-                                            }>
-                                            <img src="/assets/badges/translator.svg" />
-                                        </Tooltip>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {badges & Badges.EarlyAdopter ? (
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.special.popovers.user_profile.badges.early_adopter" />
-                                            }>
-                                            <img src="/assets/badges/early_adopter.svg" />
-                                        </Tooltip>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {badges & Badges.Supporter ? (
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.special.popovers.user_profile.badges.supporter" />
-                                            }>
-                                            <Money size={32} color="#efab44" />
-                                        </Tooltip>
-                                    ) : (
-                                        <></>
-                                    )}
-                                    {badges & Badges.ResponsibleDisclosure ? (
-                                        <Tooltip
-                                            content={
-                                                <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
-                                            }>
-                                            <Shield size={32} color="gray" />
-                                        </Tooltip>
-                                    ) : (
-                                        <></>
-                                    )}
-                                </Localizer>
-                            </div>
+                        {(user.relationship === RelationshipStatus.Incoming ||
+                            user.relationship === RelationshipStatus.None) && (
+                            <IconButton onClick={() => user.addFriend()}>
+                                <UserPlus size={28} />
+                            </IconButton>
                         )}
-                        {profile?.content && (
-                            <div className={styles.category}>
-                                <Text id="app.special.popovers.user_profile.sub.information" />
-                            </div>
+                    </div>
+                    <div className={styles.tabs}>
+                        <div
+                            data-active={tab === "profile"}
+                            onClick={() => setTab("profile")}>
+                            <Text id="app.special.popovers.user_profile.profile" />
+                        </div>
+                        {user.relationship !== RelationshipStatus.User && (
+                            <>
+                                <div
+                                    data-active={tab === "friends"}
+                                    onClick={() => setTab("friends")}>
+                                    <Text id="app.special.popovers.user_profile.mutual_friends" />
+                                </div>
+                                <div
+                                    data-active={tab === "groups"}
+                                    onClick={() => setTab("groups")}>
+                                    <Text id="app.special.popovers.user_profile.mutual_groups" />
+                                </div>
+                            </>
                         )}
-                        <Markdown content={profile?.content} />
-                        {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
                     </div>
-                )}
-                {tab === "friends" &&
-                    (users ? (
+                </div>
+                <div className={styles.content}>
+                    {tab === "profile" && (
+                        <div>
+                            {!(profile?.content || badges > 0) && (
+                                <div className={styles.empty}>
+                                    <Text id="app.special.popovers.user_profile.empty" />
+                                </div>
+                            )}
+                            {badges > 0 && (
+                                <div className={styles.category}>
+                                    <Text id="app.special.popovers.user_profile.sub.badges" />
+                                </div>
+                            )}
+                            {badges > 0 && (
+                                <div className={styles.badges}>
+                                    <Localizer>
+                                        {badges & Badges.Developer ? (
+                                            <Tooltip
+                                                content={
+                                                    <Text id="app.navigation.tabs.dev" />
+                                                }>
+                                                <img src="/assets/badges/developer.svg" />
+                                            </Tooltip>
+                                        ) : (
+                                            <></>
+                                        )}
+                                        {badges & Badges.Translator ? (
+                                            <Tooltip
+                                                content={
+                                                    <Text id="app.special.popovers.user_profile.badges.translator" />
+                                                }>
+                                                <img src="/assets/badges/translator.svg" />
+                                            </Tooltip>
+                                        ) : (
+                                            <></>
+                                        )}
+                                        {badges & Badges.EarlyAdopter ? (
+                                            <Tooltip
+                                                content={
+                                                    <Text id="app.special.popovers.user_profile.badges.early_adopter" />
+                                                }>
+                                                <img src="/assets/badges/early_adopter.svg" />
+                                            </Tooltip>
+                                        ) : (
+                                            <></>
+                                        )}
+                                        {badges & Badges.Supporter ? (
+                                            <Tooltip
+                                                content={
+                                                    <Text id="app.special.popovers.user_profile.badges.supporter" />
+                                                }>
+                                                <Money
+                                                    size={32}
+                                                    color="#efab44"
+                                                />
+                                            </Tooltip>
+                                        ) : (
+                                            <></>
+                                        )}
+                                        {badges &
+                                        Badges.ResponsibleDisclosure ? (
+                                            <Tooltip
+                                                content={
+                                                    <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
+                                                }>
+                                                <Shield
+                                                    size={32}
+                                                    color="gray"
+                                                />
+                                            </Tooltip>
+                                        ) : (
+                                            <></>
+                                        )}
+                                    </Localizer>
+                                </div>
+                            )}
+                            {profile?.content && (
+                                <div className={styles.category}>
+                                    <Text id="app.special.popovers.user_profile.sub.information" />
+                                </div>
+                            )}
+                            <Markdown content={profile?.content} />
+                            {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
+                        </div>
+                    )}
+                    {tab === "friends" &&
+                        (users ? (
+                            <div className={styles.entries}>
+                                {users.length === 0 ? (
+                                    <div className={styles.empty}>
+                                        <Text id="app.special.popovers.user_profile.no_users" />
+                                    </div>
+                                ) : (
+                                    users.map(
+                                        (x) =>
+                                            x && (
+                                                <div
+                                                    onClick={() =>
+                                                        openScreen({
+                                                            id: "profile",
+                                                            user_id: x._id,
+                                                        })
+                                                    }
+                                                    className={styles.entry}
+                                                    key={x._id}>
+                                                    <UserIcon
+                                                        size={32}
+                                                        target={x}
+                                                    />
+                                                    <span>{x.username}</span>
+                                                </div>
+                                            ),
+                                    )
+                                )}
+                            </div>
+                        ) : (
+                            <Preloader type="ring" />
+                        ))}
+                    {tab === "groups" && (
                         <div className={styles.entries}>
-                            {users.length === 0 ? (
+                            {mutualGroups.length === 0 ? (
                                 <div className={styles.empty}>
-                                    <Text id="app.special.popovers.user_profile.no_users" />
+                                    <Text id="app.special.popovers.user_profile.no_groups" />
                                 </div>
                             ) : (
-                                users.map(
+                                mutualGroups.map(
                                     (x) =>
-                                        x && (
-                                            <div
-                                                onClick={() =>
-                                                    openScreen({
-                                                        id: "profile",
-                                                        user_id: x._id,
-                                                    })
-                                                }
-                                                className={styles.entry}
-                                                key={x._id}>
-                                                <UserIcon
-                                                    size={32}
-                                                    target={x}
-                                                />
-                                                <span>{x.username}</span>
-                                            </div>
+                                        x?.channel_type === "Group" && (
+                                            <Link to={`/channel/${x._id}`}>
+                                                <div
+                                                    className={styles.entry}
+                                                    key={x._id}>
+                                                    <ChannelIcon
+                                                        target={x}
+                                                        size={32}
+                                                    />
+                                                    <span>{x.name}</span>
+                                                </div>
+                                            </Link>
                                         ),
                                 )
                             )}
                         </div>
-                    ) : (
-                        <Preloader type="ring" />
-                    ))}
-                {tab === "groups" && (
-                    <div className={styles.entries}>
-                        {mutualGroups.length === 0 ? (
-                            <div className={styles.empty}>
-                                <Text id="app.special.popovers.user_profile.no_groups" />
-                            </div>
-                        ) : (
-                            mutualGroups.map(
-                                (x) =>
-                                    x?.channel_type === "Group" && (
-                                        <Link to={`/channel/${x._id}`}>
-                                            <div
-                                                className={styles.entry}
-                                                key={x._id}>
-                                                <ChannelIcon
-                                                    target={x}
-                                                    size={32}
-                                                />
-                                                <span>{x.name}</span>
-                                            </div>
-                                        </Link>
-                                    ),
-                            )
-                        )}
-                    </div>
-                )}
-            </div>
-        </Modal>
-    );
-}
+                    )}
+                </div>
+            </Modal>
+        );
+    },
+);

src/context/revoltjs/FileUploads.module.scss

@@ -10,7 +10,7 @@
 
     &.banner {
         .image {
-            border-radius: 4px;
+            border-radius: var(--border-radius);
         }
 
         .modify {

src/context/revoltjs/FileUploads.tsx

-import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
+import { Plus } from "@styled-icons/boxicons-regular";
 import { Pencil } from "@styled-icons/boxicons-solid";
 import Axios, { AxiosRequestConfig } from "axios";
 
@@ -55,7 +55,7 @@ export async function uploadFile(
     const formData = new FormData();
     formData.append("file", file);
 
-    const res = await Axios.post(autumnURL + "/" + tag, formData, {
+    const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
         headers: {
             "Content-Type": "multipart/form-data",
         },
@@ -78,7 +78,7 @@ export function grabFiles(
     input.onchange = async (e) => {
         const files = (e.currentTarget as HTMLInputElement)?.files;
         if (!files) return;
-        for (let file of files) {
+        for (const file of files) {
             if (file.size > maxFileSize) {
                 return tooLarge();
             }
@@ -139,16 +139,15 @@ export function FileUploader(props: Props) {
             } else {
                 onClick();
             }
+        } else if (props.previewURL) {
+            props.remove();
         } else {
-            if (props.previewURL) {
-                props.remove();
-            } else {
-                onClick();
-            }
+            onClick();
         }
     }
 
     if (props.behaviour === "multi" && props.append) {
+        // eslint-disable-next-line
         useEffect(() => {
             // File pasting.
             function paste(e: ClipboardEvent) {
@@ -156,7 +155,7 @@ export function FileUploader(props: Props) {
                 if (typeof items === "undefined") return;
                 if (props.behaviour !== "multi" || !props.append) return;
 
-                let files = [];
+                const files = [];
                 for (const item of items) {
                     if (!item.type.startsWith("text/")) {
                         const blob = item.getAsFile();
@@ -190,7 +189,7 @@ export function FileUploader(props: Props) {
 
                 const dropped = e.dataTransfer?.files;
                 if (dropped) {
-                    let files = [];
+                    const files = [];
                     for (const item of dropped) {
                         if (item.size > props.maxFileSize) {
                             openScreen({ id: "error", error: "FileTooLarge" });
@@ -212,7 +211,7 @@ export function FileUploader(props: Props) {
                 document.removeEventListener("dragover", dragover);
                 document.removeEventListener("drop", drop);
             };
-        }, [props.append]);
+        }, [openScreen, props, props.append]);
     }
 
     if (props.style === "icon" || props.style === "banner") {

src/context/revoltjs/Notifications.tsx

 import { Route, Switch, useHistory, useParams } from "react-router-dom";
-import { Message, SYSTEM_USER_ID, User } from "revolt.js";
-import { Users } from "revolt.js/dist/api/objects";
+import { Presence, RelationshipStatus } from "revolt-api/types/Users";
+import { SYSTEM_USER_ID } from "revolt.js";
+import { Message } from "revolt.js/dist/maps/Messages";
+import { User } from "revolt.js/dist/maps/Users";
 import { decodeTime } from "ulid";
 
-import { useContext, useEffect } from "preact/hooks";
+import { useCallback, useContext, useEffect } from "preact/hooks";
 
 import { useTranslation } from "../../lib/i18n";
 
@@ -32,7 +34,7 @@ async function createNotification(
     try {
         return new Notification(title, options);
     } catch (err) {
-        let sw = await navigator.serviceWorker.getRegistration();
+        const sw = await navigator.serviceWorker.getRegistration();
         sw?.showNotification(title, options);
     }
 }
@@ -49,195 +51,225 @@ function Notifier({ options, notifs }: Props) {
     const history = useHistory();
     const playSound = useContext(SoundContext);
 
-    async function message(msg: Message) {
-        if (msg.author === client.user!._id) return;
-        if (msg.channel === channel_id && document.hasFocus()) return;
-        if (client.user!.status?.presence === Users.Presence.Busy) return;
+    const message = useCallback(
+        async (msg: Message) => {
+            if (msg.author_id === client.user!._id) return;
+            if (msg.channel_id === channel_id && document.hasFocus()) return;
+            if (client.user!.status?.presence === Presence.Busy) return;
+            if (msg.author?.relationship === RelationshipStatus.Blocked) return;
 
-        const channel = client.channels.get(msg.channel);
-        const author = client.users.get(msg.author);
-        if (!channel) return;
-        if (author?.relationship === Users.Relationship.Blocked) return;
+            const notifState = getNotificationState(notifs, msg.channel!);
+            if (!shouldNotify(notifState, msg, client.user!._id)) return;
 
-        const notifState = getNotificationState(notifs, channel);
-        if (!shouldNotify(notifState, msg, client.user!._id)) return;
+            playSound("message");
+            if (!showNotification) return;
 
-        playSound("message");
-        if (!showNotification) return;
-
-        let title;
-        switch (channel.channel_type) {
-            case "SavedMessages":
-                return;
-            case "DirectMessage":
-                title = `@${author?.username}`;
-                break;
-            case "Group":
-                if (author?._id === SYSTEM_USER_ID) {
-                    title = channel.name;
-                } else {
-                    title = `@${author?.username} - ${channel.name}`;
-                }
-                break;
-            case "TextChannel":
-                const server = client.servers.get(channel.server);
-                title = `@${author?.username} (#${channel.name}, ${server?.name})`;
-                break;
-            default:
-                title = msg.channel;
-                break;
-        }
-
-        let image;
-        if (msg.attachments) {
-            let imageAttachment = msg.attachments.find(
-                (x) => x.metadata.type === "Image",
-            );
-            if (imageAttachment) {
-                image = client.generateFileURL(imageAttachment, {
-                    max_side: 720,
-                });
-            }
-        }
-
-        let body, icon;
-        if (typeof msg.content === "string") {
-            body = client.markdownToText(msg.content);
-            icon = client.users.getAvatarURL(msg.author, { max_side: 256 });
-        } else {
-            let users = client.users;
-            switch (msg.content.type) {
-                case "user_added":
-                case "user_remove":
-                    body = translate(
-                        `app.main.channel.system.${
-                            msg.content.type === "user_added"
-                                ? "added_by"
-                                : "removed_by"
-                        }`,
-                        {
-                            user: users.get(msg.content.id)?.username,
-                            other_user: users.get(msg.content.by)?.username,
-                        },
-                    );
-                    icon = client.users.getAvatarURL(msg.content.id, {
-                        max_side: 256,
-                    });
+            let title;
+            switch (msg.channel?.channel_type) {
+                case "SavedMessages":
+                    return;
+                case "DirectMessage":
+                    title = `@${msg.author?.username}`;
                     break;
-                case "user_joined":
-                case "user_left":
-                case "user_kicked":
-                case "user_banned":
-                    body = translate(
-                        `app.main.channel.system.${msg.content.type}`,
-                        { user: users.get(msg.content.id)?.username },
-                    );
-                    icon = client.users.getAvatarURL(msg.content.id, {
-                        max_side: 256,
-                    });
+                case "Group":
+                    if (msg.author?._id === SYSTEM_USER_ID) {
+                        title = msg.channel.name;
+                    } else {
+                        title = `@${msg.author?.username} - ${msg.channel.name}`;
+                    }
                     break;
-                case "channel_renamed":
-                    body = translate(
-                        `app.main.channel.system.channel_renamed`,
-                        {
-                            user: users.get(msg.content.by)?.username,
-                            name: msg.content.name,
-                        },
-                    );
-                    icon = client.users.getAvatarURL(msg.content.by, {
-                        max_side: 256,
-                    });
+                case "TextChannel":
+                    title = `@${msg.author?.username} (#${msg.channel.name}, ${msg.channel.server?.name})`;
                     break;
-                case "channel_description_changed":
-                case "channel_icon_changed":
-                    body = translate(
-                        `app.main.channel.system.${msg.content.type}`,
-                        { user: users.get(msg.content.by)?.username },
-                    );
-                    icon = client.users.getAvatarURL(msg.content.by, {
-                        max_side: 256,
-                    });
+                default:
+                    title = msg.channel?._id;
                     break;
             }
-        }
 
-        let notif = await createNotification(title, {
-            icon,
-            image,
-            body,
-            timestamp: decodeTime(msg._id),
-            tag: msg.channel,
-            badge: "/assets/icons/android-chrome-512x512.png",
-            silent: true,
-        });
+            let image;
+            if (msg.attachments) {
+                const imageAttachment = msg.attachments.find(
+                    (x) => x.metadata.type === "Image",
+                );
+                if (imageAttachment) {
+                    image = client.generateFileURL(imageAttachment, {
+                        max_side: 720,
+                    });
+                }
+            }
 
-        if (notif) {
-            notif.addEventListener("click", () => {
-                window.focus();
-                const id = msg.channel;
-                if (id !== channel_id) {
-                    let channel = client.channels.get(id);
-                    if (channel) {
-                        if (channel.channel_type === "TextChannel") {
-                            history.push(
-                                `/server/${channel.server}/channel/${id}`,
+            let body, icon;
+            if (typeof msg.content === "string") {
+                body = client.markdownToText(msg.content);
+                icon = msg.author?.generateAvatarURL({ max_side: 256 });
+            } else {
+                const users = client.users;
+                switch (msg.content.type) {
+                    case "user_added":
+                    case "user_remove":
+                        {
+                            const user = users.get(msg.content.id);
+                            body = translate(
+                                `app.main.channel.system.${
+                                    msg.content.type === "user_added"
+                                        ? "added_by"
+                                        : "removed_by"
+                                }`,
+                                {
+                                    user: user?.username,
+                                    other_user: users.get(msg.content.by)
+                                        ?.username,
+                                },
                             );
-                        } else {
-                            history.push(`/channel/${id}`);
+                            icon = user?.generateAvatarURL({
+                                max_side: 256,
+                            });
                         }
-                    }
+                        break;
+                    case "user_joined":
+                    case "user_left":
+                    case "user_kicked":
+                    case "user_banned":
+                        {
+                            const user = users.get(msg.content.id);
+                            body = translate(
+                                `app.main.channel.system.${msg.content.type}`,
+                                { user: user?.username },
+                            );
+                            icon = user?.generateAvatarURL({
+                                max_side: 256,
+                            });
+                        }
+                        break;
+                    case "channel_renamed":
+                        {
+                            const user = users.get(msg.content.by);
+                            body = translate(
+                                `app.main.channel.system.channel_renamed`,
+                                {
+                                    user: users.get(msg.content.by)?.username,
+                                    name: msg.content.name,
+                                },
+                            );
+                            icon = user?.generateAvatarURL({
+                                max_side: 256,
+                            });
+                        }
+                        break;
+                    case "channel_description_changed":
+                    case "channel_icon_changed":
+                        {
+                            const user = users.get(msg.content.by);
+                            body = translate(
+                                `app.main.channel.system.${msg.content.type}`,
+                                { user: users.get(msg.content.by)?.username },
+                            );
+                            icon = user?.generateAvatarURL({
+                                max_side: 256,
+                            });
+                        }
+                        break;
                 }
+            }
+
+            const notif = await createNotification(title!, {
+                icon,
+                image,
+                body,
+                timestamp: decodeTime(msg._id),
+                tag: msg.channel?._id,
+                badge: "/assets/icons/android-chrome-512x512.png",
+                silent: true,
             });
 
-            notifications[msg.channel] = notif;
-            notif.addEventListener(
-                "close",
-                () => delete notifications[msg.channel],
-            );
-        }
-    }
+            if (notif) {
+                notif.addEventListener("click", () => {
+                    window.focus();
+                    const id = msg.channel_id;
+                    if (id !== channel_id) {
+                        const channel = client.channels.get(id);
+                        if (channel) {
+                            if (channel.channel_type === "TextChannel") {
+                                history.push(
+                                    `/server/${channel.server_id}/channel/${id}`,
+                                );
+                            } else {
+                                history.push(`/channel/${id}`);
+                            }
+                        }
+                    }
+                });
+
+                notifications[msg.channel_id] = notif;
+                notif.addEventListener(
+                    "close",
+                    () => delete notifications[msg.channel_id],
+                );
+            }
+        },
+        [
+            history,
+            showNotification,
+            translate,
+            channel_id,
+            client,
+            notifs,
+            playSound,
+        ],
+    );
 
-    async function relationship(user: User, property: string) {
-        if (client.user?.status?.presence === Users.Presence.Busy) return;
-        if (property !== "relationship") return;
-        if (!showNotification) return;
+    const relationship = useCallback(
+        async (user: User) => {
+            if (client.user?.status?.presence === Presence.Busy) return;
+            if (!showNotification) return;
 
-        let event;
-        switch (user.relationship) {
-            case Users.Relationship.Incoming:
-                event = translate("notifications.sent_request", {
-                    person: user.username,
-                });
-                break;
-            case Users.Relationship.Friend:
-                event = translate("notifications.now_friends", {
-                    person: user.username,
-                });
-                break;
-            default:
-                return;
-        }
+            let event;
+            switch (user.relationship) {
+                case RelationshipStatus.Incoming:
+                    event = translate("notifications.sent_request", {
+                        person: user.username,
+                    });
+                    break;
+                case RelationshipStatus.Friend:
+                    event = translate("notifications.now_friends", {
+                        person: user.username,
+                    });
+                    break;
+                default:
+                    return;
+            }
 
-        let notif = await createNotification(event, {
-            icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
-            badge: "/assets/icons/android-chrome-512x512.png",
-            timestamp: +new Date(),
-        });
+            const notif = await createNotification(event, {
+                icon: user.generateAvatarURL({ max_side: 256 }),
+                badge: "/assets/icons/android-chrome-512x512.png",
+                timestamp: +new Date(),
+            });
 
-        notif?.addEventListener("click", () => {
-            history.push(`/friends`);
-        });
-    }
+            notif?.addEventListener("click", () => {
+                history.push(`/friends`);
+            });
+        },
+        [client.user?.status?.presence, history, showNotification, translate],
+    );
 
     useEffect(() => {
         client.addListener("message", message);
-        client.users.addListener("mutation", relationship);
+        client.addListener("user/relationship", relationship);
 
         return () => {
             client.removeListener("message", message);
-            client.users.removeListener("mutation", relationship);
+            client.removeListener("user/relationship", relationship);
         };
-    }, [client, playSound, guild_id, channel_id, showNotification, notifs]);
+    }, [
+        client,
+        playSound,
+        guild_id,
+        channel_id,
+        showNotification,
+        notifs,
+        message,
+        relationship,
+    ]);
 
     useEffect(() => {
         function visChange() {