src/lib/TextAreaAutoSize.tsx

@@ -10,7 +10,7 @@ import { isTouchscreenDevice } from "./isTouchscreenDevice";
 
 type TextAreaAutoSizeProps = Omit<
     JSX.HTMLAttributes<HTMLTextAreaElement>,
-    "style" | "value" | "onChange"
+    "style" | "value" | "onChange" | "children" | "as"
 > &
     TextAreaProps & {
         forceFocus?: boolean;
@@ -63,8 +63,6 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
         lineHeight,
         hideBorder,
         forceFocus,
-        children,
-        as,
         onChange,
         ...textAreaProps
     } = props;
@@ -81,7 +79,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
     useEffect(() => {
         if (isTouchscreenDevice) return;
         autoFocus && ref.current && ref.current.focus();
-    }, [value]);
+    }, [value, autoFocus]);
 
     const inputSelected = () =>
         ["TEXTAREA", "INPUT"].includes(document.activeElement?.nodeName ?? "");
@@ -114,7 +112,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
 
         document.body.addEventListener("keydown", keyDown);
         return () => document.body.removeEventListener("keydown", keyDown);
-    }, [ref]);
+    }, [ref, autoFocus, forceFocus, value]);
 
     useEffect(() => {
         if (!ref.current) return;
@@ -124,8 +122,12 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
             }
         }
 
