Use tabWidth 4 without actual tabs.

src/context/intermediate/Intermediate.tsx

@@ -1,11 +1,11 @@
 import { Prompt } from "react-router";
 import { useHistory } from "react-router-dom";
 import {
-	Attachment,
-	Channels,
-	EmbedImage,
-	Servers,
-	Users,
+    Attachment,
+    Channels,
+    EmbedImage,
+    Servers,
+    Users,
 } from "revolt.js/dist/api/objects";
 
 import { createContext } from "preact";
@@ -19,161 +19,161 @@ import { Children } from "../../types/Preact";
 import Modals from "./Modals";
 
 export type Screen =
-	| { id: "none" }
+    | { id: "none" }
 
-	// Modals
-	| { id: "signed_out" }
-	| { id: "error"; error: string }
-	| { id: "clipboard"; text: string }
-	| {
-			id: "_prompt";
-			question: Children;
-			content?: Children;
-			actions: Action[];
-	  }
-	| ({ id: "special_prompt" } & (
-			| { type: "leave_group"; target: Channels.GroupChannel }
-			| { type: "close_dm"; target: Channels.DirectMessageChannel }
-			| { type: "leave_server"; target: Servers.Server }
-			| { type: "delete_server"; target: Servers.Server }
-			| { type: "delete_channel"; target: Channels.TextChannel }
-			| { type: "delete_message"; target: Channels.Message }
-			| {
-					type: "create_invite";
-					target: Channels.TextChannel | Channels.GroupChannel;
-			  }
-			| { type: "kick_member"; target: Servers.Server; user: string }
-			| { type: "ban_member"; target: Servers.Server; user: string }
-			| { type: "unfriend_user"; target: Users.User }
-			| { type: "block_user"; target: Users.User }
-			| { type: "create_channel"; target: Servers.Server }
-	  ))
-	| ({ id: "special_input" } & (
-			| {
-					type:
-						| "create_group"
-						| "create_server"
-						| "set_custom_status"
-						| "add_friend";
-			  }
-			| {
-					type: "create_role";
-					server: string;
-					callback: (id: string) => void;
-			  }
-	  ))
-	| {
-			id: "_input";
-			question: Children;
-			field: Children;
-			defaultValue?: string;
-			callback: (value: string) => Promise<void>;
-	  }
-	| {
-			id: "onboarding";
-			callback: (
-				username: string,
-				loginAfterSuccess?: true,
-			) => Promise<void>;
-	  }
+    // Modals
+    | { id: "signed_out" }
+    | { id: "error"; error: string }
+    | { id: "clipboard"; text: string }
+    | {
+          id: "_prompt";
+          question: Children;
+          content?: Children;
+          actions: Action[];
+      }
+    | ({ id: "special_prompt" } & (
+          | { type: "leave_group"; target: Channels.GroupChannel }
+          | { type: "close_dm"; target: Channels.DirectMessageChannel }
+          | { type: "leave_server"; target: Servers.Server }
+          | { type: "delete_server"; target: Servers.Server }
+          | { type: "delete_channel"; target: Channels.TextChannel }
+          | { type: "delete_message"; target: Channels.Message }
+          | {
+                type: "create_invite";
+                target: Channels.TextChannel | Channels.GroupChannel;
+            }
+          | { type: "kick_member"; target: Servers.Server; user: string }
+          | { type: "ban_member"; target: Servers.Server; user: string }
+          | { type: "unfriend_user"; target: Users.User }
+          | { type: "block_user"; target: Users.User }
+          | { type: "create_channel"; target: Servers.Server }
+      ))
+    | ({ id: "special_input" } & (
+          | {
+                type:
+                    | "create_group"
+                    | "create_server"
+                    | "set_custom_status"
+                    | "add_friend";
+            }
+          | {
+                type: "create_role";
+                server: string;
+                callback: (id: string) => void;
+            }
+      ))
+    | {
+          id: "_input";
+          question: Children;
+          field: Children;
+          defaultValue?: string;
+          callback: (value: string) => Promise<void>;
+      }
+    | {
+          id: "onboarding";
+          callback: (
+              username: string,
+              loginAfterSuccess?: true,
+          ) => Promise<void>;
+      }
 
-	// Pop-overs
-	| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
-	| { id: "modify_account"; field: "username" | "email" | "password" }
-	| { id: "profile"; user_id: string }
-	| { id: "channel_info"; channel_id: string }
-	| { id: "pending_requests"; users: string[] }
-	| {
-			id: "user_picker";
-			omit?: string[];
-			callback: (users: string[]) => Promise<void>;
-	  };
+    // Pop-overs
+    | { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage }
+    | { id: "modify_account"; field: "username" | "email" | "password" }
+    | { id: "profile"; user_id: string }
+    | { id: "channel_info"; channel_id: string }
+    | { id: "pending_requests"; users: string[] }
+    | {
+          id: "user_picker";
+          omit?: string[];
+          callback: (users: string[]) => Promise<void>;
+      };
 
 export const IntermediateContext = createContext({
-	screen: { id: "none" } as Screen,
-	focusTaken: false,
+    screen: { id: "none" } as Screen,
+    focusTaken: false,
 });
 
 export const IntermediateActionsContext = createContext({
-	openScreen: (screen: Screen) => {},
-	writeClipboard: (text: string) => {},
+    openScreen: (screen: Screen) => {},
+    writeClipboard: (text: string) => {},
 });
 
 interface Props {
-	children: Children;
+    children: Children;
 }
 
 export default function Intermediate(props: Props) {
-	const [screen, openScreen] = useState<Screen>({ id: "none" });
-	const history = useHistory();
+    const [screen, openScreen] = useState<Screen>({ id: "none" });
+    const history = useHistory();
 
-	const value = {
-		screen,
-		focusTaken: screen.id !== "none",
-	};
+    const value = {
+        screen,
+        focusTaken: screen.id !== "none",
+    };
 
-	const actions = useMemo(() => {
-		return {
-			openScreen: (screen: Screen) => openScreen(screen),
-			writeClipboard: (text: string) => {
-				if (navigator.clipboard) {
-					navigator.clipboard.writeText(text);
-				} else {
-					actions.openScreen({ id: "clipboard", text });
-				}
-			},
-		};
-	}, []);
+    const actions = useMemo(() => {
+        return {
+            openScreen: (screen: Screen) => openScreen(screen),
+            writeClipboard: (text: string) => {
+                if (navigator.clipboard) {
+                    navigator.clipboard.writeText(text);
+                } else {
+                    actions.openScreen({ id: "clipboard", text });
+                }
+            },
+        };
+    }, []);
 
-	useEffect(() => {
-		const openProfile = (user_id: string) =>
-			openScreen({ id: "profile", user_id });
-		const navigate = (path: string) => history.push(path);
+    useEffect(() => {
+        const openProfile = (user_id: string) =>
+            openScreen({ id: "profile", user_id });
+        const navigate = (path: string) => history.push(path);
 
-		const subs = [
-			internalSubscribe("Intermediate", "openProfile", openProfile),
-			internalSubscribe("Intermediate", "navigate", navigate),
-		];
+        const subs = [
+            internalSubscribe("Intermediate", "openProfile", openProfile),
+            internalSubscribe("Intermediate", "navigate", navigate),
+        ];
 
-		return () => subs.map((unsub) => unsub());
-	}, []);
+        return () => subs.map((unsub) => unsub());
+    }, []);
 
-	return (
-		<IntermediateContext.Provider value={value}>
-			<IntermediateActionsContext.Provider value={actions}>
-				{screen.id !== "onboarding" && props.children}
-				<Modals
-					{...value}
-					{...actions}
-					key={
-						screen.id
-					} /** By specifying a key, we reset state whenever switching screen. */
-				/>
-				<Prompt
-					when={[
-						"modify_account",
-						"special_prompt",
-						"special_input",
-						"image_viewer",
-						"profile",
-						"channel_info",
-						"pending_requests",
-						"user_picker",
-					].includes(screen.id)}
-					message={(_, action) => {
-						if (action === "POP") {
-							openScreen({ id: "none" });
-							setTimeout(() => history.push(history.location), 0);
+    return (
+        <IntermediateContext.Provider value={value}>
+            <IntermediateActionsContext.Provider value={actions}>
+                {screen.id !== "onboarding" && props.children}
+                <Modals
+                    {...value}
+                    {...actions}
+                    key={
+                        screen.id
+                    } /** By specifying a key, we reset state whenever switching screen. */
+                />
+                <Prompt
+                    when={[
+                        "modify_account",
+                        "special_prompt",
+                        "special_input",
+                        "image_viewer",
+                        "profile",
+                        "channel_info",
+                        "pending_requests",
+                        "user_picker",
+                    ].includes(screen.id)}
+                    message={(_, action) => {
+                        if (action === "POP") {
+                            openScreen({ id: "none" });
+                            setTimeout(() => history.push(history.location), 0);
 
-							return false;
-						}
+                            return false;
+                        }
 
-						return true;
-					}}
-				/>
-			</IntermediateActionsContext.Provider>
-		</IntermediateContext.Provider>
-	);
+                        return true;
+                    }}
+                />
+            </IntermediateActionsContext.Provider>
+        </IntermediateContext.Provider>
+    );
 }
 
 export const useIntermediate = () => useContext(IntermediateActionsContext);

src/context/intermediate/Modals.tsx

