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";
@@ -9,9 +12,6 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import { TextReact } from "../../../lib/i18n";
 
-import { Channel, User } from "../../../mobx";
-import { useData } from "../../../mobx/State";
-
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
 import InputBox from "../../../components/ui/InputBox";
@@ -21,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 {
@@ -57,19 +57,19 @@ export function PromptModal({
 type SpecialProps = { onClose: () => void } & (
     | { type: "leave_group"; target: Channel }
     | { type: "close_dm"; target: Channel }
-    | { type: "leave_server"; target: Servers.Server }
-    | { type: "delete_server"; target: Servers.Server }
+    | { type: "leave_server"; target: Server }
+    | { type: "delete_server"; target: Server }
     | { type: "delete_channel"; target: Channel }
-    | { type: "delete_message"; target: Channels.Message }
+    | { type: "delete_message"; target: MessageI }
     | {
           type: "create_invite";
           target: Channel;
       }
-    | { type: "kick_member"; target: Servers.Server; user: User }
-    | { type: "ban_member"; target: Servers.Server; user: User }
+    | { 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: Servers.Server }
+    | { type: "create_channel"; target: Server }
 );
 
 export const SpecialPromptModal = observer((props: SpecialProps) => {
@@ -104,9 +104,7 @@ export const SpecialPromptModal = observer((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;
@@ -137,27 +135,19 @@ export const SpecialPromptModal = observer((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;
                                     }
 
@@ -203,11 +193,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 setProcessing(true);
 
                                 try {
-                                    await client.channels.deleteMessage(
-                                        props.target.channel,
-                                        props.target._id,
-                                    );
-
+                                    props.target.delete();
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -229,7 +215,7 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 id={`app.special.modals.prompt.confirm_delete_message_long`}
                             />
                             <Message
-                                message={mapMessage(props.target)}
+                                message={props.target}
                                 head={true}
                                 contrast
                             />
@@ -247,12 +233,12 @@ export const SpecialPromptModal = observer((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
@@ -306,10 +292,13 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 setProcessing(true);
 
                                 try {
-                                    await client.members.kickMember(
-                                        props.target._id,
-                                        props.user._id,
-                                    );
+                                    client.members
+                                        .getKey({
+                                            server: props.target._id,
+                                            user: props.user._id,
+                                        })
+                                        ?.kick();
+
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -357,11 +346,9 @@ export const SpecialPromptModal = observer((props: SpecialProps) => {
                                 setProcessing(true);
 
                                 try {
-                                    await client.servers.banUser(
-                                        props.target._id,
-                                        props.user._id,
-                                        { reason },
-                                    );
+                                    await props.target.banUser(props.user._id, {
+                                        reason,
+                                    });
                                     onClose();
                                 } catch (err) {
                                     setError(takeError(err));
@@ -420,14 +407,11 @@ export const SpecialPromptModal = observer((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}`,

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 { Channel } from "../../../mobx";
-
 import Modal from "../../../components/ui/Modal";
 
 import Markdown from "../../../components/markdown/Markdown";
-import { useClient } from "../../revoltjs/RevoltClient";
-import { useForceUpdate } from "../../revoltjs/hooks";
 import { getChannelName } from "../../revoltjs/util";
 
 interface Props {
@@ -26,12 +23,11 @@ export const ChannelInfo = observer(({ channel, onClose }: Props) => {
         return null;
     }
 
-    const client = useClient();
     return (
         <Modal visible={true} onClose={onClose}>
             <div className={styles.info}>
                 <div className={styles.header}>
-                    <h1>{getChannelName(client, channel, true)}</h1>
+                    <h1>{getChannelName(channel, true)}</h1>
                     <div onClick={onClose}>
                         <X size={36} />
                     </div>

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";

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 { User } from "../../../mobx";
-
 import Modal from "../../../components/ui/Modal";
 
 import { Friend } from "../../../pages/friends/Friend";

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 { 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";
 import { useState } from "preact/hooks";
 
-import { useData } from "../../../mobx/State";
-
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
 import Modal from "../../../components/ui/Modal";
 
+import { useClient } from "../../revoltjs/RevoltClient";
+
 interface Props {
     omit?: string[];
     onClose: () => void;
@@ -19,7 +19,7 @@ export function UserPicker(props: Props) {
     const [selected, setSelected] = useState<string[]>([]);
     const omit = [...(props.omit || []), "00000000000000000000000000"];
 
-    const store = useData();
+    const client = useClient();
 
     return (
         <Modal
@@ -33,15 +33,16 @@ export function UserPicker(props: Props) {
                 },
             ]}>
             <div className={styles.list}>
-                {[...store.users.values()]
+                {[...client.users.values()]
                     .filter(
                         (x) =>
                             x &&
-                            x.relationship === Users.Relationship.Friend &&
+                            x.relationship === RelationshipStatus.Friend &&
                             !omit.includes(x._id),
                     )
                     .map((x) => (
                         <UserCheckbox
+                            key={x._id}
                             user={x}
                             checked={selected.includes(x._id)}
                             onChange={(v) => {

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

@@ -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);
@@ -141,7 +144,7 @@
         display: flex;
         cursor: pointer;
         align-items: center;
-        transition: background-color .1s;
+        transition: background-color 0.1s;
         color: var(--secondary-foreground);
         border-radius: var(--border-radius);
         background-color: var(--secondary-background);

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";
 
@@ -147,6 +147,7 @@ export function FileUploader(props: Props) {
     }
 
     if (props.behaviour === "multi" && props.append) {
+        // eslint-disable-next-line
         useEffect(() => {
             // File pasting.
             function paste(e: ClipboardEvent) {
@@ -210,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/util.tsx

-import { Client } from "revolt.js";
-import { Message } from "revolt.js/dist/api/objects";
+import { Channel } from "revolt.js/dist/maps/Channels";
 
 import { Text } from "preact-i18n";
 
-import { Channel } from "../../mobx";
-
 import { Children } from "../../types/Preact";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function takeError(error: any): string {
     const type = error?.response?.data?.type;
     const id = type;
@@ -25,7 +23,6 @@ export function takeError(error: any): string {
 }
 
 export function getChannelName(
-    client: Client,
     channel: Channel,
     prefixType?: boolean,
 ): Children {
@@ -33,11 +30,10 @@ export function getChannelName(
         return <Text id="app.navigation.tabs.saved" />;
 
     if (channel.channel_type === "DirectMessage") {
-        const uid = client.channels.getRecipient(channel._id);
         return (
             <>
                 {prefixType && "@"}
-                {client.users.get(uid)?.username}
+                {channel.recipient!.username}
             </>
         );
     }
@@ -48,12 +44,3 @@ export function getChannelName(
 
     return <>{channel.name}</>;
 }
-
-export type MessageObject = Omit<Message, "edited"> & { edited?: string };
-export function mapMessage(message: Partial<Message>) {
-    const { edited, ...msg } = message;
-    return {
-        ...msg,
-        edited: edited?.$date,
-    } as MessageObject;
-}