Run prettier on all files.

src/pages/settings/server/Bans.tsx

@@ -1,25 +1,37 @@
-import Tip from "../../../components/ui/Tip";
 import { Servers } from "revolt.js/dist/api/objects";
+
 import { useContext, useEffect, useState } from "preact/hooks";
+
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import Tip from "../../../components/ui/Tip";
+
 interface Props {
-    server: Servers.Server;
+	server: Servers.Server;
 }
 
 export function Bans({ server }: Props) {
-    const client = useContext(AppContext);
-    const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);
+	const client = useContext(AppContext);
+	const [bans, setBans] = useState<Servers.Ban[] | undefined>(undefined);
 
-    useEffect(() => {
-        client.servers.fetchBans(server._id)
-            .then(bans => setBans(bans))
-    }, [ ]);
+	useEffect(() => {
+		client.servers.fetchBans(server._id).then((bans) => setBans(bans));
+	}, []);
 
-    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>
-    );
+	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>
+	);
 }

src/pages/settings/server/Invites.tsx

@@ -1,77 +1,86 @@
-import { Text } from "preact-i18n";
-import styles from './Panes.module.scss';
 import { XCircle } from "@styled-icons/boxicons-regular";
-import { useEffect, useState } from "preact/hooks";
-import Preloader from "../../../components/ui/Preloader";
-import IconButton from "../../../components/ui/IconButton";
-import UserIcon from "../../../components/common/user/UserIcon";
-import { getChannelName } from "../../../context/revoltjs/util";
 import { Invites as InvitesNS, Servers } from "revolt.js/dist/api/objects";
-import { useChannels, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
+
+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 { getChannelName } from "../../../context/revoltjs/util";
+
+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: Servers.Server;
 }
 
 export function Invites({ server }: Props) {
-    const [invites, setInvites] = useState<InvitesNS.ServerInvite[] | undefined>(undefined);
+	const [invites, setInvites] = useState<
+		InvitesNS.ServerInvite[] | undefined
+	>(undefined);
 
-    const ctx = useForceUpdate();
-    const [deleting, setDelete] = useState<string[]>([]);
-    const users = useUsers(invites?.map(x => x.creator) ?? [], ctx);
-    const channels = useChannels(invites?.map(x => x.channel) ?? [], ctx);
+	const ctx = useForceUpdate();
+	const [deleting, setDelete] = useState<string[]>([]);
+	const users = useUsers(invites?.map((x) => x.creator) ?? [], ctx);
+	const channels = useChannels(invites?.map((x) => x.channel) ?? [], ctx);
 
-    useEffect(() => {
-        ctx.client.servers.fetchInvites(server._id)
-            .then(invites => setInvites(invites))
-    }, [ ]);
+	useEffect(() => {
+		ctx.client.servers
+			.fetchInvites(server._id)
+			.then((invites) => setInvites(invites));
+	}, []);
 
-    return (
-        <div className={styles.invites}>
-            <div className={styles.subtitle}>
-                <span>Invite Code</span>
-                <span>Invitor</span>
-                <span>Channel</span>
-                <span>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);
+	return (
+		<div className={styles.invites}>
+			<div className={styles.subtitle}>
+				<span>Invite Code</span>
+				<span>Invitor</span>
+				<span>Channel</span>
+				<span>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);
 
-                        return (
-                            <div className={styles.invite}
-                                data-deleting={deleting.indexOf(invite._id) > -1}>
-                                <code>{ invite._id }</code>
-                                <span>
-                                    <UserIcon target={creator} size={24} /> {creator?.username ?? 'unknown'}
-                                </span>
-                                <span>{ (channel && creator) ? getChannelName(ctx.client, channel, true) : '#unknown' }</span>
-                                <IconButton
-                                    onClick={async () => {
-                                        setDelete([
-                                            ...deleting,
-                                            invite._id
-                                        ]);
+				return (
+					<div
+						className={styles.invite}
+						data-deleting={deleting.indexOf(invite._id) > -1}>
+						<code>{invite._id}</code>
+						<span>
+							<UserIcon target={creator} size={24} />{" "}
+							{creator?.username ?? "unknown"}
+						</span>
+						<span>
+							{channel && creator
+								? getChannelName(ctx.client, channel, true)
+								: "#unknown"}
+						</span>
+						<IconButton
+							onClick={async () => {
+								setDelete([...deleting, invite._id]);
 
-                                        await ctx.client.deleteInvite(invite._id);
-                                        
-                                        setInvites(
-                                            invites?.filter(
-                                                x => x._id !== invite._id
-                                            )
-                                        );
-                                    }}
-                                    disabled={deleting.indexOf(invite._id) > -1}>
-                                    <XCircle size={24} />
-                                </IconButton>
-                            </div>
-                        )
-                    }
-                )
-            }
-        </div>
-    );
+								await ctx.client.deleteInvite(invite._id);
+
+								setInvites(
+									invites?.filter(
+										(x) => x._id !== invite._id,
+									),
+								);
+							}}
+							disabled={deleting.indexOf(invite._id) > -1}>
+							<XCircle size={24} />
+						</IconButton>
+					</div>
+				);
+			})}
+		</div>
+	);
 }