@@ -7,27 +7,27 @@ import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
 
 export interface Props {
-	screen: Screen;
-	openScreen: (id: any) => void;
+    screen: Screen;
+    openScreen: (id: any) => void;
 }
 
 export default function Modals({ screen, openScreen }: Props) {
-	const onClose = () => openScreen({ id: "none" });
+    const onClose = () => openScreen({ id: "none" });
 
-	switch (screen.id) {
-		case "_prompt":
-			return <PromptModal onClose={onClose} {...screen} />;
-		case "_input":
-			return <InputModal onClose={onClose} {...screen} />;
-		case "error":
-			return <ErrorModal onClose={onClose} {...screen} />;
-		case "signed_out":
-			return <SignedOutModal onClose={onClose} {...screen} />;
-		case "clipboard":
-			return <ClipboardModal onClose={onClose} {...screen} />;
-		case "onboarding":
-			return <OnboardingModal onClose={onClose} {...screen} />;
-	}
+    switch (screen.id) {
+        case "_prompt":
+            return <PromptModal onClose={onClose} {...screen} />;
+        case "_input":
+            return <InputModal onClose={onClose} {...screen} />;
+        case "error":
+            return <ErrorModal onClose={onClose} {...screen} />;
+        case "signed_out":
+            return <SignedOutModal onClose={onClose} {...screen} />;
+        case "clipboard":
+            return <ClipboardModal onClose={onClose} {...screen} />;
+        case "onboarding":
+            return <OnboardingModal onClose={onClose} {...screen} />;
+    }
 
-	return null;
+    return null;
 }

src/context/intermediate/Popovers.tsx

@@ -11,29 +11,29 @@ import { UserPicker } from "./popovers/UserPicker";
 import { UserProfile } from "./popovers/UserProfile";
 
 export default function Popovers() {
-	const { screen } = useContext(IntermediateContext);
-	const { openScreen } = useIntermediate();
+    const { screen } = useContext(IntermediateContext);
+    const { openScreen } = useIntermediate();
 
-	const onClose = () => openScreen({ id: "none" });
+    const onClose = () => openScreen({ id: "none" });
 
-	switch (screen.id) {
-		case "profile":
-			return <UserProfile {...screen} onClose={onClose} />;
-		case "user_picker":
-			return <UserPicker {...screen} onClose={onClose} />;
-		case "image_viewer":
-			return <ImageViewer {...screen} onClose={onClose} />;
-		case "channel_info":
-			return <ChannelInfo {...screen} onClose={onClose} />;
-		case "pending_requests":
-			return <PendingRequests {...screen} onClose={onClose} />;
-		case "modify_account":
-			return <ModifyAccountModal onClose={onClose} {...screen} />;
-		case "special_prompt":
-			return <SpecialPromptModal onClose={onClose} {...screen} />;
-		case "special_input":
-			return <SpecialInputModal onClose={onClose} {...screen} />;
-	}
+    switch (screen.id) {
+        case "profile":
+            return <UserProfile {...screen} onClose={onClose} />;
+        case "user_picker":
+            return <UserPicker {...screen} onClose={onClose} />;
+        case "image_viewer":
+            return <ImageViewer {...screen} onClose={onClose} />;
+        case "channel_info":
+            return <ChannelInfo {...screen} onClose={onClose} />;
+        case "pending_requests":
+            return <PendingRequests {...screen} onClose={onClose} />;
+        case "modify_account":
+            return <ModifyAccountModal onClose={onClose} {...screen} />;
+        case "special_prompt":
+            return <SpecialPromptModal onClose={onClose} {...screen} />;
+        case "special_input":
+            return <SpecialInputModal onClose={onClose} {...screen} />;
+    }
 
-	return null;
+    return null;
 }

src/context/intermediate/modals/Clipboard.tsx

@@ -3,30 +3,30 @@ import { Text } from "preact-i18n";
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
-	onClose: () => void;
-	text: string;
+    onClose: () => void;
+    text: string;
 }
 
 export function ClipboardModal({ onClose, text }: Props) {
-	return (
-		<Modal
-			visible={true}
-			onClose={onClose}
-			title={<Text id="app.special.modals.clipboard.unavailable" />}
-			actions={[
-				{
-					onClick: onClose,
-					confirmation: true,
-					text: <Text id="app.special.modals.actions.close" />,
-				},
-			]}>
-			{location.protocol !== "https:" && (
-				<p>
-					<Text id="app.special.modals.clipboard.https" />
-				</p>
-			)}
-			<Text id="app.special.modals.clipboard.copy" />{" "}
-			<code style={{ userSelect: "all" }}>{text}</code>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={<Text id="app.special.modals.clipboard.unavailable" />}
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    text: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
+            {location.protocol !== "https:" && (
+                <p>
+                    <Text id="app.special.modals.clipboard.https" />
+                </p>
+            )}
+            <Text id="app.special.modals.clipboard.copy" />{" "}
+            <code style={{ userSelect: "all" }}>{text}</code>
+        </Modal>
+    );
 }

src/context/intermediate/modals/Error.tsx

@@ -3,28 +3,28 @@ import { Text } from "preact-i18n";
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
-	onClose: () => void;
-	error: string;
+    onClose: () => void;
+    error: string;
 }
 
 export function ErrorModal({ onClose, error }: Props) {
-	return (
-		<Modal
-			visible={true}
-			onClose={() => false}
-			title={<Text id="app.special.modals.error" />}
-			actions={[
-				{
-					onClick: onClose,
-					confirmation: true,
-					text: <Text id="app.special.modals.actions.ok" />,
-				},
-				{
-					onClick: () => location.reload(),
-					text: <Text id="app.special.modals.actions.reload" />,
-				},
-			]}>
-			<Text id={`error.${error}`}>{error}</Text>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            onClose={() => false}
+            title={<Text id="app.special.modals.error" />}
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    text: <Text id="app.special.modals.actions.ok" />,
+                },
+                {
+                    onClick: () => location.reload(),
+                    text: <Text id="app.special.modals.actions.reload" />,
+                },
+            ]}>
+            <Text id={`error.${error}`}>{error}</Text>
+        </Modal>
+    );
 }

src/context/intermediate/modals/Input.tsx

@@ -13,164 +13,164 @@ import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
 interface Props {
-	onClose: () => void;
-	question: Children;
-	field?: Children;
-	defaultValue?: string;
-	callback: (value: string) => Promise<void>;
+    onClose: () => void;
+    question: Children;
+    field?: Children;
+    defaultValue?: string;
+    callback: (value: string) => Promise<void>;
 }
 
 export function InputModal({
-	onClose,
-	question,
-	field,
-	defaultValue,
-	callback,
+    onClose,
+    question,
+    field,
+    defaultValue,
+    callback,
 }: Props) {
-	const [processing, setProcessing] = useState(false);
-	const [value, setValue] = useState(defaultValue ?? "");
-	const [error, setError] = useState<undefined | string>(undefined);
+    const [processing, setProcessing] = useState(false);
+    const [value, setValue] = useState(defaultValue ?? "");
+    const [error, setError] = useState<undefined | string>(undefined);
 
-	return (
-		<Modal
-			visible={true}
-			title={question}
-			disabled={processing}
-			actions={[
-				{
-					confirmation: true,
-					text: <Text id="app.special.modals.actions.ok" />,
-					onClick: () => {
-						setProcessing(true);
-						callback(value)
-							.then(onClose)
-							.catch((err) => {
-								setError(takeError(err));
-								setProcessing(false);
-							});
-					},
-				},
-				{
-					text: <Text id="app.special.modals.actions.cancel" />,
-					onClick: onClose,
-				},
-			]}
-			onClose={onClose}>
-			<form>
-				{field ? (
-					<Overline error={error} block>
-						{field}
-					</Overline>
-				) : (
-					error && <Overline error={error} type="error" block />
-				)}
-				<InputBox
-					value={value}
-					onChange={(e) => setValue(e.currentTarget.value)}
-				/>
-			</form>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            title={question}
+            disabled={processing}
+            actions={[
+                {
+                    confirmation: true,
+                    text: <Text id="app.special.modals.actions.ok" />,
+                    onClick: () => {
+                        setProcessing(true);
+                        callback(value)
+                            .then(onClose)
+                            .catch((err) => {
+                                setError(takeError(err));
+                                setProcessing(false);
+                            });
+                    },
+                },
+                {
+                    text: <Text id="app.special.modals.actions.cancel" />,
+                    onClick: onClose,
+                },
+            ]}
+            onClose={onClose}>
+            <form>
+                {field ? (
+                    <Overline error={error} block>
+                        {field}
+                    </Overline>
+                ) : (
+                    error && <Overline error={error} type="error" block />
+                )}
+                <InputBox
+                    value={value}
+                    onChange={(e) => setValue(e.currentTarget.value)}
+                />
+            </form>
+        </Modal>
+    );
 }
 
 type SpecialProps = { onClose: () => void } & (
-	| {
-			type:
-				| "create_group"
-				| "create_server"
-				| "set_custom_status"
-				| "add_friend";
-	  }
-	| { type: "create_role"; server: string; callback: (id: string) => void }
+    | {
+          type:
+              | "create_group"
+              | "create_server"
+              | "set_custom_status"
+              | "add_friend";
+      }
+    | { type: "create_role"; server: string; callback: (id: string) => void }
 );
 
 export function SpecialInputModal(props: SpecialProps) {
-	const history = useHistory();
-	const client = useContext(AppContext);
+    const history = useHistory();
+    const client = useContext(AppContext);
 
-	const { onClose } = props;
-	switch (props.type) {
-		case "create_group": {
-			return (
-				<InputModal
-					onClose={onClose}
-					question={<Text id="app.main.groups.create" />}
-					field={<Text id="app.main.groups.name" />}
-					callback={async (name) => {
-						const group = await client.channels.createGroup({
-							name,
-							nonce: ulid(),
-							users: [],
-						});
+    const { onClose } = props;
+    switch (props.type) {
+        case "create_group": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.main.groups.create" />}
+                    field={<Text id="app.main.groups.name" />}
+                    callback={async (name) => {
+                        const group = await client.channels.createGroup({
+                            name,
+                            nonce: ulid(),
+                            users: [],
+                        });
 
-						history.push(`/channel/${group._id}`);
-					}}
-				/>
-			);
-		}
-		case "create_server": {
-			return (
-				<InputModal
-					onClose={onClose}
-					question={<Text id="app.main.servers.create" />}
-					field={<Text id="app.main.servers.name" />}
-					callback={async (name) => {
-						const server = await client.servers.createServer({
-							name,
-							nonce: ulid(),
-						});
+                        history.push(`/channel/${group._id}`);
+                    }}
+                />
+            );
+        }
+        case "create_server": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.main.servers.create" />}
+                    field={<Text id="app.main.servers.name" />}
+                    callback={async (name) => {
+                        const server = await client.servers.createServer({
+                            name,
+                            nonce: ulid(),
+                        });
 
-						history.push(`/server/${server._id}`);
-					}}
-				/>
-			);
-		}
-		case "create_role": {
-			return (
-				<InputModal
-					onClose={onClose}
-					question={
-						<Text id="app.settings.permissions.create_role" />
-					}
-					field={<Text id="app.settings.permissions.role_name" />}
-					callback={async (name) => {
-						const role = await client.servers.createRole(
-							props.server,
-							name,
-						);
-						props.callback(role.id);
-					}}
-				/>
-			);
-		}
-		case "set_custom_status": {
-			return (
-				<InputModal
-					onClose={onClose}
-					question={<Text id="app.context_menu.set_custom_status" />}
-					field={<Text id="app.context_menu.custom_status" />}
-					defaultValue={client.user?.status?.text}
-					callback={(text) =>
-						client.users.editUser({
-							status: {
-								...client.user?.status,
-								text: text.trim().length > 0 ? text : undefined,
-							},
-						})
-					}
-				/>
-			);
-		}
-		case "add_friend": {
-			return (
-				<InputModal
-					onClose={onClose}
-					question={"Add Friend"}
-					callback={(username) => client.users.addFriend(username)}
-				/>
-			);
-		}
-		default:
-			return null;
-	}
+                        history.push(`/server/${server._id}`);
+                    }}
+                />
+            );
+        }
+        case "create_role": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={
+                        <Text id="app.settings.permissions.create_role" />
+                    }
+                    field={<Text id="app.settings.permissions.role_name" />}
+                    callback={async (name) => {
+                        const role = await client.servers.createRole(
+                            props.server,
+                            name,
+                        );
+                        props.callback(role.id);
+                    }}
+                />
+            );
+        }
+        case "set_custom_status": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={<Text id="app.context_menu.set_custom_status" />}
+                    field={<Text id="app.context_menu.custom_status" />}
+                    defaultValue={client.user?.status?.text}
+                    callback={(text) =>
+                        client.users.editUser({
+                            status: {
+                                ...client.user?.status,
+                                text: text.trim().length > 0 ? text : undefined,
+                            },
+                        })
+                    }
+                />
+            );
+        }
+        case "add_friend": {
+            return (
+                <InputModal
+                    onClose={onClose}
+                    question={"Add Friend"}
+                    callback={(username) => client.users.addFriend(username)}
+                />
+            );
+        }
+        default:
+            return null;
+    }
 }

