Remove useServer and useServers.

src/components/common/ServerHeader.tsx

@@ -1,26 +1,30 @@
 import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { Server } from "revolt.js/dist/api/objects";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
 import styled from "styled-components";
 
-import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
+import { Server } from "../../mobx";
+
+import { useClient } from "../../context/revoltjs/RevoltClient";
+import { useServerPermission } from "../../context/revoltjs/hooks";
 
 import Header from "../ui/Header";
 import IconButton from "../ui/IconButton";
 
 interface Props {
     server: Server;
-    ctx: HookContext;
 }
 
 const ServerName = styled.div`
     flex-grow: 1;
 `;
 
-export default function ServerHeader({ server, ctx }: Props) {
+export default observer(({ server }: Props) => {
-    const permissions = useServerPermission(server._id, ctx);
+    const permissions = useServerPermission(server._id);
-    const bannerURL = ctx.client.servers.getBannerURL(
+    const client = useClient();
+
+    const bannerURL = client.servers.getBannerURL(
         server._id,
         { width: 480 },
         true,
@@ -46,4 +50,4 @@ export default function ServerHeader({ server, ctx }: Props) {
             )}
         </Header>
     );
-}
+});

src/components/common/ServerIcon.tsx

@@ -1,8 +1,10 @@
-import { Server } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
 import styled from "styled-components";
 
 import { useContext } from "preact/hooks";
 
+import { Server } from "../../mobx";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
 import { IconBaseProps, ImageIconBase } from "./IconBase";
@@ -22,48 +24,50 @@ const ServerText = styled.div`
 `;
 
 const fallback = "/assets/group.png";
-export default function ServerIcon(
+export default observer(
-    props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
+    (
-) {
+        props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
-    const client = useContext(AppContext);
+    ) => {
+        const client = useContext(AppContext);
 
-    const {
+        const {
-        target,
+            target,
-        attachment,
+            attachment,
-        size,
+            size,
-        animate,
+            animate,
-        server_name,
+            server_name,
-        children,
+            children,
-        as,
+            as,
-        ...imgProps
+            ...imgProps
-    } = props;
+        } = props;
-    const iconURL = client.generateFileURL(
+        const iconURL = client.generateFileURL(
-        target?.icon ?? attachment,
+            target?.icon ?? attachment,
-        { max_side: 256 },
+            { max_side: 256 },
-        animate,
+            animate,
-    );
+        );
 
-    if (typeof iconURL === "undefined") {
+        if (typeof iconURL === "undefined") {
-        const name = target?.name ?? server_name ?? "";
+            const name = target?.name ?? server_name ?? "";
+
+            return (
+                <ServerText style={{ width: size, height: size }}>
+                    {name
+                        .split(" ")
+                        .map((x) => x[0])
+                        .filter((x) => typeof x !== "undefined")}
+                </ServerText>
+            );
+        }
 
         return (
-            <ServerText style={{ width: size, height: size }}>
+            <ImageIconBase
-                {name
+                {...imgProps}
-                    .split(" ")
+                width={size}
-                    .map((x) => x[0])
+                height={size}
-                    .filter((x) => typeof x !== "undefined")}
+                src={iconURL}
-            </ServerText>
+                loading="lazy"
+                aria-hidden="true"
+            />
         );
-    }
+    },
-
+);
-    return (
-        <ImageIconBase
-            {...imgProps}
-            width={size}
-            height={size}
-            src={iconURL}
-            loading="lazy"
-            aria-hidden="true"
-        />
-    );
-}

src/components/common/user/UserShort.tsx

@@ -1,16 +1,9 @@
 import { observer } from "mobx-react-lite";
-import { useParams } from "react-router-dom";
 
 import { Text } from "preact-i18n";
 
 import { User } from "../../../mobx";
 