src/pages/settings/server/Members.tsx

@@ -1,34 +1,44 @@
-import styles from './Panes.module.scss';
-import { useEffect, useState } from "preact/hooks";
 import { Servers } from "revolt.js/dist/api/objects";
+
+import styles from "./Panes.module.scss";
+import { useEffect, useState } from "preact/hooks";
+
 import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 interface Props {
-    server: Servers.Server;
+	server: Servers.Server;
 }
 
 // ! FIXME: bad code :)
 export function Members({ server }: Props) {
-    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
+	const [members, setMembers] = useState<Servers.Member[] | undefined>(
+		undefined,
+	);
 
-    const ctx = useForceUpdate();
-    const users = useUsers(members?.map(x => x._id.user) ?? [], ctx);
+	const ctx = useForceUpdate();
+	const users = useUsers(members?.map((x) => x._id.user) ?? [], ctx);
 
-    useEffect(() => {
-        ctx.client.servers.members.fetchMembers(server._id)
-            .then(members => setMembers(members))
-    }, [ ]);
+	useEffect(() => {
+		ctx.client.servers.members
+			.fetchMembers(server._id)
+			.then((members) => setMembers(members));
+	}, []);
 
-    return (
-        <div className={styles.members}>
-            <div className={styles.subtitle}>
-                { members?.length ?? 0 } Members
-            </div>
-            { members && members.length > 0 && users?.map(x => x && 
-                <div className={styles.member}>
-                    <div>@{x.username}</div>
-                </div>) 
-            }
-        </div>
-    );
+	return (
+		<div className={styles.members}>
+			<div className={styles.subtitle}>
+				{members?.length ?? 0} Members
+			</div>
+			{members &&
+				members.length > 0 &&
+				users?.map(
+					(x) =>
+						x && (
+							<div className={styles.member}>
+								<div>@{x.username}</div>
+							</div>
+						),
+				)}
+		</div>
+	);
 }

src/pages/settings/server/Overview.tsx

@@ -1,142 +1,193 @@
-import { Text } from "preact-i18n";
 import isEqual from "lodash.isequal";
-import styles from './Panes.module.scss';
-import Button from "../../../components/ui/Button";
-import InputBox from "../../../components/ui/InputBox";
-import ComboBox from "../../../components/ui/ComboBox";
 import { Servers, Server } from "revolt.js/dist/api/objects";