-        return internalSubscribe("TextArea", "focus", focus);
-    }, [ref]);
+        return internalSubscribe(
+            "TextArea",
+            "focus",
+            focus as (...args: unknown[]) => void,
+        );
+    }, [props.id, ref]);
 
     return (
         <Container>

src/lib/conversion.ts

 export function urlBase64ToUint8Array(base64String: string) {
     const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
     const base64 = (base64String + padding)
-        .replace(/\-/g, "+")
+        .replace(/-/g, "+")
         .replace(/_/g, "/");
     const rawData = window.atob(base64);
 

src/lib/debounce.ts

-export function debounce(cb: Function, duration: number) {
+export function debounce(cb: (...args: unknown[]) => void, duration: number) {
     // Store the timer variable.
     let timer: NodeJS.Timeout;
     // This function is given to React.
-    return (...args: any[]) => {
+    return (...args: unknown[]) => {
         // Get rid of the old timer.
         clearTimeout(timer);
         // Set a new timer.

src/lib/eventEmitter.ts

@@ -5,13 +5,13 @@ export const InternalEvent = new EventEmitter();
 export function internalSubscribe(
     ns: string,
     event: string,
-    fn: (...args: any[]) => void,
+    fn: (...args: unknown[]) => void,
 ) {
     InternalEvent.addListener(`${ns}/${event}`, fn);
     return () => InternalEvent.removeListener(`${ns}/${event}`, fn);
 }
 
-export function internalEmit(ns: string, event: string, ...args: any[]) {
+export function internalEmit(ns: string, event: string, ...args: unknown[]) {
     InternalEvent.emit(`${ns}/${event}`, ...args);
 }
 

src/lib/i18n.tsx

 import { IntlContext, translate } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
+import { Dictionary } from "../context/Locale";
+
 import { Children } from "../types/Preact";
 
 interface Fields {
@@ -12,18 +14,6 @@ interface Props {
     fields: Fields;
 }
 
-export interface Dictionary {
-    dayjs: {
-        defaults: {
-            twelvehour: "yes" | "no";
-            separator: string;
-            date: "traditional" | "simplified" | "ISO8601";
-        };
-        timeFormat: string;
-    };
-    [key: string]: Object | string;
-}
-
 export interface IntlType {
     intl: {
         dictionary: Dictionary;
@@ -57,7 +47,7 @@ export function TextReact({ id, fields }: Props) {
     const path = id.split(".");
     let entry = intl.dictionary[path.shift()!];
     for (const key of path) {
-        // @ts-expect-error
+        // @ts-expect-error TODO: lazy
         entry = entry[key];
     }
 
@@ -66,8 +56,12 @@ export function TextReact({ id, fields }: Props) {
 
 export function useTranslation() {
     const { intl } = useContext(IntlContext) as unknown as IntlType;
-    return (id: string, fields?: Object, plural?: number, fallback?: string) =>
-        translate(id, "", intl.dictionary, fields, plural, fallback);
+    return (
+        id: string,
+        fields?: Record<string, string | undefined>,
+        plural?: number,
+        fallback?: string,
+    ) => translate(id, "", intl.dictionary, fields, plural, fallback);
 }
 
 export function useDictionary() {

src/lib/js.ts

+/* eslint-disable @typescript-eslint/no-empty-function */
+export const noop = () => {};
+export const noopAsync = async () => {};
+/* eslint-enable @typescript-eslint/no-empty-function */

src/lib/renderer/Singleton.ts

+/* eslint-disable react-hooks/rules-of-hooks */
 import EventEmitter3 from "eventemitter3";
-import { Client, Message } from "revolt.js";
+import { Client } from "revolt.js";
+import { Message } from "revolt.js/dist/maps/Messages";
 
 import { useEffect, useState } from "preact/hooks";
 
@@ -122,6 +124,7 @@ export class SingletonRenderer extends EventEmitter3 {
                                         window
                                             .getComputedStyle(child)
                                             .marginTop.slice(0, -2),
+                                        10,
                                     );
                             }
                         }
@@ -166,6 +169,7 @@ export class SingletonRenderer extends EventEmitter3 {
                                         window
                                             .getComputedStyle(child)
                                             .marginTop.slice(0, -2),
+                                        10,
                                     );
                             }
                         }

src/lib/renderer/simple/SimpleRenderer.ts

-import { mapMessage } from "../../../context/revoltjs/util";
-
+import { noopAsync } from "../../js";
 import { SMOOTH_SCROLL_ON_RECEIVE } from "../Singleton";
 import { RendererRoutines } from "../types";
 
@@ -8,14 +7,10 @@ export const SimpleRenderer: RendererRoutines = {
         if (renderer.client!.websocket.connected) {
             if (nearby)
                 renderer
-                    .client!.channels.fetchMessagesWithUsers(
-                        id,
-                        { nearby, limit: 100 },
-                        true,
-                    )
-                    .then(({ messages: data }) => {
-                        data.sort((a, b) => a._id.localeCompare(b._id));
-                        const messages = data.map((x) => mapMessage(x));
+                    .client!.channels.get(id)!
+                    .fetchMessagesWithUsers({ nearby, limit: 100 })
+                    .then(({ messages }) => {
+                        messages.sort((a, b) => a._id.localeCompare(b._id));
                         renderer.setState(
                             id,
                             {
@@ -29,16 +24,16 @@ export const SimpleRenderer: RendererRoutines = {
                     });
             else
                 renderer
-                    .client!.channels.fetchMessagesWithUsers(id, {}, true)
-                    .then(({ messages: data }) => {
-                        data.reverse();
-                        const messages = data.map((x) => mapMessage(x));
+                    .client!.channels.get(id)!
+                    .fetchMessagesWithUsers({})
+                    .then(({ messages }) => {
+                        messages.reverse();
                         renderer.setState(
                             id,
                             {
                                 type: "RENDER",
                                 messages,
-                                atTop: data.length < 50,
+                                atTop: messages.length < 50,
                                 atBottom: true,
                             },
                             { type: "ScrollToBottom", smooth },
@@ -49,12 +44,12 @@ export const SimpleRenderer: RendererRoutines = {
         }
     },
     receive: async (renderer, message) => {
-        if (message.channel !== renderer.channel) return;
+        if (message.channel_id !== renderer.channel) return;
         if (renderer.state.type !== "RENDER") return;
         if (renderer.state.messages.find((x) => x._id === message._id)) return;
         if (!renderer.state.atBottom) return;
 
-        let messages = [...renderer.state.messages, mapMessage(message)];
+        let messages = [...renderer.state.messages, message];
         let atTop = renderer.state.atTop;
         if (messages.length > 150) {
             messages = messages.slice(messages.length - 150);
@@ -62,7 +57,7 @@ export const SimpleRenderer: RendererRoutines = {
         }
 
         renderer.setState(
-            message.channel,
+            message.channel_id,
             {
                 ...renderer.state,
                 messages,
@@ -71,28 +66,7 @@ export const SimpleRenderer: RendererRoutines = {
             { type: "StayAtBottom", smooth: SMOOTH_SCROLL_ON_RECEIVE },
         );
     },
-    edit: async (renderer, id, patch) => {
-        const channel = renderer.channel;
-        if (!channel) return;
-        if (renderer.state.type !== "RENDER") return;
-
-        const messages = [...renderer.state.messages];
-        const index = messages.findIndex((x) => x._id === id);
-
-        if (index > -1) {
-            const message = { ...messages[index], ...mapMessage(patch) };
-            messages.splice(index, 1, message);
-
-            renderer.setState(
-                channel,
-                {
-                    ...renderer.state,
-                    messages,
-                },
-                { type: "StayAtBottom" },
-            );
-        }
-    },
+    edit: noopAsync,
     delete: async (renderer, id) => {
         const channel = renderer.channel;
         if (!channel) return;
@@ -122,14 +96,11 @@ export const SimpleRenderer: RendererRoutines = {
         if (state.type !== "RENDER") return;
         if (state.atTop) return;
 
-        const { messages: data } =
-            await renderer.client!.channels.fetchMessagesWithUsers(
-                channel,
-                {
-                    before: state.messages[0]._id,
-                },
-                true,
-            );
+        const { messages: data } = await renderer
+            .client!.channels.get(channel)!
+            .fetchMessagesWithUsers({
+                before: state.messages[0]._id,
+            });
 
         if (data.length === 0) {
             return renderer.setState(channel, {
@@ -139,7 +110,7 @@ export const SimpleRenderer: RendererRoutines = {
         }
 
         data.reverse();
-        let messages = [...data.map((x) => mapMessage(x)), ...state.messages];
+        let messages = [...data, ...state.messages];
 
         let atTop = false;
         if (data.length < 50) {
@@ -166,15 +137,12 @@ export const SimpleRenderer: RendererRoutines = {
         if (state.type !== "RENDER") return;
         if (state.atBottom) return;
 
-        const { messages: data } =
-            await renderer.client!.channels.fetchMessagesWithUsers(
-                channel,
-                {
-                    after: state.messages[state.messages.length - 1]._id,
-                    sort: "Oldest",
-                },
-                true,
-            );
+        const { messages: data } = await renderer
+            .client!.channels.get(channel)!
+            .fetchMessagesWithUsers({
+                after: state.messages[state.messages.length - 1]._id,
+                sort: "Oldest",
+            });
 
         if (data.length === 0) {
             return renderer.setState(channel, {
@@ -183,7 +151,7 @@ export const SimpleRenderer: RendererRoutines = {
             });
         }
 
-        let messages = [...state.messages, ...data.map((x) => mapMessage(x))];
+        let messages = [...state.messages, ...data];
 
         let atBottom = false;
         if (data.length < 50) {

src/lib/renderer/types.ts

-import { Message } from "revolt.js";
-
-import { MessageObject } from "../../context/revoltjs/util";
+import { Message } from "revolt.js/dist/maps/Messages";
 
 import { SingletonRenderer } from "./Singleton";
 
@@ -20,7 +18,7 @@ export type RenderState =
           type: "RENDER";
           atTop: boolean;
           atBottom: boolean;
-          messages: MessageObject[];
+          messages: Message[];
       };
 
 export interface RendererRoutines {

src/lib/stopPropagation.ts

 export const stopPropagation = (
-    ev: JSX.TargetedMouseEvent<HTMLDivElement>,
-    _consume?: any,
+    ev: JSX.TargetedMouseEvent<HTMLElement>,
+    // eslint-disable-next-line
+    _consume?: unknown,
 ) => {
     ev.preventDefault();
     ev.stopPropagation();

src/lib/vortex/Signaling.ts

@@ -20,6 +20,7 @@ interface SignalingEvents {
     open: (event: Event) => void;
     close: (event: CloseEvent) => void;
     error: (event: Event) => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data: (data: any) => void;
 }
 
@@ -87,6 +88,7 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
         entry(json);
     }
 
+    /* eslint-disable @typescript-eslint/no-explicit-any */
     sendRequest(type: string, data?: any): Promise<any> {
         if (this.ws === undefined || this.ws.readyState !== WebSocket.OPEN)
             return Promise.reject({ error: WSErrorCode.NotConnected });
@@ -124,6 +126,7 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
             this.index++;
         });
     }
+    /* eslint-enable @typescript-eslint/no-explicit-any */
 
     authenticate(token: string, roomId: string): Promise<AuthenticationResult> {
         return this.sendRequest(WSCommandType.Authenticate, { token, roomId });

src/lib/vortex/VoiceClient.ts

@@ -114,7 +114,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
 
         this.signaling.on(
             "error",
-            (error) => {
+            () => {
                 this.emit("error", new Error("Signaling error"));
             },
             this,

src/mobx/State.tsx

-import { createContext } from "preact";
-import { useContext } from "preact/hooks";
-
-import { DataStore } from ".";
-import { Children } from "../types/Preact";
-
-interface Props {
-    children: Children;
-}
-
-export const DataContext = createContext<DataStore>(null!);
-
-// ! later we can do seamless account switching, by hooking this into Redux
-// ! and monitoring changes to active account and hence swapping stores.
-// although this may need more work since we need a Client per account too.
-const store = new DataStore();
-
-export default function StateLoader(props: Props) {
-    return (
-        <DataContext.Provider value={store}>
-            {props.children}
-        </DataContext.Provider>
-    );
-}
-
-export const useData = () => useContext(DataContext);

src/mobx/index.ts

-import isEqual from "lodash.isequal";
-import {
-    makeAutoObservable,
-    observable,
-    autorun,
-    runInAction,
-    reaction,
-    makeObservable,
-    action,
-    extendObservable,
-} from "mobx";
-import { Attachment, Users } from "revolt.js/dist/api/objects";
-import { RemoveUserField } from "revolt.js/dist/api/routes";
-import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
-
-type Nullable<T> = T | null;
-function toNullable<T>(data?: T) {
-    return typeof data === "undefined" ? null : data;
-}
-
-export class User {
-    _id: string;
-    username: string;
-
-    avatar: Nullable<Attachment>;
-    badges: Nullable<number>;
-    status: Nullable<Users.Status>;
-    relationship: Nullable<Users.Relationship>;
-    online: Nullable<boolean>;
-
-    constructor(data: Users.User) {
-        this._id = data._id;
-        this.username = data.username;
-
-        this.avatar = toNullable(data.avatar);
-        this.badges = toNullable(data.badges);
-        this.status = toNullable(data.status);
-        this.relationship = toNullable(data.relationship);
-        this.online = toNullable(data.online);
-
-        makeAutoObservable(this);
-    }
-
-    @action update(data: Partial<Users.User>, clear?: RemoveUserField) {
-        const apply = (key: keyof Users.User) => {
-            // This code has been tested.
-            // @ts-expect-error
-            if (data[key] && !isEqual(this[key], data[key])) {
-                // @ts-expect-error
-                this[key] = data[key];
-            }
-        };
-
-        switch (clear) {
-            case "Avatar":
-                this.avatar = null;
-                break;
-            case "StatusText": {
-                if (this.status) {
-                    this.status.text = undefined;
-                }
-            }
-        }
-
-        apply("avatar");
-        apply("badges");
-        apply("status");
-        apply("relationship");
-        apply("online");
-    }
-}
-
-export class DataStore {
-    @observable users = new Map<string, User>();
-
-    constructor() {
-        makeAutoObservable(this);
-    }
-
-    @action
-    packet(packet: ClientboundNotification) {
-        switch (packet.type) {
-            case "Ready": {
-                for (let user of packet.users) {
-                    this.users.set(user._id, new User(user));
-                }
-                break;
-            }
-            case "UserUpdate": {
-                this.users.get(packet.id)?.update(packet.data, packet.clear);
-                break;
-            }
-        }
-    }
-}

src/pages/Open.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { useHistory, useParams } from "react-router-dom";
 
 import { Text } from "preact-i18n";
@@ -9,11 +10,6 @@ import {
     ClientStatus,
     StatusContext,
 } from "../context/revoltjs/RevoltClient";
-import {
-    useChannels,
-    useForceUpdate,
-    useUser,
-} from "../context/revoltjs/hooks";
 
 import Header from "../components/ui/Header";
 
@@ -32,39 +28,39 @@ export default function Open() {
         );
     }
 
-    const ctx = useForceUpdate();
-    const channels = useChannels(undefined, ctx);
-    const user = useUser(id, ctx);
-
     useEffect(() => {
         if (id === "saved") {
-            for (const channel of channels) {
+            for (const channel of [...client.channels.values()]) {
                 if (channel?.channel_type === "SavedMessages") {
                     history.push(`/channel/${channel._id}`);
                     return;
                 }
             }
 
-            client.users
-                .openDM(client.user?._id as string)
+            client
+                .user!.openDM()
                 .then((channel) => history.push(`/channel/${channel?._id}`))
                 .catch((error) => openScreen({ id: "error", error }));
 
             return;
         }
 
+        const user = client.users.get(id);
         if (user) {
-            const channel: string | undefined = channels.find(
+            const channel: string | undefined = [
+                ...client.channels.values(),
+            ].find(
                 (channel) =>
                     channel?.channel_type === "DirectMessage" &&
-                    channel.recipients.includes(id),
+                    channel.recipient_ids!.includes(id),
             )?._id;
 
             if (channel) {
                 history.push(`/channel/${channel}`);
             } else {
                 client.users
-                    .openDM(id)
+                    .get(id)
+                    ?.openDM()
                     .then((channel) => history.push(`/channel/${channel?._id}`))
                     .catch((error) => openScreen({ id: "error", error }));
             }
@@ -73,7 +69,7 @@ export default function Open() {
         }
 
         history.push("/");
-    }, []);
+    });
 
     return (
         <Header placement="primary">

src/pages/RevoltApp.tsx

@@ -10,6 +10,7 @@ import Notifications from "../context/revoltjs/Notifications";
 import StateMonitor from "../context/revoltjs/StateMonitor";
 import SyncManager from "../context/revoltjs/SyncManager";
 
+import { Titlebar } from "../components/native/Titlebar";
 import BottomNavigation from "../components/navigation/BottomNavigation";
 import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
@@ -42,83 +43,92 @@ export default function App() {
         path.includes("/settings");
 
     return (
-        <OverlappingPanels
-            width="100vw"
-            height="var(--app-height)"
-            leftPanel={
-                inSpecial
-                    ? undefined
-                    : { width: 292, component: <LeftSidebar /> }
-            }
-            rightPanel={
-                !inSpecial && inChannel
-                    ? { width: 240, component: <RightSidebar /> }
-                    : undefined
-            }
-            bottomNav={{
-                component: <BottomNavigation />,
-                showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
-                height: 50,
-            }}
-            docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
-            <Routes>
-                <Switch>
-                    <Route
-                        path="/server/:server/channel/:channel/settings/:page"
-                        component={ChannelSettings}
-                    />
-                    <Route
-                        path="/server/:server/channel/:channel/settings"
-                        component={ChannelSettings}
-                    />
-                    <Route
-                        path="/server/:server/settings/:page"
-                        component={ServerSettings}
-                    />
-                    <Route
-                        path="/server/:server/settings"
-                        component={ServerSettings}
-                    />
-                    <Route
-                        path="/channel/:channel/settings/:page"
-                        component={ChannelSettings}
-                    />
-                    <Route
-                        path="/channel/:channel/settings"
-                        component={ChannelSettings}
-                    />
+        <>
+            {window.isNative && !window.native.getConfig().frame && (
+                <Titlebar />
+            )}
+            <OverlappingPanels
+                width="100vw"
+                height={
+                    window.isNative && !window.native.getConfig().frame
+                        ? "calc(var(--app-height) - var(--titlebar-height))"
+                        : "var(--app-height)"
+                }
+                leftPanel={
+                    inSpecial
+                        ? undefined
+                        : { width: 292, component: <LeftSidebar /> }
+                }
+                rightPanel={
+                    !inSpecial && inChannel
+                        ? { width: 240, component: <RightSidebar /> }
+                        : undefined
+                }
+                bottomNav={{
+                    component: <BottomNavigation />,
+                    showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
+                    height: 50,
+                }}
+                docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
+                <Routes>
+                    <Switch>
+                        <Route
+                            path="/server/:server/channel/:channel/settings/:page"
+                            component={ChannelSettings}
+                        />
+                        <Route
+                            path="/server/:server/channel/:channel/settings"
+                            component={ChannelSettings}
+                        />
+                        <Route
+                            path="/server/:server/settings/:page"
+                            component={ServerSettings}
+                        />
+                        <Route
+                            path="/server/:server/settings"
+                            component={ServerSettings}
+                        />
+                        <Route
+                            path="/channel/:channel/settings/:page"
+                            component={ChannelSettings}
+                        />
+                        <Route
+                            path="/channel/:channel/settings"
+                            component={ChannelSettings}
+                        />
 
-                    <Route
-                        path="/channel/:channel/:message"
-                        component={Channel}
-                    />
-                    <Route
-                        path="/server/:server/channel/:channel/:message"
-                        component={Channel}
-                    />
+                        <Route
+                            path="/channel/:channel/:message"
+                            component={Channel}
+                        />
+                        <Route
+                            path="/server/:server/channel/:channel/:message"
+                            component={Channel}
+                        />
 
-                    <Route
-                        path="/server/:server/channel/:channel"
-                        component={Channel}
-                    />
-                    <Route path="/server/:server" />
-                    <Route path="/channel/:channel" component={Channel} />
+                        <Route
+                            path="/server/:server/channel/:channel"
+                            component={Channel}
+                        />
+                        <Route path="/server/:server" />
+                        <Route path="/channel/:channel" component={Channel} />
 
-                    <Route path="/settings/:page" component={Settings} />
-                    <Route path="/settings" component={Settings} />
+                        <Route path="/settings/:page" component={Settings} />
+                        <Route path="/settings" component={Settings} />
 
-                    <Route path="/dev" component={Developer} />
-                    <Route path="/friends" component={Friends} />
-                    <Route path="/open/:id" component={Open} />
-                    <Route path="/invite/:code" component={Invite} />
-                    <Route path="/" component={Home} />
-                </Switch>
-            </Routes>
-            <ContextMenus />
-            <Popovers />
-            <Notifications />
-            <StateMonitor />
-            <SyncManager />
-        </OverlappingPanels>
+                        <Route path="/dev" component={Developer} />
+                        <Route path="/friends" component={Friends} />
+                        <Route path="/open/:id" component={Open} />
+                        <Route path="/invite/:code" component={Invite} />
+                        <Route path="/" component={Home} />
+                    </Switch>
+                </Routes>
+                <ContextMenus />
+                <Popovers />
+                <Notifications />
+                <StateMonitor />
+                <SyncManager />
+            </OverlappingPanels>
+        </>
     );
 }

src/pages/app.tsx

@@ -16,7 +16,7 @@ export function App() {
         <Context>
             <Masks />
             {/* 
-            // @ts-expect-error */}
+            // @ts-expect-error typings mis-match between preact... and preact? */}
             <Suspense fallback={<Preloader type="spinner" />}>
                 <Switch>
                     <Route path="/login">

src/pages/channels/Channel.tsx

-import { useParams, useHistory } from "react-router-dom";
-import { Channels } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
+import { Channel as ChannelI } from "revolt.js/dist/maps/Channels";
 import styled from "styled-components";
 
 import { useState } from "preact/hooks";
@@ -8,7 +9,7 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { dispatch, getState } from "../../redux";
 
-import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
+import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
@@ -36,19 +37,19 @@ const ChannelContent = styled.div`
 `;
 
 export function Channel({ id }: { id: string }) {
-    const ctx = useForceUpdate();
-    const channel = useChannel(id, ctx);
-
+    const client = useClient();
+    const channel = client.channels.get(id);
     if (!channel) return null;
 
     if (channel.channel_type === "VoiceChannel") {
         return <VoiceChannel channel={channel} />;
     }
+
     return <TextChannel channel={channel} />;
 }
 
 const MEMBERS_SIDEBAR_KEY = "sidebar_members";
-function TextChannel({ channel }: { channel: Channels.Channel }) {
+const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
     const [showMembers, setMembers] = useState(
         getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
     );
@@ -59,9 +60,11 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
             type="channel"
             channel={channel}
             gated={
-                (channel.channel_type === "TextChannel" ||
-                    channel.channel_type === "Group") &&
-                channel.name.includes("nsfw")
+                !!(
+                    (channel.channel_type === "TextChannel" ||
+                        channel.channel_type === "Group") &&
+                    channel.name?.includes("nsfw")
+                )
             }>
             <ChannelHeader
                 channel={channel}
@@ -86,7 +89,7 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
                 <ChannelContent>
                     <VoiceHeader id={id} />
                     <MessageArea id={id} />
-                    <TypingIndicator id={id} />
+                    <TypingIndicator channel={channel} />
                     <JumpToBottom id={id} />
                     <MessageBox channel={channel} />
                 </ChannelContent>
@@ -96,9 +99,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
             </ChannelMain>
         </AgeGate>
     );
-}
+});
 
-function VoiceChannel({ channel }: { channel: Channels.Channel }) {
+function VoiceChannel({ channel }: { channel: ChannelI }) {
     return (
         <>
             <ChannelHeader channel={channel} />
@@ -107,7 +110,7 @@ function VoiceChannel({ channel }: { channel: Channels.Channel }) {
     );
 }
 
-export default function () {
+export default function ChannelComponent() {
     const { channel } = useParams<{ channel: string }>();
     return <Channel id={channel} key={channel} />;
 }

src/pages/channels/ChannelHeader.tsx

 import { At, Hash, Menu } from "@styled-icons/boxicons-regular";
 import { Notepad, Group } from "@styled-icons/boxicons-solid";
-import { observable } from "mobx";
 import { observer } from "mobx-react-lite";
-import { Channel } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
 import styled from "styled-components";
 
-import { useContext } from "preact/hooks";
-
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
-import { User } from "../../mobx";
-import { useData } from "../../mobx/State";
-
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext, useClient } from "../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../context/revoltjs/util";
 
 import { useStatusColour } from "../../components/common/user/UserIcon";
@@ -72,10 +66,8 @@ const Info = styled.div`
 
 export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
     const { openScreen } = useIntermediate();
-    const client = useClient();
-    const state = useData();
 
-    const name = getChannelName(client, channel);
+    const name = getChannelName(channel);
     let icon, recipient: User | undefined;
     switch (channel.channel_type) {
         case "SavedMessages":
@@ -83,8 +75,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
             break;
         case "DirectMessage":
             icon = <At size={24} />;
-            const uid = client.channels.getRecipient(channel._id);
-            recipient = state.users.get(uid);
+            recipient = channel.recipient;
             break;
         case "Group":
             icon = <Group size={24} />;
@@ -131,7 +122,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
                                 onClick={() =>
                                     openScreen({
                                         id: "channel_info",
-                                        channel_id: channel._id,
+                                        channel,
                                     })
                                 }>
                                 <Markdown

src/pages/channels/actions/HeaderActions.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import {
     UserPlus,
     Cog,
     PhoneCall,
-    PhoneOutgoing,
+    PhoneOff,
     Group,
 } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 
 import { useContext } from "preact/hooks";
 
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-
 import {
     VoiceContext,
     VoiceOperationsContext,
     VoiceStatus,
 } from "../../../context/Voice";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import UpdateIndicator from "../../../components/common/UpdateIndicator";
 import IconButton from "../../../components/ui/IconButton";
@@ -29,25 +27,21 @@ export default function HeaderActions({
     toggleSidebar,
 }: ChannelHeaderProps) {
     const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
     const history = useHistory();
 
     return (
         <>
-            <UpdateIndicator />
+            <UpdateIndicator style="channel" />
             {channel.channel_type === "Group" && (
                 <>
                     <IconButton
                         onClick={() =>
                             openScreen({
                                 id: "user_picker",
-                                omit: channel.recipients,
+                                omit: channel.recipient_ids!,
                                 callback: async (users) => {
                                     for (const user of users) {
-                                        await client.channels.addMember(
-                                            channel._id,
-                                            user,
-                                        );
+                                        await channel.addMember(user);
                                     }
                                 },
                             })
@@ -87,7 +81,7 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
         if (voice.roomId === channel._id) {
             return (
                 <IconButton onClick={disconnect}>
-                    <PhoneOutgoing size={22} />
+                    <PhoneOff size={22} />
                 </IconButton>
             );
         }
@@ -95,7 +89,7 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
             <IconButton
                 onClick={() => {
                     disconnect();
-                    connect(channel._id);
+                    connect(channel);
                 }}>
                 <PhoneCall size={24} />
             </IconButton>