-import {
-    useForceUpdate,
-    useMember,
-    useServer,
-} from "../../../context/revoltjs/hooks";
-
 import UserIcon from "./UserIcon";
 
 export const Username = observer(

src/components/navigation/left/ServerListSidebar.tsx

@@ -17,7 +17,6 @@ import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
-import { useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
 
 import logoSVG from "../../../assets/logo.svg";
 import ServerIcon from "../../common/ServerIcon";
@@ -180,8 +179,9 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     const client = useClient();
     const self = store.users.get(client.user!._id);
 
-    const ctx = useForceUpdate();
+    const { server: server_id } = useParams<{ server?: string }>();
-    const activeServers = useServers(undefined, ctx) as Servers.Server[];
+    const server = server_id ? store.servers.get(server_id) : undefined;
+    const activeServers = [...store.servers.values()];
     const channels = [...store.channels.values()].map((x) =>
         mapChannelWithUnread(x, unreads),
     );
@@ -200,7 +200,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
         }
 
         return {
-            ...server,
+            server,
             unread: (typeof server.channels.find((x) =>
                 unreadChannels.includes(x),
             ) !== "undefined"
@@ -213,9 +213,6 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
     });
 
     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;
@@ -267,24 +264,29 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                 </ConditionalLink>
                 <LineDivider />
                 {servers.map((entry) => {
-                    const active = entry!._id === server?._id;
+                    const active = entry.server._id === server?._id;
-                    const id = lastOpened[entry!._id];
+                    const id = lastOpened[entry.server._id];
 
                     return (
                         <ConditionalLink
                             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>

src/components/navigation/left/ServerSidebar.tsx

@@ -14,8 +14,6 @@ import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
 
-import { useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
-
 import CollapsibleSection from "../../common/CollapsibleSection";
 import ServerHeader from "../../common/ServerHeader";
 import Category from "../../ui/Category";
@@ -52,18 +50,16 @@ const ServerList = styled.div`
 `;
 
 const ServerSidebar = observer((props: Props) => {
-    const { server: server_id, channel: channel_id } =
-        useParams<{ server?: string; channel?: string }>();
-    const ctx = useForceUpdate();
-
-    const server = useServer(server_id, ctx);
-    if (!server) return <Redirect to="/" />;
-
     const store = useData();
+    const { server: server_id, channel: channel_id } =
+        useParams<{ server: string; channel?: string }>();
+
+    const server = store.servers.get(server_id);
+    if (!server) return <Redirect to="/" />;
 
     const channel = channel_id ? store.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;
@@ -125,7 +121,7 @@ const ServerSidebar = observer((props: Props) => {
 
     return (
         <ServerBase>
-            <ServerHeader server={server} ctx={ctx} />
+            <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
                 onContextMenu={attachContextMenu("Menu", {

src/components/navigation/left/common.ts

@@ -4,6 +4,7 @@ import { Channel } from "../../../mobx";
 import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
 
+import { useClient } from "../../../context/revoltjs/RevoltClient";
 import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
 type UnreadProps = {
@@ -11,11 +12,8 @@ type UnreadProps = {
     unreads: Unreads;
 };
 
-export function useUnreads(
+export function useUnreads({ channel, unreads }: UnreadProps) {
-    { channel, unreads }: UnreadProps,
+    const client = useClient();
-    context?: HookContext,
-) {
-    const ctx = useForceUpdate(context);
 
     useLayoutEffect(() => {
         function checkUnread(target?: Channel) {
@@ -40,7 +38,7 @@ export function useUnreads(
                         message,
                     });
 
-                    ctx.client.req(
+                    client.req(
                         "PUT",
                         `/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
                     );
@@ -50,9 +48,8 @@ export function useUnreads(
 
         checkUnread(channel);
 
-        ctx.client.channels.addListener("mutation", checkUnread);
+        client.channels.addListener("mutation", checkUnread);
-        return () =>
+        return () => client.channels.removeListener("mutation", checkUnread);
-            ctx.client.channels.removeListener("mutation", checkUnread);
     }, [channel, unreads]);
 }
 

src/context/intermediate/Intermediate.tsx

@@ -13,7 +13,7 @@ import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
 import { internalSubscribe } from "../../lib/eventEmitter";
 
-import { Channel, User } from "../../mobx";
+import { Channel, Server, User } from "../../mobx";
 
 import { Action } from "../../components/ui/Modal";
 
@@ -36,19 +36,19 @@ export type Screen =
     | ({ id: "special_prompt" } & (
           | { type: "leave_group"; target: Channel }
           | { type: "close_dm"; target: Channel }
-          | { type: "leave_server"; target: Servers.Server }
+          | { type: "leave_server"; target: Server }
-          | { type: "delete_server"; target: Servers.Server }
+          | { type: "delete_server"; target: Server }
           | { type: "delete_channel"; target: Channel }
           | { type: "delete_message"; target: Channels.Message }
           | {
                 type: "create_invite";
                 target: Channel;
             }
-          | { type: "kick_member"; target: Servers.Server; user: User }
+          | { type: "kick_member"; target: Server; user: User }
-          | { type: "ban_member"; target: Servers.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" } & (
           | {

src/context/intermediate/modals/Prompt.tsx

@@ -9,7 +9,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import { TextReact } from "../../../lib/i18n";
 
-import { Channel, User } from "../../../mobx";
+import { Channel, Server, User } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 
 import Message from "../../../components/common/messaging/Message";
@@ -57,19 +57,19 @@ export function PromptModal({
 type SpecialProps = { onClose: () => void } & (
     | { type: "leave_group"; target: Channel }
     | { type: "close_dm"; target: Channel }
-    | { type: "leave_server"; target: Servers.Server }
+    | { type: "leave_server"; target: Server }
-    | { type: "delete_server"; target: Servers.Server }
+    | { type: "delete_server"; target: Server }
     | { type: "delete_channel"; target: Channel }
     | { type: "delete_message"; target: Channels.Message }
     | {
           type: "create_invite";
           target: Channel;
       }
-    | { type: "kick_member"; target: Servers.Server; user: User }
+    | { type: "kick_member"; target: Server; user: User }
-    | { type: "ban_member"; target: Servers.Server; user: User }
+    | { type: "ban_member"; target: Server; user: User }
     | { type: "unfriend_user"; target: User }
     | { type: "block_user"; target: User }
-    | { type: "create_channel"; target: Servers.Server }
+    | { type: "create_channel"; target: Server }
 );
 
 export const SpecialPromptModal = observer((props: SpecialProps) => {

src/context/revoltjs/hooks.ts

@@ -77,20 +77,6 @@ function useObject(
         : map.toArray();
 }
 
-export function useServer(id?: string, context?: HookContext) {
-    if (typeof id === "undefined") return;
-    return useObject("servers", id, context) as
-        | Readonly<Servers.Server>
-        | undefined;
-}
-
-export function useServers(ids?: string[], context?: HookContext) {
-    return useObject("servers", ids, context) as (
-        | Readonly<Servers.Server>
-        | undefined
-    )[];
-}
-
 export function useMember(id?: string, context?: HookContext) {
     if (typeof id === "undefined") return;
     return useObject("members", id, context) as

src/lib/ContextMenus.tsx

@@ -34,7 +34,7 @@ import {
 import { Text } from "preact-i18n";
 import { useContext } from "preact/hooks";
 
-import { Channel, User } from "../mobx";
+import { Channel, Server, User } from "../mobx";
 import { useData } from "../mobx/State";
 import { dispatch } from "../redux";
 import { connectState } from "../redux/connector";
@@ -55,7 +55,6 @@ import {
 import {
     useChannelPermission,
     useForceUpdate,
-    useServer,
     useServerPermission,
     useUserPermission,
 } from "../context/revoltjs/hooks";
@@ -99,8 +98,8 @@ type Action =
     | { action: "open_link"; link: string }
     | { action: "copy_link"; link: string }
     | { action: "remove_member"; channel: string; user: User }
-    | { action: "kick_member"; target: Servers.Server; user: User }
+    | { action: "kick_member"; target: Server; user: User }
-    | { action: "ban_member"; target: Servers.Server; user: User }
+    | { action: "ban_member"; target: Server; user: User }
     | { action: "view_profile"; user: User }
     | { action: "message_user"; user: User }
     | { action: "block_user"; user: User }
@@ -111,7 +110,7 @@ type Action =
     | { action: "set_presence"; presence: Users.Presence }
     | { action: "set_status" }
     | { action: "clear_status" }
-    | { action: "create_channel"; target: Servers.Server }
+    | { action: "create_channel"; target: Server }
     | {
           action: "create_invite";
           target: Channel;
@@ -122,8 +121,8 @@ type Action =
           target: Channel;
       }
     | { action: "close_dm"; target: Channel }
-    | { action: "leave_server"; target: Servers.Server }
+    | { action: "leave_server"; target: Server }
-    | { action: "delete_server"; target: Servers.Server }
+    | { action: "delete_server"; target: Server }
     | { action: "open_notification_options"; channel: Channel }
     | { action: "open_settings" }
     | { action: "open_channel_settings"; id: string }
@@ -139,7 +138,8 @@ type Props = {
     notifications: Notifications;
 };
 
-// ! FIXME: no observers here!
+// ! FIXME: I dare someone to re-write this
+// Tip: This should just be split into separate context menus per logical area.
 function ContextMenus(props: Props) {
     const { openScreen, writeClipboard } = useIntermediate();
     const client = useContext(AppContext);
@@ -495,7 +495,7 @@ function ContextMenus(props: Props) {
                     }
 
                     if (server_list) {
-                        const server = useServer(server_list, forceUpdate);
+                        const server = store.servers.get(server_list);
                         const permissions = useServerPermission(
                             server_list,
                             forceUpdate,
@@ -539,10 +539,9 @@ function ContextMenus(props: Props) {
                             targetChannel.channel_type === "VoiceChannel")
                             ? targetChannel
                             : undefined;
-                    const server = useServer(
+
-                        serverChannel ? serverChannel.server! : sid,
+                    const s = serverChannel ? serverChannel.server! : sid;
-                        forceUpdate,
+                    const server = s ? store.servers.get(s) : undefined;
-                    );
 
                     const channelPermissions = targetChannel
                         ? useChannelPermission(targetChannel._id, forceUpdate)

src/pages/settings/ServerSettings.tsx

@@ -5,7 +5,6 @@ import { Route, useHistory, useParams } from "react-router-dom";
 import { Text } from "preact-i18n";
 
 import RequiresOnline from "../../context/revoltjs/RequiresOnline";
-import { useServer } from "../../context/revoltjs/hooks";
 
 import Category from "../../components/ui/Category";
 
@@ -16,10 +15,12 @@ import { Invites } from "./server/Invites";
 import { Members } from "./server/Members";
 import { Overview } from "./server/Overview";
 import { Roles } from "./server/Roles";
+import { useData } from "../../mobx/State";
 
 export default function ServerSettings() {
     const { server: sid } = useParams<{ server: string }>();
-    const server = useServer(sid);
+    const store = useData();
+    const server = store.servers.get(sid);
     if (!server) return null;
 
     const history = useHistory();

src/pages/settings/channel/Permissions.tsx

@@ -5,9 +5,9 @@ import { ChannelPermission } from "revolt.js/dist/api/permissions";
 import { useContext, useEffect, useState } from "preact/hooks";
 
 import { Channel } from "../../../mobx";
+import { useData } from "../../../mobx/State";
 
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { useServer } from "../../../context/revoltjs/hooks";
 
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
@@ -31,11 +31,12 @@ interface Props {
 export default observer(({ channel }: Props) => {
     const [selected, setSelected] = useState("default");
     const client = useContext(AppContext);
+    const store = useData();
 
     type R = { name: string; permissions: number };
     const roles: { [key: string]: R } = {};
     if (channel.channel_type !== "Group") {
-        const server = useServer(channel.server!);
+        const server = store.servers.get(channel.server!);
         const a = server?.roles ?? {};
         for (const b of Object.keys(a)) {
             roles[b] = {

src/pages/settings/server/Bans.tsx

@@ -1,4 +1,5 @@
 import { XCircle } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import { Servers, Users } from "revolt.js/dist/api/objects";
 import { Route } from "revolt.js/dist/api/routes";
 
@@ -6,6 +7,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Server } from "../../../mobx";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "../../../components/common/user/UserIcon";
@@ -13,10 +16,10 @@ import IconButton from "../../../components/ui/IconButton";
 import Preloader from "../../../components/ui/Preloader";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
-export function Bans({ server }: Props) {
+export const Bans = observer(({ server }: Props) => {
     const client = useContext(AppContext);
     const [deleting, setDelete] = useState<string[]>([]);
     const [data, setData] = useState<
@@ -81,4 +84,4 @@ export function Bans({ server }: Props) {
             })}
         </div>
     );
-}
+});

src/pages/settings/server/Categories.tsx

@@ -9,6 +9,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Server } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
@@ -23,7 +24,7 @@ import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
 // ! FIXME: really bad code

src/pages/settings/server/Invites.tsx

@@ -6,6 +6,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { Server } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
@@ -16,7 +17,7 @@ import IconButton from "../../../components/ui/IconButton";
 import Preloader from "../../../components/ui/Preloader";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
 export const Invites = observer(({ server }: Props) => {

src/pages/settings/server/Members.tsx

@@ -7,6 +7,7 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
+import { Server } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 
 import { useClient } from "../../../context/revoltjs/RevoltClient";
@@ -18,7 +19,7 @@ import IconButton from "../../../components/ui/IconButton";
 import Overline from "../../../components/ui/Overline";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
 export const Members = observer(({ server }: Props) => {

src/pages/settings/server/Overview.tsx

@@ -1,6 +1,6 @@
 import isEqual from "lodash.isequal";
 import { observer } from "mobx-react-lite";
-import { Servers, Server } from "revolt.js/dist/api/objects";
+import { Servers } from "revolt.js/dist/api/objects";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
@@ -8,6 +8,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
+import { Server } from "../../../mobx";
 import { useData } from "../../../mobx/State";
 
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -19,7 +20,7 @@ import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
 
 interface Props {
-    server: Servers.Server;
+    server: Server;
 }
 
 export const Overview = observer(({ server }: Props) => {
@@ -51,7 +52,7 @@ export const Overview = observer(({ server }: Props) => {
         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);
         setChanged(false);

src/pages/settings/server/Roles.tsx

@@ -1,5 +1,6 @@
 import { Plus } from "@styled-icons/boxicons-regular";
 import isEqual from "lodash.isequal";
+import { observer } from "mobx-react-lite";
 import { Servers } from "revolt.js/dist/api/objects";
 import {
     ChannelPermission,
@@ -10,6 +11,8 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { Server } from "../../../mobx";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
@@ -24,13 +27,13 @@ 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);
@@ -227,4 +230,4 @@ export function Roles({ server }: Props) {
             </div>
         </div>
     );
-}
+});