-import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+
+import styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { getChannelName } from "../../../context/revoltjs/util";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+
+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";
+import ComboBox from "../../../components/ui/ComboBox";
+import InputBox from "../../../components/ui/InputBox";
 
 interface Props {
-    server: Servers.Server;
+	server: Servers.Server;
 }
 
 export function Overview({ server }: Props) {
-    const client = useContext(AppContext);
+	const client = useContext(AppContext);
 
-    const [name, setName] = useState(server.name);
-    const [description, setDescription] = useState(server.description ?? '');
-    const [systemMessages, setSystemMessages] = useState(server.system_messages);
+	const [name, setName] = useState(server.name);
+	const [description, setDescription] = useState(server.description ?? "");
+	const [systemMessages, setSystemMessages] = useState(
+		server.system_messages,
+	);
 
-    useEffect(() => setName(server.name), [ server.name ]);
-    useEffect(() => setDescription(server.description ?? ''), [ server.description ]);
-    useEffect(() => setSystemMessages(server.system_messages), [ server.system_messages ]);
+	useEffect(() => setName(server.name), [server.name]);
+	useEffect(
+		() => setDescription(server.description ?? ""),
+		[server.description],
+	);
+	useEffect(
+		() => setSystemMessages(server.system_messages),
+		[server.system_messages],
+	);
 
-    const [ changed, setChanged ] = useState(false);
-    function save() {
-        let changes: Partial<Pick<Servers.Server, 'name' | 'description' | 'system_messages'>> = {};
-        if (name !== server.name) changes.name = name;
-        if (description !== server.description) changes.description = description;
-        if (!isEqual(systemMessages, server.system_messages)) changes.system_messages = systemMessages;
-        
-        client.servers.edit(server._id, changes);
-        setChanged(false);
-    }
+	const [changed, setChanged] = useState(false);
+	function save() {
+		let changes: Partial<
+			Pick<Servers.Server, "name" | "description" | "system_messages">
+		> = {};
+		if (name !== server.name) changes.name = name;
+		if (description !== server.description)
+			changes.description = description;
+		if (!isEqual(systemMessages, server.system_messages))
+			changes.system_messages = systemMessages;
 
-    return (
-        <div className={styles.overview}>
-            <div className={styles.row}>
-                <FileUploader
-                    width={80}
-                    height={80}
-                    style="icon"
-                    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' })}
-                />
-                <div className={styles.name}>
-                    <h3>
-                        <Text id="app.main.servers.name" />
-                    </h3>
-                    <InputBox
-                        contrast
-                        value={name}
-                        maxLength={32}
-                        onChange={e => {
-                            setName(e.currentTarget.value)
-                            if (!changed) setChanged(true)
-                        }}
-                    />
-                </div>
-            </div>
+		client.servers.edit(server._id, changes);
+		setChanged(false);
+	}
 
-            <h3>
-                <Text id="app.main.servers.description" />
-            </h3>
-            <TextAreaAutoSize
-                maxRows={10}
-                minHeight={60}
-                maxLength={1024}
-                value={description}
-                placeholder={"Add a topic..."}
-                onChange={ev => {
-                    setDescription(ev.currentTarget.value);
-                    if (!changed) setChanged(true)
-                }}
-            />
+	return (
+		<div className={styles.overview}>
+			<div className={styles.row}>
+				<FileUploader
+					width={80}
+					height={80}
+					style="icon"
+					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" })
+					}
+				/>
+				<div className={styles.name}>
+					<h3>
+						<Text id="app.main.servers.name" />
+					</h3>
+					<InputBox
+						contrast
+						value={name}
+						maxLength={32}
+						onChange={(e) => {
+							setName(e.currentTarget.value);
+							if (!changed) setChanged(true);
+						}}
+					/>
+				</div>
+			</div>
 
-            <h3>
-                <Text id="app.main.servers.custom_banner" />
-            </h3>
-            <FileUploader
-                height={160}
-                style="banner"
-                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' })}
-            />
+			<h3>
+				<Text id="app.main.servers.description" />
+			</h3>
+			<TextAreaAutoSize
+				maxRows={10}
+				minHeight={60}
+				maxLength={1024}
+				value={description}
+				placeholder={"Add a topic..."}
+				onChange={(ev) => {
+					setDescription(ev.currentTarget.value);
+					if (!changed) setChanged(true);
+				}}
+			/>
 
-            <h3>
-                <Text id="app.settings.server_pages.overview.system_messages" />
-            </h3>
-            {[
-                [ 'User Joined', 'user_joined' ],
-                [ 'User Left', 'user_left' ],
-                [ 'User Kicked', 'user_kicked' ],
-                [ 'User Banned', 'user_banned' ]
-            ].map(([ i18n, key ]) =>
-                // ! FIXME: temporary code just so we can expose the options
-                <p style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                    <span style={{ flexShrink: '0', flex: `25%` }}>{i18n}</span>
-                    <ComboBox value={systemMessages?.[key as keyof typeof systemMessages] ?? 'disabled'}
-                        onChange={e => {
-                            if (!changed) setChanged(true)
-                            const v = e.currentTarget.value;
-                            if (v === 'disabled') {
-                                const { [key as keyof typeof systemMessages]: _, ...other } = systemMessages;
-                                setSystemMessages(other);
-                            } else {
-                                setSystemMessages({
-                                    ...systemMessages,
-                                    [key]: v
-                                });
-                            }
-                        }}>
-                        <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) }</option>;
-                        }) }
-                    </ComboBox>
-                </p>
-            )}
+			<h3>
+				<Text id="app.main.servers.custom_banner" />
+			</h3>
+			<FileUploader
+				height={160}
+				style="banner"
+				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" })
+				}
+			/>
 