src/context/intermediate/modals/Onboarding.tsx

@@ -12,67 +12,67 @@ import FormField from "../../../pages/login/FormField";
 import { takeError } from "../../revoltjs/util";
 
 interface Props {
-	onClose: () => void;
-	callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
+    onClose: () => void;
+    callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
 }
 
 interface FormInputs {
-	username: string;
+    username: string;
 }
 
 export function OnboardingModal({ onClose, callback }: Props) {
-	const { handleSubmit, register } = useForm<FormInputs>();
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | undefined>(undefined);
+    const { handleSubmit, register } = useForm<FormInputs>();
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | undefined>(undefined);
 
-	const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
-		setLoading(true);
-		callback(username, true)
-			.then(onClose)
-			.catch((err: any) => {
-				setError(takeError(err));
-				setLoading(false);
-			});
-	};
+    const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
+        setLoading(true);
+        callback(username, true)
+            .then(onClose)
+            .catch((err: any) => {
+                setError(takeError(err));
+                setLoading(false);
+            });
+    };
 
-	return (
-		<div className={styles.onboarding}>
-			<div className={styles.header}>
-				<h1>
-					<Text id="app.special.modals.onboarding.welcome" />
-					<img src={wideSVG} />
-				</h1>
-			</div>
-			<div className={styles.form}>
-				{loading ? (
-					<Preloader type="spinner" />
-				) : (
-					<>
-						<p>
-							<Text id="app.special.modals.onboarding.pick" />
-						</p>
-						<form
-							onSubmit={
-								handleSubmit(
-									onSubmit,
-								) as JSX.GenericEventHandler<HTMLFormElement>
-							}>
-							<div>
-								<FormField
-									type="username"
-									register={register}
-									showOverline
-									error={error}
-								/>
-							</div>
-							<Button type="submit">
-								<Text id="app.special.modals.actions.continue" />
-							</Button>
-						</form>
-					</>
-				)}
-			</div>
-			<div />
-		</div>
-	);
+    return (
+        <div className={styles.onboarding}>
+            <div className={styles.header}>
+                <h1>
+                    <Text id="app.special.modals.onboarding.welcome" />
+                    <img src={wideSVG} />
+                </h1>
+            </div>
+            <div className={styles.form}>
+                {loading ? (
+                    <Preloader type="spinner" />
+                ) : (
+                    <>
+                        <p>
+                            <Text id="app.special.modals.onboarding.pick" />
+                        </p>
+                        <form
+                            onSubmit={
+                                handleSubmit(
+                                    onSubmit,
+                                ) as JSX.GenericEventHandler<HTMLFormElement>
+                            }>
+                            <div>
+                                <FormField
+                                    type="username"
+                                    register={register}
+                                    showOverline
+                                    error={error}
+                                />
+                            </div>
+                            <Button type="submit">
+                                <Text id="app.special.modals.actions.continue" />
+                            </Button>
+                        </form>
+                    </>
+                )}
+            </div>
+            <div />
+        </div>
+    );
 }

src/context/intermediate/modals/Prompt.tsx

