src/pages/settings/panes/Sessions.tsx

-import { HelpCircle } from "@styled-icons/boxicons-regular";
+import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
+import { HelpCircle, Desktop } from "@styled-icons/boxicons-regular";
 import {
-    Android,
+    Safari,
     Firefoxbrowser,
-    Googlechrome,
-    Ios,
+    Microsoftedge,
     Linux,
     Macos,
-    Microsoftedge,
-    Safari,
-    Windows,
+    Opera,
 } from "@styled-icons/simple-icons";
-import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useHistory } from "react-router-dom";
 import { decodeTime } from "ulid";
@@ -19,6 +16,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { dayjs } from "../../../context/Locale";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
@@ -52,7 +50,7 @@ export function Sessions() {
             );
             setSessions(data);
         });
-    }, []);
+    }, [client, setSessions, deviceId]);
 
     if (typeof sessions === "undefined") {
         return (
@@ -66,15 +64,19 @@ export function Sessions() {
         const name = session.friendly_name;
         switch (true) {
             case /firefox/i.test(name):
-                return <Firefoxbrowser />;
+                return <Firefoxbrowser size={32} />;
             case /chrome/i.test(name):
-                return <Googlechrome />;
+                return <Chrome size={32} />;
             case /safari/i.test(name):
-                return <Safari />;
+                return <Safari size={32} />;
             case /edge/i.test(name):
-                return <Microsoftedge />;
+                return <Microsoftedge size={32} />;
+            case /opera/i.test(name):
+                return <Opera size={32} />;
+            case /desktop/i.test(name):
+                return <Desktop size={32} />;
             default:
-                return <HelpCircle />;
+                return <HelpCircle size={32} />;
         }
     }
 
@@ -82,15 +84,15 @@ export function Sessions() {
         const name = session.friendly_name;
         switch (true) {
             case /linux/i.test(name):
-                return <Linux />;
+                return <Linux size={14} />;
             case /android/i.test(name):
-                return <Android />;
+                return <Android size={14} />;
             case /mac.*os/i.test(name):
-                return <Macos />;
+                return <Macos size={14} />;
             case /ios/i.test(name):
-                return <Ios />;
+                return <Apple size={14} />;
             case /windows/i.test(name):
-                return <Windows />;
+                return <Windows size={14} />;
             default:
                 return null;
         }
@@ -104,7 +106,7 @@ export function Sessions() {
     });
 
     mapped.sort((a, b) => b.timestamp - a.timestamp);
-    let id = mapped.findIndex((x) => x.id === deviceId);
+    const id = mapped.findIndex((x) => x.id === deviceId);
 
     const render = [
         mapped[id],
@@ -117,62 +119,116 @@ export function Sessions() {
             <h3>
                 <Text id="app.settings.pages.sessions.active_sessions" />
             </h3>
-            {render.map((session) => (
-                <div
-                    className={styles.entry}
-                    data-active={session.id === deviceId}
-                    data-deleting={attemptingDelete.indexOf(session.id) > -1}>
-                    {deviceId === session.id && (
-                        <span className={styles.label}>
-                            <Text id="app.settings.pages.sessions.this_device" />{" "}
-                        </span>
-                    )}
-                    <div className={styles.session}>
-                        <div className={styles.icon}>
-                            {getIcon(session)}
-                            <div>{getSystemIcon(session)}</div>
-                        </div>
-                        <div className={styles.info}>
-                            <span className={styles.name}>
-                                {session.friendly_name}
+            {render.map((session) => {
+                const systemIcon = getSystemIcon(session);
+                return (
+                    <div
+                        key={session.id}
+                        className={styles.entry}
+                        data-active={session.id === deviceId}
+                        data-deleting={
+                            attemptingDelete.indexOf(session.id) > -1
+                        }>
+                        {deviceId === session.id && (
+                            <span className={styles.label}>
+                                <Text id="app.settings.pages.sessions.this_device" />{" "}
                             </span>
-                            <span className={styles.time}>
-                                <Text
-                                    id="app.settings.pages.sessions.created"
-                                    fields={{
-                                        time_ago: dayjs(
-                                            session.timestamp,
-                                        ).fromNow(),
+                        )}
+                        <div className={styles.session}>
+                            <div className={styles.detail}>
+                                <svg width={42} height={42} viewBox="0 0 32 32">
+                                    <foreignObject
+                                        x="0"
+                                        y="0"
+                                        width="32"
+                                        height="32"
+                                        mask={
+                                            systemIcon
+                                                ? "url(#session)"
+                                                : undefined
+                                        }>
+                                        {getIcon(session)}
+                                    </foreignObject>
+                                    <foreignObject
+                                        x="18"
+                                        y="18"
+                                        width="14"
+                                        height="14">
+                                        {systemIcon}
+                                    </foreignObject>
+                                </svg>
+                                <div className={styles.info}>
+                                    <input
+                                        type="text"
+                                        className={styles.name}
+                                        value={session.friendly_name}
+                                        autocomplete="off"
+                                        style={{ pointerEvents: "none" }}
+                                    />
+                                    <span className={styles.time}>
+                                        <Text
+                                            id="app.settings.pages.sessions.created"
+                                            fields={{
+                                                time_ago: dayjs(
+                                                    session.timestamp,
+                                                ).fromNow(),
+                                            }}
+                                        />
+                                    </span>
+                                </div>
+                            </div>
+                            {deviceId !== session.id && (
+                                <Button
+                                    onClick={async () => {
+                                        setDelete([
+                                            ...attemptingDelete,
+                                            session.id,
+                                        ]);
+                                        await client.req(
+                                            "DELETE",
+                                            `/auth/sessions/${session.id}` as "/auth/sessions",
+                                        );
+                                        setSessions(
+                                            sessions?.filter(
+                                                (x) => x.id !== session.id,
+                                            ),
+                                        );
                                     }}
-                                />
-                            </span>
+                                    disabled={
+                                        attemptingDelete.indexOf(session.id) >
+                                        -1
+                                    }>
+                                    <Text id="app.settings.pages.logOut" />
+                                </Button>
+                            )}
                         </div>
-                        {deviceId !== session.id && (
-                            <Button
-                                onClick={async () => {
-                                    setDelete([
-                                        ...attemptingDelete,
-                                        session.id,
-                                    ]);
-                                    await client.req(
-                                        "DELETE",
-                                        `/auth/sessions/${session.id}` as "/auth/sessions",
-                                    );
-                                    setSessions(
-                                        sessions?.filter(
-                                            (x) => x.id !== session.id,
-                                        ),
-                                    );
-                                }}
-                                disabled={
-                                    attemptingDelete.indexOf(session.id) > -1
-                                }>
-                                <Text id="app.settings.pages.logOut" />
-                            </Button>
-                        )}
                     </div>
-                </div>
-            ))}
+                );
+            })}
+            <Button
+                error
+                onClick={async () => {
+                    // ! FIXME: add to rAuth
+                    const del: string[] = [];
+                    render.forEach((session) => {
+                        if (deviceId !== session.id) {
+                            del.push(session.id);
+                        }
+                    });
+
+                    setDelete(del);
+
+                    for (const id of del) {
+                        await client.req(
+                            "DELETE",
+                            `/auth/sessions/${id}` as "/auth/sessions",
+                        );
+                    }
+
+                    setSessions(sessions.filter((x) => x.id === deviceId));
+                }}>
+                <Text id="app.settings.pages.sessions.logout" />
+            </Button>
             <Tip>
                 <span>
                     <Text id="app.settings.tips.sessions.a" />

src/pages/settings/panes/Sync.tsx

@@ -26,6 +26,7 @@ export function Component(props: Props) {
                 ] as [SyncKeys, string][]
             ).map(([key, title]) => (
                 <Checkbox
+                    key={key}
                     checked={
                         (props.options?.disabled ?? []).indexOf(key) === -1
                     }

src/pages/settings/server/Bans.tsx

-import { Servers } from "revolt.js/dist/api/objects";
+import { XCircle } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Route } from "revolt.js/dist/api/routes";
+import { Server } from "revolt.js/dist/maps/Servers";
 
-import { useContext, useEffect, useState } from "preact/hooks";
+import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
 
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-
-import Tip from "../../../components/ui/Tip";
+import UserIcon from "../../../components/common/user/UserIcon";
+import IconButton from "../../../components/ui/IconButton";
+import Preloader from "../../../components/ui/Preloader";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
-export function Bans({ server }: Props) {
-    const client = useContext(AppContext);
-    const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);
+export const Bans = observer(({ server }: Props) => {
+    const [deleting, setDelete] = useState<string[]>([]);
+    const [data, setData] = useState<
+        Route<"GET", "/servers/id/bans">["response"] | undefined
+    >(undefined);
 
     useEffect(() => {
-        client.servers.fetchBans(server._id).then((bans) => setBans(bans));
-    }, []);
+        server.fetchBans().then(setData);
+    }, [server, setData]);
 
     return (
-        <div>
-            <Tip warning>This section is under construction.</Tip>
-            {bans?.map((x) => (
-                <div>
-                    {x._id.user}: {x.reason ?? "no reason"}{" "}
-                    <button
-                        onClick={() =>
-                            client.servers.unbanUser(server._id, x._id.user)
-                        }>
-                        unban
-                    </button>
-                </div>
-            ))}
+        <div className={styles.userList}>
+            <div className={styles.subtitle}>
+                <span>
+                    <Text id="app.settings.server_pages.bans.user" />
+                </span>
+                <span class={styles.reason}>
+                    <Text id="app.settings.server_pages.bans.reason" />
+                </span>
+                <span>
+                    <Text id="app.settings.server_pages.bans.revoke" />
+                </span>
+            </div>
+            {typeof data === "undefined" && <Preloader type="ring" />}
+            {data?.bans.map((x) => {
+                const user = data.users.find((y) => y._id === x._id.user);
+
+                return (
+                    <div
+                        key={x._id.user}
+                        className={styles.ban}
+                        data-deleting={deleting.indexOf(x._id.user) > -1}>
+                        <span>
+                            <UserIcon attachment={user?.avatar} size={24} />
+                            {user?.username}
+                        </span>
+                        <div className={styles.reason}>
+                            {x.reason ?? (
+                                <Text id="app.settings.server_pages.bans.no_reason" />
+                            )}
+                        </div>
+                        <IconButton
+                            onClick={async () => {
+                                setDelete([...deleting, x._id.user]);
+
+                                await server.unbanUser(x._id.user);
+
+                                setData({
+                                    ...data,
+                                    bans: data.bans.filter(
+                                        (y) => y._id.user !== x._id.user,
+                                    ),
+                                });
+                            }}
+                            disabled={deleting.indexOf(x._id.user) > -1}>
+                            <XCircle size={24} />
+                        </IconButton>
+                    </div>
+                );
+            })}
         </div>
     );
-}
+});

src/pages/settings/server/Categories.tsx

+import isEqual from "lodash.isequal";
+import { observer } from "mobx-react-lite";
+import { Category } from "revolt-api/types/Servers";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { ulid } from "ulid";
+
+import { useState } from "preact/hooks";
+
+import ChannelIcon from "../../../components/common/ChannelIcon";
+import Button from "../../../components/ui/Button";
+import ComboBox from "../../../components/ui/ComboBox";
+import InputBox from "../../../components/ui/InputBox";
+import Tip from "../../../components/ui/Tip";
+
+interface Props {
+    server: Server;
+}
+
+// ! FIXME: really bad code
+export const Categories = observer(({ server }: Props) => {
+    const channels = server.channels.filter((x) => typeof x !== "undefined");
+
+    const [cats, setCats] = useState<Category[]>(server.categories ?? []);
+    const [name, setName] = useState("");
+
+    return (
+        <div>
+            <Tip warning>This section is under construction.</Tip>
+            <p>
+                <Button
+                    contrast
+                    disabled={isEqual(server.categories ?? [], cats)}
+                    onClick={() => server.edit({ categories: cats })}>
+                    save categories
+                </Button>
+            </p>
+            <h2>categories</h2>
+            {cats.map((category) => (
+                <div style={{ background: "var(--hover)" }} key={category.id}>
+                    <InputBox
+                        value={category.title}
+                        onChange={(e) =>
+                            setCats(
+                                cats.map((y) =>
+                                    y.id === category.id
+                                        ? {
+                                              ...y,
+                                              title: e.currentTarget.value,
+                                          }
+                                        : y,
+                                ),
+                            )
+                        }
+                        contrast
+                    />
+                    <Button
+                        contrast
+                        onClick={() =>
+                            setCats(cats.filter((x) => x.id !== category.id))
+                        }>
+                        delete {category.title}
+                    </Button>
+                </div>
+            ))}
+            <h2>create new</h2>
+            <p>
+                <InputBox
+                    value={name}
+                    onChange={(e) => setName(e.currentTarget.value)}
+                    contrast
+                />
+                <Button
+                    contrast
+                    onClick={() => {
+                        setName("");
+                        setCats([
+                            ...cats,
+                            {
+                                id: ulid(),
+                                title: name,
+                                channels: [],
+                            },
+                        ]);
+                    }}>
+                    create
+                </Button>
+            </p>
+            <h2>channels</h2>
+            {channels.map((channel) => {
+                return (
+                    <div
+                        key={channel!._id}
+                        style={{
+                            display: "flex",
+                            gap: "12px",
+                            alignItems: "center",
+                        }}>
+                        <div style={{ flexShrink: 0 }}>
+                            <ChannelIcon target={channel} size={24} />{" "}
+                            <span>{channel!.name}</span>
+                        </div>
+                        <ComboBox
+                            style={{ flexGrow: 1 }}
+                            value={
+                                cats.find((x) =>
+                                    x.channels.includes(channel!._id),
+                                )?.id ?? "none"
+                            }
+                            onChange={(e) =>
+                                setCats(
+                                    cats.map((x) => {
+                                        return {
+                                            ...x,
+                                            channels: [
+                                                ...x.channels.filter(
+                                                    (y) => y !== channel!._id,
+                                                ),
+                                                ...(e.currentTarget.value ===
+                                                x.id
+                                                    ? [channel!._id]
+                                                    : []),
+                                            ],
+                                        };
+                                    }),
+                                )
+                            }>
+                            <option value="none">Uncategorised</option>
+                            {cats.map((x) => (
+                                <option key={x.id} value={x.id}>
+                                    {x.title}
+                                </option>
+                            ))}
+                        </ComboBox>
+                    </div>
+                );
+            })}
+        </div>
+    );
+});

src/pages/settings/server/Invites.tsx

 import { XCircle } from "@styled-icons/boxicons-regular";
-import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { ServerInvite } from "revolt-api/types/Invites";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import {
-    useChannels,
-    useForceUpdate,
-    useUsers,
-} from "../../../context/revoltjs/hooks";
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
 
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -17,57 +15,68 @@ import IconButton from "../../../components/ui/IconButton";
 import Preloader from "../../../components/ui/Preloader";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
-export function Invites({ server }: Props) {
-    const [invites, setInvites] = useState<
-        InvitesNS.ServerInvite[] | undefined
-    >(undefined);
-
-    const ctx = useForceUpdate();
+export const Invites = observer(({ server }: Props) => {
     const [deleting, setDelete] = useState<string[]>([]);
-    const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
-    const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
+    const [invites, setInvites] = useState<ServerInvite[] | undefined>(
+        undefined,
+    );
+
+    const client = useClient();
+    const users = invites?.map((invite) => client.users.get(invite.creator));
+    const channels = invites?.map((invite) =>
+        client.channels.get(invite.channel),
+    );
 
     useEffect(() => {
-        ctx.client.servers
-            .fetchInvites(server._id)
-            .then((invites) => setInvites(invites));
-    }, []);
+        server.fetchInvites().then(setInvites);
+    }, [server, setInvites]);
 
     return (
-        <div className={styles.invites}>
+        <div className={styles.userList}>
             <div className={styles.subtitle}>
-                <span>Invite Code</span>
-                <span>Invitor</span>
-                <span>Channel</span>
-                <span>Revoke</span>
+                <span>
+                    <Text id="app.settings.server_pages.invites.code" />
+                </span>
+                <span>
+                    <Text id="app.settings.server_pages.invites.invitor" />
+                </span>
+                <span>
+                    <Text id="app.settings.server_pages.invites.channel" />
+                </span>
+                <span>
+                    <Text id="app.settings.server_pages.invites.revoke" />
+                </span>
             </div>
             {typeof invites === "undefined" && <Preloader type="ring" />}
-            {invites?.map((invite) => {
-                let creator = users.find((x) => x?._id === invite.creator);
-                let channel = channels.find((x) => x?._id === invite.channel);
+            {invites?.map((invite, index) => {
+                const creator = users![index];
+                const channel = channels![index];
 
                 return (
                     <div
+                        key={invite._id}
                         className={styles.invite}
                         data-deleting={deleting.indexOf(invite._id) > -1}>
                         <code>{invite._id}</code>
                         <span>
                             <UserIcon target={creator} size={24} />{" "}
-                            {creator?.username ?? "unknown"}
+                            {creator?.username ?? (
+                                <Text id="app.main.channel.unknown_user" />
+                            )}
                         </span>
                         <span>
                             {channel && creator
-                                ? getChannelName(ctx.client, channel, true)
-                                : "#unknown"}
+                                ? getChannelName(channel, true)
+                                : "#??"}
                         </span>
                         <IconButton
                             onClick={async () => {
                                 setDelete([...deleting, invite._id]);
 
-                                await ctx.client.deleteInvite(invite._id);
+                                await client.deleteInvite(invite._id);
 
                                 setInvites(
                                     invites?.filter(
@@ -83,4 +92,4 @@ export function Invites({ server }: Props) {
             })}
         </div>
     );
-}
+});

src/pages/settings/server/Members.tsx

-import { Servers } from "revolt.js/dist/api/objects";
+import { ChevronDown } from "@styled-icons/boxicons-regular";
+import { isEqual } from "lodash";
+import { observer } from "mobx-react-lite";
+import { Member } from "revolt.js/dist/maps/Members";
+import { Server } from "revolt.js/dist/maps/Servers";
+import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
+import UserIcon from "../../../components/common/user/UserIcon";
+import Button from "../../../components/ui/Button";
+import Checkbox from "../../../components/ui/Checkbox";
+import IconButton from "../../../components/ui/IconButton";
+import Overline from "../../../components/ui/Overline";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
-// ! FIXME: bad code :)
-export function Members({ server }: Props) {
-    const [members, setMembers] = useState<Servers.Member[] | undefined>(
-        undefined,
-    );
+export const Members = observer(({ server }: Props) => {
+    const [selected, setSelected] = useState<undefined | string>();
+    const [data, setData] = useState<
+        { members: Member[]; users: User[] } | undefined
+    >(undefined);
 
-    const ctx = useForceUpdate();
-    const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
+    useEffect(() => {
+        server.fetchMembers().then(setData);
+    }, [server, setData]);
 
+    const [roles, setRoles] = useState<string[]>([]);
     useEffect(() => {
-        ctx.client.servers.members
-            .fetchMembers(server._id)
-            .then((members) => setMembers(members));
-    }, []);
+        if (selected) {
+            setRoles(
+                data!.members.find((x) => x._id.user === selected)?.roles ?? [],
+            );
+        }
+    }, [setRoles, selected, data]);
 
     return (
-        <div className={styles.members}>
+        <div className={styles.userList}>
             <div className={styles.subtitle}>
-                {members?.length ?? 0} Members
+                {data?.members.length ?? 0} Members
             </div>
-            {members &&
-                members.length > 0 &&
-                users?.map(
-                    (x) =>
-                        x && (
-                            <div className={styles.member}>
-                                <div>@{x.username}</div>
+            {data &&
+                data.members.length > 0 &&
+                data.members
+                    .map((member) => {
+                        return {
+                            member,
+                            user: data.users.find(
+                                (x) => x._id === member._id.user,
+                            ),
+                        };
+                    })
+                    .map(({ member, user }) => (
+                        // @ts-expect-error brokey
+                        // eslint-disable-next-line react/jsx-no-undef
+                        <Fragment key={member._id.user}>
+                            <div
+                                className={styles.member}
+                                data-open={selected === member._id.user}
+                                onClick={() =>
+                                    setSelected(
+                                        selected === member._id.user
+                                            ? undefined
+                                            : member._id.user,
+                                    )
+                                }>
+                                <span>
+                                    <UserIcon target={user} size={24} />{" "}
+                                    {user?.username ?? (
+                                        <Text id="app.main.channel.unknown_user" />
+                                    )}
+                                </span>
+                                <IconButton className={styles.chevron}>
+                                    <ChevronDown size={24} />
+                                </IconButton>
                             </div>
-                        ),
-                )}
+                            {selected === member._id.user && (
+                                <div
+                                    key={`drop_${member._id.user}`}
+                                    className={styles.memberView}>
+                                    <Overline type="subtle">Roles</Overline>
+                                    {Object.keys(server.roles ?? {}).map(
+                                        (key) => {
+                                            const role = server.roles![key];
+                                            return (
+                                                <Checkbox
+                                                    key={key}
+                                                    checked={
+                                                        roles.includes(key) ??
+                                                        false
+                                                    }
+                                                    onChange={(v) => {
+                                                        if (v) {
+                                                            setRoles([
+                                                                ...roles,
+                                                                key,
+                                                            ]);
+                                                        } else {
+                                                            setRoles(
+                                                                roles.filter(
+                                                                    (x) =>
+                                                                        x !==
+                                                                        key,
+                                                                ),
+                                                            );
+                                                        }
+                                                    }}>
+                                                    <span
+                                                        style={{
+                                                            color: role.colour,
+                                                        }}>
+                                                        {role.name}
+                                                    </span>
+                                                </Checkbox>
+                                            );
+                                        },
+                                    )}
+                                    <Button
+                                        compact
+                                        disabled={isEqual(
+                                            member.roles ?? [],
+                                            roles,
+                                        )}
+                                        onClick={() =>
+                                            member.edit({
+                                                roles,
+                                            })
+                                        }>
+                                        <Text id="app.special.modals.actions.save" />
+                                    </Button>
+                                </div>
+                            )}
+                        </Fragment>
+                    ))}
         </div>
     );
-}
+});

src/pages/settings/server/Overview.tsx

 import isEqual from "lodash.isequal";
-import { Servers, Server } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { getChannelName } from "../../../context/revoltjs/util";
 
 import Button from "../../../components/ui/Button";
@@ -16,12 +16,10 @@ import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
-export function Overview({ server }: Props) {
-    const client = useContext(AppContext);
-
+export const Overview = observer(({ server }: Props) => {
     const [name, setName] = useState(server.name);
     const [description, setDescription] = useState(server.description ?? "");
     const [systemMessages, setSystemMessages] = useState(
@@ -40,16 +38,14 @@ export function Overview({ server }: Props) {
 
     const [changed, setChanged] = useState(false);
     function save() {
-        let changes: Partial<
-            Pick<Servers.Server, "name" | "description" | "system_messages">
-        > = {};
+        const changes: Record<string, unknown> = {};
         if (name !== server.name) changes.name = name;
         if (description !== server.description)
             changes.description = description;
         if (!isEqual(systemMessages, server.system_messages))
-            changes.system_messages = systemMessages;
+            changes.system_messages = systemMessages ?? undefined;
 
-        client.servers.edit(server._id, changes);
+        server.edit(changes);
         setChanged(false);
     }
 
@@ -63,17 +59,9 @@ export function Overview({ server }: Props) {
                     fileType="icons"
                     behaviour="upload"
                     maxFileSize={2_500_000}
-                    onUpload={(icon) =>
-                        client.servers.edit(server._id, { icon })
-                    }
-                    previewURL={client.servers.getIconURL(
-                        server._id,
-                        { max_side: 256 },
-                        true,
-                    )}
-                    remove={() =>
-                        client.servers.edit(server._id, { remove: "Icon" })
-                    }
+                    onUpload={(icon) => server.edit({ icon })}
+                    previewURL={server.generateIconURL({ max_side: 256 }, true)}
+                    remove={() => server.edit({ remove: "Icon" })}
                 />
                 <div className={styles.name}>
                     <h3>
@@ -115,17 +103,9 @@ export function Overview({ server }: Props) {
                 fileType="banners"
                 behaviour="upload"
                 maxFileSize={6_000_000}
-                onUpload={(banner) =>
-                    client.servers.edit(server._id, { banner })
-                }
-                previewURL={client.servers.getBannerURL(
-                    server._id,
-                    { width: 1000 },
-                    true,
-                )}
-                remove={() =>
-                    client.servers.edit(server._id, { remove: "Banner" })
-                }
+                onUpload={(banner) => server.edit({ banner })}
+                previewURL={server.generateBannerURL({ width: 1000 }, true)}
+                remove={() => server.edit({ remove: "Banner" })}
             />
 
             <h3>
@@ -139,6 +119,7 @@ export function Overview({ server }: Props) {
             ].map(([i18n, key]) => (
                 // ! FIXME: temporary code just so we can expose the options
                 <p
+                    key={key}
                     style={{
                         display: "flex",
                         gap: "8px",
@@ -170,15 +151,13 @@ export function Overview({ server }: Props) {
                         <option value="disabled">
                             <Text id="general.disabled" />
                         </option>
-                        {server.channels.map((id) => {
-                            const channel = client.channels.get(id);
-                            if (!channel) return null;
-                            return (
-                                <option value={id}>
-                                    {getChannelName(client, channel, true)}
+                        {server.channels
+                            .filter((x) => typeof x !== "undefined")
+                            .map((channel) => (
+                                <option key={channel!._id} value={channel!._id}>
+                                    {getChannelName(channel!, true)}
                                 </option>
-                            );
-                        })}
+                            ))}
                     </ComboBox>
                 </p>
             ))}
@@ -190,4 +169,4 @@ export function Overview({ server }: Props) {
             </p>
         </div>
     );
-}
+});

src/pages/settings/server/Panes.module.scss

@@ -17,21 +17,32 @@
     }
 }
 
-.invites {
+.userList {
     gap: 8px;
     display: flex;
     flex-direction: column;
 
     .subtitle {
+        gap: 8px;
         display: flex;
         justify-content: space-between;
         font-size: 13px;
         text-transform: uppercase;
         color: var(--secondary-foreground);
         font-weight: 700;
+
+        .reason {
+            text-align: center;
+        }
+    }
+
+    .reason {
+        flex: 2;
     }
 
-    .invite {
+    .invite,
+    .ban,
+    .member {
         gap: 8px;
         padding: 10px;
         display: flex;
@@ -39,7 +50,8 @@
         flex-direction: row;
         background: var(--secondary-background);
 
-        code, span {
+        span,
+        code {
             flex: 1;
         }
 
@@ -58,25 +70,23 @@
             opacity: 0.5;
         }
     }
-}
 
-.members {
-    .subtitle {
-        display: flex;
-        justify-content: space-between;
-        font-size: 13px;
-        text-transform: uppercase;
-        color: var(--secondary-foreground);
-        font-weight: 700;
-    }
-    
     .member {
-        gap: 8px;
+        cursor: pointer;
+
+        .chevron {
+            transition: 0.2s ease all;
+        }
+
+        &:not([data-open="true"]) .chevron {
+            transform: rotateZ(90deg);
+        }
+    }
+
+    .memberView {
         padding: 10px;
-        display: flex;
-        align-items: center;
-        flex-direction: row;
-        background: var(--secondary-background);
+        margin: 0 10px;
+        background: var(--background);
     }
 }
 
@@ -95,10 +105,6 @@
         flex-grow: 1;
         padding: 0 8px;
         overflow-y: scroll;
-        
-        section {
-            margin-bottom: 1em;
-        }
     }
 
     .title {
@@ -107,7 +113,8 @@
         margin-bottom: 1em;
         align-items: center;
 
-        h1, h2 {
+        h1,
+        h2 {
             margin: 0;
             min-width: 0;
             flex-grow: 1;
@@ -126,4 +133,4 @@
         display: flex;
         padding: 8px 0;
     }
-}
+}
\ No newline at end of file

src/pages/settings/server/Roles.tsx

 import { Plus } from "@styled-icons/boxicons-regular";
 import isEqual from "lodash.isequal";
-import { Servers } from "revolt.js/dist/api/objects";
-import {
-    ChannelPermission,
-    ServerPermission,
-} from "revolt.js/dist/api/permissions";
+import { observer } from "mobx-react-lite";
+import { ChannelPermission, ServerPermission } from "revolt.js";
+import { Server } from "revolt.js/dist/maps/Servers";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
-import IconButton from "../../../components/ui/IconButton";
+import ColourSwatches from "../../../components/ui/ColourSwatches";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
-import Tip from "../../../components/ui/Tip";
 
 import ButtonItem from "../../../components/navigation/items/ButtonItem";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
 const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
 
 // ! FIXME: bad code :)
-export function Roles({ server }: Props) {
+export const Roles = observer(({ server }: Props) => {
     const [role, setRole] = useState("default");
     const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
-    const roles = server.roles ?? {};
+    const roles = useMemo(() => server.roles ?? {}, [server]);
 
     if (role !== "default" && typeof roles[role] === "undefined") {
-        useEffect(() => setRole("default"));
+        useEffect(() => setRole("default"), [role]);
         return null;
     }
 
-    const v = (id: string) =>
-        I32ToU32(
-            id === "default"
-                ? server.default_permissions
-                : roles[id].permissions,
-        );
-    const [perm, setPerm] = useState(v(role));
-    useEffect(() => setPerm(v(role)), [role, roles[role]?.permissions]);
-
-    const modified = !isEqual(perm, v(role));
-    const save = () =>
-        client.servers.setPermissions(server._id, role, {
-            server: perm[0],
-            channel: perm[1],
-        });
+    const {
+        name: roleName,
+        colour: roleColour,
+        permissions,
+    } = roles[role] ?? {};
+
+    const getPermissions = useCallback(
+        (id: string) => {
+            return I32ToU32(
+                id === "default"
+                    ? server.default_permissions
+                    : roles[id].permissions,
+            );
+        },
+        [roles, server],
+    );
+
+    const [perm, setPerm] = useState(getPermissions(role));
+    const [name, setName] = useState(roleName);
+    const [colour, setColour] = useState(roleColour);
+
+    useEffect(
+        () => setPerm(getPermissions(role)),
+        [getPermissions, role, permissions],
+    );
+
+    useEffect(() => setName(roleName), [role, roleName]);
+    useEffect(() => setColour(roleColour), [role, roleColour]);
+
+    const modified =
+        !isEqual(perm, getPermissions(role)) ||
+        !isEqual(name, roleName) ||
+        !isEqual(colour, roleColour);
+
+    const save = () => {
+        if (!isEqual(perm, getPermissions(role))) {
+            server.setPermissions(role, {
+                server: perm[0],
+                channel: perm[1],
+            });
+        }
+
+        if (!isEqual(name, roleName) || !isEqual(colour, roleColour)) {
+            server.editRole(role, { name, colour });
+        }
+    };
+
     const deleteRole = () => {
         setRole("default");
-        client.servers.deleteRole(server._id, role);
+        server.deleteRole(role);
     };
 
     return (
@@ -73,7 +100,7 @@ export function Roles({ server }: Props) {
                             openScreen({
                                 id: "special_input",
                                 type: "create_role",
-                                server: server._id,
+                                server,
                                 callback: (id) => setRole(id),
                             })
                         }
@@ -88,15 +115,16 @@ export function Roles({ server }: Props) {
                                 <Text id="app.settings.permissions.default_role" />
                             </ButtonItem>
                         );
-                    } else {
-                        return (
-                            <ButtonItem
-                                active={role === id}
-                                onClick={() => setRole(id)}>
-                                {roles[id].name}
-                            </ButtonItem>
-                        );
                     }
+                    return (
+                        <ButtonItem
+                            key={id}
+                            active={role === id}
+                            onClick={() => setRole(id)}
+                            style={{ color: roles[id].colour }}>
+                            {roles[id].name}
+                        </ButtonItem>
+                    );
                 })}
             </div>
             <div className={styles.permissions}>
@@ -112,19 +140,45 @@ export function Roles({ server }: Props) {
                         Save
                     </Button>
                 </div>
+                {role !== "default" && (
+                    <>
+                        <section>
+                            <Overline type="subtle">Role Name</Overline>
+                            <p>
+                                <InputBox
+                                    value={name}
+                                    onChange={(e) =>
+                                        setName(e.currentTarget.value)
+                                    }
+                                    contrast
+                                />
+                            </p>
+                        </section>
+                        <section>
+                            <Overline type="subtle">Role Colour</Overline>
+                            <p>
+                                <ColourSwatches
+                                    value={colour ?? "gray"}
+                                    onChange={(value) => setColour(value)}
+                                />
+                            </p>
+                        </section>
+                    </>
+                )}
                 <section>
                     <Overline type="subtle">
                         <Text id="app.settings.permissions.server" />
                     </Overline>
                     {Object.keys(ServerPermission).map((key) => {
                         if (key === "View") return;
-                        let value =
+                        const value =
                             ServerPermission[
                                 key as keyof typeof ServerPermission
                             ];
 
                         return (
                             <Checkbox
+                                key={key}
                                 checked={(perm[0] & value) > 0}
                                 onChange={() =>
                                     setPerm([perm[0] ^ value, perm[1]])
@@ -143,13 +197,14 @@ export function Roles({ server }: Props) {
                     </Overline>
                     {Object.keys(ChannelPermission).map((key) => {
                         if (key === "ManageChannel") return;
-                        let value =
+                        const value =
                             ChannelPermission[
                                 key as keyof typeof ChannelPermission
                             ];
 
                         return (
                             <Checkbox
+                                key={key}
                                 checked={((perm[1] >>> 0) & value) > 0}
                                 onChange={() =>
                                     setPerm([perm[0], perm[1] ^ value])
@@ -176,4 +231,4 @@ export function Roles({ server }: Props) {
             </div>
         </div>
     );
-}
+});

src/preact.d.ts

-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+/* eslint-disable */
 import JSX = preact.JSX;

src/redux/connector.tsx

@@ -11,6 +11,6 @@ export function connectState<T>(
     mapKeys: (state: State, props: T) => any,
     memoize?: boolean,
 ): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
-    let c = connect(mapKeys)(component);
+    const c = connect(mapKeys)(component);
     return memoize ? memo(c) : c;
 }

src/redux/index.ts

 import localForage from "localforage";
 import { createStore } from "redux";
-import { Core } from "revolt.js/dist/api/objects";
+import { RevoltConfiguration } from "revolt-api/types/Core";
 
 import { Language } from "../context/Locale";
 
@@ -14,17 +14,15 @@ import { QueuedMessage } from "./reducers/queue";
 import { SectionToggle } from "./reducers/section_toggle";
 import { Settings } from "./reducers/settings";
 import { SyncOptions } from "./reducers/sync";
-import { Typing } from "./reducers/typing";
 import { Unreads } from "./reducers/unreads";
 
 export type State = {
-    config: Core.RevoltNodeConfiguration;
+    config: RevoltConfiguration;
     locale: Language;
     auth: AuthState;
     settings: Settings;
     unreads: Unreads;
     queue: QueuedMessage[];
-    typing: Typing;
     drafts: Drafts;
     sync: SyncOptions;
     experiments: ExperimentOptions;
@@ -82,3 +80,7 @@ store.subscribe(() => {
 export function dispatch(action: Action) {
     store.dispatch(action);
 }
+
+export function getState(): State {
+    return store.getState();
+}

src/redux/reducers/auth.ts

-import type { Auth } from "revolt.js/dist/api/objects";
+import { Session } from "revolt-api/types/Auth";
 
 export interface AuthState {
     accounts: {
         [key: string]: {
-            session: Auth.Session;
+            session: Session;
         };
     };
     active?: string;
@@ -13,7 +13,7 @@ export type AuthAction =
     | { type: undefined }
     | {
           type: "LOGIN";
-          session: Auth.Session;
+          session: Session;
       }
     | {
           type: "LOGOUT";

src/redux/reducers/experiments.ts

-export type Experiments = never;
-export const AVAILABLE_EXPERIMENTS: Experiments[] = [];
+export type Experiments = "search";
+export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
+export const EXPERIMENTS: {
+    [key in Experiments]: { title: string; description: string };
+} = {
+    search: {
+        title: "Search",
+        description: "Allows you to search for messages in channels.",
+    },
+};
 
 export interface ExperimentOptions {
     enabled?: Experiments[];

src/redux/reducers/index.ts

@@ -12,7 +12,6 @@ import { sectionToggle, SectionToggleAction } from "./section_toggle";
 import { config, ConfigAction } from "./server_config";
 import { settings, SettingsAction } from "./settings";
 import { sync, SyncAction } from "./sync";
-import { typing, TypingAction } from "./typing";
 import { unreads, UnreadsAction } from "./unreads";
 
 export default combineReducers({
@@ -22,7 +21,6 @@ export default combineReducers({
     settings,
     unreads,
     queue,
-    typing,
     drafts,
     sync,
     experiments,
@@ -38,7 +36,6 @@ export type Action =
     | SettingsAction
     | UnreadsAction
     | QueueAction
-    | TypingAction
     | DraftAction
     | SyncAction
     | ExperimentsAction
@@ -46,15 +43,3 @@ export type Action =
     | NotificationsAction
     | SectionToggleAction
     | { type: "__INIT"; state: State };
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function filter(obj: any, keys: string[]) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const newObj: any = {};
-    for (const key of keys) {
-        const v = obj[key];
-        if (v) newObj[key] = v;
-    }
-
-    return newObj;
-}

src/redux/reducers/notifications.ts

-import type { Channel, Message } from "revolt.js";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { Message } from "revolt.js/dist/maps/Messages";
 
 import type { SyncUpdateAction } from "./sync";
 
@@ -35,7 +36,7 @@ export function shouldNotify(
         case "none":
             return false;
         case "mention": {
-            if (!message.mentions?.includes(user_id)) return false;
+            if (!message.mention_ids?.includes(user_id)) return false;
         }
     }
 

src/redux/reducers/queue.ts

-import type { MessageObject } from "../../context/revoltjs/util";
-
 export enum QueueStatus {
     SENDING = "sending",
     ERRORED = "errored",
@@ -10,7 +8,11 @@ export interface Reply {
     mention: boolean;
 }
 
-export type QueuedMessageData = Omit<MessageObject, "content" | "replies"> & {
+export type QueuedMessageData = {
+    _id: string;
+    author: string;
+    channel: string;
+
     content: string;
     replies: Reply[];
 };

src/redux/reducers/server_config.ts

-import type { Core } from "revolt.js/dist/api/objects";
+import type { RevoltConfiguration } from "revolt-api/types/Core";
 
 export type ConfigAction =
     | { type: undefined }
     | {
           type: "SET_CONFIG";
-          config: Core.RevoltNodeConfiguration;
+          config: RevoltConfiguration;
       };
 
 export function config(
-    state = {} as Core.RevoltNodeConfiguration,
+    state = {} as RevoltConfiguration,
     action: ConfigAction,
-): Core.RevoltNodeConfiguration {
+): RevoltConfiguration {
     switch (action.type) {
         case "SET_CONFIG":
             return action.config;

src/redux/reducers/settings.ts

@@ -2,7 +2,6 @@ import type { Theme, ThemeOptions } from "../../context/Theme";
 
 import { setEmojiPack } from "../../components/common/Emoji";
 
-import { filter } from ".";
 import type { Sounds } from "../../assets/sounds/Audio";
 import type { SyncUpdateAction } from "./sync";
 
@@ -67,7 +66,7 @@ export function settings(
             return {
                 ...state,
                 theme: {
-                    ...filter(state.theme, ["custom", "preset", "ligatures"]),
+                    ...state.theme,
                     ...action.theme,
                 },
             };
@@ -94,7 +93,7 @@ export function settings(
             return {
                 ...state,
                 appearance: {
-                    ...filter(state.appearance, ["emojiPack"]),
+                    ...state.appearance,
                     ...action.options,
                 },
             };

src/redux/reducers/typing.ts

-export type TypingUser = { id: string; started: number };
-export type Typing = { [key: string]: TypingUser[] };
-
-export type TypingAction =
-    | { type: undefined }
-    | {
-          type: "TYPING_START";
-          channel: string;
-          user: string;
-      }
-    | {
-          type: "TYPING_STOP";
-          channel: string;
-          user: string;
-      }
-    | {
-          type: "RESET";
-      };
-
-export function typing(state: Typing = {}, action: TypingAction): Typing {
-    switch (action.type) {
-        case "TYPING_START":
-            return {
-                ...state,
-                [action.channel]: [
-                    ...(state[action.channel] ?? []).filter(
-                        (x) => x.id !== action.user,
-                    ),
-                    {
-                        id: action.user,
-                        started: +new Date(),
-                    },
-                ],
-            };
-        case "TYPING_STOP":
-            return {
-                ...state,
-                [action.channel]:
-                    state[action.channel]?.filter(
-                        (x) => x.id !== action.user,
-                    ) ?? [],
-            };
-        case "RESET":
-            return {};
-        default:
-            return state;
-    }
-}