src/components/navigation/items/ButtonItem.tsx

 import { X, Crown } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { Channels, Users } from "revolt.js/dist/api/objects";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
@@ -10,8 +12,6 @@ import { Localizer, Text } from "preact-i18n";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { stopPropagation } from "../../../lib/stopPropagation";
 
-import { User } from "../../../mobx";
-
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import ChannelIcon from "../../common/ChannelIcon";
@@ -34,8 +34,8 @@ type CommonProps = Omit<
 
 type UserProps = CommonProps & {
     user: User;
-    context?: Channels.Channel;
-    channel?: Channels.DirectMessageChannel;
+    context?: Channel;
+    channel?: Channel;
 };
 
 export const UserButton = observer((props: UserProps) => {
@@ -51,8 +51,7 @@ export const UserButton = observer((props: UserProps) => {
             data-alert={typeof alert === "string"}
             data-online={
                 typeof channel !== "undefined" ||
-                (user.online &&
-                    user.status?.presence !== Users.Presence.Invisible)
+                (user.online && user.status?.presence !== Presence.Invisible)
             }
             onContextMenu={attachContextMenu("Menu", {
                 user: user._id,
@@ -73,7 +72,7 @@ export const UserButton = observer((props: UserProps) => {
                 {
                     <div className={styles.subText}>
                         {channel?.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <UserStatus user={user} />
                         )}
@@ -82,7 +81,7 @@ export const UserButton = observer((props: UserProps) => {
             </div>
             <div className={styles.button}>
                 {context?.channel_type === "Group" &&
-                    context.owner === user._id && (
+                    context.owner_id === user._id && (
                         <Localizer>
                             <Tooltip
                                 content={<Text id="app.main.groups.owner" />}>
@@ -115,12 +114,12 @@ export const UserButton = observer((props: UserProps) => {
 });
 
 type ChannelProps = CommonProps & {
-    channel: Channels.Channel & { unread?: string };
+    channel: Channel & { unread?: string };
     user?: User;
     compact?: boolean;
 };
 
-export function ChannelButton(props: ChannelProps) {
+export const ChannelButton = observer((props: ChannelProps) => {
     const { active, alert, alertCount, channel, user, compact, ...divProps } =
         props;
 
@@ -137,7 +136,7 @@ export function ChannelButton(props: ChannelProps) {
             {...divProps}
             data-active={active}
             data-alert={typeof alert === "string"}
-            aria-label={{}} /*FIXME: ADD ARIA LABEL*/
+            aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
             onContextMenu={attachContextMenu("Menu", {
                 channel: channel._id,
@@ -153,12 +152,12 @@ export function ChannelButton(props: ChannelProps) {
                 {channel.channel_type === "Group" && (
                     <div className={styles.subText}>
                         {channel.last_message && alert ? (
-                            channel.last_message.short
+                            (channel.last_message as { short: string }).short
                         ) : (
                             <Text
                                 id="quantities.members"
-                                plural={channel.recipients.length}
-                                fields={{ count: channel.recipients.length }}
+                                plural={channel.recipients!.length}
+                                fields={{ count: channel.recipients!.length }}
                             />
                         )}
                     </div>
@@ -186,7 +185,7 @@ export function ChannelButton(props: ChannelProps) {
             </div>
         </div>
     );
-}
+});
 
 type ButtonProps = CommonProps & {
     onClick?: () => void;

src/components/navigation/left/HomeSidebar.tsx

@@ -6,8 +6,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { Channels } from "revolt.js/dist/api/objects";
-import { Users as UsersNS } from "revolt.js/dist/api/objects";
+import { RelationshipStatus } from "revolt-api/types/Users";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
@@ -16,18 +15,12 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { useData } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import {
-    useDMs,
-    useForceUpdate,
-    useUsers,
-} from "../../../context/revoltjs/hooks";
 
 import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
@@ -47,10 +40,15 @@ const HomeSidebar = observer((props: Props) => {
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
-    const ctx = useForceUpdate();
-    const channels = useDMs(ctx);
+    const channels = [...client.channels.values()]
+        .filter(
+            (x) =>
+                x.channel_type === "DirectMessage" ||
+                x.channel_type === "Group",
+        )
+        .map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const obj = channels.find((x) => x?._id === channel);
+    const obj = client.channels.get(channel);
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
@@ -64,12 +62,7 @@ const HomeSidebar = observer((props: Props) => {
         });
     }, [channel]);
 
-    const channelsArr = channels
-        .filter((x) => x.channel_type !== "SavedMessages")
-        .map((x) => mapChannelWithUnread(x, props.unreads));
-
-    const store = useData();
-    channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
+    channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
     return (
         <GenericSidebarBase padding>
@@ -91,10 +84,10 @@ const HomeSidebar = observer((props: Props) => {
                             <ButtonItem
                                 active={pathname === "/friends"}
                                 alert={
-                                    typeof [...store.users.values()].find(
+                                    typeof [...client.users.values()].find(
                                         (user) =>
                                             user?.relationship ===
-                                            UsersNS.Relationship.Incoming,
+                                            RelationshipStatus.Incoming,
                                     ) !== "undefined"
                                         ? "unread"
                                         : undefined
@@ -136,20 +129,18 @@ const HomeSidebar = observer((props: Props) => {
                         })
                     }
                 />
-                {channelsArr.length === 0 && (
+                {channels.length === 0 && (
                     <img src={placeholderSVG} loading="eager" />
                 )}
-                {channelsArr.map((x) => {
+                {channels.map((x) => {
                     let user;
-                    if (x.channel_type === "DirectMessage") {
-                        if (!x.active) return null;
-
-                        const recipient = client.channels.getRecipient(x._id);
-                        user = store.users.get(recipient);
+                    if (x.channel.channel_type === "DirectMessage") {
+                        if (!x.channel.active) return null;
+                        user = x.channel.recipient;
 
                         if (!user) {
                             console.warn(
-                                `Skipped DM ${x._id} because user was missing.`,
+                                `Skipped DM ${x.channel._id} because user was missing.`,
                             );
                             return null;
                         }
@@ -157,14 +148,15 @@ const HomeSidebar = observer((props: Props) => {
 
                     return (
                         <ConditionalLink
-                            active={x._id === channel}
-                            to={`/channel/${x._id}`}>
+                            key={x.channel._id}
+                            active={x.channel._id === channel}
+                            to={`/channel/${x.channel._id}`}>
                             <ChannelButton
                                 user={user}
-                                channel={x}
+                                channel={x.channel}
                                 alert={x.unread}
                                 alertCount={x.alertCount}
-                                active={x._id === channel}
+                                active={x.channel._id === channel}
                             />
                         </ConditionalLink>
                     );

src/components/navigation/left/ServerListSidebar.tsx

 import { Plus } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
-import { useLocation, useParams } from "react-router-dom";
-import { Channel, Servers, Users } from "revolt.js/dist/api/objects";
+import { useHistory, useLocation, useParams } from "react-router-dom";
+import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components";
 
-import { attachContextMenu, openContextMenu } from "preact-context-menu";
+import { attachContextMenu } from "preact-context-menu";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
-import { useData } from "../../../mobx/State";
 import { connectState } from "../../../redux/connector";
 import { LastOpened } from "../../../redux/reducers/last_opened";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
-import {
-    useChannels,
-    useForceUpdate,
-    useServers,
-} from "../../../context/revoltjs/hooks";
 
-import logoSVG from "../../../assets/logo.svg";
 import ServerIcon from "../../common/ServerIcon";
 import Tooltip from "../../common/Tooltip";
 import UserHover from "../../common/user/UserHover";
@@ -67,6 +60,7 @@ function Icon({
 const ServersBase = styled.div`
     width: 56px;
     height: 100%;
+    padding-left: 2px;
     display: flex;
     flex-direction: column;
 
@@ -80,7 +74,8 @@ const ServerList = styled.div`
     flex-grow: 1;
     display: flex;
     overflow-y: scroll;
-    padding-bottom: 48px;
+    padding-bottom: 20px;
+    /*width: 58px;*/
     flex-direction: column;
 
     scrollbar-width: none;
@@ -92,6 +87,11 @@ const ServerList = styled.div`
     &::-webkit-scrollbar {
         width: 0px;
     }
+
+    /*${isTouchscreenDevice &&
+    css`
+        width: 58px;
+    `}*/
 `;
 
 const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
@@ -99,9 +99,13 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
     display: flex;
     align-items: center;
 
+    :focus {
+        outline: 3px solid blue;
+    }
+
     > div {
         height: 42px;
-        padding-left: 10px;
+        padding-inline-start: 6px;
 
         display: grid;
         place-items: center;
@@ -134,8 +138,6 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
 
         svg {
             margin-top: 5px;
-            display: relative;
-
             pointer-events: none;
             // outline: 1px solid red;
         }
@@ -152,21 +154,20 @@ function Swoosh() {
     return (
         <span>
             <svg
-                width="56"
-                height="103"
-                viewBox="0 0 56 103"
-                fill="none"
+                width="54"
+                height="106"
+                viewBox="0 0 54 106"
                 xmlns="http://www.w3.org/2000/svg">
                 <path
-                    d="M55.0368 51.5947C55.0368 64.8596 44.2834 75.613 31.0184 75.613C17.7534 75.613 7 64.8596 7 51.5947C7 38.3297 17.7534 27.5763 31.0184 27.5763C44.2834 27.5763 55.0368 38.3297 55.0368 51.5947Z"
+                    d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
                     fill="var(--sidebar-active)"
                 />
                 <path
-                    d="M55.8809 1C55.5597 16.9971 34.4597 25.2244 24.0847 28.6715L55.8846 60.4859L55.8809 1Z"
+                    d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
                     fill="var(--sidebar-active)"
                 />
                 <path
-                    d="M55.8809 102.249C55.5597 86.2516 34.4597 78.0243 24.0847 74.5771L55.8846 42.7627L55.8809 102.249Z"
+                    d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
                     fill="var(--sidebar-active)"
                 />
             </svg>
@@ -180,30 +181,31 @@ interface Props {
 }
 
 export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
-    const store = useData();
     const client = useClient();
-    const self = store.users.get(client.user!._id);
 
-    const ctx = useForceUpdate();
-    const activeServers = useServers(undefined, ctx) as Servers.Server[];
-    const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
+    const { server: server_id } = useParams<{ server?: string }>();
+    const server = server_id ? client.servers.get(server_id) : undefined;
+    const activeServers = [...client.servers.values()];
+    const channels = [...client.channels.values()].map((x) =>
         mapChannelWithUnread(x, unreads),
     );
 
-    const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
+    const unreadChannels = channels
+        .filter((x) => x.unread)
+        .map((x) => x.channel?._id);
 
     const servers = activeServers.map((server) => {
         let alertCount = 0;
-        for (const id of server.channels) {
-            const channel = channels.find((x) => x._id === id);
+        for (const id of server.channel_ids) {
+            const channel = channels.find((x) => x.channel?._id === id);
             if (channel?.alertCount) {
                 alertCount += channel.alertCount;
             }
         }
 
         return {
-            ...server,
-            unread: (typeof server.channels.find((x) =>
+            server,
+            unread: (typeof server.channel_ids.find((x) =>
                 unreadChannels.includes(x),
             ) !== "undefined"
                 ? alertCount > 0
@@ -214,18 +216,17 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
         };
     });
 
+    const history = useHistory();
     const path = useLocation().pathname;
-    const { server: server_id } = useParams<{ server?: string }>();
-    const server = servers.find((x) => x!._id == server_id);
-
     const { openScreen } = useIntermediate();
 
     let homeUnread: "mention" | "unread" | undefined;
     let alertCount = 0;
     for (const x of channels) {
         if (
-            ((x.channel_type === "DirectMessage" && x.active) ||
-                x.channel_type === "Group") &&
+            (x.channel?.channel_type === "DirectMessage"
+                ? x.channel?.active
+                : x.channel?.channel_type === "Group") &&
             x.unread
         ) {
             homeUnread = "unread";
@@ -234,8 +235,8 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     }
 
     if (
-        [...store.users.values()].find(
-            (x) => x.relationship === Users.Relationship.Incoming,
+        [...client.users.values()].find(
+            (x) => x.relationship === RelationshipStatus.Incoming,
         )
     ) {
         alertCount++;
@@ -256,11 +257,16 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                         <div
                             onContextMenu={attachContextMenu("Status")}
                             onClick={() =>
-                                homeActive && openContextMenu("Status")
+                                homeActive && history.push("/settings")
                             }>
-                            <UserHover user={self}>
+                            <UserHover user={client.user}>
                                 <Icon size={42} unread={homeUnread}>
-                                    <UserIcon target={self} size={32} status />
+                                    <UserIcon
+                                        target={client.user}
+                                        size={32}
+                                        status
+                                        hover
+                                    />
                                 </Icon>
                             </UserHover>
                         </div>
@@ -268,24 +274,30 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                 </ConditionalLink>
                 <LineDivider />
                 {servers.map((entry) => {
-                    const active = entry!._id === server?._id;
-                    const id = lastOpened[entry!._id];
+                    const active = entry.server._id === server?._id;
+                    const id = lastOpened[entry.server._id];
 
                     return (
                         <ConditionalLink
+                            key={entry.server._id}
                             active={active}
-                            to={`/server/${entry!._id}${
+                            to={`/server/${entry.server._id}${
                                 id ? `/channel/${id}` : ""
                             }`}>
                             <ServerEntry
                                 active={active}
                                 onContextMenu={attachContextMenu("Menu", {
-                                    server: entry!._id,
+                                    server: entry.server._id,
                                 })}>
                                 <Swoosh />
-                                <Tooltip content={entry.name} placement="right">
+                                <Tooltip
+                                    content={entry.server.name}
+                                    placement="right">
                                     <Icon size={42} unread={entry.unread}>
-                                        <ServerIcon size={32} target={entry} />
+                                        <ServerIcon
+                                            size={32}
+                                            target={entry.server}
+                                        />
                                     </Icon>
                                 </Tooltip>
                             </ServerEntry>
@@ -301,6 +313,15 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                     }>
                     <Plus size={36} />
                 </IconButton>
+                {/*<IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Compass size={36} />
+                </IconButton>*/}
                 <PaintCounter small />
             </ServerList>
         </ServersBase>

src/components/navigation/left/ServerSidebar.tsx

+import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
-import { Channels } from "revolt.js/dist/api/objects";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
 
-import {
-    useChannels,
-    useForceUpdate,
-    useServer,
-} from "../../../context/revoltjs/hooks";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
@@ -37,10 +34,13 @@ const ServerBase = styled.div`
     flex-shrink: 0;
     flex-direction: column;
     background: var(--secondary-background);
-
     border-start-start-radius: 8px;
-    border-end-start-radius: 8px;
     overflow: hidden;
+
+    ${isTouchscreenDevice &&
+    css`
+        padding-bottom: 50px;
+    `}
 `;
 
 const ServerList = styled.div`
@@ -53,23 +53,17 @@ const ServerList = styled.div`
     }
 `;
 
-function ServerSidebar(props: Props) {
+const ServerSidebar = observer((props: Props) => {
+    const client = useClient();
     const { server: server_id, channel: channel_id } =
-        useParams<{ server?: string; channel?: string }>();
-    const ctx = useForceUpdate();
+        useParams<{ server: string; channel?: string }>();
 
-    const server = useServer(server_id, ctx);
+    const server = client.servers.get(server_id);
     if (!server) return <Redirect to="/" />;
 
-    const channels = (
-        useChannels(server.channels, ctx).filter(
-            (entry) => typeof entry !== "undefined",
-        ) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
-    ).map((x) => mapChannelWithUnread(x, props.unreads));
-
-    const channel = channels.find((x) => x?._id === channel_id);
+    const channel = channel_id ? client.channels.get(channel_id) : undefined;
     if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
-    if (channel) useUnreads({ ...props, channel }, ctx);
+    if (channel) useUnreads({ ...props, channel });
 
     useEffect(() => {
         if (!channel_id) return;
@@ -79,13 +73,13 @@ function ServerSidebar(props: Props) {
             parent: server_id!,
             child: channel_id!,
         });
-    }, [channel_id]);
+    }, [channel_id, server_id]);
 
-    const uncategorised = new Set(server.channels);
+    const uncategorised = new Set(server.channel_ids);
     const elements = [];
 
     function addChannel(id: string) {
-        const entry = channels.find((x) => x._id === id);
+        const entry = client.channels.get(id);
         if (!entry) return;
 
         const active = channel?._id === entry._id;
@@ -98,7 +92,8 @@ function ServerSidebar(props: Props) {
                 <ChannelButton
                     channel={entry}
                     active={active}
-                    alert={entry.unread}
+                    // ! FIXME: pull it out directly
+                    alert={mapChannelWithUnread(entry, props.unreads).unread}
                     compact
                 />
             </ConditionalLink>
@@ -130,7 +125,7 @@ function ServerSidebar(props: Props) {
 
     return (
         <ServerBase>
-            <ServerHeader server={server} ctx={ctx} />
+            <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
                 onContextMenu={attachContextMenu("Menu", {
@@ -141,7 +136,7 @@ function ServerSidebar(props: Props) {
             <PaintCounter small />
         </ServerBase>
     );
-}
+});
 
 export default connectState(ServerSidebar, (state) => {
     return {

src/components/navigation/left/common.ts

-import { Channel } from "revolt.js";
+import { reaction } from "mobx";
+import { Channel } from "revolt.js/dist/maps/Channels";
 
 import { useLayoutEffect } from "preact/hooks";
 
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
-import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
-
 type UnreadProps = {
     channel: Channel;
     unreads: Unreads;
 };
 
-export function useUnreads(
-    { channel, unreads }: UnreadProps,
-    context?: HookContext,
-) {
-    const ctx = useForceUpdate(context);
-
+export function useUnreads({ channel, unreads }: UnreadProps) {
     useLayoutEffect(() => {
-        function checkUnread(target?: Channel) {
+        function checkUnread(target: Channel) {
             if (!target) return;
             if (target._id !== channel._id) return;
             if (
@@ -41,19 +35,16 @@ export function useUnreads(
                         message,
                     });
 
-                    ctx.client.req(
-                        "PUT",
-                        `/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
-                    );
+                    channel.ack(message);
                 }
             }
         }
 
         checkUnread(channel);
-
-        ctx.client.channels.addListener("mutation", checkUnread);
-        return () =>
-            ctx.client.channels.removeListener("mutation", checkUnread);
+        return reaction(
+            () => channel.last_message,
+            () => checkUnread(channel),
+        );
     }, [channel, unreads]);
 }
 
@@ -63,12 +54,12 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
         channel.channel_type === "DirectMessage" ||
         channel.channel_type === "Group"
     ) {
-        last_message_id = channel.last_message?._id;
+        last_message_id = (channel.last_message as { _id: string })?._id;
     } else if (channel.channel_type === "TextChannel") {
-        last_message_id = channel.last_message;
+        last_message_id = channel.last_message as string;
     } else {
         return {
-            ...channel,
+            channel,
             unread: undefined,
             alertCount: undefined,
             timestamp: channel._id,
@@ -85,7 +76,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
                 unread = "mention";
             } else if (
                 u.last_id &&
-                last_message_id.localeCompare(u.last_id) > 0
+                (last_message_id as string).localeCompare(u.last_id) > 0
             ) {
                 unread = "unread";
             }
@@ -95,7 +86,7 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
     }
 
     return {
-        ...channel,
+        channel,
         timestamp: last_message_id ?? channel._id,
         unread,
         alertCount,

src/components/navigation/right/ChannelDebugInfo.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { useRenderState } from "../../../lib/renderer/Singleton";
 
 interface Props {

src/components/navigation/right/MemberSidebar.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import { observer } from "mobx-react-lite";
-import { useParams } from "react-router";
-import { Link } from "react-router-dom";
-import { User } from "revolt.js";
-import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects";
-import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { Link, useParams } from "react-router-dom";
+import { Presence } from "revolt-api/types/Users";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { useData } from "../../../mobx/State";
 import { getState } from "../../../redux";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import {
-    AppContext,
     ClientStatus,
     StatusContext,
+    useClient,
 } from "../../../context/revoltjs/RevoltClient";
-import {
-    HookContext,
-    useChannel,
-    useForceUpdate,
-    useUsers,
-} from "../../../context/revoltjs/hooks";
 
 import CollapsibleSection from "../../common/CollapsibleSection";
 import Button from "../../ui/Button";
@@ -35,33 +28,28 @@ import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { UserButton } from "../items/ButtonItem";
 import { ChannelDebugInfo } from "./ChannelDebugInfo";
 
-interface Props {
-    ctx: HookContext;
-}
-
-export default function MemberSidebar(props: { channel?: Channels.Channel }) {
-    const ctx = useForceUpdate();
-    const { channel: cid } = useParams<{ channel: string }>();
-    const channel = props.channel ?? useChannel(cid, ctx);
+export default function MemberSidebar({ channel: obj }: { channel?: Channel }) {
+    const { channel: channel_id } = useParams<{ channel: string }>();
+    const client = useClient();
+    const channel = obj ?? client.channels.get(channel_id);
 
     switch (channel?.channel_type) {
         case "Group":
-            return <GroupMemberSidebar channel={channel} ctx={ctx} />;
+            return <GroupMemberSidebar channel={channel} />;
         case "TextChannel":
-            return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+            return <ServerMemberSidebar channel={channel} />;
         default:
             return null;
     }
 }
 
 export const GroupMemberSidebar = observer(
-    ({ channel }: Props & { channel: Channels.GroupChannel }) => {
+    ({ channel }: { channel: Channel }) => {
         const { openScreen } = useIntermediate();
 
-        const store = useData();
-        const members = channel.recipients
-            ?.map((member) => store.users.get(member)!)
-            .filter((x) => typeof x !== "undefined");
+        const members = channel.recipients?.filter(
+            (x) => typeof x !== "undefined",
+        );
 
         /*const voice = useContext(VoiceContext);
     const voiceActive = voice.roomId === channel._id;
@@ -78,18 +66,16 @@ export const GroupMemberSidebar = observer(
         voiceParticipants.sort((a, b) => a.username.localeCompare(b.username));
     }*/
 
-        members.sort((a, b) => {
+        members?.sort((a, b) => {
             // ! FIXME: should probably rewrite all this code
             const l =
                 +(
-                    (a.online &&
-                        a.status?.presence !== Users.Presence.Invisible) ??
+                    (a!.online && a!.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
             const r =
                 +(
-                    (b.online &&
-                        b.status?.presence !== Users.Presence.Invisible) ??
+                    (b!.online && b!.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
 
@@ -98,14 +84,14 @@ export const GroupMemberSidebar = observer(
                 return n;
             }
 
-            return a.username.localeCompare(b.username);
+            return a!.username.localeCompare(b!.username);
         });
 
         return (
             <GenericSidebarBase>
                 <GenericSidebarList>
                     <ChannelDebugInfo id={channel._id} />
-                    <Search channel={channel._id} />
+                    <Search channel={channel} />
 
                     {/*voiceActive && voiceParticipants.length !== 0 && (
                     <Fragment>
@@ -142,21 +128,21 @@ export const GroupMemberSidebar = observer(
                                 text={
                                     <span>
                                         <Text id="app.main.categories.members" />{" "}
-                                        — {channel.recipients.length}
+                                        — {channel.recipients?.length ?? 0}
                                     </span>
                                 }
                             />
                         }>
-                        {members.length === 0 && (
+                        {members?.length === 0 && (
                             <img src={placeholderSVG} loading="eager" />
                         )}
-                        {members.map(
+                        {members?.map(
                             (user) =>
                                 user && (
                                     <UserButton
                                         key={user._id}
                                         user={user}
-                                        context={channel}
+                                        context={channel!}
                                         onClick={() =>
                                             openScreen({
                                                 id: "profile",
@@ -174,72 +160,34 @@ export const GroupMemberSidebar = observer(
 );
 
 export const ServerMemberSidebar = observer(
-    ({ channel }: Props & { channel: Channels.TextChannel }) => {
-        const [members, setMembers] = useState<Servers.Member[] | undefined>(
-            undefined,
-        );
-
-        const store = useData();
-        const users = members
-            ?.map((member) => store.users.get(member._id.user)!)
-            .filter((x) => typeof x !== "undefined");
-
+    ({ channel }: { channel: Channel }) => {
+        const client = useClient();
         const { openScreen } = useIntermediate();
         const status = useContext(StatusContext);
-        const client = useContext(AppContext);
 
         useEffect(() => {
-            if (
-                status === ClientStatus.ONLINE &&
-                typeof members === "undefined"
-            ) {
-                client.members
-                    .fetchMembers(channel.server)
-                    .then((members) => setMembers(members));
+            if (status === ClientStatus.ONLINE) {
+                channel.server!.fetchMembers();
             }
-        }, [status]);
+        }, [status, channel.server]);
 
-        // ! FIXME: temporary code
-        useEffect(() => {
-            function onPacket(packet: ClientboundNotification) {
-                if (!members) return;
-                if (packet.type === "ServerMemberJoin") {
-                    if (packet.id !== channel.server) return;
-                    setMembers([
-                        ...members,
-                        { _id: { server: packet.id, user: packet.user } },
-                    ]);
-                } else if (packet.type === "ServerMemberLeave") {
-                    if (packet.id !== channel.server) return;
-                    setMembers(
-                        members.filter(
-                            (x) =>
-                                !(
-                                    x._id.user === packet.user &&
-                                    x._id.server === packet.id
-                                ),
-                        ),
-                    );
-                }
-            }
-
-            client.addListener("packet", onPacket);
-            return () => client.removeListener("packet", onPacket);
-        }, [members]);
+        const users = [...client.members.keys()]
+            .map((x) => JSON.parse(x))
+            .filter((x) => x.server === channel.server_id)
+            .map((y) => client.users.get(y.user)!)
+            .filter((z) => typeof z !== "undefined");
 
         // copy paste from above
-        users?.sort((a, b) => {
+        users.sort((a, b) => {
             // ! FIXME: should probably rewrite all this code
             const l =
                 +(
-                    (a.online &&
-                        a.status?.presence !== Users.Presence.Invisible) ??
+                    (a.online && a.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
             const r =
                 +(
-                    (b.online &&
-                        b.status?.presence !== Users.Presence.Invisible) ??
+                    (b.online && b.status?.presence !== Presence.Invisible) ??
                     false
                 ) | 0;
 
@@ -255,9 +203,9 @@ export const ServerMemberSidebar = observer(
             <GenericSidebarBase>
                 <GenericSidebarList>
                     <ChannelDebugInfo id={channel._id} />
-                    <Search channel={channel._id} />
-                    <div>{!members && <Preloader type="ring" />}</div>
-                    {members && (
+                    <Search channel={channel} />
+                    <div>{users.length === 0 && <Preloader type="ring" />}</div>
+                    {users.length > 0 && (
                         <CollapsibleSection
                             //sticky //will re-add later, need to fix css
                             id="members"
@@ -268,10 +216,7 @@ export const ServerMemberSidebar = observer(
                                     {users?.length ?? 0}
                                 </span>
                             }>
-                            {(users?.length ?? 0) === 0 && (
-                                <img src={placeholderSVG} loading="eager" />
-                            )}
-                            {users?.map(
+                            {users.map(
                                 (user) =>
                                     user && (
                                         <UserButton
@@ -295,10 +240,9 @@ export const ServerMemberSidebar = observer(
     },
 );
 
-function Search({ channel }: { channel: string }) {
+function Search({ channel }: { channel: Channel }) {
     if (!getState().experiments.enabled?.includes("search")) return null;
 
-    const client = useContext(AppContext);
     type Sort = "Relevance" | "Latest" | "Oldest";
     const [sort, setSort] = useState<Sort>("Relevance");
 
@@ -306,11 +250,7 @@ function Search({ channel }: { channel: string }) {
     const [results, setResults] = useState<Message[]>([]);
 
     async function search() {
-        const data = await client.channels.searchWithUsers(
-            channel,
-            { query, sort },
-            true,
-        );
+        const data = await channel.searchWithUsers({ query, sort });
         setResults(data.messages);
     }
 
@@ -327,6 +267,7 @@ function Search({ channel }: { channel: string }) {
             <div style={{ display: "flex" }}>
                 {["Relevance", "Latest", "Oldest"].map((key) => (
                     <Button
+                        key={key}
                         style={{ flex: 1, minWidth: 0 }}
                         compact
                         error={sort === key}
@@ -352,25 +293,21 @@ function Search({ channel }: { channel: string }) {
                 }}>
                 {results.map((message) => {
                     let href = "";
-                    const channel = client.channels.get(message.channel);
                     if (channel?.channel_type === "TextChannel") {
-                        href += `/server/${channel.server}`;
+                        href += `/server/${channel.server_id}`;
                     }
 
-                    href += `/channel/${message.channel}/${message._id}`;
+                    href += `/channel/${message.channel_id}/${message._id}`;
 
                     return (
-                        <Link to={href}>
+                        <Link to={href} key={message._id}>
                             <div
                                 style={{
                                     margin: "2px",
                                     padding: "6px",
                                     background: "var(--primary-background)",
                                 }}>
-                                <b>
-                                    @
-                                    {client.users.get(message.author)?.username}
-                                </b>
+                                <b>@{message.author?.username}</b>
                                 <br />
                                 {message.content}
                             </div>

src/components/ui/Button.tsx

@@ -6,6 +6,7 @@ interface Props {
     readonly contrast?: boolean;
     readonly plain?: boolean;
     readonly error?: boolean;
+    readonly gold?: boolean;
     readonly iconbutton?: boolean;
 }
 
@@ -125,4 +126,22 @@ export default styled.button<Props>`
                 background: var(--error);
             }
         `}
+    
+    ${(props) =>
+        props.gold &&
+        css`
+            color: black;
+            font-weight: 600;
+            background: goldenrod;
+
+            &:hover {
+                filter: brightness(1.2);
+                background: goldenrod;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                background: goldenrod;
+            }
+        `}
 `;

src/components/ui/Modal.tsx

+/* eslint-disable react-hooks/rules-of-hooks */
 import styled, { css, keyframes } from "styled-components";
 
-import { createPortal, useEffect, useState } from "preact/compat";
+import { createPortal, useCallback, useEffect, useState } from "preact/compat";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
@@ -134,7 +135,7 @@ interface Props {
     dontModal?: boolean;
     padding?: boolean;
 
-    onClose: () => void;
+    onClose?: () => void;
     actions?: Action[];
     disabled?: boolean;
     border?: boolean;
@@ -163,12 +164,12 @@ export default function Modal(props: Props) {
 
     const [animateClose, setAnimateClose] = useState(false);
     isModalClosing = animateClose;
-    function onClose() {
+    const onClose = useCallback(() => {
         setAnimateClose(true);
-        setTimeout(() => props.onClose(), 2e2);
-    }
+        setTimeout(() => props.onClose?.(), 2e2);
+    }, [setAnimateClose, props]);
 
-    useEffect(() => internalSubscribe("Modal", "close", onClose), []);
+    useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
 
     useEffect(() => {
         if (props.disallowClosing) return;
@@ -181,7 +182,7 @@ export default function Modal(props: Props) {
 
         document.body.addEventListener("keydown", keyDown);
         return () => document.body.removeEventListener("keydown", keyDown);
-    }, [props.disallowClosing, props.onClose]);
+    }, [props.disallowClosing, onClose]);
 
     const confirmationAction = props.actions?.find(
         (action) => action.confirmation,
@@ -190,7 +191,7 @@ export default function Modal(props: Props) {
     useEffect(() => {
         if (!confirmationAction) return;
 
-        // ! FIXME: this may be done better if we
+        // ! TODO: this may be done better if we
         // ! can focus the button although that
         // ! doesn't seem to work...
         function keyDown(e: KeyboardEvent) {
@@ -211,8 +212,12 @@ export default function Modal(props: Props) {
                 {content}
                 {props.actions && (
                     <ModalActions>
-                        {props.actions.map((x) => (
-                            <Button {...x} disabled={props.disabled} />
+                        {props.actions.map((x, index) => (
+                            <Button
+                                key={index}
+                                {...x}
+                                disabled={props.disabled}
+                            />
                         ))}
                     </ModalActions>
                 )}

src/components/ui/Overline.tsx

@@ -8,13 +8,19 @@ type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
     error?: string;
     block?: boolean;
     spaced?: boolean;
+    noMargin?: boolean;
     children?: Children;
     type?: "default" | "subtle" | "error";
 };
 
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
-    margin: 0.4em 0;
+
+    ${(props) =>
+        !props.noMargin &&
+        css`
+            margin: 0.4em 0;
+        `}
 
     ${(props) =>
         props.spaced &&

src/components/ui/Tip.tsx

@@ -64,7 +64,7 @@ export default function Tip(
             {!hideSeparator && <Separator />}
             <TipBase {...tipProps}>
                 <InfoCircle size={20} />
-                <span>{props.children}</span>
+                <span>{children}</span>
             </TipBase>
         </>
     );

src/components/ui/fluent/CategoryButton.tsx

+import { ChevronRight, LinkExternal } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../../types/Preact";
+
+interface BaseProps {
+    readonly hover?: boolean;
+    readonly account?: boolean;
+    readonly disabled?: boolean;
+    readonly largeDescription?: boolean;
+}
+
+const CategoryBase = styled.div<BaseProps>`
+    /*height: 54px;*/
+    padding: 9.8px 12px;
+    border-radius: 6px;
+    margin-bottom: 10px;
+    color: var(--foreground);
+    background: var(--secondary-header);
+    gap: 12px;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    > svg {
+        flex-shrink: 0;
+    }
+
+    .content {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        font-weight: 600;
+        font-size: 14px;
+
+        .title {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+
+        .description {
+            ${(props) =>
+                props.largeDescription
+                    ? css`
+                          font-size: 14px;
+                      `
+                    : css`
+                          font-size: 11px;
+                      `}
+
+            font-weight: 400;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+            overflow: hidden;
+
+            a:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    ${(props) =>
+        props.hover &&
+        css`
+            cursor: pointer;
+            opacity: 1;
+            transition: 0.1s ease background-color;
+
+            &:hover {
+                background: var(--secondary-background);
+            }
+        `}
+
+    ${(props) =>
+        props.disabled &&
+        css`
+            opacity: 0.4;
+            /*.content,
+            .action {
+                color: var(--tertiary-foreground);
+            }*/
+
+            .action {
+                font-size: 14px;
+            }
+        `}
+    
+    ${(props) =>
+        props.account &&
+        css`
+            height: 54px;
+
+            .content {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                .title {
+                    text-transform: uppercase;
+                    font-size: 12px;
+                    color: var(--secondary-foreground);
+                }
+
+                .description {
+                    font-size: 15px;
+
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    overflow: hidden;
+                }
+            }
+        `}
+`;
+
+interface Props extends BaseProps {
+    icon?: Children;
+    children?: Children;
+    description?: Children;
+
+    onClick?: () => void;
+    action?: "chevron" | "external" | Children;
+}
+
+export default function CategoryButton({
+    icon,
+    children,
+    description,
+    account,
+    disabled,
+    onClick,
+    hover,
+    action,
+}: Props) {
+    return (
+        <CategoryBase
+            hover={hover || typeof onClick !== "undefined"}
+            onClick={onClick}
+            disabled={disabled}
+            account={account}>
+            {icon}
+            <div class="content">
+                <div className="title">{children}</div>
+
+                <div className="description">{description}</div>
+            </div>
+            <div class="action">
+                {typeof action === "string" ? (
+                    action === "chevron" ? (
+                        <ChevronRight size={24} />
+                    ) : (
+                        <LinkExternal size={20} />
+                    )
+                ) : (
+                    action
+                )}
+            </div>
+        </CategoryBase>
+    );
+}

src/context/Locale.tsx

@@ -5,7 +5,7 @@ import update from "dayjs/plugin/updateLocale";
 import defaultsDeep from "lodash.defaultsdeep";
 
 import { IntlProvider } from "preact-i18n";
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { connectState } from "../redux/connector";
 
@@ -32,6 +32,7 @@ export enum Language {
     CROATIAN = "hr",
     HUNGARIAN = "hu",
     INDONESIAN = "id",
+    ITALIAN = "it",
     LITHUANIAN = "lt",
     MACEDONIAN = "mk",
     DUTCH = "nl",
@@ -41,6 +42,7 @@ export enum Language {
     RUSSIAN = "ru",
     SERBIAN = "sr",
     SWEDISH = "sv",
+    TOKIPONA = "tokipona",
     TURKISH = "tr",
     UKRANIAN = "uk",
     CHINESE_SIMPLIFIED = "zh_Hans",
@@ -57,7 +59,7 @@ export interface LanguageEntry {
     i18n: string;
     dayjs?: string;
     rtl?: boolean;
-    alt?: boolean;
+    cat?: "const" | "alt";
 }
 
 export const Languages: { [key in Language]: LanguageEntry } = {
@@ -78,8 +80,9 @@ export const Languages: { [key in Language]: LanguageEntry } = {
     fr: { display: "Français", emoji: "🇫🇷", i18n: "fr" },
     hi: { display: "हिन्दी", emoji: "🇮🇳", i18n: "hi" },
     hr: { display: "Hrvatski", emoji: "🇭🇷", i18n: "hr" },
-    hu: { display: "magyar", emoji: "🇭🇺", i18n: "hu" },
+    hu: { display: "Magyar", emoji: "🇭🇺", i18n: "hu" },
     id: { display: "bahasa Indonesia", emoji: "🇮🇩", i18n: "id" },
+    it: { display: "Italiano", emoji: "🇮🇹", i18n: "it" },
     lt: { display: "Lietuvių", emoji: "🇱🇹", i18n: "lt" },
     mk: { display: "Македонски", emoji: "🇲🇰", i18n: "mk" },
     nl: { display: "Nederlands", emoji: "🇳🇱", i18n: "nl" },
@@ -103,33 +106,41 @@ export const Languages: { [key in Language]: LanguageEntry } = {
         dayjs: "zh",
     },
 
+    tokipona: {
+        display: "Toki Pona",
+        emoji: "🙂",
+        i18n: "tokipona",
+        dayjs: "en-gb",
+        cat: "const",
+    },
+
     owo: {
         display: "OwO",
         emoji: "🐱",
         i18n: "owo",
         dayjs: "en-gb",
-        alt: true,
+        cat: "alt",
     },
     pr: {
         display: "Pirate",
         emoji: "🏴‍☠️",
         i18n: "pr",
         dayjs: "en-gb",
-        alt: true,
+        cat: "alt",
     },
     bottom: {
         display: "Bottom",
         emoji: "🥺",
         i18n: "bottom",
         dayjs: "en-gb",
-        alt: true,
+        cat: "alt",
     },
     piglatin: {
         display: "Pig Latin",
         emoji: "🐖",
         i18n: "piglatin",
         dayjs: "en-gb",
-        alt: true,
+        cat: "alt",
     },
 };
 
@@ -138,35 +149,62 @@ interface Props {
     locale: Language;
 }
 
+export interface Dictionary {
+    dayjs?: {
+        defaults?: {
+            twelvehour?: "yes" | "no";
+            separator?: string;
+            date?: "traditional" | "simplified" | "ISO8601";
+        };
+        timeFormat?: string;
+    };
+    [key: string]:
+        | Record<string, Omit<Dictionary, "dayjs">>
+        | string
+        | undefined;
+}
+
 function Locale({ children, locale }: Props) {
-    // TODO: create and use LanguageDefinition type here
-    const [defns, setDefinition] =
-        useState<Record<string, unknown>>(definition);
-    const lang = Languages[locale];
+    const [defns, setDefinition] = useState<Dictionary>(
+        definition as Dictionary,
+    );
+
+    // Load relevant language information, fallback to English if invalid.
+    const lang = Languages[locale] ?? Languages.en;
 
-    // TODO: clean this up and use the built in Intl API
-    function transformLanguage(source: { [key: string]: any }) {
+    function transformLanguage(source: Dictionary) {
+        // Fallback untranslated strings to English (UK)
         const obj = defaultsDeep(source, definition);
-        const dayjs = obj.dayjs;
-        const defaults = dayjs.defaults;
 
+        // Take relevant objects out, dayjs and defaults
+        // should exist given we just took defaults above.
+        const { dayjs } = obj;
+        const { defaults } = dayjs;
+
+        // Determine whether we are using 12-hour clock.
         const twelvehour = defaults?.twelvehour
             ? defaults.twelvehour === "yes"
             : false;
 
+        // Determine what date separator we are using.
         const separator: string = defaults?.date_separator ?? "/";
+
+        // Determine what date format we are using.
         const date: "traditional" | "simplified" | "ISO8601" =
             defaults?.date_format ?? "traditional";
 
+        // Available date formats.
         const DATE_FORMATS = {
             traditional: `DD${separator}MM${separator}YYYY`,
             simplified: `MM${separator}DD${separator}YYYY`,
             ISO8601: "YYYY-MM-DD",
         };
 
-        dayjs["sameElse"] = DATE_FORMATS[date];
+        // Replace data in dayjs object, make sure to provide fallbacks.
+        dayjs["sameElse"] = DATE_FORMATS[date] ?? DATE_FORMATS.traditional;
         dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
 
+        // Replace {{time}} format string in dayjs strings with the time format.
         Object.keys(dayjs)
             .filter((k) => typeof dayjs[k] === "string")
             .forEach(
@@ -180,35 +218,49 @@ function Locale({ children, locale }: Props) {
         return obj;
     }
 
-    useEffect(() => {
-        if (locale === "en") {
-            const defn = transformLanguage(definition);
-            setDefinition(defn);
-            dayjs.locale("en");
-            dayjs.updateLocale("en", { calendar: defn.dayjs });
-            return;
-        }
-
-        import(`../../external/lang/${lang.i18n}.json`).then(
-            async (lang_file) => {
-                const defn = transformLanguage(lang_file.default);
-                const target = lang.dayjs ?? lang.i18n;
-                const dayjs_locale = await import(
-                    `../../node_modules/dayjs/esm/locale/${target}.js`
-                );
-
-                dayjs.locale(target, dayjs_locale.default);
-
-                if (defn.dayjs) {
-                    dayjs.updateLocale(target, { calendar: defn.dayjs });
-                }
-
+    const loadLanguage = useCallback(
+        (locale: string) => {
+            if (locale === "en") {
+                // If English, make sure to restore everything to defaults.
+                // Use what we already have.
+                const defn = transformLanguage(definition as Dictionary);
                 setDefinition(defn);
-            },
-        );
-    }, [locale, lang]);
+                dayjs.locale("en");
+                dayjs.updateLocale("en", { calendar: defn.dayjs });
+                return;
+            }
+
+            import(`../../external/lang/${lang.i18n}.json`).then(
+                async (lang_file) => {
+                    // Transform the definitions data.
+                    const defn = transformLanguage(lang_file.default);
+
+                    // Determine and load dayjs locales.
+                    const target = lang.dayjs ?? lang.i18n;
+                    const dayjs_locale = await import(
+                        `../../node_modules/dayjs/esm/locale/${target}.js`
+                    );
+
+                    // Load dayjs locales.
+                    dayjs.locale(target, dayjs_locale.default);
+
+                    if (defn.dayjs) {
+                        // Override dayjs calendar locales with our own.
+                        dayjs.updateLocale(target, { calendar: defn.dayjs });
+                    }
+
+                    // Apply definition to app.
+                    setDefinition(defn);
+                },
+            );
+        },
+        [lang.dayjs, lang.i18n],
+    );
+
+    useEffect(() => loadLanguage(locale), [locale, lang, loadLanguage]);
 
     useEffect(() => {
+        // Apply RTL language format.
         document.body.style.direction = lang.rtl ? "rtl" : "";
     }, [lang.rtl]);
 

src/context/Theme.tsx

@@ -4,8 +4,6 @@ import { createGlobalStyle } from "styled-components";
 import { createContext } from "preact";
 import { useEffect } from "preact/hooks";
 
-import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
-
 import { connectState } from "../redux/connector";
 
 import { Children } from "../types/Preact";
@@ -311,17 +309,17 @@ function Theme({ children, options }: Props) {
         const font = theme.font ?? DEFAULT_FONT;
         root.setProperty("--font", `"${font}"`);
         FONTS[font].load();
-    }, [theme.font]);
+    }, [root, theme.font]);
 
     useEffect(() => {
         const font = theme.monospaceFont ?? DEFAULT_MONO_FONT;
         root.setProperty("--monospace-font", `"${font}"`);
         MONOSPACE_FONTS[font].load();
-    }, [theme.monospaceFont]);
+    }, [root, theme.monospaceFont]);
 
     useEffect(() => {
         root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
-    }, [options?.ligatures]);
+    }, [root, options?.ligatures]);
 
     useEffect(() => {
         const resize = () =>
@@ -330,7 +328,7 @@ function Theme({ children, options }: Props) {
 
         window.addEventListener("resize", resize);
         return () => window.removeEventListener("resize", resize);
-    }, []);
+    }, [root]);
 
     return (
         <ThemeContext.Provider value={theme}>

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";
 
 export enum VoiceStatus {
     LOADING = 0,
@@ -21,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>;
@@ -43,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")
@@ -74,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);
@@ -111,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");
@@ -137,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,
@@ -157,14 +166,14 @@ export default function Voice({ children }: Props) {
                 return client?.stopProduce(type);
             },
         };
-    }, [client]);
+    }, [client, setStatus]);
 
     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
 
@@ -199,7 +208,7 @@ export default function Voice({ children }: Props) {
             client.removeListener("userStopProduce", stateUpdate);
             client.removeListener("close", stateUpdate);
         };
-    }, [client, state]);
+    }, [client, state, playSound, setStatus]);
 
     return (
         <VoiceContext.Provider value={state}>

src/context/index.tsx

@@ -2,7 +2,6 @@ import { BrowserRouter as Router } from "react-router-dom";
 
 import State from "../redux/State";
 
-import MobXState from "../mobx/State";
 import { Children } from "../types/Preact";
 import Locale from "./Locale";
 import Settings from "./Settings";
@@ -15,19 +14,17 @@ export default function Context({ children }: { children: Children }) {
     return (
         <Router>
             <State>
-                <MobXState>
-                    <Theme>
-                        <Settings>
-                            <Locale>
-                                <Intermediate>
-                                    <Client>
-                                        <Voice>{children}</Voice>
-                                    </Client>
-                                </Intermediate>
-                            </Locale>
-                        </Settings>
-                    </Theme>
-                </MobXState>
+                <Theme>
+                    <Settings>
+                        <Locale>
+                            <Intermediate>
+                                <Client>
+                                    <Voice>{children}</Voice>
+                                </Client>
+                            </Intermediate>
+                        </Locale>
+                    </Settings>
+                </Theme>
             </State>
         </Router>
     );

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";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
-import { User } from "../../mobx";
-
 import { Action } from "../../components/ui/Modal";
 
 import { Children } from "../../types/Preact";
@@ -34,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: 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 }
       ))
     | ({ id: "special_input" } & (
           | {
@@ -60,7 +57,7 @@ export type Screen =
             }
           | {
                 type: "create_role";
-                server: string;
+                server: Server;
                 callback: (id: string) => void;
             }
       ))
@@ -83,7 +80,7 @@ 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: "channel_info"; channel: Channel }
     | { id: "pending_requests"; users: User[] }
     | {
           id: "user_picker";
@@ -92,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 {
@@ -133,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

@@ -12,7 +12,7 @@ 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) {

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.tsx

@@ -29,7 +29,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
         setLoading(true);
         callback(username, true)
             .then(() => onClose())
-            .catch((err: any) => {
+            .catch((err: unknown) => {
                 setError(takeError(err));
                 setLoading(false);
             });