-            <p>
-                <Button onClick={save} contrast disabled={!changed}>
-                    <Text id="app.special.modals.actions.save" />
-                </Button>
-            </p>
-        </div>
-    );
+			<h3>
+				<Text id="app.settings.server_pages.overview.system_messages" />
+			</h3>
+			{[
+				["User Joined", "user_joined"],
+				["User Left", "user_left"],
+				["User Kicked", "user_kicked"],
+				["User Banned", "user_banned"],
+			].map(([i18n, key]) => (
+				// ! FIXME: temporary code just so we can expose the options
+				<p
+					style={{
+						display: "flex",
+						gap: "8px",
+						alignItems: "center",
+					}}>
+					<span style={{ flexShrink: "0", flex: `25%` }}>{i18n}</span>
+					<ComboBox
+						value={
+							systemMessages?.[
+								key as keyof typeof systemMessages
+							] ?? "disabled"
+						}
+						onChange={(e) => {
+							if (!changed) setChanged(true);
+							const v = e.currentTarget.value;
+							if (v === "disabled") {
+								const {
+									[key as keyof typeof systemMessages]: _,
+									...other
+								} = systemMessages;
+								setSystemMessages(other);
+							} else {
+								setSystemMessages({
+									...systemMessages,
+									[key]: v,
+								});
+							}
+						}}>
+						<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)}
+								</option>
+							);
+						})}
+					</ComboBox>
+				</p>
+			))}
+
+			<p>
+				<Button onClick={save} contrast disabled={!changed}>
+					<Text id="app.special.modals.actions.save" />
+				</Button>
+			</p>
+		</div>
+	);
 }

src/pages/settings/server/Roles.tsx

@@ -1,120 +1,179 @@
-import { Text } from "preact-i18n";
-import styles from './Panes.module.scss';
-import Button from "../../../components/ui/Button";
-import Overline from "../../../components/ui/Overline";
-import { Servers } from "revolt.js/dist/api/objects";
-import Checkbox from "../../../components/ui/Checkbox";
-import { useContext, useEffect, useState } from "preact/hooks";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { ChannelPermission, ServerPermission } from "revolt.js/dist/api/permissions";
-import Tip from "../../../components/ui/Tip";
-import IconButton from "../../../components/ui/IconButton";
-import ButtonItem from "../../../components/navigation/items/ButtonItem";
-import isEqual from 'lodash.isequal';
-import InputBox from "../../../components/ui/InputBox";
 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 styles from "./Panes.module.scss";
+import { Text } from "preact-i18n";
+import { useContext, useEffect, 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 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: Servers.Server;
 }
 