@@ -21,453 +21,453 @@ import { mapMessage, takeError } from "../../revoltjs/util";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
-	onClose: () => void;
-	question: Children;
-	content?: Children;
-	disabled?: boolean;
-	actions: Action[];
-	error?: string;
+    onClose: () => void;
+    question: Children;
+    content?: Children;
+    disabled?: boolean;
+    actions: Action[];
+    error?: string;
 }
 
 export function PromptModal({
-	onClose,
-	question,
-	content,
-	actions,
-	disabled,
-	error,
+    onClose,
+    question,
+    content,
+    actions,
+    disabled,
+    error,
 }: Props) {
-	return (
-		<Modal
-			visible={true}
-			title={question}
-			actions={actions}
-			onClose={onClose}
-			disabled={disabled}>
-			{error && <Overline error={error} type="error" />}
-			{content}
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            title={question}
+            actions={actions}
+            onClose={onClose}
+            disabled={disabled}>
+            {error && <Overline error={error} type="error" />}
+            {content}
+        </Modal>
+    );
 }
 
 type SpecialProps = { onClose: () => void } & (
-	| { type: "leave_group"; target: Channels.GroupChannel }
-	| { type: "close_dm"; target: Channels.DirectMessageChannel }
-	| { type: "leave_server"; target: Servers.Server }
-	| { type: "delete_server"; target: Servers.Server }
-	| { type: "delete_channel"; target: Channels.TextChannel }
-	| { type: "delete_message"; target: Channels.Message }
-	| {
-			type: "create_invite";
-			target: Channels.TextChannel | Channels.GroupChannel;
-	  }
-	| { type: "kick_member"; target: Servers.Server; user: string }
-	| { type: "ban_member"; target: Servers.Server; user: string }
-	| { type: "unfriend_user"; target: Users.User }
-	| { type: "block_user"; target: Users.User }
-	| { type: "create_channel"; target: Servers.Server }
+    | { type: "leave_group"; target: Channels.GroupChannel }
+    | { type: "close_dm"; target: Channels.DirectMessageChannel }
+    | { type: "leave_server"; target: Servers.Server }
+    | { type: "delete_server"; target: Servers.Server }
+    | { type: "delete_channel"; target: Channels.TextChannel }
+    | { type: "delete_message"; target: Channels.Message }
+    | {
+          type: "create_invite";
+          target: Channels.TextChannel | Channels.GroupChannel;
+      }
+    | { type: "kick_member"; target: Servers.Server; user: string }
+    | { type: "ban_member"; target: Servers.Server; user: string }
+    | { type: "unfriend_user"; target: Users.User }
+    | { type: "block_user"; target: Users.User }
+    | { type: "create_channel"; target: Servers.Server }
 );
 
 export function SpecialPromptModal(props: SpecialProps) {
-	const client = useContext(AppContext);
-	const [processing, setProcessing] = useState(false);
-	const [error, setError] = useState<undefined | string>(undefined);
+    const client = useContext(AppContext);
+    const [processing, setProcessing] = useState(false);
+    const [error, setError] = useState<undefined | string>(undefined);
 
-	const { onClose } = props;
-	switch (props.type) {
-		case "leave_group":
-		case "close_dm":
-		case "leave_server":
-		case "delete_server":
-		case "delete_channel":
-		case "unfriend_user":
-		case "block_user": {
-			const EVENTS = {
-				close_dm: ["confirm_close_dm", "close"],
-				delete_server: ["confirm_delete", "delete"],
-				delete_channel: ["confirm_delete", "delete"],
-				leave_group: ["confirm_leave", "leave"],
-				leave_server: ["confirm_leave", "leave"],
-				unfriend_user: ["unfriend_user", "remove"],
-				block_user: ["block_user", "block"],
-			};
+    const { onClose } = props;
+    switch (props.type) {
+        case "leave_group":
+        case "close_dm":
+        case "leave_server":
+        case "delete_server":
+        case "delete_channel":
+        case "unfriend_user":
+        case "block_user": {
+            const EVENTS = {
+                close_dm: ["confirm_close_dm", "close"],
+                delete_server: ["confirm_delete", "delete"],
+                delete_channel: ["confirm_delete", "delete"],
+                leave_group: ["confirm_leave", "leave"],
+                leave_server: ["confirm_leave", "leave"],
+                unfriend_user: ["unfriend_user", "remove"],
+                block_user: ["block_user", "block"],
+            };
 
-			let event = EVENTS[props.type];
-			let name;
-			switch (props.type) {
-				case "unfriend_user":
-				case "block_user":
-					name = props.target.username;
-					break;
-				case "close_dm":
-					name = client.users.get(
-						client.channels.getRecipient(props.target._id),
-					)?.username;
-					break;
-				default:
-					name = props.target.name;
-			}
+            let event = EVENTS[props.type];
+            let name;
+            switch (props.type) {
+                case "unfriend_user":
+                case "block_user":
+                    name = props.target.username;
+                    break;
+                case "close_dm":
+                    name = client.users.get(
+                        client.channels.getRecipient(props.target._id),
+                    )?.username;
+                    break;
+                default:
+                    name = props.target.name;
+            }
 
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={
-						<Text
-							id={`app.special.modals.prompt.${event[0]}`}
-							fields={{ name }}
-						/>
-					}
-					actions={[
-						{
-							confirmation: true,
-							contrast: true,
-							error: true,
-							text: (
-								<Text
-									id={`app.special.modals.actions.${event[1]}`}
-								/>
-							),
-							onClick: async () => {
-								setProcessing(true);
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={
+                        <Text
+                            id={`app.special.modals.prompt.${event[0]}`}
+                            fields={{ name }}
+                        />
+                    }
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            error: true,
+                            text: (
+                                <Text
+                                    id={`app.special.modals.actions.${event[1]}`}
+                                />
+                            ),
+                            onClick: async () => {
+                                setProcessing(true);
 
-								try {
-									switch (props.type) {
-										case "unfriend_user":
-											await client.users.removeFriend(
-												props.target._id,
-											);
-											break;
-										case "block_user":
-											await client.users.blockUser(
-												props.target._id,
-											);
-											break;
-										case "leave_group":
-										case "close_dm":
-										case "delete_channel":
-											await client.channels.delete(
-												props.target._id,
-											);
-											break;
-										case "leave_server":
-										case "delete_server":
-											await client.servers.delete(
-												props.target._id,
-											);
-											break;
-									}
+                                try {
+                                    switch (props.type) {
+                                        case "unfriend_user":
+                                            await client.users.removeFriend(
+                                                props.target._id,
+                                            );
+                                            break;
+                                        case "block_user":
+                                            await client.users.blockUser(
+                                                props.target._id,
+                                            );
+                                            break;
+                                        case "leave_group":
+                                        case "close_dm":
+                                        case "delete_channel":
+                                            await client.channels.delete(
+                                                props.target._id,
+                                            );
+                                            break;
+                                        case "leave_server":
+                                        case "delete_server":
+                                            await client.servers.delete(
+                                                props.target._id,
+                                            );
+                                            break;
+                                    }
 
-									onClose();
-								} catch (err) {
-									setError(takeError(err));
-									setProcessing(false);
-								}
-							},
-						},
-						{
-							text: (
-								<Text id="app.special.modals.actions.cancel" />
-							),
-							onClick: onClose,
-						},
-					]}
-					content={
-						<TextReact
-							id={`app.special.modals.prompt.${event[0]}_long`}
-							fields={{ name: <b>{name}</b> }}
-						/>
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		case "delete_message": {
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={<Text id={"app.context_menu.delete_message"} />}
-					actions={[
-						{
-							confirmation: true,
-							contrast: true,
-							error: true,
-							text: (
-								<Text id="app.special.modals.actions.delete" />
-							),
-							onClick: async () => {
-								setProcessing(true);
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            text: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <TextReact
+                            id={`app.special.modals.prompt.${event[0]}_long`}
+                            fields={{ name: <b>{name}</b> }}
+                        />
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "delete_message": {
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id={"app.context_menu.delete_message"} />}
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            error: true,
+                            text: (
+                                <Text id="app.special.modals.actions.delete" />
+                            ),
+                            onClick: async () => {
+                                setProcessing(true);
 
-								try {
-									await client.channels.deleteMessage(
-										props.target.channel,
-										props.target._id,
-									);
+                                try {
+                                    await client.channels.deleteMessage(
+                                        props.target.channel,
+                                        props.target._id,
+                                    );
 
-									onClose();
-								} catch (err) {
-									setError(takeError(err));
-									setProcessing(false);
-								}
-							},
-						},
-						{
-							text: (
-								<Text id="app.special.modals.actions.cancel" />
-							),
-							onClick: onClose,
-						},
-					]}
-					content={
-						<>
-							<Text
-								id={`app.special.modals.prompt.confirm_delete_message_long`}
-							/>
-							<Message
-								message={mapMessage(props.target)}
-								head={true}
-								contrast
-							/>
-						</>
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		case "create_invite": {
-			const [code, setCode] = useState("abcdef");
-			const { writeClipboard } = useIntermediate();
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            text: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <>
+                            <Text
+                                id={`app.special.modals.prompt.confirm_delete_message_long`}
+                            />
+                            <Message
+                                message={mapMessage(props.target)}
+                                head={true}
+                                contrast
+                            />
+                        </>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "create_invite": {
+            const [code, setCode] = useState("abcdef");
+            const { writeClipboard } = useIntermediate();
 
-			useEffect(() => {
-				setProcessing(true);
+            useEffect(() => {
+                setProcessing(true);
 
-				client.channels
-					.createInvite(props.target._id)
-					.then((code) => setCode(code))
-					.catch((err) => setError(takeError(err)))
-					.finally(() => setProcessing(false));
-			}, []);
+                client.channels
+                    .createInvite(props.target._id)
+                    .then((code) => setCode(code))
+                    .catch((err) => setError(takeError(err)))
+                    .finally(() => setProcessing(false));
+            }, []);
 
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={<Text id={`app.context_menu.create_invite`} />}
-					actions={[
-						{
-							text: <Text id="app.special.modals.actions.ok" />,
-							confirmation: true,
-							onClick: onClose,
-						},
-						{
-							text: <Text id="app.context_menu.copy_link" />,
-							onClick: () =>
-								writeClipboard(
-									`${window.location.protocol}//${window.location.host}/invite/${code}`,
-								),
-						},
-					]}
-					content={
-						processing ? (
-							<Text id="app.special.modals.prompt.create_invite_generate" />
-						) : (
-							<div className={styles.invite}>
-								<Text id="app.special.modals.prompt.create_invite_created" />
-								<code>{code}</code>
-							</div>
-						)
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		case "kick_member": {
-			const user = client.users.get(props.user);
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id={`app.context_menu.create_invite`} />}
+                    actions={[
+                        {
+                            text: <Text id="app.special.modals.actions.ok" />,
+                            confirmation: true,
+                            onClick: onClose,
+                        },
+                        {
+                            text: <Text id="app.context_menu.copy_link" />,
+                            onClick: () =>
+                                writeClipboard(
+                                    `${window.location.protocol}//${window.location.host}/invite/${code}`,
+                                ),
+                        },
+                    ]}
+                    content={
+                        processing ? (
+                            <Text id="app.special.modals.prompt.create_invite_generate" />
+                        ) : (
+                            <div className={styles.invite}>
+                                <Text id="app.special.modals.prompt.create_invite_created" />
+                                <code>{code}</code>
+                            </div>
+                        )
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "kick_member": {
+            const user = client.users.get(props.user);
 
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={<Text id={`app.context_menu.kick_member`} />}
-					actions={[
-						{
-							text: <Text id="app.special.modals.actions.kick" />,
-							contrast: true,
-							error: true,
-							confirmation: true,
-							onClick: async () => {
-								setProcessing(true);
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id={`app.context_menu.kick_member`} />}
+                    actions={[
+                        {
+                            text: <Text id="app.special.modals.actions.kick" />,
+                            contrast: true,
+                            error: true,
+                            confirmation: true,
+                            onClick: async () => {
+                                setProcessing(true);
 
-								try {
-									await client.servers.members.kickMember(
-										props.target._id,
-										props.user,
-									);
-									onClose();
-								} catch (err) {
-									setError(takeError(err));
-									setProcessing(false);
-								}
-							},
-						},
-						{
-							text: (
-								<Text id="app.special.modals.actions.cancel" />
-							),
-							onClick: onClose,
-						},
-					]}
-					content={
-						<div className={styles.column}>
-							<UserIcon target={user} size={64} />
-							<Text
-								id="app.special.modals.prompt.confirm_kick"
-								fields={{ name: user?.username }}
-							/>
-						</div>
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		case "ban_member": {
-			const [reason, setReason] = useState<string | undefined>(undefined);
-			const user = client.users.get(props.user);
+                                try {
+                                    await client.servers.members.kickMember(
+                                        props.target._id,
+                                        props.user,
+                                    );
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            text: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <div className={styles.column}>
+                            <UserIcon target={user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_kick"
+                                fields={{ name: user?.username }}
+                            />
+                        </div>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "ban_member": {
+            const [reason, setReason] = useState<string | undefined>(undefined);
+            const user = client.users.get(props.user);
 
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={<Text id={`app.context_menu.ban_member`} />}
-					actions={[
-						{
-							text: <Text id="app.special.modals.actions.ban" />,
-							contrast: true,
-							error: true,
-							confirmation: true,
-							onClick: async () => {
-								setProcessing(true);
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id={`app.context_menu.ban_member`} />}
+                    actions={[
+                        {
+                            text: <Text id="app.special.modals.actions.ban" />,
+                            contrast: true,
+                            error: true,
+                            confirmation: true,
+                            onClick: async () => {
+                                setProcessing(true);
 
-								try {
-									await client.servers.banUser(
-										props.target._id,
-										props.user,
-										{ reason },
-									);
-									onClose();
-								} catch (err) {
-									setError(takeError(err));
-									setProcessing(false);
-								}
-							},
-						},
-						{
-							text: (
-								<Text id="app.special.modals.actions.cancel" />
-							),
-							onClick: onClose,
-						},
-					]}
-					content={
-						<div className={styles.column}>
-							<UserIcon target={user} size={64} />
-							<Text
-								id="app.special.modals.prompt.confirm_ban"
-								fields={{ name: user?.username }}
-							/>
-							<Overline>
-								<Text id="app.special.modals.prompt.confirm_ban_reason" />
-							</Overline>
-							<InputBox
-								value={reason ?? ""}
-								onChange={(e) =>
-									setReason(e.currentTarget.value)
-								}
-							/>
-						</div>
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		case "create_channel": {
-			const [name, setName] = useState("");
-			const [type, setType] = useState<"Text" | "Voice">("Text");
-			const history = useHistory();
+                                try {
+                                    await client.servers.banUser(
+                                        props.target._id,
+                                        props.user,
+                                        { reason },
+                                    );
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            text: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <div className={styles.column}>
+                            <UserIcon target={user} size={64} />
+                            <Text
+                                id="app.special.modals.prompt.confirm_ban"
+                                fields={{ name: user?.username }}
+                            />
+                            <Overline>
+                                <Text id="app.special.modals.prompt.confirm_ban_reason" />
+                            </Overline>
+                            <InputBox
+                                value={reason ?? ""}
+                                onChange={(e) =>
+                                    setReason(e.currentTarget.value)
+                                }
+                            />
+                        </div>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        case "create_channel": {
+            const [name, setName] = useState("");
+            const [type, setType] = useState<"Text" | "Voice">("Text");
+            const history = useHistory();
 
-			return (
-				<PromptModal
-					onClose={onClose}
-					question={<Text id="app.context_menu.create_channel" />}
-					actions={[
-						{
-							confirmation: true,
-							contrast: true,
-							text: (
-								<Text id="app.special.modals.actions.create" />
-							),
-							onClick: async () => {
-								setProcessing(true);
+            return (
+                <PromptModal
+                    onClose={onClose}
+                    question={<Text id="app.context_menu.create_channel" />}
+                    actions={[
+                        {
+                            confirmation: true,
+                            contrast: true,
+                            text: (
+                                <Text id="app.special.modals.actions.create" />
+                            ),
+                            onClick: async () => {
+                                setProcessing(true);
 
-								try {
-									const channel =
-										await client.servers.createChannel(
-											props.target._id,
-											{
-												type,
-												name,
-												nonce: ulid(),
-											},
-										);
+                                try {
+                                    const channel =
+                                        await client.servers.createChannel(
+                                            props.target._id,
+                                            {
+                                                type,
+                                                name,
+                                                nonce: ulid(),
+                                            },
+                                        );
 
-									history.push(
-										`/server/${props.target._id}/channel/${channel._id}`,
-									);
-									onClose();
-								} catch (err) {
-									setError(takeError(err));
-									setProcessing(false);
-								}
-							},
-						},
-						{
-							text: (
-								<Text id="app.special.modals.actions.cancel" />
-							),
-							onClick: onClose,
-						},
-					]}
-					content={
-						<>
-							<Overline block type="subtle">
-								<Text id="app.main.servers.channel_type" />
-							</Overline>
-							<Radio
-								checked={type === "Text"}
-								onSelect={() => setType("Text")}>
-								<Text id="app.main.servers.text_channel" />
-							</Radio>
-							<Radio
-								checked={type === "Voice"}
-								onSelect={() => setType("Voice")}>
-								<Text id="app.main.servers.voice_channel" />
-							</Radio>
-							<Overline block type="subtle">
-								<Text id="app.main.servers.channel_name" />
-							</Overline>
-							<InputBox
-								value={name}
-								onChange={(e) => setName(e.currentTarget.value)}
-							/>
-						</>
-					}
-					disabled={processing}
-					error={error}
-				/>
-			);
-		}
-		default:
-			return null;
-	}
+                                    history.push(
+                                        `/server/${props.target._id}/channel/${channel._id}`,
+                                    );
+                                    onClose();
+                                } catch (err) {
+                                    setError(takeError(err));
+                                    setProcessing(false);
+                                }
+                            },
+                        },
+                        {
+                            text: (
+                                <Text id="app.special.modals.actions.cancel" />
+                            ),
+                            onClick: onClose,
+                        },
+                    ]}
+                    content={
+                        <>
+                            <Overline block type="subtle">
+                                <Text id="app.main.servers.channel_type" />
+                            </Overline>
+                            <Radio
+                                checked={type === "Text"}
+                                onSelect={() => setType("Text")}>
+                                <Text id="app.main.servers.text_channel" />
+                            </Radio>
+                            <Radio
+                                checked={type === "Voice"}
+                                onSelect={() => setType("Voice")}>
+                                <Text id="app.main.servers.voice_channel" />
+                            </Radio>
+                            <Overline block type="subtle">
+                                <Text id="app.main.servers.channel_name" />
+                            </Overline>
+                            <InputBox
+                                value={name}
+                                onChange={(e) => setName(e.currentTarget.value)}
+                            />
+                        </>
+                    }
+                    disabled={processing}
+                    error={error}
+                />
+            );
+        }
+        default:
+            return null;
+    }
 }

src/context/intermediate/modals/SignedOut.tsx

@@ -3,22 +3,22 @@ import { Text } from "preact-i18n";
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
-	onClose: () => void;
+    onClose: () => void;
 }
 
 export function SignedOutModal({ onClose }: Props) {
-	return (
-		<Modal
-			visible={true}
-			onClose={onClose}
-			title={<Text id="app.special.modals.signed_out" />}
-			actions={[
-				{
-					onClick: onClose,
-					confirmation: true,
-					text: <Text id="app.special.modals.actions.ok" />,
-				},
-			]}
-		/>
-	);
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={<Text id="app.special.modals.signed_out" />}
+            actions={[
+                {
+                    onClick: onClose,
+                    confirmation: true,
+                    text: <Text id="app.special.modals.actions.ok" />,
+                },
+            ]}
+        />
+    );
 }

src/context/intermediate/popovers/ChannelInfo.tsx

@@ -9,36 +9,36 @@ import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
 import { getChannelName } from "../../revoltjs/util";
 
 interface Props {
-	channel_id: string;
-	onClose: () => void;
+    channel_id: string;
+    onClose: () => void;
 }
 
 export function ChannelInfo({ channel_id, onClose }: Props) {
-	const ctx = useForceUpdate();
-	const channel = useChannel(channel_id, ctx);
-	if (!channel) return null;
+    const ctx = useForceUpdate();
+    const channel = useChannel(channel_id, ctx);
+    if (!channel) return null;
 
-	if (
-		channel.channel_type === "DirectMessage" ||
-		channel.channel_type === "SavedMessages"
-	) {
-		onClose();
-		return null;
-	}
+    if (
+        channel.channel_type === "DirectMessage" ||
+        channel.channel_type === "SavedMessages"
+    ) {
+        onClose();
+        return null;
+    }
 
-	return (
-		<Modal visible={true} onClose={onClose}>
-			<div className={styles.info}>
-				<div className={styles.header}>
-					<h1>{getChannelName(ctx.client, channel, true)}</h1>
-					<div onClick={onClose}>
-						<X size={36} />
-					</div>
-				</div>
-				<p>
-					<Markdown content={channel.description} />
-				</p>
-			</div>
-		</Modal>
-	);
+    return (
+        <Modal visible={true} onClose={onClose}>
+            <div className={styles.info}>
+                <div className={styles.header}>
+                    <h1>{getChannelName(ctx.client, channel, true)}</h1>
+                    <div onClick={onClose}>
+                        <X size={36} />
+                    </div>
+                </div>
+                <p>
+                    <Markdown content={channel.description} />
+                </p>
+            </div>
+        </Modal>
+    );
 }

src/context/intermediate/popovers/ImageViewer.tsx

@@ -10,37 +10,37 @@ import Modal from "../../../components/ui/Modal";
 import { AppContext } from "../../revoltjs/RevoltClient";
 
 interface Props {
-	onClose: () => void;
-	embed?: EmbedImage;
-	attachment?: Attachment;
+    onClose: () => void;
+    embed?: EmbedImage;
+    attachment?: Attachment;
 }
 
 export function ImageViewer({ attachment, embed, onClose }: Props) {
-	// ! FIXME: temp code
-	// ! add proxy function to client
-	function proxyImage(url: string) {
-		return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
-	}
+    // ! FIXME: temp code
+    // ! add proxy function to client
+    function proxyImage(url: string) {
+        return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
+    }
 
-	if (attachment && attachment.metadata.type !== "Image") return null;
-	const client = useContext(AppContext);
+    if (attachment && attachment.metadata.type !== "Image") return null;
+    const client = useContext(AppContext);
 
-	return (
-		<Modal visible={true} onClose={onClose} noBackground>
-			<div className={styles.viewer}>
-				{attachment && (
-					<>
-						<img src={client.generateFileURL(attachment)} />
-						<AttachmentActions attachment={attachment} />
-					</>
-				)}
-				{embed && (
-					<>
-						<img src={proxyImage(embed.url)} />
-						<EmbedMediaActions embed={embed} />
-					</>
-				)}
-			</div>
-		</Modal>
-	);
+    return (
+        <Modal visible={true} onClose={onClose} noBackground>
+            <div className={styles.viewer}>
+                {attachment && (
+                    <>
+                        <img src={client.generateFileURL(attachment)} />
+                        <AttachmentActions attachment={attachment} />
+                    </>
+                )}
+                {embed && (
+                    <>
+                        <img src={proxyImage(embed.url)} />
+                        <EmbedMediaActions embed={embed} />
+                    </>
+                )}
+            </div>
+        </Modal>
+    );
 }

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -11,124 +11,124 @@ import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
 
 interface Props {
-	onClose: () => void;
-	field: "username" | "email" | "password";
+    onClose: () => void;
+    field: "username" | "email" | "password";
 }
 
 interface FormInputs {
-	password: string;
-	new_email: string;
-	new_username: string;
-	new_password: string;
+    password: string;
+    new_email: string;
+    new_username: string;
+    new_password: string;
 
-	// TODO: figure out if this is correct or not
-	// it wasn't in the types before this was typed but the element itself was there
-	current_password?: string;
+    // TODO: figure out if this is correct or not
+    // it wasn't in the types before this was typed but the element itself was there
+    current_password?: string;
 }
 
 export function ModifyAccountModal({ onClose, field }: Props) {
-	const client = useContext(AppContext);
-	const { handleSubmit, register, errors } = useForm<FormInputs>();
-	const [error, setError] = useState<string | undefined>(undefined);
+    const client = useContext(AppContext);
+    const { handleSubmit, register, errors } = useForm<FormInputs>();
+    const [error, setError] = useState<string | undefined>(undefined);
 
-	const onSubmit: SubmitHandler<FormInputs> = async ({
-		password,
-		new_username,
-		new_email,
-		new_password,
-	}) => {
-		try {
-			if (field === "email") {
-				await client.req("POST", "/auth/change/email", {
-					password,
-					new_email,
-				});
-				onClose();
-			} else if (field === "password") {
-				await client.req("POST", "/auth/change/password", {
-					password,
-					new_password,
-				});
-				onClose();
-			} else if (field === "username") {
-				await client.req("PATCH", "/users/id/username", {
-					username: new_username,
-					password,
-				});
-				onClose();
-			}
-		} catch (err) {
-			setError(takeError(err));
-		}
-	};
+    const onSubmit: SubmitHandler<FormInputs> = async ({
+        password,
+        new_username,
+        new_email,
+        new_password,
+    }) => {
+        try {
+            if (field === "email") {
+                await client.req("POST", "/auth/change/email", {
+                    password,
+                    new_email,
+                });
+                onClose();
+            } else if (field === "password") {
+                await client.req("POST", "/auth/change/password", {
+                    password,
+                    new_password,
+                });
+                onClose();
+            } else if (field === "username") {
+                await client.req("PATCH", "/users/id/username", {
+                    username: new_username,
+                    password,
+                });
+                onClose();
+            }
+        } catch (err) {
+            setError(takeError(err));
+        }
+    };
 
-	return (
-		<Modal
-			visible={true}
-			onClose={onClose}
-			title={<Text id={`app.special.modals.account.change.${field}`} />}
-			actions={[
-				{
-					confirmation: true,
-					onClick: handleSubmit(onSubmit),
-					text:
-						field === "email" ? (
-							<Text id="app.special.modals.actions.send_email" />
-						) : (
-							<Text id="app.special.modals.actions.update" />
-						),
-				},
-				{
-					onClick: onClose,
-					text: <Text id="app.special.modals.actions.close" />,
-				},
-			]}>
-			{/* Preact / React typing incompatabilities */}
-			<form
-				onSubmit={
-					handleSubmit(
-						onSubmit,
-					) as JSX.GenericEventHandler<HTMLFormElement>
-				}>
-				{field === "email" && (
-					<FormField
-						type="email"
-						name="new_email"
-						register={register}
-						showOverline
-						error={errors.new_email?.message}
-					/>
-				)}
-				{field === "password" && (
-					<FormField
-						type="password"
-						name="new_password"
-						register={register}
-						showOverline
-						error={errors.new_password?.message}
-					/>
-				)}
-				{field === "username" && (
-					<FormField
-						type="username"
-						name="new_username"
-						register={register}
-						showOverline
-						error={errors.new_username?.message}
-					/>
-				)}
-				<FormField
-					type="current_password"
-					register={register}
-					showOverline
-					error={errors.current_password?.message}
-				/>
-				{error && (
-					<Overline type="error" error={error}>
-						<Text id="app.special.modals.account.failed" />
-					</Overline>
-				)}
-			</form>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            onClose={onClose}
+            title={<Text id={`app.special.modals.account.change.${field}`} />}
+            actions={[
+                {
+                    confirmation: true,
+                    onClick: handleSubmit(onSubmit),
+                    text:
+                        field === "email" ? (
+                            <Text id="app.special.modals.actions.send_email" />
+                        ) : (
+                            <Text id="app.special.modals.actions.update" />
+                        ),
+                },
+                {
+                    onClick: onClose,
+                    text: <Text id="app.special.modals.actions.close" />,
+                },
+            ]}>
+            {/* Preact / React typing incompatabilities */}
+            <form
+                onSubmit={
+                    handleSubmit(
+                        onSubmit,
+                    ) as JSX.GenericEventHandler<HTMLFormElement>
+                }>
+                {field === "email" && (
+                    <FormField
+                        type="email"
+                        name="new_email"
+                        register={register}
+                        showOverline
+                        error={errors.new_email?.message}
+                    />
+                )}
+                {field === "password" && (
+                    <FormField
+                        type="password"
+                        name="new_password"
+                        register={register}
+                        showOverline
+                        error={errors.new_password?.message}
+                    />
+                )}
+                {field === "username" && (
+                    <FormField
+                        type="username"
+                        name="new_username"
+                        register={register}
+                        showOverline
+                        error={errors.new_username?.message}
+                    />
+                )}
+                <FormField
+                    type="current_password"
+                    register={register}
+                    showOverline
+                    error={errors.current_password?.message}
+                />
+                {error && (
+                    <Overline type="error" error={error}>
+                        <Text id="app.special.modals.account.failed" />
+                    </Overline>
+                )}
+            </form>
+        </Modal>
+    );
 }

src/context/intermediate/popovers/PendingRequests.tsx

@@ -7,25 +7,25 @@ import { Friend } from "../../../pages/friends/Friend";
 import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
-	users: string[];
-	onClose: () => void;
+    users: string[];
+    onClose: () => void;
 }
 
 export function PendingRequests({ users: ids, onClose }: Props) {
-	const users = useUsers(ids);
+    const users = useUsers(ids);
 
-	return (
-		<Modal
-			visible={true}
-			title={<Text id="app.special.friends.pending" />}
-			onClose={onClose}>
-			<div className={styles.list}>
-				{users
-					.filter((x) => typeof x !== "undefined")
-					.map((x) => (
-						<Friend user={x!} key={x!._id} />
-					))}
-			</div>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            title={<Text id="app.special.friends.pending" />}
+            onClose={onClose}>
+            <div className={styles.list}>
+                {users
+                    .filter((x) => typeof x !== "undefined")
+                    .map((x) => (
+                        <Friend user={x!} key={x!._id} />
+                    ))}
+            </div>
+        </Modal>
+    );
 }

src/context/intermediate/popovers/UserPicker.tsx

@@ -10,59 +10,59 @@ import Modal from "../../../components/ui/Modal";
 import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
-	omit?: string[];
-	onClose: () => void;
-	callback: (users: string[]) => Promise<void>;
+    omit?: string[];
+    onClose: () => void;
+    callback: (users: string[]) => Promise<void>;
 }
 
 export function UserPicker(props: Props) {
-	const [selected, setSelected] = useState<string[]>([]);
-	const omit = [...(props.omit || []), "00000000000000000000000000"];
+    const [selected, setSelected] = useState<string[]>([]);
+    const omit = [...(props.omit || []), "00000000000000000000000000"];
 
-	const users = useUsers();
+    const users = useUsers();
 
-	return (
-		<Modal
-			visible={true}
-			title={<Text id="app.special.popovers.user_picker.select" />}
-			onClose={props.onClose}
-			actions={[
-				{
-					text: <Text id="app.special.modals.actions.ok" />,
-					onClick: () => props.callback(selected).then(props.onClose),
-				},
-			]}>
-			<div className={styles.list}>
-				{(
-					users.filter(
-						(x) =>
-							x &&
-							x.relationship === Users.Relationship.Friend &&
-							!omit.includes(x._id),
-					) as User[]
-				)
-					.map((x) => {
-						return {
-							...x,
-							selected: selected.includes(x._id),
-						};
-					})
-					.map((x) => (
-						<UserCheckbox
-							user={x}
-							checked={x.selected}
-							onChange={(v) => {
-								if (v) {
-									setSelected([...selected, x._id]);
-								} else {
-									setSelected(
-										selected.filter((y) => y !== x._id),
-									);
-								}
-							}}
-						/>
-					))}
-			</div>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible={true}
+            title={<Text id="app.special.popovers.user_picker.select" />}
+            onClose={props.onClose}
+            actions={[
+                {
+                    text: <Text id="app.special.modals.actions.ok" />,
+                    onClick: () => props.callback(selected).then(props.onClose),
+                },
+            ]}>
+            <div className={styles.list}>
+                {(
+                    users.filter(
+                        (x) =>
+                            x &&
+                            x.relationship === Users.Relationship.Friend &&
+                            !omit.includes(x._id),
+                    ) as User[]
+                )
+                    .map((x) => {
+                        return {
+                            ...x,
+                            selected: selected.includes(x._id),
+                        };
+                    })
+                    .map((x) => (
+                        <UserCheckbox
+                            user={x}
+                            checked={x.selected}
+                            onChange={(v) => {
+                                if (v) {
+                                    setSelected([...selected, x._id]);
+                                } else {
+                                    setSelected(
+                                        selected.filter((y) => y !== x._id),
+                                    );
+                                }
+                            }}
+                        />
+                    ))}
+            </div>
+        </Modal>
+    );
 }

src/context/intermediate/popovers/UserProfile.tsx

@@ -1,9 +1,9 @@
 import {
-	Envelope,
-	Edit,
-	UserPlus,
-	Shield,
-	Money,
+    Envelope,
+    Edit,
+    UserPlus,
+    Shield,
+    Money,
 } from "@styled-icons/boxicons-regular";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
@@ -25,338 +25,338 @@ import Preloader from "../../../components/ui/Preloader";
 
 import Markdown from "../../../components/markdown/Markdown";
 import {
-	AppContext,
-	ClientStatus,
-	StatusContext,
+    AppContext,
+    ClientStatus,
+    StatusContext,
 } from "../../revoltjs/RevoltClient";
 import {
-	useChannels,
-	useForceUpdate,
-	useUserPermission,
-	useUsers,
+    useChannels,
+    useForceUpdate,
+    useUserPermission,
+    useUsers,
 } from "../../revoltjs/hooks";
 import { useIntermediate } from "../Intermediate";
 
 interface Props {
-	user_id: string;
-	dummy?: boolean;
-	onClose: () => void;
-	dummyProfile?: Users.Profile;
+    user_id: string;
+    dummy?: boolean;
+    onClose: () => void;
+    dummyProfile?: Users.Profile;
 }
 
 enum Badges {
-	Developer = 1,
-	Translator = 2,
-	Supporter = 4,
-	ResponsibleDisclosure = 8,
-	EarlyAdopter = 256,
+    Developer = 1,
+    Translator = 2,
+    Supporter = 4,
+    ResponsibleDisclosure = 8,
+    EarlyAdopter = 256,
 }
 
 export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
-	const { openScreen, writeClipboard } = useIntermediate();
+    const { openScreen, writeClipboard } = useIntermediate();
 
-	const [profile, setProfile] = useState<undefined | null | Users.Profile>(
-		undefined,
-	);
-	const [mutual, setMutual] = useState<
-		undefined | null | Route<"GET", "/users/id/mutual">["response"]
-	>(undefined);
+    const [profile, setProfile] = useState<undefined | null | Users.Profile>(
+        undefined,
+    );
+    const [mutual, setMutual] = useState<
+        undefined | null | Route<"GET", "/users/id/mutual">["response"]
+    >(undefined);
 
-	const history = useHistory();
-	const client = useContext(AppContext);
-	const status = useContext(StatusContext);
-	const [tab, setTab] = useState("profile");
+    const history = useHistory();
+    const client = useContext(AppContext);
+    const status = useContext(StatusContext);
+    const [tab, setTab] = useState("profile");
 
-	const ctx = useForceUpdate();
-	const all_users = useUsers(undefined, ctx);
-	const channels = useChannels(undefined, ctx);
+    const ctx = useForceUpdate();
+    const all_users = useUsers(undefined, ctx);
+    const channels = useChannels(undefined, ctx);
 
-	const user = all_users.find((x) => x!._id === user_id);
-	const users = mutual?.users
-		? all_users.filter((x) => mutual.users.includes(x!._id))
-		: undefined;
+    const user = all_users.find((x) => x!._id === user_id);
+    const users = mutual?.users
+        ? all_users.filter((x) => mutual.users.includes(x!._id))
+        : undefined;
 
-	if (!user) {
-		useEffect(onClose, []);
-		return null;
-	}
+    if (!user) {
+        useEffect(onClose, []);
+        return null;
+    }
 
-	const permissions = useUserPermission(user!._id, ctx);
+    const permissions = useUserPermission(user!._id, ctx);
 
-	useLayoutEffect(() => {
-		if (!user_id) return;
-		if (typeof profile !== "undefined") setProfile(undefined);
-		if (typeof mutual !== "undefined") setMutual(undefined);
-	}, [user_id]);
+    useLayoutEffect(() => {
+        if (!user_id) return;
+        if (typeof profile !== "undefined") setProfile(undefined);
+        if (typeof mutual !== "undefined") setMutual(undefined);
+    }, [user_id]);
 
-	if (dummy) {
-		useLayoutEffect(() => {
-			setProfile(dummyProfile);
-		}, [dummyProfile]);
-	}
+    if (dummy) {
+        useLayoutEffect(() => {
+            setProfile(dummyProfile);
+        }, [dummyProfile]);
+    }
 
-	useEffect(() => {
-		if (dummy) return;
-		if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
-			setMutual(null);
-			client.users.fetchMutual(user_id).then((data) => setMutual(data));
-		}
-	}, [mutual, status]);
+    useEffect(() => {
+        if (dummy) return;
+        if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
+            setMutual(null);
+            client.users.fetchMutual(user_id).then((data) => setMutual(data));
+        }
+    }, [mutual, status]);
 
-	useEffect(() => {
-		if (dummy) return;
-		if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
-			setProfile(null);
+    useEffect(() => {
+        if (dummy) return;
+        if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
+            setProfile(null);
 
-			if (permissions & UserPermission.ViewProfile) {
-				client.users
-					.fetchProfile(user_id)
-					.then((data) => setProfile(data))
-					.catch(() => {});
-			}
-		}
-	}, [profile, status]);
+            if (permissions & UserPermission.ViewProfile) {
+                client.users
+                    .fetchProfile(user_id)
+                    .then((data) => setProfile(data))
+                    .catch(() => {});
+            }
+        }
+    }, [profile, status]);
 
-	const mutualGroups = channels.filter(
-		(channel) =>
-			channel?.channel_type === "Group" &&
-			channel.recipients.includes(user_id),
-	);
+    const mutualGroups = channels.filter(
+        (channel) =>
+            channel?.channel_type === "Group" &&
+            channel.recipients.includes(user_id),
+    );
 
-	const backgroundURL =
-		profile &&
-		client.users.getBackgroundURL(profile, { width: 1000 }, true);
-	const badges =
-		(user.badges ?? 0) |
-		(decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
+    const backgroundURL =
+        profile &&
+        client.users.getBackgroundURL(profile, { width: 1000 }, true);
+    const badges =
+        (user.badges ?? 0) |
+        (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
 
-	return (
-		<Modal
-			visible
-			border={dummy}
-			padding={false}
-			onClose={onClose}
-			dontModal={dummy}>
-			<div
-				className={styles.header}
-				data-force={profile?.background ? "light" : undefined}
-				style={{
-					backgroundImage:
-						backgroundURL &&
-						`linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
-				}}>
-				<div className={styles.profile}>
-					<UserIcon size={80} target={user} status />
-					<div className={styles.details}>
-						<Localizer>
-							<span
-								className={styles.username}
-								onClick={() => writeClipboard(user.username)}>
-								@{user.username}
-							</span>
-						</Localizer>
-						{user.status?.text && (
-							<span className={styles.status}>
-								<UserStatus user={user} />
-							</span>
-						)}
-					</div>
-					{user.relationship === Users.Relationship.Friend && (
-						<Localizer>
-							<Tooltip
-								content={
-									<Text id="app.context_menu.message_user" />
-								}>
-								<IconButton
-									onClick={() => {
-										onClose();
-										history.push(`/open/${user_id}`);
-									}}>
-									<Envelope size={30} />
-								</IconButton>
-							</Tooltip>
-						</Localizer>
-					)}
-					{user.relationship === Users.Relationship.User && (
-						<IconButton
-							onClick={() => {
-								onClose();
-								if (dummy) return;
-								history.push(`/settings/profile`);
-							}}>
-							<Edit size={28} />
-						</IconButton>
-					)}
-					{(user.relationship === Users.Relationship.Incoming ||
-						user.relationship === Users.Relationship.None) && (
-						<IconButton
-							onClick={() =>
-								client.users.addFriend(user.username)
-							}>
-							<UserPlus size={28} />
-						</IconButton>
-					)}
-				</div>
-				<div className={styles.tabs}>
-					<div
-						data-active={tab === "profile"}
-						onClick={() => setTab("profile")}>
-						<Text id="app.special.popovers.user_profile.profile" />
-					</div>
-					{user.relationship !== Users.Relationship.User && (
-						<>
-							<div
-								data-active={tab === "friends"}
-								onClick={() => setTab("friends")}>
-								<Text id="app.special.popovers.user_profile.mutual_friends" />
-							</div>
-							<div
-								data-active={tab === "groups"}
-								onClick={() => setTab("groups")}>
-								<Text id="app.special.popovers.user_profile.mutual_groups" />
-							</div>
-						</>
-					)}
-				</div>
-			</div>
-			<div className={styles.content}>
-				{tab === "profile" && (
-					<div>
-						{!(profile?.content || badges > 0) && (
-							<div className={styles.empty}>
-								<Text id="app.special.popovers.user_profile.empty" />
-							</div>
-						)}
-						{badges > 0 && (
-							<div className={styles.category}>
-								<Text id="app.special.popovers.user_profile.sub.badges" />
-							</div>
-						)}
-						{badges > 0 && (
-							<div className={styles.badges}>
-								<Localizer>
-									{badges & Badges.Developer ? (
-										<Tooltip
-											content={
-												<Text id="app.navigation.tabs.dev" />
-											}>
-											<img src="/assets/badges/developer.svg" />
-										</Tooltip>
-									) : (
-										<></>
-									)}
-									{badges & Badges.Translator ? (
-										<Tooltip
-											content={
-												<Text id="app.special.popovers.user_profile.badges.translator" />
-											}>
-											<img src="/assets/badges/translator.svg" />
-										</Tooltip>
-									) : (
-										<></>
-									)}
-									{badges & Badges.EarlyAdopter ? (
-										<Tooltip
-											content={
-												<Text id="app.special.popovers.user_profile.badges.early_adopter" />
-											}>
-											<img src="/assets/badges/early_adopter.svg" />
-										</Tooltip>
-									) : (
-										<></>
-									)}
-									{badges & Badges.Supporter ? (
-										<Tooltip
-											content={
-												<Text id="app.special.popovers.user_profile.badges.supporter" />
-											}>
-											<Money size={32} color="#efab44" />
-										</Tooltip>
-									) : (
-										<></>
-									)}
-									{badges & Badges.ResponsibleDisclosure ? (
-										<Tooltip
-											content={
-												<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
-											}>
-											<Shield size={32} color="gray" />
-										</Tooltip>
-									) : (
-										<></>
-									)}
-								</Localizer>
-							</div>
-						)}
-						{profile?.content && (
-							<div className={styles.category}>
-								<Text id="app.special.popovers.user_profile.sub.information" />
-							</div>
-						)}
-						<Markdown content={profile?.content} />
-						{/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
-					</div>
-				)}
-				{tab === "friends" &&
-					(users ? (
-						<div className={styles.entries}>
-							{users.length === 0 ? (
-								<div className={styles.empty}>
-									<Text id="app.special.popovers.user_profile.no_users" />
-								</div>
-							) : (
-								users.map(
-									(x) =>
-										x && (
-											<div
-												onClick={() =>
-													openScreen({
-														id: "profile",
-														user_id: x._id,
-													})
-												}
-												className={styles.entry}
-												key={x._id}>
-												<UserIcon
-													size={32}
-													target={x}
-												/>
-												<span>{x.username}</span>
-											</div>
-										),
-								)
-							)}
-						</div>
-					) : (
-						<Preloader type="ring" />
-					))}
-				{tab === "groups" && (
-					<div className={styles.entries}>
-						{mutualGroups.length === 0 ? (
-							<div className={styles.empty}>
-								<Text id="app.special.popovers.user_profile.no_groups" />
-							</div>
-						) : (
-							mutualGroups.map(
-								(x) =>
-									x?.channel_type === "Group" && (
-										<Link to={`/channel/${x._id}`}>
-											<div
-												className={styles.entry}
-												key={x._id}>
-												<ChannelIcon
-													target={x}
-													size={32}
-												/>
-												<span>{x.name}</span>
-											</div>
-										</Link>
-									),
-							)
-						)}
-					</div>
-				)}
-			</div>
-		</Modal>
-	);
+    return (
+        <Modal
+            visible
+            border={dummy}
+            padding={false}
+            onClose={onClose}
+            dontModal={dummy}>
+            <div
+                className={styles.header}
+                data-force={profile?.background ? "light" : undefined}
+                style={{
+                    backgroundImage:
+                        backgroundURL &&
+                        `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
+                }}>
+                <div className={styles.profile}>
+                    <UserIcon size={80} target={user} status />
+                    <div className={styles.details}>
+                        <Localizer>
+                            <span
+                                className={styles.username}
+                                onClick={() => writeClipboard(user.username)}>
+                                @{user.username}
+                            </span>
+                        </Localizer>
+                        {user.status?.text && (
+                            <span className={styles.status}>
+                                <UserStatus user={user} />
+                            </span>
+                        )}
+                    </div>
+                    {user.relationship === Users.Relationship.Friend && (
+                        <Localizer>
+                            <Tooltip
+                                content={
+                                    <Text id="app.context_menu.message_user" />
+                                }>
+                                <IconButton
+                                    onClick={() => {
+                                        onClose();
+                                        history.push(`/open/${user_id}`);
+                                    }}>
+                                    <Envelope size={30} />
+                                </IconButton>
+                            </Tooltip>
+                        </Localizer>
+                    )}
+                    {user.relationship === Users.Relationship.User && (
+                        <IconButton
+                            onClick={() => {
+                                onClose();
+                                if (dummy) return;
+                                history.push(`/settings/profile`);
+                            }}>
+                            <Edit size={28} />
+                        </IconButton>
+                    )}
+                    {(user.relationship === Users.Relationship.Incoming ||
+                        user.relationship === Users.Relationship.None) && (
+                        <IconButton
+                            onClick={() =>
+                                client.users.addFriend(user.username)
+                            }>
+                            <UserPlus size={28} />
+                        </IconButton>
+                    )}
+                </div>
+                <div className={styles.tabs}>
+                    <div
+                        data-active={tab === "profile"}
+                        onClick={() => setTab("profile")}>
+                        <Text id="app.special.popovers.user_profile.profile" />
+                    </div>
+                    {user.relationship !== Users.Relationship.User && (
+                        <>
+                            <div
+                                data-active={tab === "friends"}
+                                onClick={() => setTab("friends")}>
+                                <Text id="app.special.popovers.user_profile.mutual_friends" />
+                            </div>
+                            <div
+                                data-active={tab === "groups"}
+                                onClick={() => setTab("groups")}>
+                                <Text id="app.special.popovers.user_profile.mutual_groups" />
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+            <div className={styles.content}>
+                {tab === "profile" && (
+                    <div>
+                        {!(profile?.content || badges > 0) && (
+                            <div className={styles.empty}>
+                                <Text id="app.special.popovers.user_profile.empty" />
+                            </div>
+                        )}
+                        {badges > 0 && (
+                            <div className={styles.category}>
+                                <Text id="app.special.popovers.user_profile.sub.badges" />
+                            </div>
+                        )}
+                        {badges > 0 && (
+                            <div className={styles.badges}>
+                                <Localizer>
+                                    {badges & Badges.Developer ? (
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.navigation.tabs.dev" />
+                                            }>
+                                            <img src="/assets/badges/developer.svg" />
+                                        </Tooltip>
+                                    ) : (
+                                        <></>
+                                    )}
+                                    {badges & Badges.Translator ? (
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.popovers.user_profile.badges.translator" />
+                                            }>
+                                            <img src="/assets/badges/translator.svg" />
+                                        </Tooltip>
+                                    ) : (
+                                        <></>
+                                    )}
+                                    {badges & Badges.EarlyAdopter ? (
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.popovers.user_profile.badges.early_adopter" />
+                                            }>
+                                            <img src="/assets/badges/early_adopter.svg" />
+                                        </Tooltip>
+                                    ) : (
+                                        <></>
+                                    )}
+                                    {badges & Badges.Supporter ? (
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.popovers.user_profile.badges.supporter" />
+                                            }>
+                                            <Money size={32} color="#efab44" />
+                                        </Tooltip>
+                                    ) : (
+                                        <></>
+                                    )}
+                                    {badges & Badges.ResponsibleDisclosure ? (
+                                        <Tooltip
+                                            content={
+                                                <Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
+                                            }>
+                                            <Shield size={32} color="gray" />
+                                        </Tooltip>
+                                    ) : (
+                                        <></>
+                                    )}
+                                </Localizer>
+                            </div>
+                        )}
+                        {profile?.content && (
+                            <div className={styles.category}>
+                                <Text id="app.special.popovers.user_profile.sub.information" />
+                            </div>
+                        )}
+                        <Markdown content={profile?.content} />
+                        {/*<div className={styles.category}><Text id="app.special.popovers.user_profile.sub.connections" /></div>*/}
+                    </div>
+                )}
+                {tab === "friends" &&
+                    (users ? (
+                        <div className={styles.entries}>
+                            {users.length === 0 ? (
+                                <div className={styles.empty}>
+                                    <Text id="app.special.popovers.user_profile.no_users" />
+                                </div>
+                            ) : (
+                                users.map(
+                                    (x) =>
+                                        x && (
+                                            <div
+                                                onClick={() =>
+                                                    openScreen({
+                                                        id: "profile",
+                                                        user_id: x._id,
+                                                    })
+                                                }
+                                                className={styles.entry}
+                                                key={x._id}>
+                                                <UserIcon
+                                                    size={32}
+                                                    target={x}
+                                                />
+                                                <span>{x.username}</span>
+                                            </div>
+                                        ),
+                                )
+                            )}
+                        </div>
+                    ) : (
+                        <Preloader type="ring" />
+                    ))}
+                {tab === "groups" && (
+                    <div className={styles.entries}>
+                        {mutualGroups.length === 0 ? (
+                            <div className={styles.empty}>
+                                <Text id="app.special.popovers.user_profile.no_groups" />
+                            </div>
+                        ) : (
+                            mutualGroups.map(
+                                (x) =>
+                                    x?.channel_type === "Group" && (
+                                        <Link to={`/channel/${x._id}`}>
+                                            <div
+                                                className={styles.entry}
+                                                key={x._id}>
+                                                <ChannelIcon
+                                                    target={x}
+                                                    size={32}
+                                                />
+                                                <span>{x.name}</span>
+                                            </div>
+                                        </Link>
+                                    ),
+                            )
+                        )}
+                    </div>
+                )}
+            </div>
+        </Modal>
+    );
 }