-const I32ToU32 = (arr: number[]) => arr.map(x => x >>> 0);
+const I32ToU32 = (arr: number[]) => arr.map((x) => x >>> 0);
 
 // ! FIXME: bad code :)
 export function Roles({ server }: Props) {
-    const [ role, setRole ] = useState('default');
-    const { openScreen } = useIntermediate();
-    const client = useContext(AppContext);
-    const roles = server.roles ?? {};
+	const [role, setRole] = useState("default");
+	const { openScreen } = useIntermediate();
+	const client = useContext(AppContext);
+	const roles = server.roles ?? {};
 
-    if (role !== 'default' && typeof roles[role] === 'undefined') {
-        useEffect(() => setRole('default'));
-        return null;
-    }
+	if (role !== "default" && typeof roles[role] === "undefined") {
+		useEffect(() => setRole("default"));
+		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 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 deleteRole = () => {
-        setRole('default');
-        client.servers.deleteRole(server._id, role);
-    };
-    
-    return (
-        <div className={styles.roles}>
-            <div className={styles.list}>
-                <div className={styles.title}>
-                    <h1><Text id="app.settings.server_pages.roles.title" /></h1>
-                    <Plus size={22} onClick={() =>
-                        openScreen({ id: 'special_input', type: 'create_role', server: server._id, callback: id => setRole(id) })} />
-                </div>
-                { [ 'default', ...Object.keys(roles) ]
-                    .map(id => {
-                        if (id === 'default') {
-                            return (
-                                <ButtonItem active={role === 'default'} onClick={() => setRole('default')}>
-                                    <Text id="app.settings.permissions.default_role" />
-                                </ButtonItem>
-                            )
-                        } else {
-                            return (
-                                <ButtonItem active={role === id} onClick={() => setRole(id)}>
-                                    { roles[id].name }
-                                </ButtonItem>
-                            )
-                        }
-                    })
-                }
-            </div>
-            <div className={styles.permissions}>
-                <div className={styles.title}>
-                    <h2>{ role === 'default' ? <Text id="app.settings.permissions.default_role" /> : roles[role].name }</h2>
-                    <Button contrast disabled={!modified} onClick={save}>Save</Button>
-                </div>
-                <section>
-                    <Overline type="subtle"><Text id="app.settings.permissions.server" /></Overline>
-                    { Object.keys(ServerPermission)
-                        .map(key => {
-                            if (key === 'View') return;
-                            let value = ServerPermission[key as keyof typeof ServerPermission];
+	const modified = !isEqual(perm, v(role));
+	const save = () =>
+		client.servers.setPermissions(server._id, role, {
+			server: perm[0],
+			channel: perm[1],
+		});
+	const deleteRole = () => {
+		setRole("default");
+		client.servers.deleteRole(server._id, role);
+	};
 
-                            return (
-                                <Checkbox checked={(perm[0] & value) > 0}
-                                    onChange={() => setPerm([ perm[0] ^ value, perm[1] ])}
-                                    description={<Text id={`permissions.server.${key}.d`} />}>
-                                    <Text id={`permissions.server.${key}.t`} />
-                                </Checkbox>
-                            )
-                        })
-                    }
-                </section>
-                <section>
-                    <Overline type="subtle"><Text id="app.settings.permissions.channel" /></Overline>
-                    { Object.keys(ChannelPermission)
-                        .map(key => {
-                            if (key === 'ManageChannel') return;
-                            let value = ChannelPermission[key as keyof typeof ChannelPermission];
+	return (
+		<div className={styles.roles}>
+			<div className={styles.list}>
+				<div className={styles.title}>
+					<h1>
+						<Text id="app.settings.server_pages.roles.title" />
+					</h1>
+					<Plus
+						size={22}
+						onClick={() =>
+							openScreen({
+								id: "special_input",
+								type: "create_role",
+								server: server._id,
+								callback: (id) => setRole(id),
+							})
+						}
+					/>
+				</div>
+				{["default", ...Object.keys(roles)].map((id) => {
+					if (id === "default") {
+						return (
+							<ButtonItem
+								active={role === "default"}
+								onClick={() => setRole("default")}>
+								<Text id="app.settings.permissions.default_role" />
+							</ButtonItem>
+						);
+					} else {
+						return (
+							<ButtonItem
+								active={role === id}
+								onClick={() => setRole(id)}>
+								{roles[id].name}
+							</ButtonItem>
+						);
+					}
+				})}
+			</div>
+			<div className={styles.permissions}>
+				<div className={styles.title}>
+					<h2>
+						{role === "default" ? (
+							<Text id="app.settings.permissions.default_role" />
+						) : (
+							roles[role].name
+						)}
+					</h2>
+					<Button contrast disabled={!modified} onClick={save}>
+						Save
+					</Button>
+				</div>
+				<section>
+					<Overline type="subtle">
+						<Text id="app.settings.permissions.server" />
+					</Overline>
+					{Object.keys(ServerPermission).map((key) => {
+						if (key === "View") return;
+						let value =
+							ServerPermission[
+								key as keyof typeof ServerPermission
+							];
 
-                            return (
-                                <Checkbox checked={((perm[1] >>> 0) & value) > 0}
-                                    onChange={() => setPerm([ perm[0], perm[1] ^ value ])}
-                                    disabled={key === 'View'}
-                                    description={<Text id={`permissions.channel.${key}.d`} />}>
-                                    <Text id={`permissions.channel.${key}.t`} />
-                                </Checkbox>
-                            )
-                        })
-                    }
-                </section>
-                <div className={styles.actions}>
-                    <Button contrast disabled={!modified} onClick={save}>Save</Button>
-                    { role !== 'default' && <Button contrast error onClick={deleteRole}>Delete</Button> }
-                </div>
-            </div>
-        </div>
-    );
+						return (
+							<Checkbox
+								checked={(perm[0] & value) > 0}
+								onChange={() =>
+									setPerm([perm[0] ^ value, perm[1]])
+								}
+								description={
+									<Text id={`permissions.server.${key}.d`} />
+								}>
+								<Text id={`permissions.server.${key}.t`} />
+							</Checkbox>
+						);
+					})}
+				</section>
+				<section>
+					<Overline type="subtle">
+						<Text id="app.settings.permissions.channel" />
+					</Overline>
+					{Object.keys(ChannelPermission).map((key) => {
+						if (key === "ManageChannel") return;
+						let value =
+							ChannelPermission[
+								key as keyof typeof ChannelPermission
+							];
+
+						return (
+							<Checkbox
+								checked={((perm[1] >>> 0) & value) > 0}
+								onChange={() =>
+									setPerm([perm[0], perm[1] ^ value])
+								}
+								disabled={key === "View"}
+								description={
+									<Text id={`permissions.channel.${key}.d`} />
+								}>
+								<Text id={`permissions.channel.${key}.t`} />
+							</Checkbox>
+						);
+					})}
+				</section>
+				<div className={styles.actions}>
+					<Button contrast disabled={!modified} onClick={save}>
+						Save
+					</Button>
+					{role !== "default" && (
+						<Button contrast error onClick={deleteRole}>
+							Delete
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
 }