Run prettier on all files.

.prettierrc.js

@@ -3,7 +3,7 @@ module.exports = {
     "useTabs": true,
     "trailingComma": "all",
     "jsxBracketSameLine": true,
-    "importOrder": ["/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"],
+    "importOrder": ["preact|classnames|.scss$", "/(lib)", "/(redux)", "/(context)", "/(ui|common)|.svg$", "^[./]"],
     "importOrderSeparation": true,
 }
   

src/assets/sounds/Audio.ts

@@ -1,17 +1,22 @@
-import message from './message.mp3';
+import call_join from "./call_join.mp3";
-import outbound from './outbound.mp3';
+import call_leave from "./call_leave.mp3";
-import call_join from './call_join.mp3';
+import message from "./message.mp3";
-import call_leave from './call_leave.mp3';
+import outbound from "./outbound.mp3";
 
 const SoundMap: { [key in Sounds]: string } = {
 	message,
 	outbound,
 	call_join,
-    call_leave
+	call_leave,
-}
+};
 
-export type Sounds = 'message' | 'outbound' | 'call_join' | 'call_leave';
+export type Sounds = "message" | "outbound" | "call_join" | "call_leave";
-export const SOUNDS_ARRAY: Sounds[] = [ 'message', 'outbound', 'call_join', 'call_leave' ];
+export const SOUNDS_ARRAY: Sounds[] = [
+	"message",
+	"outbound",
+	"call_join",
+	"call_leave",
+];
 
 export function playSound(sound: Sounds) {
 	let file = SoundMap[sound];
@@ -19,6 +24,6 @@ export function playSound(sound: Sounds) {
 	try {
 		el.play();
 	} catch (err) {
-        console.error('Failed to play audio file', file, err);
+		console.error("Failed to play audio file", file, err);
 	}
 }

src/components/common/AutoComplete.tsx

@@ -1,55 +1,61 @@
-import { StateUpdater, useContext, useState } from "preact/hooks";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-import { Channels } from "revolt.js/dist/api/objects";
-import { emojiDictionary } from "../../assets/emojis";
 import { SYSTEM_USER_ID, User } from "revolt.js";
-import UserIcon from "./user/UserIcon";
+import { Channels } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";
-import Emoji from "./Emoji";
+
+import { StateUpdater, useContext, useState } from "preact/hooks";
+
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+import { emojiDictionary } from "../../assets/emojis";
 import ChannelIcon from "./ChannelIcon";
+import Emoji from "./Emoji";
+import UserIcon from "./user/UserIcon";
 
 export type AutoCompleteState =
 	| { type: "none" }
-    | ({ selected: number; within: boolean; } & (
+	| ({ selected: number; within: boolean } & (
-        {
+			| {
 					type: "emoji";
 					matches: string[];
-        } |
+			  }
-        {
+			| {
 					type: "user";
 					matches: User[];
-        } |
+			  }
-        {
+			| {
 					type: "channel";
 					matches: Channels.TextChannel[];
 			  }
 	  ));
 
 export type SearchClues = {
-    users?: { type: 'channel', id: string } | { type: 'all' },
+	users?: { type: "channel"; id: string } | { type: "all" };
-    channels?: { server: string }
+	channels?: { server: string };
 };
 
 export type AutoCompleteProps = {
-    detached?: boolean,
+	detached?: boolean;
-    state: AutoCompleteState,
+	state: AutoCompleteState;
-    setState: StateUpdater<AutoCompleteState>,
+	setState: StateUpdater<AutoCompleteState>;
 
-    onKeyUp: (ev: KeyboardEvent) => void,
+	onKeyUp: (ev: KeyboardEvent) => void;
-    onKeyDown: (ev: KeyboardEvent) => boolean,
+	onKeyDown: (ev: KeyboardEvent) => boolean;
-    onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void,
+	onChange: (ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) => void;
-    onClick: JSX.MouseEventHandler<HTMLButtonElement>,
+	onClick: JSX.MouseEventHandler<HTMLButtonElement>;
-    onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>,
+	onFocus: JSX.FocusEventHandler<HTMLTextAreaElement>;
-    onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>
+	onBlur: JSX.FocusEventHandler<HTMLTextAreaElement>;
-}
+};
 
-export function useAutoComplete(setValue: (v?: string) => void, searchClues?: SearchClues): AutoCompleteProps {
+export function useAutoComplete(
-    const [state, setState] = useState<AutoCompleteState>({ type: 'none' });
+	setValue: (v?: string) => void,
+	searchClues?: SearchClues,
+): AutoCompleteProps {
+	const [state, setState] = useState<AutoCompleteState>({ type: "none" });
 	const [focused, setFocused] = useState(false);
 	const client = useContext(AppContext);
 
 	function findSearchString(
-        el: HTMLTextAreaElement
+		el: HTMLTextAreaElement,
 	): ["emoji" | "user" | "channel", string, number] | undefined {
 		if (el.selectionStart === el.selectionEnd) {
 			let cursor = el.selectionStart;
@@ -58,18 +64,10 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 			let valid = /\w/;
 
 			let j = content.length - 1;
-            if (content[j] === '@') {
+			if (content[j] === "@") {
-                return [
+				return ["user", "", j];
-                    "user",
+			} else if (content[j] === "#") {
-                    "",
+				return ["channel", "", j];
-                    j
-                ];
-            } else if (content[j] === '#') {
-                return [
-                    "channel",
-                    "",
-                    j
-                ];
 			}
 
 			while (j >= 0 && valid.test(content[j])) {
@@ -83,10 +81,13 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 				let search = content.slice(j + 1, content.length);
 				if (search.length > 0) {
 					return [
-                        current === "#" ? "channel" :
+						current === "#"
-                        current === ":" ? "emoji" : "user",
+							? "channel"
+							: current === ":"
+							? "emoji"
+							: "user",
 						search.toLowerCase(),
-                        j + 1
+						j + 1,
 					];
 				}
 			}
@@ -99,7 +100,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 		let result = findSearchString(el);
 		if (result) {
 			let [type, search] = result;
-            const regex = new RegExp(search, 'i');
+			const regex = new RegExp(search, "i");
 
 			if (type === "emoji") {
 				// ! FIXME: we should convert it to a Binary Search Tree and use that
@@ -109,15 +110,13 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 
 				if (matches.length > 0) {
 					let currentPosition =
-                        state.type !== "none"
+						state.type !== "none" ? state.selected : 0;
-                            ? state.selected
-                            : 0;
 
 					setState({
 						type: "emoji",
 						matches,
 						selected: Math.min(currentPosition, matches.length - 1),
-                        within: false
+						within: false,
 					});
 
 					return;
@@ -127,71 +126,94 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 			if (type === "user" && searchClues?.users) {
 				let users: User[] = [];
 				switch (searchClues.users.type) {
-                    case 'all': users = client.users.toArray(); break;
+					case "all":
-                    case 'channel': {
+						users = client.users.toArray();
+						break;
+					case "channel": {
 						let channel = client.channels.get(searchClues.users.id);
 						switch (channel?.channel_type) {
-                            case 'Group':
+							case "Group":
-                            case 'DirectMessage':
+							case "DirectMessage":
-                                users = client.users.mapKeys(channel.recipients)
+								users = client.users
-                                    .filter(x => typeof x !== 'undefined') as User[];
+									.mapKeys(channel.recipients)
+									.filter(
+										(x) => typeof x !== "undefined",
+									) as User[];
 								break;
-                            case 'TextChannel':
+							case "TextChannel":
 								const server = channel.server;
-                                users = client.servers.members.toArray()
+								users = client.servers.members
-                                    .filter(x => x._id.substr(0, 26) === server)
+									.toArray()
-                                    .map(x => client.users.get(x._id.substr(26)))
+									.filter(
-                                    .filter(x => typeof x !== 'undefined') as User[];
+										(x) => x._id.substr(0, 26) === server,
+									)
+									.map((x) =>
+										client.users.get(x._id.substr(26)),
+									)
+									.filter(
+										(x) => typeof x !== "undefined",
+									) as User[];
 								break;
-                            default: return;
+							default:
+								return;
 						}
 					}
 				}
 
-                users = users.filter(x => x._id !== SYSTEM_USER_ID);
+				users = users.filter((x) => x._id !== SYSTEM_USER_ID);
 
-                let matches = (search.length > 0 ? users.filter(user => user.username.toLowerCase().match(regex)) : users)
+				let matches = (
+					search.length > 0
+						? users.filter((user) =>
+								user.username.toLowerCase().match(regex),
+						  )
+						: users
+				)
 					.splice(0, 5)
-                    .filter(x => typeof x !== "undefined");
+					.filter((x) => typeof x !== "undefined");
 
 				if (matches.length > 0) {
 					let currentPosition =
-                        state.type !== "none"
+						state.type !== "none" ? state.selected : 0;
-                            ? state.selected
-                            : 0;
 
 					setState({
 						type: "user",
 						matches,
 						selected: Math.min(currentPosition, matches.length - 1),
-                        within: false
+						within: false,
 					});
 
 					return;
 				}
 			}
 
-            if (type === 'channel' && searchClues?.channels) {
+			if (type === "channel" && searchClues?.channels) {
-                let channels = client.servers.get(searchClues.channels.server)
+				let channels = client.servers
-                    ?.channels
+					.get(searchClues.channels.server)
-                    .map(x => client.channels.get(x))
+					?.channels.map((x) => client.channels.get(x))
-                    .filter(x => typeof x !== 'undefined') as Channels.TextChannel[];
+					.filter(
+						(x) => typeof x !== "undefined",
+					) as Channels.TextChannel[];
 
-                let matches = (search.length > 0 ? channels.filter(channel => channel.name.toLowerCase().match(regex)) : channels)
+				let matches = (
+					search.length > 0
+						? channels.filter((channel) =>
+								channel.name.toLowerCase().match(regex),
+						  )
+						: channels
+				)
 					.splice(0, 5)
-                    .filter(x => typeof x !== "undefined");
+					.filter((x) => typeof x !== "undefined");
 
 				if (matches.length > 0) {
 					let currentPosition =
-                        state.type !== "none"
+						state.type !== "none" ? state.selected : 0;
-                            ? state.selected
-                            : 0;
 
 					setState({
 						type: "channel",
 						matches,
 						selected: Math.min(currentPosition, matches.length - 1),
-                        within: false
+						within: false,
 					});
 
 					return;
@@ -216,15 +238,15 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 						index,
 						search.length,
 						state.matches[state.selected],
-                        ": "
+						": ",
 					);
-                } else if (state.type === 'user') {
+				} else if (state.type === "user") {
 					content.splice(
 						index - 1,
 						search.length + 1,
 						"<@",
 						state.matches[state.selected]._id,
-                        "> "
+						"> ",
 					);
 				} else {
 					content.splice(
@@ -232,7 +254,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 						search.length + 1,
 						"<#",
 						state.matches[state.selected]._id,
-                        "> "
+						"> ",
 					);
 				}
 
@@ -247,13 +269,13 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
-        if (focused && state.type !== 'none') {
+		if (focused && state.type !== "none") {
 			if (e.key === "ArrowUp") {
 				e.preventDefault();
 				if (state.selected > 0) {
 					setState({
 						...state,
-                        selected: state.selected - 1
+						selected: state.selected - 1,
 					});
 				}
 
@@ -265,7 +287,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 				if (state.selected < state.matches.length - 1) {
 					setState({
 						...state,
-                        selected: state.selected + 1
+						selected: state.selected + 1,
 					});
 				}
 
@@ -274,9 +296,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 
 			if (e.key === "Enter" || e.key === "Tab") {
 				e.preventDefault();
-                selectCurrent(
+				selectCurrent(e.currentTarget as HTMLTextAreaElement);
-                    e.currentTarget as HTMLTextAreaElement
-                );
 
 				return true;
 			}
@@ -298,12 +318,12 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 	}
 
 	function onBlur() {
-        if (state.type !== 'none' && state.within) return;
+		if (state.type !== "none" && state.within) return;
 		setFocused(false);
 	}
 
 	return {
-        state: focused ? state : { type: 'none' },
+		state: focused ? state : { type: "none" },
 		setState,
 
 		onClick,
@@ -311,8 +331,8 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
 		onKeyUp,
 		onKeyDown,
 		onFocus,
-        onBlur
+		onBlur,
-    }
+	};
 }
 
 const Base = styled.div<{ detached?: boolean }>`
@@ -350,7 +370,9 @@ const Base = styled.div<{ detached?: boolean }>`
 		}
 	}
 
-    ${ props => props.detached && css`
+	${(props) =>
+		props.detached &&
+		css`
 			bottom: 8px;
 
 			> div {
@@ -359,91 +381,95 @@ const Base = styled.div<{ detached?: boolean }>`
 		`}
 `;
 
-export default function AutoComplete({ detached, state, setState, onClick }: Pick<AutoCompleteProps, 'detached' | 'state' | 'setState' | 'onClick'>) {
+export default function AutoComplete({
+	detached,
+	state,
+	setState,
+	onClick,
+}: Pick<AutoCompleteProps, "detached" | "state" | "setState" | "onClick">) {
 	return (
 		<Base detached={detached}>
 			<div>
 				{state.type === "emoji" &&
 					state.matches.map((match, i) => (
 						<button
-                            className={i === state.selected ? "active" : ''}
+							className={i === state.selected ? "active" : ""}
 							onMouseEnter={() =>
-                                (i !== state.selected ||
+								(i !== state.selected || !state.within) &&
-                                    !state.within) &&
 								setState({
 									...state,
 									selected: i,
-                                    within: true
+									within: true,
 								})
 							}
 							onMouseLeave={() =>
 								state.within &&
 								setState({
 									...state,
-                                    within: false
+									within: false,
 								})
 							}
 							onClick={onClick}>
-                            <Emoji emoji={(emojiDictionary as Record<string, string>)[match]} size={20} />
+							<Emoji
+								emoji={
+									(emojiDictionary as Record<string, string>)[
+										match
+									]
+								}
+								size={20}
+							/>
 							:{match}:
 						</button>
 					))}
 				{state.type === "user" &&
 					state.matches.map((match, i) => (
 						<button
-                            className={i === state.selected ? "active" : ''}
+							className={i === state.selected ? "active" : ""}
 							onMouseEnter={() =>
-                                (i !== state.selected ||
+								(i !== state.selected || !state.within) &&
-                                    !state.within) &&
 								setState({
 									...state,
 									selected: i,
-                                    within: true
+									within: true,
 								})
 							}
 							onMouseLeave={() =>
 								state.within &&
 								setState({
 									...state,
-                                    within: false
+									within: false,
 								})
 							}
 							onClick={onClick}>
-                            <UserIcon
+							<UserIcon size={24} target={match} status={true} />
-                                size={24}
-                                target={match}
-                                status={true} />
 							{match.username}
 						</button>
 					))}
 				{state.type === "channel" &&
 					state.matches.map((match, i) => (
 						<button
-                            className={i === state.selected ? "active" : ''}
+							className={i === state.selected ? "active" : ""}
 							onMouseEnter={() =>
-                                (i !== state.selected ||
+								(i !== state.selected || !state.within) &&
-                                    !state.within) &&
 								setState({
 									...state,
 									selected: i,
-                                    within: true
+									within: true,
 								})
 							}
 							onMouseLeave={() =>
 								state.within &&
 								setState({
 									...state,
-                                    within: false
+									within: false,
 								})
 							}
 							onClick={onClick}>
-                            <ChannelIcon
+							<ChannelIcon size={24} target={match} />
-                                size={24}
-                                target={match} />
 							{match.name}
 						</button>
 					))}
 			</div>
 		</Base>
-    )
+	);
 }

src/components/common/ChannelIcon.tsx

@@ -1,43 +1,65 @@
-import { useContext } from "preact/hooks";
-import { Channels } from "revolt.js/dist/api/objects";
 import { Hash, VolumeFull } from "@styled-icons/boxicons-regular";
-import { ImageIconBase, IconBaseProps } from "./IconBase";
+import { Channels } from "revolt.js/dist/api/objects";
+
+import { useContext } from "preact/hooks";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel> {
+import { ImageIconBase, IconBaseProps } from "./IconBase";
+import fallback from "./assets/group.png";
+
+interface Props
+	extends IconBaseProps<
+		Channels.GroupChannel | Channels.TextChannel | Channels.VoiceChannel
+	> {
 	isServerChannel?: boolean;
 }
 
-import fallback from './assets/group.png';
+export default function ChannelIcon(
-
+	props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
-export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
+) {
 	const client = useContext(AppContext);
 
-    const { size, target, attachment, isServerChannel: server, animate, children, as, ...imgProps } = props;
+	const {
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+		size,
-    const isServerChannel = server || (target && (target.channel_type === 'TextChannel' || target.channel_type === 'VoiceChannel'));
+		target,
+		attachment,
+		isServerChannel: server,
+		animate,
+		children,
+		as,
+		...imgProps
+	} = props;
+	const iconURL = client.generateFileURL(
+		target?.icon ?? attachment,
+		{ max_side: 256 },
+		animate,
+	);
+	const isServerChannel =
+		server ||
+		(target &&
+			(target.channel_type === "TextChannel" ||
+				target.channel_type === "VoiceChannel"));
 
-    if (typeof iconURL === 'undefined') {
+	if (typeof iconURL === "undefined") {
 		if (isServerChannel) {
-            if (target?.channel_type === 'VoiceChannel') {
+			if (target?.channel_type === "VoiceChannel") {
-                return (
+				return <VolumeFull size={size} />;
-                    <VolumeFull size={size} />
-                )
 			} else {
-                return (
+				return <Hash size={size} />;
-                    <Hash size={size} />
-                )
 			}
 		}
 	}
 
 	return (
 		// ! fixme: replace fallback with <picture /> + <source />
-        <ImageIconBase {...imgProps}
+		<ImageIconBase
+			{...imgProps}
 			width={size}
 			height={size}
 			aria-hidden="true"
 			square={isServerChannel}
-            src={iconURL ?? fallback} />
+			src={iconURL ?? fallback}
+		/>
 	);
 }

src/components/common/CollapsibleSection.tsx

@@ -1,8 +1,11 @@
-import Details from "../ui/Details";
+import { ChevronDown } from "@styled-icons/boxicons-regular";
+
 import { State, store } from "../../redux";
 import { Action } from "../../redux/reducers";
+
+import Details from "../ui/Details";
+
 import { Children } from "../../types/Preact";
-import { ChevronDown } from "@styled-icons/boxicons-regular";
 
 interface Props {
 	id: string;
@@ -15,20 +18,26 @@ interface Props {
 	children: Children;
 }
 
-export default function CollapsibleSection({ id, defaultValue, summary, children, ...detailsProps }: Props) {
+export default function CollapsibleSection({
+	id,
+	defaultValue,
+	summary,
+	children,
+	...detailsProps
+}: Props) {
 	const state: State = store.getState();
 
 	function setState(state: boolean) {
 		if (state === defaultValue) {
 			store.dispatch({
-                type: 'SECTION_TOGGLE_UNSET',
+				type: "SECTION_TOGGLE_UNSET",
-                id
+				id,
 			} as Action);
 		} else {
 			store.dispatch({
-                type: 'SECTION_TOGGLE_SET',
+				type: "SECTION_TOGGLE_SET",
 				id,
-                state
+				state,
 			} as Action);
 		}
 	}
@@ -36,7 +45,7 @@ export default function CollapsibleSection({ id, defaultValue, summary, children
 	return (
 		<Details
 			open={state.sectionToggle[id] ?? defaultValue}
-            onToggle={e => setState(e.currentTarget.open)}
+			onToggle={(e) => setState(e.currentTarget.open)}
 			{...detailsProps}>
 			<summary>
 				<div class="padding">
@@ -46,5 +55,5 @@ export default function CollapsibleSection({ id, defaultValue, summary, children
 			</summary>
 			{children}
 		</Details>
-    )
+	);
 }

src/components/common/Emoji.tsx

@@ -1,6 +1,6 @@
-import { EmojiPacks } from '../../redux/reducers/settings';
+import { EmojiPacks } from "../../redux/reducers/settings";
 
-var EMOJI_PACK = 'mutant';
+var EMOJI_PACK = "mutant";
 const REVISION = 3;
 
 export function setEmojiPack(pack: EmojiPacks) {
@@ -33,11 +33,11 @@ function codePoints(rune: string) {
 // scripts/build.js#344
 // grabTheRightIcon(rawText);
 const UFE0Fg = /\uFE0F/g;
-const U200D = String.fromCharCode(0x200D);
+const U200D = String.fromCharCode(0x200d);
 function toCodePoint(rune: string) {
-    return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, '') : rune)
+	return codePoints(rune.indexOf(U200D) < 0 ? rune.replace(UFE0Fg, "") : rune)
 		.map((val) => val.toString(16))
-        .join("-")
+		.join("-");
 }
 
 function parseEmoji(emoji: string) {
@@ -45,18 +45,28 @@ function parseEmoji(emoji: string) {
 	return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
 }
 
-export default function Emoji({ emoji, size }: { emoji: string, size?: number }) {
+export default function Emoji({
+	emoji,
+	size,
+}: {
+	emoji: string;
+	size?: number;
+}) {
 	return (
 		<img
 			alt={emoji}
 			className="emoji"
 			draggable={false}
 			src={parseEmoji(emoji)}
-            style={size ? { width: `${size}px`, height: `${size}px` } : undefined}
+			style={
+				size ? { width: `${size}px`, height: `${size}px` } : undefined
+			}
 		/>
-    )
+	);
 }
 
 export function generateEmoji(emoji: string) {
-    return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(emoji)}" />`;
+	return `<img class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
+		emoji,
+	)}" />`;
 }

src/components/common/IconBase.tsx

@@ -10,7 +10,7 @@ export interface IconBaseProps<T> {
 }
 
 interface IconModifiers {
-    square?: boolean
+	square?: boolean;
 }
 
 export default styled.svg<IconModifiers>`
@@ -21,7 +21,9 @@ export default styled.svg<IconModifiers>`
 		height: 100%;
 		object-fit: cover;
 
-        ${ props => !props.square && css`
+		${(props) =>
+			!props.square &&
+			css`
 				border-radius: 50%;
 			`}
 	}
@@ -31,7 +33,9 @@ export const ImageIconBase = styled.img<IconModifiers>`
 	flex-shrink: 0;
 	object-fit: cover;
 
-    ${ props => !props.square && css`
+	${(props) =>
+		!props.square &&
+		css`
 			border-radius: 50%;
 		`}
 `;

src/components/common/LocaleSelector.tsx

@@ -1,7 +1,9 @@
-import ComboBox from "../ui/ComboBox";
 import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
-import { Language, LanguageEntry, Languages } from "../../context/Locale";
+
+import { Language, Languages } from "../../context/Locale";
+
+import ComboBox from "../ui/ComboBox";
 
 type Props = {
 	locale: string;
@@ -11,14 +13,13 @@ export function LocaleSelector(props: Props) {
 	return (
 		<ComboBox
 			value={props.locale}
-            onChange={e =>
+			onChange={(e) =>
 				dispatch({
 					type: "SET_LOCALE",
-                    locale: e.currentTarget.value as Language
+					locale: e.currentTarget.value as Language,
 				})
-            }
+			}>
-        >
+			{Object.keys(Languages).map((x) => {
-            {Object.keys(Languages).map(x => {
 				const l = Languages[x as keyof typeof Languages];
 				return (
 					<option value={x}>
@@ -30,11 +31,8 @@ export function LocaleSelector(props: Props) {
 	);
 }
 
-export default connectState(
+export default connectState(LocaleSelector, (state) => {
-    LocaleSelector,
-    state => {
 	return {
-            locale: state.locale
+		locale: state.locale,
 	};
-    }
+});
-);

src/components/common/ServerHeader.tsx

@@ -1,15 +1,17 @@
-import Header from "../ui/Header";
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import IconButton from "../ui/IconButton";
 import { Cog } from "@styled-icons/boxicons-solid";
+import { Link } from "react-router-dom";
 import { Server } from "revolt.js/dist/api/objects";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
+import styled from "styled-components";
+
 import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
 
+import Header from "../ui/Header";
+import IconButton from "../ui/IconButton";
+
 interface Props {
-    server: Server,
+	server: Server;
-    ctx: HookContext
+	ctx: HookContext;
 }
 
 const ServerName = styled.div`
@@ -18,23 +20,30 @@ const ServerName = styled.div`
 
 export default function ServerHeader({ server, ctx }: Props) {
 	const permissions = useServerPermission(server._id, ctx);
-    const bannerURL = ctx.client.servers.getBannerURL(server._id, { width: 480 }, true);
+	const bannerURL = ctx.client.servers.getBannerURL(
+		server._id,
+		{ width: 480 },
+		true,
+	);
 
 	return (
-        <Header borders
+		<Header
+			borders
 			placement="secondary"
-            background={typeof bannerURL !== 'undefined'}
+			background={typeof bannerURL !== "undefined"}
-            style={{ background: bannerURL ? `url('${bannerURL}')` : undefined }}>
+			style={{
-            <ServerName>
+				background: bannerURL ? `url('${bannerURL}')` : undefined,
-                { server.name }
+			}}>
-            </ServerName>
+			<ServerName>{server.name}</ServerName>
-            { (permissions & ServerPermission.ManageServer) > 0 && <div className="actions">
+			{(permissions & ServerPermission.ManageServer) > 0 && (
+				<div className="actions">
 					<Link to={`/server/${server._id}/settings`}>
 						<IconButton>
 							<Cog size={24} />
 						</IconButton>
 					</Link>
-            </div> }
+				</div>
+			)}
 		</Header>
-    )
+	);
 }

src/components/common/ServerIcon.tsx

@@ -1,16 +1,19 @@
-import styled from "styled-components";
-import { useContext } from "preact/hooks";
 import { Server } from "revolt.js/dist/api/objects";
-import { IconBaseProps, ImageIconBase } from "./IconBase";
+import styled from "styled-components";
+
+import { useContext } from "preact/hooks";
+
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
+import { IconBaseProps, ImageIconBase } from "./IconBase";
+
 interface Props extends IconBaseProps<Server> {
 	server_name?: string;
 }
 
 const ServerText = styled.div`
 	display: grid;
-    padding: .2em;
+	padding: 0.2em;
 	overflow: hidden;
 	border-radius: 50%;
 	place-items: center;
@@ -18,30 +21,48 @@ const ServerText = styled.div`
 	background: var(--primary-background);
 `;
 
-const fallback = '/assets/group.png';
+const fallback = "/assets/group.png";
-export default function ServerIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
+export default function ServerIcon(
+	props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
+) {
 	const client = useContext(AppContext);
 
-    const { target, attachment, size, animate, server_name, children, as, ...imgProps } = props;
+	const {
-    const iconURL = client.generateFileURL(target?.icon ?? attachment, { max_side: 256 }, animate);
+		target,
+		attachment,
+		size,
+		animate,
+		server_name,
+		children,
+		as,
+		...imgProps
+	} = props;
+	const iconURL = client.generateFileURL(
+		target?.icon ?? attachment,
+		{ max_side: 256 },
+		animate,
+	);
 
-    if (typeof iconURL === 'undefined') {
+	if (typeof iconURL === "undefined") {
-        const name = target?.name ?? server_name ?? '';
+		const name = target?.name ?? server_name ?? "";
 
 		return (
 			<ServerText style={{ width: size, height: size }}>
-                { name.split(' ')
+				{name
-                      .map(x => x[0])
+					.split(" ")
-                      .filter(x => typeof x !== 'undefined') }
+					.map((x) => x[0])
+					.filter((x) => typeof x !== "undefined")}
 			</ServerText>
-        )
+		);
 	}
 
 	return (
-        <ImageIconBase {...imgProps}
+		<ImageIconBase
+			{...imgProps}
 			width={size}
 			height={size}
 			aria-hidden="true"
-            src={iconURL} />
+			src={iconURL}
+		/>
 	);
 }

src/components/common/Tooltip.tsx

@@ -1,12 +1,14 @@
-import { Text } from "preact-i18n";
+import Tippy, { TippyProps } from "@tippyjs/react";
 import styled from "styled-components";
-import { Children } from "../../types/Preact";
-import Tippy, { TippyProps } from '@tippyjs/react';
 
-type Props = Omit<TippyProps, 'children'> & {
+import { Text } from "preact-i18n";
+
+import { Children } from "../../types/Preact";
+
+type Props = Omit<TippyProps, "children"> & {
 	children: Children;
 	content: Children;
-}
+};
 
 export default function Tooltip(props: Props) {
 	const { children, content, ...tippyProps } = props;
@@ -37,13 +39,22 @@ const PermissionTooltipBase = styled.div`
 	}
 `;
 
-export function PermissionTooltip(props: Omit<Props, 'content'> & { permission: string }) {
+export function PermissionTooltip(
+	props: Omit<Props, "content"> & { permission: string },
+) {
 	const { permission, ...tooltipProps } = props;
 
 	return (
-        <Tooltip content={<PermissionTooltipBase>
+		<Tooltip
-            <span><Text id="app.permissions.required" /></span>
+			content={
+				<PermissionTooltipBase>
+					<span>
+						<Text id="app.permissions.required" />
+					</span>
 					<code>{permission}</code>
-        </PermissionTooltipBase>} {...tooltipProps} />
+				</PermissionTooltipBase>
-    )
+			}
+			{...tooltipProps}
+		/>
+	);
 }

src/components/common/UpdateIndicator.tsx

@@ -1,18 +1,23 @@
-import { updateSW } from "../../main";
-import IconButton from "../ui/IconButton";
-import { ThemeContext } from "../../context/Theme";
 import { Download } from "@styled-icons/boxicons-regular";
-import { internalSubscribe } from "../../lib/eventEmitter";
+
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { ThemeContext } from "../../context/Theme";
+
+import IconButton from "../ui/IconButton";
+
+import { updateSW } from "../../main";
+
 var pendingUpdate = false;
-internalSubscribe('PWA', 'update', () => pendingUpdate = true);
+internalSubscribe("PWA", "update", () => (pendingUpdate = true));
 
 export default function UpdateIndicator() {
 	const [pending, setPending] = useState(pendingUpdate);
 
 	useEffect(() => {
-        return internalSubscribe('PWA', 'update', () => setPending(true));
+		return internalSubscribe("PWA", "update", () => setPending(true));
 	});
 
 	if (!pending) return null;
@@ -22,5 +27,5 @@ export default function UpdateIndicator() {
 		<IconButton onClick={() => updateSW(true)}>
 			<Download size={22} color={theme.success} />
 		</IconButton>
-    )
+	);
 }

src/components/common/messaging/Message.tsx

@@ -1,31 +1,46 @@
-import Embed from "./embed/Embed";
+import { attachContextMenu } from "preact-context-menu";
+import { memo } from "preact/compat";
+import { useContext } from "preact/hooks";
+
+import { QueuedMessage } from "../../../redux/reducers/queue";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { useUser } from "../../../context/revoltjs/hooks";
+import { MessageObject } from "../../../context/revoltjs/util";
+
+import Overline from "../../ui/Overline";
+
+import { Children } from "../../../types/Preact";
+import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
-import Markdown from "../../markdown/Markdown";
+import MessageBase, {
-import { Children } from "../../../types/Preact";
+	MessageContent,
+	MessageDetail,
+	MessageInfo,
+} from "./MessageBase";
 import Attachment from "./attachments/Attachment";
-import { attachContextMenu } from "preact-context-menu";
-import { useUser } from "../../../context/revoltjs/hooks";
-import { QueuedMessage } from "../../../redux/reducers/queue";
-import { MessageObject } from "../../../context/revoltjs/util";
-import MessageBase, { MessageContent, MessageDetail, MessageInfo } from "./MessageBase";
-import Overline from "../../ui/Overline";
-import { useContext } from "preact/hooks";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import { memo } from "preact/compat";
 import { MessageReply } from "./attachments/MessageReply";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import Embed from "./embed/Embed";
 
 interface Props {
-    attachContext?: boolean
+	attachContext?: boolean;
-    queued?: QueuedMessage
+	queued?: QueuedMessage;
-    message: MessageObject
+	message: MessageObject;
-    contrast?: boolean
+	contrast?: boolean;
-    content?: Children
+	content?: Children;
-    head?: boolean
+	head?: boolean;
 }
 
-function Message({ attachContext, message, contrast, content: replacement, head: preferHead, queued }: Props) {
+function Message({
+	attachContext,
+	message,
+	contrast,
+	content: replacement,
+	head: preferHead,
+	queued,
+}: Props) {
 	// TODO: Can improve re-renders here by providing a list
 	// TODO: of dependencies. We only need to update on u/avatar.
 	const user = useUser(message.author);
@@ -38,41 +53,81 @@ function Message({ attachContext, message, contrast, content: replacement, head:
 	// ! FIXME: tell fatal to make this type generic
 	// bree: Fatal please...
 	const userContext = attachContext
-        ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) as any
+		? (attachContextMenu("Menu", {
+				user: message.author,
+				contextualChannel: message.channel,
+		  }) as any)
 		: undefined;
 
-    const openProfile = () => openScreen({ id: 'profile', user_id: message.author });
+	const openProfile = () =>
+		openScreen({ id: "profile", user_id: message.author });
 
 	return (
 		<div id={message._id}>
-            { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
+			{message.replies?.map((message_id, index) => (
+				<MessageReply
+					index={index}
+					id={message_id}
+					channel={message.channel}
+				/>
+			))}
 			<MessageBase
 				head={head && !(message.replies && message.replies.length > 0)}
 				contrast={contrast}
-                sending={typeof queued !== 'undefined'}
+				sending={typeof queued !== "undefined"}
 				mention={message.mentions?.includes(client.user!._id)}
-                failed={typeof queued?.error !== 'undefined'}
+				failed={typeof queued?.error !== "undefined"}
-                onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
+				onContextMenu={
+					attachContext
+						? attachContextMenu("Menu", {
+								message,
+								contextualChannel: message.channel,
+								queued,
+						  })
+						: undefined
+				}>
 				<MessageInfo>
-                    { head ?
+					{head ? (
-                        <UserIcon target={user} size={36} onContextMenu={userContext} onClick={openProfile} /> :
+						<UserIcon
-                        <MessageDetail message={message} position="left" /> }
+							target={user}
+							size={36}
+							onContextMenu={userContext}
+							onClick={openProfile}
+						/>
+					) : (
+						<MessageDetail message={message} position="left" />
+					)}
 				</MessageInfo>
 				<MessageContent>
-                    { head && <span className="detail">
+					{head && (
-                        <Username className="author" user={user} onContextMenu={userContext} onClick={openProfile} />
+						<span className="detail">
+							<Username
+								className="author"
+								user={user}
+								onContextMenu={userContext}
+								onClick={openProfile}
+							/>
 							<MessageDetail message={message} position="top" />
-                    </span> }
+						</span>
+					)}
 					{replacement ?? <Markdown content={content} />}
-                    { queued?.error && <Overline type="error" error={queued.error} /> }
+					{queued?.error && (
-                    { message.attachments?.map((attachment, index) =>
+						<Overline type="error" error={queued.error} />
-                        <Attachment key={index} attachment={attachment} hasContent={ index > 0 || content.length > 0 } />) }
+					)}
-                    { message.embeds?.map((embed, index) =>
+					{message.attachments?.map((attachment, index) => (
-                        <Embed key={index} embed={embed} />) }
+						<Attachment
+							key={index}
+							attachment={attachment}
+							hasContent={index > 0 || content.length > 0}
+						/>
+					))}
+					{message.embeds?.map((embed, index) => (
+						<Embed key={index} embed={embed} />
+					))}
 				</MessageContent>
 			</MessageBase>
 		</div>
-    )
+	);
 }
 
 export default memo(Message);

src/components/common/messaging/MessageBase.tsx

@@ -1,41 +1,52 @@
 import dayjs from "dayjs";
-import Tooltip from "../Tooltip";
-import { decodeTime } from "ulid";
-import { Text } from "preact-i18n";
 import styled, { css } from "styled-components";
+import { decodeTime } from "ulid";
+
+import { Text } from "preact-i18n";
+
 import { MessageObject } from "../../../context/revoltjs/util";
 
+import Tooltip from "../Tooltip";
+
 export interface BaseMessageProps {
-    head?: boolean,
+	head?: boolean;
-    failed?: boolean,
+	failed?: boolean;
-    mention?: boolean,
+	mention?: boolean;
-    blocked?: boolean,
+	blocked?: boolean;
-    sending?: boolean,
+	sending?: boolean;
-    contrast?: boolean
+	contrast?: boolean;
 }
 
 export default styled.div<BaseMessageProps>`
 	display: flex;
 	overflow-x: none;
-    padding: .125rem;
+	padding: 0.125rem;
 	flex-direction: row;
 	padding-right: 16px;
 
-    ${ props => props.contrast && css`
+	${(props) =>
-        padding: .3rem;
+		props.contrast &&
+		css`
+			padding: 0.3rem;
 			border-radius: 4px;
 			background: var(--hover);
 		`}
 
-    ${ props => props.head && css`
+	${(props) =>
+		props.head &&
+		css`
 			margin-top: 12px;
 		`}
 
-    ${ props => props.mention && css`
+    ${(props) =>
+		props.mention &&
+		css`
 			background: var(--mention);
 		`}
 
-    ${ props => props.blocked && css`
+    ${(props) =>
+		props.blocked &&
+		css`
 			filter: blur(4px);
 			transition: 0.2s ease filter;
 
@@ -44,12 +55,16 @@ export default styled.div<BaseMessageProps>`
 			}
 		`}
 
-    ${ props => props.sending && css`
+    ${(props) =>
+		props.sending &&
+		css`
 			opacity: 0.8;
 			color: var(--tertiary-foreground);
 		`}
 
-    ${ props => props.failed && css`
+    ${(props) =>
+		props.failed &&
+		css`
 			color: var(--error);
 		`}
 
@@ -113,7 +128,8 @@ export const MessageInfo = styled.div`
 		opacity: 0;
 	}
 
-    time, .edited {
+	time,
+	.edited {
 		margin-top: 1px;
 		cursor: default;
 		display: inline;
@@ -121,7 +137,8 @@ export const MessageInfo = styled.div`
 		color: var(--tertiary-foreground);
 	}
 
-    time, .edited > div {
+	time,
+	.edited > div {
 		&::selection {
 			background-color: transparent;
 			color: var(--tertiary-foreground);
@@ -134,7 +151,7 @@ export const MessageContent = styled.div`
 	flex-grow: 1;
 	display: flex;
 	// overflow: hidden;
-    font-size: .875rem;
+	font-size: 0.875rem;
 	flex-direction: column;
 	justify-content: center;
 `;
@@ -146,8 +163,14 @@ export const DetailBase = styled.div`
 	color: var(--tertiary-foreground);
 `;
 
-export function MessageDetail({ message, position }: { message: MessageObject, position: 'left' | 'top' }) {
+export function MessageDetail({
-    if (position === 'left') {
+	message,
+	position,
+}: {
+	message: MessageObject;
+	position: "left" | "top";
+}) {
+	if (position === "left") {
 		if (message.edited) {
 			return (
 				<>
@@ -162,7 +185,7 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
 						</Tooltip>
 					</span>
 				</>
-            )
+			);
 		} else {
 			return (
 				<>
@@ -172,18 +195,18 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
 						<i className="copyBracket">]</i>
 					</time>
 				</>
-            )
+			);
 		}
 	}
 
 	return (
 		<DetailBase>
-            <time>
+			<time>{dayjs(decodeTime(message._id)).calendar()}</time>
-                {dayjs(decodeTime(message._id)).calendar()}
+			{message.edited && (
-            </time>
+				<Tooltip content={dayjs(message.edited).format("LLLL")}>
-            { message.edited && <Tooltip content={dayjs(message.edited).format("LLLL")}>
 					<Text id="app.main.channel.edited" />
-            </Tooltip> }
+				</Tooltip>
+			)}
 		</DetailBase>
-    )
+	);
 }

src/components/common/messaging/MessageBox.tsx

@@ -1,34 +1,46 @@
-import { ulid } from "ulid";
+import { ShieldX } from "@styled-icons/boxicons-regular";
-import { Text } from "preact-i18n";
+import { Send } from "@styled-icons/boxicons-solid";
-import { Channel } from "revolt.js";
-import styled from "styled-components";
-import { dispatch } from "../../../redux";
-import { defer } from "../../../lib/defer";
-import IconButton from "../../ui/IconButton";
-import { PermissionTooltip } from "../Tooltip";
-import { Send } from '@styled-icons/boxicons-solid';
-import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
-import { useTranslation } from "../../../lib/i18n";
+import { Channel } from "revolt.js";
-import { Reply } from "../../../redux/reducers/queue";
-import { connectState } from "../../../redux/connector";
-import { SoundContext } from "../../../context/Settings";
-import { takeError } from "../../../context/revoltjs/util";
-import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
-import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
+import styled from "styled-components";
+import { ulid } from "ulid";
+
+import { Text } from "preact-i18n";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+import { debounce } from "../../../lib/debounce";
+import { defer } from "../../../lib/defer";
+import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
+import { useTranslation } from "../../../lib/i18n";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import {
+	SingletonMessageRenderer,
+	SMOOTH_SCROLL_ON_RECEIVE,
+} from "../../../lib/renderer/Singleton";
+
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
+import { Reply } from "../../../redux/reducers/queue";
+
+import { SoundContext } from "../../../context/Settings";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+	FileUploader,
+	grabFiles,
+	uploadFile,
+} from "../../../context/revoltjs/FileUploads";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { useChannelPermission } from "../../../context/revoltjs/hooks";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { takeError } from "../../../context/revoltjs/util";
-import { internalEmit, internalSubscribe } from "../../../lib/eventEmitter";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { FileUploader, grabFiles, uploadFile } from "../../../context/revoltjs/FileUploads";
-import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton";
-import { ShieldX } from "@styled-icons/boxicons-regular";
 
+import IconButton from "../../ui/IconButton";
+
+import AutoComplete, { useAutoComplete } from "../AutoComplete";
+import { PermissionTooltip } from "../Tooltip";
+import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
-import FilePreview from './bars/FilePreview';
 
 type Props = {
 	channel: Channel;
@@ -38,7 +50,12 @@ type Props = {
 export type UploadState =
 	| { type: "none" }
 	| { type: "attached"; files: File[] }
-    | { type: "uploading"; files: File[]; percent: number; cancel: CancelTokenSource }
+	| {
+			type: "uploading";
+			files: File[];
+			percent: number;
+			cancel: CancelTokenSource;
+	  }
 	| { type: "sending"; files: File[] }
 	| { type: "failed"; files: File[]; error: string };
 
@@ -48,7 +65,7 @@ const Base = styled.div`
 	background: var(--message-box);
 
 	textarea {
-        font-size: .875rem;
+		font-size: 0.875rem;
 		background: transparent;
 	}
 `;
@@ -58,7 +75,7 @@ const Blocked = styled.div`
 	align-items: center;
 	padding: 14px 0;
 	user-select: none;
-    font-size: .875rem;
+	font-size: 0.875rem;
 	color: var(--tertiary-foreground);
 
 	svg {
@@ -76,7 +93,9 @@ const Action = styled.div`
 export const CAN_UPLOAD_AT_ONCE = 5;
 
 function MessageBox({ channel, draft }: Props) {
-    const [ uploadState, setUploadState ] = useState<UploadState>({ type: 'none' });
+	const [uploadState, setUploadState] = useState<UploadState>({
+		type: "none",
+	});
 	const [typing, setTyping] = useState<boolean | number>(false);
 	const [replies, setReplies] = useState<Reply[]>([]);
 	const playSound = useContext(SoundContext);
@@ -89,13 +108,15 @@ function MessageBox({ channel, draft }: Props) {
 		return (
 			<Base>
 				<Blocked>
-                    <PermissionTooltip permission="SendMessages" placement="top">
+					<PermissionTooltip
+						permission="SendMessages"
+						placement="top">
 						<ShieldX size={22} />
 					</PermissionTooltip>
 					<Text id="app.main.channel.misc.no_sending" />
 				</Blocked>
 			</Base>
-        )
+		);
 	}
 
 	function setMessage(content?: string) {
@@ -103,23 +124,23 @@ function MessageBox({ channel, draft }: Props) {
 			dispatch({
 				type: "SET_DRAFT",
 				channel: channel._id,
-                content
+				content,
 			});
 		} else {
 			dispatch({
 				type: "CLEAR_DRAFT",
-                channel: channel._id
+				channel: channel._id,
 			});
 		}
 	}
 
 	useEffect(() => {
-        function append(content: string, action: 'quote' | 'mention') {
+		function append(content: string, action: "quote" | "mention") {
 			const text =
 				action === "quote"
 					? `${content
 							.split("\n")
-                          .map(x => `> ${x}`)
+							.map((x) => `> ${x}`)
 							.join("\n")}\n\n`
 					: `${content} `;
 
@@ -134,16 +155,17 @@ function MessageBox({ channel, draft }: Props) {
 	}, [draft]);
 
 	async function send() {
-        if (uploadState.type === 'uploading' || uploadState.type === 'sending') return;
+		if (uploadState.type === "uploading" || uploadState.type === "sending")
+			return;
 
-        const content = draft?.trim() ?? '';
+		const content = draft?.trim() ?? "";
-        if (uploadState.type === 'attached') return sendFile(content);
+		if (uploadState.type === "attached") return sendFile(content);
 		if (content.length === 0) return;
 
 		stopTyping();
 		setMessage();
 		setReplies([]);
-        playSound('outbound');
+		playSound("outbound");
 
 		const nonce = ulid();
 		dispatch({
@@ -156,29 +178,34 @@ function MessageBox({ channel, draft }: Props) {
 				author: client.user!._id,
 
 				content,
-                replies
+				replies,
-            }
+			},
 		});
 
-        defer(() => SingletonMessageRenderer.jumpToBottom(channel._id, SMOOTH_SCROLL_ON_RECEIVE));
+		defer(() =>
+			SingletonMessageRenderer.jumpToBottom(
+				channel._id,
+				SMOOTH_SCROLL_ON_RECEIVE,
+			),
+		);
 
 		try {
 			await client.channels.sendMessage(channel._id, {
 				content,
 				nonce,
-                replies
+				replies,
 			});
 		} catch (error) {
 			dispatch({
 				type: "QUEUE_FAIL",
 				error: takeError(error),
-                nonce
+				nonce,
 			});
 		}
 	}
 
 	async function sendFile(content: string) {
-        if (uploadState.type !== 'attached') return;
+		if (uploadState.type !== "attached") return;
 		let attachments: string[] = [];
 
 		const cancel = Axios.CancelToken.source();
@@ -190,29 +217,40 @@ function MessageBox({ channel, draft }: Props) {
 			for (let i = 0; i < files.length && i < CAN_UPLOAD_AT_ONCE; i++) {
 				const file = files[i];
 				attachments.push(
-                    await uploadFile(client.configuration!.features.autumn.url, 'attachments', file, {
+					await uploadFile(
-                        onUploadProgress: e =>
+						client.configuration!.features.autumn.url,
+						"attachments",
+						file,
+						{
+							onUploadProgress: (e) =>
 								setUploadState({
 									type: "uploading",
 									files,
-                            percent: Math.round(((i * 100) + (100 * e.loaded) / e.total) / Math.min(files.length, CAN_UPLOAD_AT_ONCE)),
+									percent: Math.round(
-                            cancel
+										(i * 100 + (100 * e.loaded) / e.total) /
+											Math.min(
+												files.length,
+												CAN_UPLOAD_AT_ONCE,
+											),
+									),
+									cancel,
 								}),
-                        cancelToken: cancel.token
+							cancelToken: cancel.token,
-                    })
+						},
+					),
 				);
 			}
 		} catch (err) {
 			if (err?.message === "cancel") {
 				setUploadState({
 					type: "attached",
-                    files
+					files,
 				});
 			} else {
 				setUploadState({
 					type: "failed",
 					files,
-                    error: takeError(err)
+					error: takeError(err),
 				});
 			}
 
@@ -221,7 +259,7 @@ function MessageBox({ channel, draft }: Props) {
 
 		setUploadState({
 			type: "sending",
-            files
+			files,
 		});
 
 		const nonce = ulid();
@@ -230,13 +268,13 @@ function MessageBox({ channel, draft }: Props) {
 				content,
 				nonce,
 				replies,
-                attachments
+				attachments,
 			});
 		} catch (err) {
 			setUploadState({
 				type: "failed",
 				files,
-                error: takeError(err)
+				error: takeError(err),
 			});
 
 			return;
@@ -244,12 +282,12 @@ function MessageBox({ channel, draft }: Props) {
 
 		setMessage();
 		setReplies([]);
-        playSound('outbound');
+		playSound("outbound");
 
 		if (files.length > CAN_UPLOAD_AT_ONCE) {
 			setUploadState({
 				type: "attached",
-                files: files.slice(CAN_UPLOAD_AT_ONCE)
+				files: files.slice(CAN_UPLOAD_AT_ONCE),
 			});
 		} else {
 			setUploadState({ type: "none" });
@@ -257,14 +295,14 @@ function MessageBox({ channel, draft }: Props) {
 	}
 
 	function startTyping() {
-        if (typeof typing === 'number' && + new Date() < typing) return;
+		if (typeof typing === "number" && +new Date() < typing) return;
 
 		const ws = client.websocket;
 		if (ws.connected) {
 			setTyping(+new Date() + 4000);
 			ws.send({
 				type: "BeginTyping",
-                channel: channel._id
+				channel: channel._id,
 			});
 		}
 	}
@@ -276,69 +314,116 @@ function MessageBox({ channel, draft }: Props) {
 				setTyping(false);
 				ws.send({
 					type: "EndTyping",
-                    channel: channel._id
+					channel: channel._id,
 				});
 			}
 		}
 	}
 
-    const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]);
+	const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [
-    const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } =
+		channel._id,
-        useAutoComplete(setMessage, {
+	]);
-            users: { type: 'channel', id: channel._id },
+	const {
-            channels: channel.channel_type === 'TextChannel' ? { server: channel.server } : undefined
+		onChange,
+		onKeyUp,
+		onKeyDown,
+		onFocus,
+		onBlur,
+		...autoCompleteProps
+	} = useAutoComplete(setMessage, {
+		users: { type: "channel", id: channel._id },
+		channels:
+			channel.channel_type === "TextChannel"
+				? { server: channel.server }
+				: undefined,
 	});
 
 	return (
 		<>
 			<AutoComplete {...autoCompleteProps} />
-            <FilePreview state={uploadState} addFile={() => uploadState.type === 'attached' &&
+			<FilePreview
-                grabFiles(20_000_000, files => setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] }),
+				state={uploadState}
-                    () => openScreen({ id: "error", error: "FileTooLarge" }), true)}
+				addFile={() =>
-                removeFile={index => {
+					uploadState.type === "attached" &&
-                    if (uploadState.type !== 'attached') return;
+					grabFiles(
-                    if (uploadState.files.length === 1) {
+						20_000_000,
-                        setUploadState({ type: 'none' });
+						(files) =>
-                    } else {
+							setUploadState({
-                        setUploadState({ type: 'attached', files: uploadState.files.filter((_, i) => index !== i) });
+								type: "attached",
+								files: [...uploadState.files, ...files],
+							}),
+						() =>
+							openScreen({ id: "error", error: "FileTooLarge" }),
+						true,
+					)
 				}
-                }} />
+				removeFile={(index) => {
-            <ReplyBar channel={channel._id} replies={replies} setReplies={setReplies} />
+					if (uploadState.type !== "attached") return;
-            <Base>
+					if (uploadState.files.length === 1) {
-                { (permissions & ChannelPermission.UploadFiles) ? <Action>
+						setUploadState({ type: "none" });
-                    <FileUploader
+					} else {
-                        size={24}
+						setUploadState({
-                        behaviour='multi'
+							type: "attached",
-                        style='attachment'
+							files: uploadState.files.filter(
-                        fileType='attachments'
+								(_, i) => index !== i,
-                        maxFileSize={20_000_000}
+							),
-
+						});
-                        attached={uploadState.type !== 'none'}
-                        uploading={uploadState.type === 'uploading' || uploadState.type === 'sending'}
-
-                        remove={async () => setUploadState({ type: "none" })}
-                        onChange={files => setUploadState({ type: "attached", files })}
-                        cancel={() => uploadState.type === 'uploading' && uploadState.cancel.cancel("cancel")}
-                        append={files => {
-                            if (files.length === 0) return;
-
-                            if (uploadState.type === 'none') {
-                                setUploadState({ type: 'attached', files });
-                            } else if (uploadState.type === 'attached') {
-                                setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] });
 					}
 				}}
 			/>
-                </Action> : undefined }
+			<ReplyBar
+				channel={channel._id}
+				replies={replies}
+				setReplies={setReplies}
+			/>
+			<Base>
+				{permissions & ChannelPermission.UploadFiles ? (
+					<Action>
+						<FileUploader
+							size={24}
+							behaviour="multi"
+							style="attachment"
+							fileType="attachments"
+							maxFileSize={20_000_000}
+							attached={uploadState.type !== "none"}
+							uploading={
+								uploadState.type === "uploading" ||
+								uploadState.type === "sending"
+							}
+							remove={async () =>
+								setUploadState({ type: "none" })
+							}
+							onChange={(files) =>
+								setUploadState({ type: "attached", files })
+							}
+							cancel={() =>
+								uploadState.type === "uploading" &&
+								uploadState.cancel.cancel("cancel")
+							}
+							append={(files) => {
+								if (files.length === 0) return;
+
+								if (uploadState.type === "none") {
+									setUploadState({ type: "attached", files });
+								} else if (uploadState.type === "attached") {
+									setUploadState({
+										type: "attached",
+										files: [...uploadState.files, ...files],
+									});
+								}
+							}}
+						/>
+					</Action>
+				) : undefined}
 				<TextAreaAutoSize
 					autoFocus
 					hideBorder
 					maxRows={5}
 					padding={14}
 					id="message"
-                    value={draft ?? ''}
+					value={draft ?? ""}
 					onKeyUp={onKeyUp}
-                    onKeyDown={e => {
+					onKeyDown={(e) => {
 						if (onKeyDown(e)) return;
 
 						if (
@@ -350,7 +435,11 @@ function MessageBox({ channel, draft }: Props) {
 							return;
 						}
 
-                        if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) {
+						if (
+							!e.shiftKey &&
+							e.key === "Enter" &&
+							!isTouchscreenDevice
+						) {
 							e.preventDefault();
 							return send();
 						}
@@ -358,31 +447,50 @@ function MessageBox({ channel, draft }: Props) {
 						debouncedStopTyping(true);
 					}}
 					placeholder={
-                        channel.channel_type === "DirectMessage" ? translate("app.main.channel.message_who", {
+						channel.channel_type === "DirectMessage"
-                            person: client.users.get(client.channels.getRecipient(channel._id))?.username })
+							? translate("app.main.channel.message_who", {
-                        : channel.channel_type === "SavedMessages" ? translate("app.main.channel.message_saved")
+									person: client.users.get(
-                        : translate("app.main.channel.message_where", { channel_name: channel.name })
+										client.channels.getRecipient(
+											channel._id,
+										),
+									)?.username,
+							  })
+							: channel.channel_type === "SavedMessages"
+							? translate("app.main.channel.message_saved")
+							: translate("app.main.channel.message_where", {
+									channel_name: channel.name,
+							  })
 					}
-                    disabled={uploadState.type === 'uploading' || uploadState.type === 'sending'}
+					disabled={
-                    onChange={e => {
+						uploadState.type === "uploading" ||
+						uploadState.type === "sending"
+					}
+					onChange={(e) => {
 						setMessage(e.currentTarget.value);
 						startTyping();
 						onChange(e);
 					}}
 					onFocus={onFocus}
-                    onBlur={onBlur} />
+					onBlur={onBlur}
-                { isTouchscreenDevice && <Action>
+				/>
+				{isTouchscreenDevice && (
+					<Action>
 						<IconButton onClick={send}>
 							<Send size={20} />
 						</IconButton>
-                </Action> }
+					</Action>
+				)}
 			</Base>
 		</>
-    )
+	);
 }
 
-export default connectState<Omit<Props, "dispatch" | "draft">>(MessageBox, (state, { channel }) => {
+export default connectState<Omit<Props, "dispatch" | "draft">>(
+	MessageBox,
+	(state, { channel }) => {
 		return {
-        draft: state.drafts[channel._id]
+			draft: state.drafts[channel._id],
-    }
+		};
-}, true)
+	},
+	true,
+);

src/components/common/messaging/SystemMessage.tsx

@@ -1,11 +1,15 @@
 import { User } from "revolt.js";
 import styled from "styled-components";
-import UserShort from "../user/UserShort";
+
-import { TextReact } from "../../../lib/i18n";
 import { attachContextMenu } from "preact-context-menu";
-import { MessageObject } from "../../../context/revoltjs/util";
+
-import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
+import { TextReact } from "../../../lib/i18n";
+
 import { useForceUpdate, useUser } from "../../../context/revoltjs/hooks";
+import { MessageObject } from "../../../context/revoltjs/util";
+
+import UserShort from "../user/UserShort";
+import MessageBase, { MessageDetail, MessageInfo } from "./MessageBase";
 
 const SystemContent = styled.div`
 	gap: 4px;
@@ -48,7 +52,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 				data = {
 					type: content.type,
 					user: useUser(content.id, ctx) as User,
-                    by: useUser(content.by, ctx) as User
+					by: useUser(content.by, ctx) as User,
 				};
 				break;
 			case "user_joined":
@@ -57,21 +61,21 @@ export function SystemMessage({ attachContext, message }: Props) {
 			case "user_banned":
 				data = {
 					type: content.type,
-                    user: useUser(content.id, ctx) as User
+					user: useUser(content.id, ctx) as User,
 				};
 				break;
 			case "channel_renamed":
 				data = {
 					type: "channel_renamed",
 					name: content.name,
-                    by: useUser(content.by, ctx) as User
+					by: useUser(content.by, ctx) as User,
 				};
 				break;
 			case "channel_description_changed":
 			case "channel_icon_changed":
 				data = {
 					type: content.type,
-                    by: useUser(content.by, ctx) as User
+					by: useUser(content.by, ctx) as User,
 				};
 				break;
 			default:
@@ -90,10 +94,12 @@ export function SystemMessage({ attachContext, message }: Props) {
 		case "user_remove":
 			children = (
 				<TextReact
-                    id={`app.main.channel.system.${data.type === 'user_added' ? "added_by" : "removed_by"}`}
+					id={`app.main.channel.system.${
+						data.type === "user_added" ? "added_by" : "removed_by"
+					}`}
 					fields={{
 						user: <UserShort user={data.user} />,
-                        other_user: <UserShort user={data.by} />
+						other_user: <UserShort user={data.by} />,
 					}}
 				/>
 			);
@@ -106,7 +112,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 				<TextReact
 					id={`app.main.channel.system.${data.type}`}
 					fields={{
-                        user: <UserShort user={data.user} />
+						user: <UserShort user={data.user} />,
 					}}
 				/>
 			);
@@ -117,7 +123,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 					id={`app.main.channel.system.channel_renamed`}
 					fields={{
 						user: <UserShort user={data.by} />,
-                        name: <b>{data.name}</b>
+						name: <b>{data.name}</b>,
 					}}
 				/>
 			);
@@ -128,7 +134,7 @@ export function SystemMessage({ attachContext, message }: Props) {
 				<TextReact
 					id={`app.main.channel.system.${data.type}`}
 					fields={{
-                        user: <UserShort user={data.by} />
+						user: <UserShort user={data.by} />,
 					}}
 				/>
 			);
@@ -137,9 +143,14 @@ export function SystemMessage({ attachContext, message }: Props) {
 
 	return (
 		<MessageBase
-            onContextMenu={attachContext ? attachContextMenu('Menu',
+			onContextMenu={
-                { message, contextualChannel: message.channel }
+				attachContext
-            ) : undefined}>
+					? attachContextMenu("Menu", {
+							message,
+							contextualChannel: message.channel,
+					  })
+					: undefined
+			}>
 			<MessageInfo>
 				<MessageDetail message={message} position="left" />
 			</MessageInfo>

src/components/common/messaging/attachments/Attachment.tsx

@@ -1,13 +1,16 @@
-import TextFile from "./TextFile";
-import { Text } from "preact-i18n";
-import classNames from "classnames";
-import styles from "./Attachment.module.scss";
-import AttachmentActions from "./AttachmentActions";
-import { useContext, useState } from "preact/hooks";
-import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
+
+import styles from "./Attachment.module.scss";
+import classNames from "classnames";
+import { Text } from "preact-i18n";
+import { useContext, useState } from "preact/hooks";
+
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
 import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import AttachmentActions from "./AttachmentActions";
+import TextFile from "./TextFile";
 
 interface Props {
 	attachment: AttachmentRJS;
@@ -21,21 +24,25 @@ export default function Attachment({ attachment, hasContent }: Props) {
 	const { openScreen } = useIntermediate();
 	const { filename, metadata } = attachment;
 	const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
-    const [ loaded, setLoaded ] = useState(false)
+	const [loaded, setLoaded] = useState(false);
-
-    const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
 
+	const url = client.generateFileURL(
+		attachment,
+		{ width: MAX_ATTACHMENT_WIDTH * 1.5 },
+		true,
+	);
 
 	switch (metadata.type) {
 		case "Image": {
 			return (
 				<div
 					className={styles.container}
-                    onClick={() => spoiler && setSpoiler(false)}
+					onClick={() => spoiler && setSpoiler(false)}>
-                >
 					{spoiler && (
 						<div className={styles.overflow}>
-                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
+							<span>
+								<Text id="app.main.channel.misc.spoiler_attachment" />
+							</span>
 						</div>
 					)}
 					<img
@@ -45,13 +52,16 @@ export default function Attachment({ attachment, hasContent }: Props) {
 						height={metadata.height}
 						data-spoiler={spoiler}
 						data-has-content={hasContent}
-                        className={classNames(styles.attachment, styles.image, loaded && styles.loaded)}
+						className={classNames(
+							styles.attachment,
+							styles.image,
+							loaded && styles.loaded,
+						)}
 						onClick={() =>
 							openScreen({ id: "image_viewer", attachment })
 						}
-                        onMouseDown={ev =>
+						onMouseDown={(ev) =>
-                            ev.button === 1 &&
+							ev.button === 1 && window.open(url, "_blank")
-                            window.open(url, "_blank")
 						}
 						onLoad={() => setLoaded(true)}
 					/>
@@ -62,8 +72,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
 			return (
 				<div
 					className={classNames(styles.attachment, styles.audio)}
-                    data-has-content={hasContent}
+					data-has-content={hasContent}>
-                >
 					<AttachmentActions attachment={attachment} />
 					<audio src={url} controls />
 				</div>
@@ -76,14 +85,15 @@ export default function Attachment({ attachment, hasContent }: Props) {
 					onClick={() => spoiler && setSpoiler(false)}>
 					{spoiler && (
 						<div className={styles.overflow}>
-                            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
+							<span>
+								<Text id="app.main.channel.misc.spoiler_attachment" />
+							</span>
 						</div>
 					)}
 					<div
 						data-spoiler={spoiler}
 						data-has-content={hasContent}
-                        className={classNames(styles.attachment, styles.video)}
+						className={classNames(styles.attachment, styles.video)}>
-                    >
 						<AttachmentActions attachment={attachment} />
 						<video
 							src={url}
@@ -91,9 +101,8 @@ export default function Attachment({ attachment, hasContent }: Props) {
 							height={metadata.height}
 							className={classNames(loaded && styles.loaded)}
 							controls
-                            onMouseDown={ev =>
+							onMouseDown={(ev) =>
-                                ev.button === 1 &&
+								ev.button === 1 && window.open(url, "_blank")
-                                window.open(url, "_blank")
 							}
 							onLoadedMetadata={() => setLoaded(true)}
 						/>
@@ -101,12 +110,11 @@ export default function Attachment({ attachment, hasContent }: Props) {
 				</div>
 			);
 		}
-        case 'Text': {
+		case "Text": {
 			return (
 				<div
 					className={classNames(styles.attachment, styles.text)}
-                    data-has-content={hasContent}
+					data-has-content={hasContent}>
-                >
 					<TextFile attachment={attachment} />
 					<AttachmentActions attachment={attachment} />
 				</div>
@@ -116,8 +124,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
 			return (
 				<div
 					className={classNames(styles.attachment, styles.file)}
-                    data-has-content={hasContent}
+					data-has-content={hasContent}>
-                >
 					<AttachmentActions attachment={attachment} />
 				</div>
 			);

src/components/common/messaging/attachments/AttachmentActions.tsx

@@ -1,11 +1,21 @@
-import { useContext } from 'preact/hooks';
+import {
-import styles from './Attachment.module.scss';
+	Download,
-import IconButton from '../../../ui/IconButton';
+	LinkExternal,
+	File,
+	Headphone,
+	Video,
+} from "@styled-icons/boxicons-regular";
 import { Attachment } from "revolt.js/dist/api/objects";
-import { determineFileSize } from '../../../../lib/fileSize';
+
-import { AppContext } from '../../../../context/revoltjs/RevoltClient';
+import styles from "./Attachment.module.scss";
-import { Download, LinkExternal, File, Headphone, Video } from '@styled-icons/boxicons-regular';
+import classNames from "classnames";
-import classNames from 'classnames';
+import { useContext } from "preact/hooks";
+
+import { determineFileSize } from "../../../../lib/fileSize";
+
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+
+import IconButton from "../../../ui/IconButton";
 
 interface Props {
 	attachment: Attachment;
@@ -17,67 +27,89 @@ export default function AttachmentActions({ attachment }: Props) {
 
 	const url = client.generateFileURL(attachment)!;
 	const open_url = `${url}/${filename}`;
-    const download_url = url.replace('attachments', 'attachments/download')
+	const download_url = url.replace("attachments", "attachments/download");
 
-    // for some reason revolt.js says the size is a string even though it's a number
 	const filesize = determineFileSize(size);
 
 	switch (metadata.type) {
-        case 'Image':
+		case "Image":
 			return (
 				<div className={classNames(styles.actions, styles.imageAction)}>
 					<span className={styles.filename}>{filename}</span>
-                    <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
+					<span className={styles.filesize}>
-                    <a href={open_url} target="_blank" className={styles.iconType} >
+						{metadata.width + "x" + metadata.height} ({filesize})
+					</span>
+					<a
+						href={open_url}
+						target="_blank"
+						className={styles.iconType}>
 						<IconButton>
 							<LinkExternal size={24} />
 						</IconButton>
 					</a>
-                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
+					<a
+						href={download_url}
+						className={styles.downloadIcon}
+						download
+						target="_blank">
 						<IconButton>
 							<Download size={24} />
 						</IconButton>
 					</a>
 				</div>
-            )
+			);
-        case 'Audio':
+		case "Audio":
 			return (
 				<div className={classNames(styles.actions, styles.audioAction)}>
 					<Headphone size={24} className={styles.iconType} />
 					<span className={styles.filename}>{filename}</span>
 					<span className={styles.filesize}>{filesize}</span>
-                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
+					<a
+						href={download_url}
+						className={styles.downloadIcon}
+						download
+						target="_blank">
 						<IconButton>
 							<Download size={24} />
 						</IconButton>
 					</a>
 				</div>
-            )
+			);
-        case 'Video':
+		case "Video":
 			return (
 				<div className={classNames(styles.actions, styles.videoAction)}>
 					<Video size={24} className={styles.iconType} />
 					<span className={styles.filename}>{filename}</span>
-                    <span className={styles.filesize}>{metadata.width + 'x' + metadata.height} ({filesize})</span>
+					<span className={styles.filesize}>
-                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
+						{metadata.width + "x" + metadata.height} ({filesize})
+					</span>
+					<a
+						href={download_url}
+						className={styles.downloadIcon}
+						download
+						target="_blank">
 						<IconButton>
 							<Download size={24} />
 						</IconButton>
 					</a>
 				</div>
-            )
+			);
 		default:
 			return (
 				<div className={styles.actions}>
 					<File size={24} className={styles.iconType} />
 					<span className={styles.filename}>{filename}</span>
 					<span className={styles.filesize}>{filesize}</span>
-                    <a href={download_url} className={styles.downloadIcon} download target="_blank">
+					<a
+						href={download_url}
+						className={styles.downloadIcon}
+						download
+						target="_blank">
 						<IconButton>
 							<Download size={24} />
 						</IconButton>
 					</a>
 				</div>
-            )
+			);
 	}
 }

src/components/common/messaging/attachments/MessageReply.tsx

@@ -1,18 +1,26 @@
-import { Text } from "preact-i18n";
-import UserShort from "../../user/UserShort";
-import styled, { css } from "styled-components";
-import Markdown from "../../../markdown/Markdown";
 import { Reply, File } from "@styled-icons/boxicons-regular";
-import { useUser } from "../../../../context/revoltjs/hooks";
+import styled, { css } from "styled-components";
+
+import { Text } from "preact-i18n";
+
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
+import { useUser } from "../../../../context/revoltjs/hooks";
+
+import Markdown from "../../../markdown/Markdown";
+import UserShort from "../../user/UserShort";
+
 interface Props {
-    channel: string
+	channel: string;
-    index: number
+	index: number;
-    id: string
+	id: string;
 }
 
-export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?: boolean }>`
+export const ReplyBase = styled.div<{
+	head?: boolean;
+	fail?: boolean;
+	preview?: boolean;
+}>`
 	gap: 4px;
 	display: flex;
 	font-size: 0.8em;
@@ -32,31 +40,39 @@ export const ReplyBase = styled.div<{ head?: boolean, fail?: boolean, preview?:
 		color: var(--tertiary-foreground);
 	}
 
-    ${ props => props.fail && css`
+	${(props) =>
+		props.fail &&
+		css`
 			color: var(--tertiary-foreground);
 		`}
 
-    ${ props => props.head && css`
+	${(props) =>
+		props.head &&
+		css`
 			margin-top: 12px;
 		`}
 
-    ${ props => props.preview && css`
+    ${(props) =>
+		props.preview &&
+		css`
 			margin-left: 0;
 		`}
 `;
 
 export function MessageReply({ index, channel, id }: Props) {
 	const view = useRenderState(channel);
-    if (view?.type !== 'RENDER') return null;
+	if (view?.type !== "RENDER") return null;
 
-    const message = view.messages.find(x => x._id === id);
+	const message = view.messages.find((x) => x._id === id);
 	if (!message) {
 		return (
 			<ReplyBase head={index === 0} fail>
 				<Reply size={16} />
-                <span><Text id="app.main.channel.misc.failed_load" /></span>
+				<span>
+					<Text id="app.main.channel.misc.failed_load" />
+				</span>
 			</ReplyBase>
-        )
+		);
 	}
 
 	const user = useUser(message.author);
@@ -65,8 +81,13 @@ export function MessageReply({ index, channel, id }: Props) {
 		<ReplyBase head={index === 0}>
 			<Reply size={16} />
 			<UserShort user={user} size={16} />
-            { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+			{message.attachments && message.attachments.length > 0 && (
-            <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
+				<File size={16} />
+			)}
+			<Markdown
+				disallowBigEmoji
+				content={(message.content as string).replace(/\n/g, " ")}
+			/>
 		</ReplyBase>
-    )
+	);
 }

src/components/common/messaging/attachments/TextFile.tsx

@@ -1,10 +1,16 @@
-import axios from 'axios';
+import axios from "axios";
-import Preloader from '../../../ui/Preloader';
+import { Attachment } from "revolt.js/dist/api/objects";
-import styles from './Attachment.module.scss';
+
-import { Attachment } from 'revolt.js/dist/api/objects';
+import styles from "./Attachment.module.scss";
-import { useContext, useEffect, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from "preact/hooks";
-import RequiresOnline from '../../../../context/revoltjs/RequiresOnline';
+
-import { AppContext, StatusContext } from '../../../../context/revoltjs/RevoltClient';
+import RequiresOnline from "../../../../context/revoltjs/RequiresOnline";
+import {
+	AppContext,
+	StatusContext,
+} from "../../../../context/revoltjs/RevoltClient";
+
+import Preloader from "../../../ui/Preloader";
 
 interface Props {
 	attachment: Attachment;
@@ -21,7 +27,7 @@ export default function TextFile({ attachment }: Props) {
 	const url = client.generateFileURL(attachment)!;
 
 	useEffect(() => {
-        if (typeof content !== 'undefined') return;
+		if (typeof content !== "undefined") return;
 		if (loading) return;
 		setLoading(true);
 
@@ -30,28 +36,37 @@ export default function TextFile({ attachment }: Props) {
 			setContent(cached);
 			setLoading(false);
 		} else {
-            axios.get(url)
+			axios
-                .then(res => {
+				.get(url)
+				.then((res) => {
 					setContent(res.data);
 					fileCache[attachment._id] = res.data;
 					setLoading(false);
 				})
 				.catch(() => {
-                    console.error("Failed to load text file. [", attachment._id, "]");
+					console.error(
-                    setLoading(false)
+						"Failed to load text file. [",
-                })
+						attachment._id,
+						"]",
+					);
+					setLoading(false);
+				});
 		}
 	}, [content, loading, status]);
 
 	return (
-        <div className={styles.textContent} data-loading={typeof content === 'undefined'}>
+		<div
-            {
+			className={styles.textContent}
-                content ?
+			data-loading={typeof content === "undefined"}>
-                    <pre><code>{ content }</code></pre>
+			{content ? (
-                    : <RequiresOnline>
+				<pre>
+					<code>{content}</code>
+				</pre>
+			) : (
+				<RequiresOnline>
 					<Preloader type="ring" />
 				</RequiresOnline>
-            }
+			)}
 		</div>
-    )
+	);
 }

src/components/common/messaging/bars/FilePreview.tsx

@@ -1,14 +1,17 @@
-import { Text } from "preact-i18n";
-import styled from "styled-components";
-import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
-import { useEffect, useState } from 'preact/hooks';
-import { determineFileSize } from '../../../../lib/fileSize';
 import { XCircle, Plus, Share, X, File } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import { determineFileSize } from "../../../../lib/fileSize";
+
+import { CAN_UPLOAD_AT_ONCE, UploadState } from "../MessageBox";
 
 interface Props {
-    state: UploadState,
+	state: UploadState;
-    addFile: () => void,
+	addFile: () => void;
-    removeFile: (index: number) => void
+	removeFile: (index: number) => void;
 }
 
 const Container = styled.div`
@@ -37,7 +40,7 @@ const Entry = styled.div`
 
 	span.fn {
 		margin: auto;
-        font-size: .8em;
+		font-size: 0.8em;
 		overflow: hidden;
 		max-width: 180px;
 		text-align: center;
@@ -47,7 +50,7 @@ const Entry = styled.div`
 	}
 
 	span.size {
-        font-size: .6em;
+		font-size: 0.6em;
 		color: var(--tertiary-foreground);
 		text-align: center;
 	}
@@ -97,7 +100,10 @@ const PreviewBox = styled.div`
 	cursor: pointer;
 	border-radius: 4px;
 
-    .icon, .overlay { grid-area: main }
+	.icon,
+	.overlay {
+		grid-area: main;
+	}
 
 	.icon {
 		height: 100px;
@@ -127,23 +133,34 @@ const PreviewBox = styled.div`
 			background-color: rgba(0, 0, 0, 0.8);
 		}
 	}
-` 
+`;
 
-function FileEntry({ file, remove, index }: { file: File, remove?: () => void, index: number }) {
+function FileEntry({
-    if (!file.type.startsWith('image/')) return (
+	file,
-        <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
+	remove,
+	index,
+}: {
+	file: File;
+	remove?: () => void;
+	index: number;
+}) {
+	if (!file.type.startsWith("image/"))
+		return (
+			<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
 				<PreviewBox onClick={remove}>
 					<EmptyEntry className="icon">
 						<File size={36} />
 					</EmptyEntry>
-                <div class="overlay"><XCircle size={36} /></div>
+					<div class="overlay">
+						<XCircle size={36} />
+					</div>
 				</PreviewBox>
 				<span class="fn">{file.name}</span>
 				<span class="size">{determineFileSize(file.size)}</span>
 			</Entry>
 		);
 
-    const [ url, setURL ] = useState('');
+	const [url, setURL] = useState("");
 
 	useEffect(() => {
 		let url: string = URL.createObjectURL(file);
@@ -152,43 +169,65 @@ function FileEntry({ file, remove, index }: { file: File, remove?: () => void, i
 	}, [file]);
 
 	return (
-        <Entry className={index >= CAN_UPLOAD_AT_ONCE ? 'fade' : ''}>
+		<Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
 			<PreviewBox onClick={remove}>
 				<img class="icon" src={url} alt={file.name} />
-                <div class="overlay"><XCircle size={36} /></div>
+				<div class="overlay">
+					<XCircle size={36} />
+				</div>
 			</PreviewBox>
 			<span class="fn">{file.name}</span>
 			<span class="size">{determineFileSize(file.size)}</span>
 		</Entry>
-    )
+	);
 }
 
 export default function FilePreview({ state, addFile, removeFile }: Props) {
-    if (state.type === 'none') return null;
+	if (state.type === "none") return null;
 
 	return (
 		<Container>
 			<Carousel>
-                { state.files.map((file, index) =>
+				{state.files.map((file, index) => (
 					<>
 						{index === CAN_UPLOAD_AT_ONCE && <Divider />}
-                        <FileEntry index={index} file={file} key={file.name} remove={state.type === 'attached' ? () => removeFile(index) : undefined} />
+						<FileEntry
+							index={index}
+							file={file}
+							key={file.name}
+							remove={
+								state.type === "attached"
+									? () => removeFile(index)
+									: undefined
+							}
+						/>
 					</>
+				))}
+				{state.type === "attached" && (
+					<EmptyEntry onClick={addFile}>
+						<Plus size={48} />
+					</EmptyEntry>
 				)}
-                { state.type === 'attached' && <EmptyEntry onClick={addFile}><Plus size={48} /></EmptyEntry> }
 			</Carousel>
-            { state.type === 'uploading' && <Description>
+			{state.type === "uploading" && (
+				<Description>
 					<Share size={24} />
-                <Text id="app.main.channel.uploading_file" /> ({state.percent}%)
+					<Text id="app.main.channel.uploading_file" /> (
-            </Description> }
+					{state.percent}%)
-            { state.type === 'sending' && <Description>
+				</Description>
+			)}
+			{state.type === "sending" && (
+				<Description>
 					<Share size={24} />
 					Sending...
-            </Description> }
+				</Description>
-            { state.type === 'failed' && <Description>
+			)}
+			{state.type === "failed" && (
+				<Description>
 					<X size={24} />
 					<Text id={`error.${state.error}`} />
-            </Description> }
+				</Description>
+			)}
 		</Container>
 	);
 }

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -1,7 +1,12 @@
-import { Text } from "preact-i18n";
-import styled from "styled-components";
 import { DownArrow } from "@styled-icons/boxicons-regular";
-import { SingletonMessageRenderer, useRenderState } from "../../../../lib/renderer/Singleton";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+import {
+	SingletonMessageRenderer,
+	useRenderState,
+} from "../../../../lib/renderer/Singleton";
 
 const Bar = styled.div`
 	z-index: 10;
@@ -20,7 +25,7 @@ const Bar = styled.div`
 		color: var(--secondary-foreground);
 		background: var(--secondary-background);
 		justify-content: space-between;
-        transition: color ease-in-out .08s;
+		transition: color ease-in-out 0.08s;
 
 		> div {
 			display: flex;
@@ -40,14 +45,20 @@ const Bar = styled.div`
 
 export default function JumpToBottom({ id }: { id: string }) {
 	const view = useRenderState(id);
-    if (!view || view.type !== 'RENDER' || view.atBottom) return null;
+	if (!view || view.type !== "RENDER" || view.atBottom) return null;
 
 	return (
 		<Bar>
-            <div onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
+			<div
-                <div><Text id="app.main.channel.misc.viewing_old" /></div>
+				onClick={() => SingletonMessageRenderer.jumpToBottom(id, true)}>
-                <div><Text id="app.main.channel.misc.jump_present" /> <DownArrow size={18}/></div>
+				<div>
+					<Text id="app.main.channel.misc.viewing_old" />
+				</div>
+				<div>
+					<Text id="app.main.channel.misc.jump_present" />{" "}
+					<DownArrow size={18} />
+				</div>
 			</div>
 		</Bar>
-    )
+	);
 }

src/components/common/messaging/bars/ReplyBar.tsx

@@ -1,20 +1,31 @@
-import { Text } from "preact-i18n";
+import {
+	At,
+	Reply as ReplyIcon,
+	File,
+	XCircle,
+} from "@styled-icons/boxicons-regular";
 import styled from "styled-components";
-import UserShort from "../../user/UserShort";
+
-import IconButton from "../../../ui/IconButton";
+import { Text } from "preact-i18n";
-import Markdown from "../../../markdown/Markdown";
 import { StateUpdater, useEffect } from "preact/hooks";
-import { ReplyBase } from "../attachments/MessageReply";
+
-import { Reply } from "../../../../redux/reducers/queue";
-import { useUsers } from "../../../../context/revoltjs/hooks";
 import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { useRenderState } from "../../../../lib/renderer/Singleton";
-import { At, Reply as ReplyIcon, File, XCircle } from "@styled-icons/boxicons-regular";
+
+import { Reply } from "../../../../redux/reducers/queue";
+
+import { useUsers } from "../../../../context/revoltjs/hooks";
+
+import IconButton from "../../../ui/IconButton";
+
+import Markdown from "../../../markdown/Markdown";
+import UserShort from "../../user/UserShort";
+import { ReplyBase } from "../attachments/MessageReply";
 
 interface Props {
-    channel: string,
+	channel: string;
-    replies: Reply[],
+	replies: Reply[];
-    setReplies: StateUpdater<Reply[]>
+	setReplies: StateUpdater<Reply[]>;
 }
 
 const Base = styled.div`
@@ -45,27 +56,39 @@ const Base = styled.div`
 const MAX_REPLIES = 5;
 export default function ReplyBar({ channel, replies, setReplies }: Props) {
 	useEffect(() => {
-        return internalSubscribe("ReplyBar", "add", id => replies.length < MAX_REPLIES && !replies.find(x => x.id === id) && setReplies([ ...replies, { id, mention: false } ]));
+		return internalSubscribe(
+			"ReplyBar",
+			"add",
+			(id) =>
+				replies.length < MAX_REPLIES &&
+				!replies.find((x) => x.id === id) &&
+				setReplies([...replies, { id, mention: false }]),
+		);
 	}, [replies]);
 
 	const view = useRenderState(channel);
-    if (view?.type !== 'RENDER') return null;
+	if (view?.type !== "RENDER") return null;
 
-    const ids = replies.map(x => x.id);
+	const ids = replies.map((x) => x.id);
-    const messages = view.messages.filter(x => ids.includes(x._id));
+	const messages = view.messages.filter((x) => ids.includes(x._id));
-    const users = useUsers(messages.map(x => x.author));
+	const users = useUsers(messages.map((x) => x.author));
 
 	return (
 		<div>
 			{replies.map((reply, index) => {
-                let message = messages.find(x => reply.id === x._id);
+				let message = messages.find((x) => reply.id === x._id);
 				// ! FIXME: better solution would be to
 				// ! have a hook for resolving messages from
 				// ! render state along with relevant users
 				// -> which then fetches any unknown messages
-                if (!message) return <span><Text id="app.main.channel.misc.failed_load" /></span>;
+				if (!message)
+					return (
+						<span>
+							<Text id="app.main.channel.misc.failed_load" />
+						</span>
+					);
 
-                let user = users.find(x => message!.author === x?._id);
+				let user = users.find((x) => message!.author === x?._id);
 				if (!user) return;
 
 				return (
@@ -73,22 +96,46 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
 						<ReplyBase preview>
 							<ReplyIcon size={22} />
 							<UserShort user={user} size={16} />
-                            { message.attachments && message.attachments.length > 0 && <File size={16} /> }
+							{message.attachments &&
-                            <Markdown disallowBigEmoji content={(message.content as string).replace(/\n/g, ' ')} />
+								message.attachments.length > 0 && (
+									<File size={16} />
+								)}
+							<Markdown
+								disallowBigEmoji
+								content={(message.content as string).replace(
+									/\n/g,
+									" ",
+								)}
+							/>
 						</ReplyBase>
 						<span class="actions">
-                            <IconButton onClick={() => setReplies(replies.map((_, i) => i === index ? { ..._, mention: !_.mention } : _))}>
+							<IconButton
+								onClick={() =>
+									setReplies(
+										replies.map((_, i) =>
+											i === index
+												? { ..._, mention: !_.mention }
+												: _,
+										),
+									)
+								}>
 								<span class="toggle">
-                                    <At size={16} /> { reply.mention ? 'ON' : 'OFF' }
+									<At size={16} />{" "}
+									{reply.mention ? "ON" : "OFF"}
 								</span>
 							</IconButton>
-                            <IconButton onClick={() => setReplies(replies.filter((_, i) => i !== index))}>
+							<IconButton
+								onClick={() =>
+									setReplies(
+										replies.filter((_, i) => i !== index),
+									)
+								}>
 								<XCircle size={16} />
 							</IconButton>
 						</span>
 					</Base>
-                )
+				);
 			})}
 		</div>
-    )
+	);
 }

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -1,14 +1,17 @@
-import { User } from 'revolt.js';
+import { User } from "revolt.js";
+import styled from "styled-components";
+
 import { Text } from "preact-i18n";
-import styled from 'styled-components';
+import { useContext } from "preact/hooks";
-import { useContext } from 'preact/hooks';
+
-import { connectState } from '../../../../redux/connector';
+import { connectState } from "../../../../redux/connector";
-import { useUsers } from '../../../../context/revoltjs/hooks';
+import { TypingUser } from "../../../../redux/reducers/typing";
-import { TypingUser } from '../../../../redux/reducers/typing';
+
-import { AppContext } from '../../../../context/revoltjs/RevoltClient';
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { useUsers } from "../../../../context/revoltjs/hooks";
 
 interface Props {
-    typing?: TypingUser[]
+	typing?: TypingUser[];
 }
 
 const Base = styled.div`
@@ -57,10 +60,13 @@ const Base = styled.div`
 export function TypingIndicator({ typing }: Props) {
 	if (typing && typing.length > 0) {
 		const client = useContext(AppContext);
-        const users = useUsers(typing.map(x => x.id))
+		const users = useUsers(typing.map((x) => x.id)).filter(
-            .filter(x => typeof x !== 'undefined') as User[];
+			(x) => typeof x !== "undefined",
+		) as User[];
 
-        users.sort((a, b) => a._id.toUpperCase().localeCompare(b._id.toUpperCase()));
+		users.sort((a, b) =>
+			a._id.toUpperCase().localeCompare(b._id.toUpperCase()),
+		);
 
 		let text;
 		if (users.length >= 5) {
@@ -72,7 +78,7 @@ export function TypingIndicator({ typing }: Props) {
 					id="app.main.channel.typing.multiple"
 					fields={{
 						user: usersCopy.pop()?.username,
-                        userlist: usersCopy.map(x => x.username).join(", ")
+						userlist: usersCopy.map((x) => x.username).join(", "),
 					}}
 				/>
 			);
@@ -89,9 +95,13 @@ export function TypingIndicator({ typing }: Props) {
 			<Base>
 				<div>
 					<div className="avatars">
-                        {users.map(user => (
+						{users.map((user) => (
 							<img
-                                src={client.users.getAvatarURL(user._id, { max_side: 256 }, true)}
+								src={client.users.getAvatarURL(
+									user._id,
+									{ max_side: 256 },
+									true,
+								)}
 							/>
 						))}
 					</div>
@@ -106,6 +116,6 @@ export function TypingIndicator({ typing }: Props) {
 
 export default connectState<{ id: string }>(TypingIndicator, (state, props) => {
 	return {
-        typing: state.typing && state.typing[props.id]
+		typing: state.typing && state.typing[props.id],
 	};
 });

src/components/common/messaging/embed/Embed.tsx

@@ -1,10 +1,13 @@
-import classNames from 'classnames';
-import EmbedMedia from './EmbedMedia';
-import styles from "./Embed.module.scss";
-import { useContext } from 'preact/hooks';
 import { Embed as EmbedRJS } from "revolt.js/dist/api/objects";
-import { useIntermediate } from '../../../../context/intermediate/Intermediate';
+
-import { MessageAreaWidthContext } from '../../../../pages/channels/messaging/MessageArea';
+import styles from "./Embed.module.scss";
+import classNames from "classnames";
+import { useContext } from "preact/hooks";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+
+import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+import EmbedMedia from "./EmbedMedia";
 
 interface Props {
 	embed: EmbedRJS;
@@ -19,58 +22,57 @@ export default function Embed({ embed }: Props) {
 	// ! FIXME: temp code
 	// ! add proxy function to client
 	function proxyImage(url: string) {
-        return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
+		return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
 	}
 
 	const { openScreen } = useIntermediate();
-    const maxWidth = Math.min(useContext(MessageAreaWidthContext) - CONTAINER_PADDING, MAX_EMBED_WIDTH);
+	const maxWidth = Math.min(
-
+		useContext(MessageAreaWidthContext) - CONTAINER_PADDING,
-    function calculateSize(w: number, h: number): { width: number, height: number } {
+		MAX_EMBED_WIDTH,
-        let limitingWidth = Math.min(
-            maxWidth,
-            w
 	);
 
-        let limitingHeight = Math.min(
+	function calculateSize(
-            MAX_EMBED_HEIGHT,
+		w: number,
-            h
+		h: number,
-        );
+	): { width: number; height: number } {
+		let limitingWidth = Math.min(maxWidth, w);
+
+		let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
 
 		// Calculate smallest possible WxH.
-        let width = Math.min(
+		let width = Math.min(limitingWidth, limitingHeight * (w / h));
-            limitingWidth,
-            limitingHeight * (w / h)
-        );
 
-        let height = Math.min(
+		let height = Math.min(limitingHeight, limitingWidth * (h / w));
-            limitingHeight,
-            limitingWidth * (h / w)
-        );
 
 		return { width, height };
 	}
 
 	switch (embed.type) {
-        case 'Website': {
+		case "Website": {
 			// Determine special embed size.
 			let mw, mh;
-            let largeMedia = (embed.special && embed.special.type !== 'None') || embed.image?.size === 'Large';
+			let largeMedia =
+				(embed.special && embed.special.type !== "None") ||
+				embed.image?.size === "Large";
 			switch (embed.special?.type) {
-                case 'YouTube':
+				case "YouTube":
-                case 'Bandcamp': {
+				case "Bandcamp": {
 					mw = embed.video?.width ?? 1280;
 					mh = embed.video?.height ?? 720;
 					break;
 				}
-                case 'Twitch': {
+				case "Twitch": {
 					mw = 1280;
 					mh = 720;
 					break;
 				}
 				default: {
-                    if (embed.image?.size === 'Preview') {
+					if (embed.image?.size === "Preview") {
 						mw = MAX_EMBED_WIDTH;
-                        mh = Math.min(embed.image.height ?? 0, MAX_PREVIEW_SIZE);
+						mh = Math.min(
+							embed.image.height ?? 0,
+							MAX_PREVIEW_SIZE,
+						);
 					} else {
 						mw = embed.image?.width ?? MAX_EMBED_WIDTH;
 						mh = embed.image?.height ?? 0;
@@ -83,46 +85,83 @@ export default function Embed({ embed }: Props) {
 				<div
 					className={classNames(styles.embed, styles.website)}
 					style={{
-                        borderInlineStartColor: embed.color ?? 'var(--tertiary-background)',
+						borderInlineStartColor:
-                        width: width + CONTAINER_PADDING
+							embed.color ?? "var(--tertiary-background)",
+						width: width + CONTAINER_PADDING,
 					}}>
 					<div>
-                        { embed.site_name && <div className={styles.siteinfo}>
+						{embed.site_name && (
-                            { embed.icon_url && <img className={styles.favicon} src={proxyImage(embed.icon_url)} draggable={false} onError={e => e.currentTarget.style.display = 'none'} /> }
+							<div className={styles.siteinfo}>
-                            <div className={styles.site}>{ embed.site_name } </div>
+								{embed.icon_url && (
-                        </div> }
+									<img
+										className={styles.favicon}
+										src={proxyImage(embed.icon_url)}
+										draggable={false}
+										onError={(e) =>
+											(e.currentTarget.style.display =
+												"none")
+										}
+									/>
+								)}
+								<div className={styles.site}>
+									{embed.site_name}{" "}
+								</div>
+							</div>
+						)}
 
 						{/*<span><a href={embed.url} target={"_blank"} className={styles.author}>Author</a></span>*/}
-                        { embed.title && <span><a href={embed.url} target={"_blank"} className={styles.title}>{ embed.title }</a></span> }
+						{embed.title && (
-                        { embed.description && <div className={styles.description}>{ embed.description }</div> }
+							<span>
+								<a
+									href={embed.url}
+									target={"_blank"}
+									className={styles.title}>
+									{embed.title}
+								</a>
+							</span>
+						)}
+						{embed.description && (
+							<div className={styles.description}>
+								{embed.description}
+							</div>
+						)}
 
-                        { largeMedia && <EmbedMedia embed={embed} height={height} /> }
+						{largeMedia && (
-                    </div>
+							<EmbedMedia embed={embed} height={height} />
-                    {
+						)}
-                        !largeMedia && <div>
-                            <EmbedMedia embed={embed} width={height * ((embed.image?.width ?? 0) / (embed.image?.height ?? 0))} height={height} />
 					</div>
+					{!largeMedia && (
+						<div>
+							<EmbedMedia
+								embed={embed}
+								width={
+									height *
+									((embed.image?.width ?? 0) /
+										(embed.image?.height ?? 0))
 								}
+								height={height}
+							/>
 						</div>
-            )
+					)}
+				</div>
+			);
 		}
-        case 'Image': {
+		case "Image": {
 			return (
-                <img className={classNames(styles.embed, styles.image)}
+				<img
+					className={classNames(styles.embed, styles.image)}
 					style={calculateSize(embed.width, embed.height)}
 					src={proxyImage(embed.url)}
 					type="text/html"
 					frameBorder="0"
-                    onClick={() =>
+					onClick={() => openScreen({ id: "image_viewer", embed })}
-                        openScreen({ id: "image_viewer", embed })
+					onMouseDown={(ev) =>
-                    }
+						ev.button === 1 && window.open(embed.url, "_blank")
-                    onMouseDown={ev =>
-                        ev.button === 1 &&
-                        window.open(embed.url, "_blank")
 					}
 				/>
-            )
+			);
 		}
-        default: return null;
+		default:
+			return null;
 	}
 }

src/components/common/messaging/embed/EmbedMedia.tsx

@@ -1,6 +1,8 @@
-import styles from './Embed.module.scss';
 import { Embed } from "revolt.js/dist/api/objects";
-import { useIntermediate } from '../../../../context/intermediate/Intermediate';
+
+import styles from "./Embed.module.scss";
+
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 
 interface Props {
 	embed: Embed;
@@ -12,47 +14,64 @@ export default function EmbedMedia({ embed, width, height }: Props) {
 	// ! FIXME: temp code
 	// ! add proxy function to client
 	function proxyImage(url: string) {
-        return 'https://jan.revolt.chat/proxy?url=' + encodeURIComponent(url);
+		return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
 	}
 
-    if (embed.type !== 'Website') return null;
+	if (embed.type !== "Website") return null;
 	const { openScreen } = useIntermediate();
 
 	switch (embed.special?.type) {
-        case 'YouTube': return (
+		case "YouTube":
+			return (
 				<iframe
 					src={`https://www.youtube-nocookie.com/embed/${embed.special.id}?modestbranding=1`}
 					allowFullScreen
-                style={{ height }} />
+					style={{ height }}
-        )
+				/>
-        case 'Twitch': return (
+			);
+		case "Twitch":
+			return (
 				<iframe
-                src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${embed.special.id}&parent=${window.location.hostname}&autoplay=false`}
+					src={`https://player.twitch.tv/?${embed.special.content_type.toLowerCase()}=${
+						embed.special.id
+					}&parent=${window.location.hostname}&autoplay=false`}
 					frameBorder="0"
 					allowFullScreen
 					scrolling="no"
-                style={{ height, }} />
+					style={{ height }}
-        )
+				/>
-        case 'Spotify': return (
+			);
+		case "Spotify":
+			return (
 				<iframe
 					src={`https://open.spotify.com/embed/${embed.special.content_type}/${embed.special.id}`}
 					frameBorder="0"
 					allowFullScreen
 					allowTransparency
-                style={{ height }} />
+					style={{ height }}
-        )
+				/>
-        case 'Soundcloud': return (
+			);
+		case "Soundcloud":
+			return (
 				<iframe
-                src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(embed.url!)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
+					src={`https://w.soundcloud.com/player/?url=${encodeURIComponent(
+						embed.url!,
+					)}&color=%23FF7F50&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true`}
 					frameBorder="0"
 					scrolling="no"
-                style={{ height }} />
+					style={{ height }}
-        )
+				/>
-        case 'Bandcamp': {
+			);
-            return <iframe
+		case "Bandcamp": {
-                src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${embed.special.id}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
+			return (
+				<iframe
+					src={`https://bandcamp.com/EmbeddedPlayer/${embed.special.content_type.toLowerCase()}=${
+						embed.special.id
+					}/size=large/bgcol=181a1b/linkcol=056cc4/tracklist=false/transparent=true/`}
 					seamless
-                style={{ height }} />;
+					style={{ height }}
+				/>
+			);
 		}
 		default: {
 			if (embed.image) {
@@ -63,12 +82,15 @@ export default function EmbedMedia({ embed, width, height }: Props) {
 						src={proxyImage(url)}
 						style={{ width, height }}
 						onClick={() =>
-                            openScreen({ id: "image_viewer", embed: embed.image })
+							openScreen({
+								id: "image_viewer",
+								embed: embed.image,
+							})
 						}
-                        onMouseDown={ev =>
+						onMouseDown={(ev) =>
-                            ev.button === 1 &&
+							ev.button === 1 && window.open(url, "_blank")
-                            window.open(url, "_blank")
+						}
-                        } />
+					/>
 				);
 			}
 		}

src/components/common/messaging/embed/EmbedMediaActions.tsx

@@ -1,20 +1,24 @@
-import styles from './Embed.module.scss';
+import { LinkExternal } from "@styled-icons/boxicons-regular";
-import IconButton from '../../../ui/IconButton';
-import { LinkExternal } from '@styled-icons/boxicons-regular';
 import { EmbedImage } from "revolt.js/dist/api/objects";
 
+import styles from "./Embed.module.scss";
+
+import IconButton from "../../../ui/IconButton";
+
 interface Props {
 	embed: EmbedImage;
 }
 
 export default function EmbedMediaActions({ embed }: Props) {
-    const filename = embed.url.split('/').pop();
+	const filename = embed.url.split("/").pop();
 
 	return (
 		<div className={styles.actions}>
 			<div className={styles.info}>
 				<span className={styles.filename}>{filename}</span>
-                <span className={styles.filesize}>{embed.width + 'x' + embed.height}</span>
+				<span className={styles.filesize}>
+					{embed.width + "x" + embed.height}
+				</span>
 			</div>
 			<a href={embed.url} target="_blank">
 				<IconButton>
@@ -22,5 +26,5 @@ export default function EmbedMediaActions({ embed }: Props) {
 				</IconButton>
 			</a>
 		</div>
-    )
+	);
 }

src/components/common/user/UserCheckbox.tsx

@@ -1,7 +1,9 @@
 import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
+
 import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
+import UserIcon from "./UserIcon";
+
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {

src/components/common/user/UserHeader.tsx

@@ -1,18 +1,23 @@
-import Tooltip from "../Tooltip";
-import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
-import { Text } from "preact-i18n";
-import Header from "../../ui/Header";
-import UserStatus from './UserStatus';
-import styled from "styled-components";
-import { Localizer } from 'preact-i18n';
-import { Link } from "react-router-dom";
-import IconButton from "../../ui/IconButton";
 import { Cog } from "@styled-icons/boxicons-solid";
+import { Link } from "react-router-dom";
+import { User } from "revolt.js";
+import styled from "styled-components";
+
 import { openContextMenu } from "preact-context-menu";
+import { Text } from "preact-i18n";
+import { Localizer } from "preact-i18n";
+
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
+import Header from "../../ui/Header";
+import IconButton from "../../ui/IconButton";
+
+import Tooltip from "../Tooltip";
+import UserIcon from "./UserIcon";
+import UserStatus from "./UserStatus";
+
 const HeaderBase = styled.div`
 	gap: 0;
 	flex-grow: 1;
@@ -41,7 +46,7 @@ const HeaderBase = styled.div`
 `;
 
 interface Props {
-    user: User
+	user: User;
 }
 
 export default function UserHeader({ user }: Props) {
@@ -52,24 +57,28 @@ export default function UserHeader({ user }: Props) {
 			<HeaderBase>
 				<Localizer>
 					<Tooltip content={<Text id="app.special.copy_username" />}>
-                        <span className="username"
+						<span
+							className="username"
 							onClick={() => writeClipboard(user.username)}>
 							@{user.username}
 						</span>
 					</Tooltip>
 				</Localizer>
-                <span className="status"
+				<span
+					className="status"
 					onClick={() => openContextMenu("Status")}>
 					<UserStatus user={user} />
 				</span>
 			</HeaderBase>
-            { !isTouchscreenDevice && <div className="actions">
+			{!isTouchscreenDevice && (
+				<div className="actions">
 					<Link to="/settings">
 						<IconButton>
 							<Cog size={24} />
 						</IconButton>
 					</Link>
-            </div> }
+				</div>
+			)}
 		</Header>
-    )
+	);
 }

src/components/common/user/UserIcon.tsx

@@ -1,12 +1,16 @@
-import { User } from "revolt.js";
-import { useContext } from "preact/hooks";
 import { MicrophoneOff } from "@styled-icons/boxicons-regular";
-import styled, { css } from "styled-components";
+import { User } from "revolt.js";
 import { Users } from "revolt.js/dist/api/objects";
+import styled, { css } from "styled-components";
+
+import { useContext } from "preact/hooks";
+
 import { ThemeContext } from "../../../context/Theme";
-import IconBase, { IconBaseProps } from "../IconBase";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
+import IconBase, { IconBaseProps } from "../IconBase";
+import fallback from "../assets/user.png";
+
 type VoiceStatus = "muted";
 interface Props extends IconBaseProps<User> {
 	mask?: string;
@@ -17,17 +21,13 @@ interface Props extends IconBaseProps<User> {
 export function useStatusColour(user?: User) {
 	const theme = useContext(ThemeContext);
 
-    return (
+	return user?.online && user?.status?.presence !== Users.Presence.Invisible
-        user?.online &&
-            user?.status?.presence !== Users.Presence.Invisible
 		? user?.status?.presence === Users.Presence.Idle
 			? theme["status-away"]
-                    : user?.status?.presence ===
+			: user?.status?.presence === Users.Presence.Busy
-                        Users.Presence.Busy
 			? theme["status-busy"]
 			: theme["status-online"]
-                : theme["status-invisible"]
+		: theme["status-invisible"];
-    );
 }
 
 const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
@@ -43,46 +43,57 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
 		stroke: white;
 	}
 
-    ${ props => props.status === 'muted' && css`
+	${(props) =>
+		props.status === "muted" &&
+		css`
 			background: var(--error);
 		`}
 `;
 
-import fallback from '../assets/user.png';
+export default function UserIcon(
-
+	props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>,
-export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
+) {
 	const client = useContext(AppContext);
 
-    const { target, attachment, size, voice, status, animate, mask, children, as, ...svgProps } = props;
+	const {
-    const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
+		target,
-        ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
+		attachment,
+		size,
+		voice,
+		status,
+		animate,
+		mask,
+		children,
+		as,
+		...svgProps
+	} = props;
+	const iconURL =
+		client.generateFileURL(
+			target?.avatar ?? attachment,
+			{ max_side: 256 },
+			animate,
+		) ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
 
 	return (
-        <IconBase {...svgProps}
+		<IconBase
+			{...svgProps}
 			width={size}
 			height={size}
 			aria-hidden="true"
 			viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}>
+			<foreignObject
-                {
+				x="0"
-                    <img src={iconURL}
+				y="0"
-                        draggable={false} />
+				width="32"
-                }
+				height="32"
+				mask={mask ?? (status ? "url(#user)" : undefined)}>
+				{<img src={iconURL} draggable={false} />}
 			</foreignObject>
 			{props.status && (
-                <circle
+				<circle cx="27" cy="27" r="5" fill={useStatusColour(target)} />
-                    cx="27"
-                    cy="27"
-                    r="5"
-                    fill={useStatusColour(target)}
-                />
 			)}
 			{props.voice && (
-                <foreignObject
+				<foreignObject x="22" y="22" width="10" height="10">
-                    x="22"
-                    y="22"
-                    width="10"
-                    height="10">
 					<VoiceIndicator status={props.voice}>
 						{props.voice === "muted" && <MicrophoneOff size={6} />}
 					</VoiceIndicator>

src/components/common/user/UserShort.tsx

@@ -1,14 +1,31 @@
 import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
+
 import { Text } from "preact-i18n";
 
-export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
+import UserIcon from "./UserIcon";
-    return <span {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</span>;
+
+export function Username({
+	user,
+	...otherProps
+}: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
+	return (
+		<span {...otherProps}>
+			{user?.username ?? <Text id="app.main.channel.unknown_user" />}
+		</span>
+	);
 }
 
-export default function UserShort({ user, size }: { user?: User, size?: number }) {
+export default function UserShort({
-    return <>
+	user,
+	size,
+}: {
+	user?: User;
+	size?: number;
+}) {
+	return (
+		<>
 			<UserIcon size={size ?? 24} target={user} />
 			<Username user={user} />
-    </>;
+		</>
+	);
 }

src/components/common/user/UserStatus.tsx

@@ -1,7 +1,8 @@
 import { User } from "revolt.js";
-import { Text } from "preact-i18n";
 import { Users } from "revolt.js/dist/api/objects";
 
+import { Text } from "preact-i18n";
+
 interface Props {
 	user: User;
 }

src/components/markdown/Markdown.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy } from "preact/compat";
 
-const Renderer = lazy(() => import('./Renderer'));
+const Renderer = lazy(() => import("./Renderer"));
 
 export interface MarkdownProps {
 	content?: string;
@@ -13,5 +13,5 @@ export default function Markdown(props: MarkdownProps) {
 		<Suspense fallback={props.content}>
 			<Renderer {...props} />
 		</Suspense>
-    )
+	);
 }

src/components/markdown/Renderer.tsx

@@ -1,42 +1,43 @@
-import MarkdownIt from "markdown-it";
-import { RE_MENTIONS } from "revolt.js";
-import { useContext } from "preact/hooks";
-import { MarkdownProps } from "./Markdown";
-import styles from "./Markdown.module.scss";
-import { generateEmoji } from "../common/Emoji";
-import { internalEmit } from "../../lib/eventEmitter";
-import { emojiDictionary } from "../../assets/emojis";
-import { AppContext } from "../../context/revoltjs/RevoltClient";
-
-import Prism from "prismjs";
-import "katex/dist/katex.min.css";
-import "prismjs/themes/prism-tomorrow.css";
-
 import MarkdownKatex from "@traptitech/markdown-it-katex";
 import MarkdownSpoilers from "@traptitech/markdown-it-spoiler";
-
+import "katex/dist/katex.min.css";
+import MarkdownIt from "markdown-it";
 // @ts-ignore
 import MarkdownEmoji from "markdown-it-emoji/dist/markdown-it-emoji-bare";
 // @ts-ignore
-import MarkdownSup from "markdown-it-sup";
-// @ts-ignore
 import MarkdownSub from "markdown-it-sub";
+// @ts-ignore
+import MarkdownSup from "markdown-it-sup";
+import Prism from "prismjs";
+import "prismjs/themes/prism-tomorrow.css";
+import { RE_MENTIONS } from "revolt.js";
+
+import styles from "./Markdown.module.scss";
+import { useContext } from "preact/hooks";
+
+import { internalEmit } from "../../lib/eventEmitter";
+
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+
+import { generateEmoji } from "../common/Emoji";
+
+import { emojiDictionary } from "../../assets/emojis";
+import { MarkdownProps } from "./Markdown";
 
 // TODO: global.d.ts file for defining globals
 declare global {
 	interface Window {
-        copycode: (element: HTMLDivElement) => void
+		copycode: (element: HTMLDivElement) => void;
 	}
 }
 
-
 // Handler for code block copy.
 if (typeof window !== "undefined") {
 	window.copycode = function (element: HTMLDivElement) {
 		try {
 			let code = element.parentElement?.parentElement?.children[1];
 			if (code) {
-                navigator.clipboard.writeText(code.textContent?.trim() ?? '');
+				navigator.clipboard.writeText(code.textContent?.trim() ?? "");
 			}
 		} catch (e) {}
 	};
@@ -52,8 +53,10 @@ export const md: MarkdownIt = MarkdownIt({
 			return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
 		}
 
-        return `<pre class="code"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+		return `<pre class="code"><code>${md.utils.escapeHtml(
-    }
+			str,
+		)}</code></pre>`;
+	},
 })
 	.disable("image")
 	.use(MarkdownEmoji, { defs: emojiDictionary })
@@ -62,7 +65,7 @@ export const md: MarkdownIt = MarkdownIt({
 	.use(MarkdownSub)
 	.use(MarkdownKatex, {
 		throwOnError: false,
-    maxExpand: 0
+		maxExpand: 0,
 	});
 
 // ? Force links to open _blank.
@@ -76,7 +79,7 @@ const defaultRender =
 // TODO: global.d.ts file for defining globals
 declare global {
 	interface Window {
-        internalHandleURL: (element: HTMLAnchorElement) => void
+		internalHandleURL: (element: HTMLAnchorElement) => void;
 	}
 }
 
@@ -109,7 +112,7 @@ md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
 				// I'm sorry.
 				tokens[idx].attrPush([
 					"onclick",
-                    "internalHandleURL(this); return false"
+					"internalHandleURL(this); return false",
 				]);
 
 				if (url.pathname.startsWith("/@")) {
@@ -162,19 +165,21 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
 			}
 
 			return sub;
-        }
+		},
 	);
 
-    const useLargeEmojis = disallowBigEmoji ? false : content.replace(RE_TWEMOJI, '').trim().length === 0;
+	const useLargeEmojis = disallowBigEmoji
+		? false
+		: content.replace(RE_TWEMOJI, "").trim().length === 0;
 
 	return (
 		<span
 			className={styles.markdown}
 			dangerouslySetInnerHTML={{
-                __html: md.render(newContent)
+				__html: md.render(newContent),
 			}}
 			data-large-emojis={useLargeEmojis}
-            onClick={ev => {
+			onClick={(ev) => {
 				if (ev.target) {
 					let element = ev.currentTarget;
 					if (element.classList.contains("spoiler")) {

src/components/navigation/BottomNavigation.tsx

@@ -1,12 +1,16 @@
-import IconButton from "../ui/IconButton";
-import UserIcon from "../common/user/UserIcon";
-import styled, { css } from "styled-components";
-import { useSelf } from "../../context/revoltjs/hooks";
-import { useHistory, useLocation } from "react-router";
-import ConditionalLink from "../../lib/ConditionalLink";
 import { Message, Group } from "@styled-icons/boxicons-solid";
-import { LastOpened } from "../../redux/reducers/last_opened";
+import { useHistory, useLocation } from "react-router";
+import styled, { css } from "styled-components";
+
+import ConditionalLink from "../../lib/ConditionalLink";
+
 import { connectState } from "../../redux/connector";
+import { LastOpened } from "../../redux/reducers/last_opened";
+
+import { useSelf } from "../../context/revoltjs/hooks";
+
+import UserIcon from "../common/user/UserIcon";
+import IconButton from "../ui/IconButton";
 
 const NavigationBase = styled.div`
 	z-index: 100;
@@ -18,18 +22,22 @@ const NavigationBase = styled.div`
 const Button = styled.a<{ active: boolean }>`
 	flex: 1;
 
-    > a, > div, > a > div {
+	> a,
+	> div,
+	> a > div {
 		width: 100%;
 		height: 100%;
 	}
 
-    ${ props => props.active && css`
+	${(props) =>
+		props.active &&
+		css`
 			background: var(--hover);
 		`}
 `;
 
 interface Props {
-    lastOpened: LastOpened
+	lastOpened: LastOpened;
 }
 
 export function BottomNavigation({ lastOpened }: Props) {
@@ -37,7 +45,7 @@ export function BottomNavigation({ lastOpened }: Props) {
 	const history = useHistory();
 	const path = useLocation().pathname;
 
-    const channel_id = lastOpened['home'];
+	const channel_id = lastOpened["home"];
 
 	const friendsActive = path.startsWith("/friends");
 	const settingsActive = path.startsWith("/settings");
@@ -57,7 +65,7 @@ export function BottomNavigation({ lastOpened }: Props) {
 						if (channel_id) {
 							history.push(`/channel/${channel_id}`);
 						} else {
-                            history.push('/');
+							history.push("/");
 						}
 					}}>
 					<Message size={24} />
@@ -81,8 +89,8 @@ export function BottomNavigation({ lastOpened }: Props) {
 	);
 }
 
-export default connectState(BottomNavigation, state => {
+export default connectState(BottomNavigation, (state) => {
 	return {
-        lastOpened: state.lastOpened
+		lastOpened: state.lastOpened,
-    }
+	};
 });

src/components/navigation/LeftSidebar.tsx

@@ -1,9 +1,9 @@
 import { Route, Switch } from "react-router";
-import SidebarBase from "./SidebarBase";
 
+import SidebarBase from "./SidebarBase";
+import HomeSidebar from "./left/HomeSidebar";
 import ServerListSidebar from "./left/ServerListSidebar";
 import ServerSidebar from "./left/ServerSidebar";
-import HomeSidebar from "./left/HomeSidebar";
 
 export default function LeftSidebar() {
 	return (
@@ -29,4 +29,4 @@ export default function LeftSidebar() {
 			</Switch>
 		</SidebarBase>
 	);
-};
+}

src/components/navigation/RightSidebar.tsx

@@ -1,6 +1,6 @@
 import { Route, Switch } from "react-router";
-import SidebarBase from "./SidebarBase";
 
+import SidebarBase from "./SidebarBase";
 import MemberSidebar from "./right/MemberSidebar";
 
 export default function RightSidebar() {
@@ -16,4 +16,4 @@ export default function RightSidebar() {
 			</Switch>
 		</SidebarBase>
 	);
-};
+}

src/components/navigation/SidebarBase.tsx

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 export default styled.div`
@@ -18,7 +19,10 @@ export const GenericSidebarBase = styled.div<{ padding?: boolean }>`
 	background: var(--secondary-background);
 	border-end-start-radius: 8px;
 
-    ${ props => props.padding && isTouchscreenDevice && css`
+	${(props) =>
+		props.padding &&
+		isTouchscreenDevice &&
+		css`
 			padding-bottom: 50px;
 		`}
 `;

src/components/navigation/items/ButtonItem.tsx

@@ -1,48 +1,67 @@
-import classNames from 'classnames';
-import styles from "./Item.module.scss";
-import Tooltip from '../../common/Tooltip';
-import IconButton from '../../ui/IconButton';
-import { Localizer, Text } from "preact-i18n";
 import { X, Crown } from "@styled-icons/boxicons-regular";
-import { Children } from "../../../types/Preact";
-import UserIcon from '../../common/user/UserIcon';
-import ChannelIcon from '../../common/ChannelIcon';
-import UserStatus from '../../common/user/UserStatus';
-import { attachContextMenu } from 'preact-context-menu';
 import { Channels, Users } from "revolt.js/dist/api/objects";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import { useIntermediate } from '../../../context/intermediate/Intermediate';
-import { stopPropagation } from '../../../lib/stopPropagation';
 
-type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
+import styles from "./Item.module.scss";
-    active?: boolean
+import classNames from "classnames";
-    alert?: 'unread' | 'mention'
+import { attachContextMenu } from "preact-context-menu";
-    alertCount?: number
+import { Localizer, Text } from "preact-i18n";
-}
+
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+import { stopPropagation } from "../../../lib/stopPropagation";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+
+import ChannelIcon from "../../common/ChannelIcon";
+import Tooltip from "../../common/Tooltip";
+import UserIcon from "../../common/user/UserIcon";
+import UserStatus from "../../common/user/UserStatus";
+import IconButton from "../../ui/IconButton";
+
+import { Children } from "../../../types/Preact";
+
+type CommonProps = Omit<
+	JSX.HTMLAttributes<HTMLDivElement>,
+	"children" | "as"
+> & {
+	active?: boolean;
+	alert?: "unread" | "mention";
+	alertCount?: number;
+};
 
 type UserProps = CommonProps & {
-    user: Users.User,
+	user: Users.User;
-    context?: Channels.Channel,
+	context?: Channels.Channel;
-    channel?: Channels.DirectMessageChannel
+	channel?: Channels.DirectMessageChannel;
-}
+};
 
 export function UserButton(props: UserProps) {
-    const { active, alert, alertCount, user, context, channel, ...divProps } = props;
+	const { active, alert, alertCount, user, context, channel, ...divProps } =
+		props;
 	const { openScreen } = useIntermediate();
 
 	return (
-        <div {...divProps}
+		<div
+			{...divProps}
 			className={classNames(styles.item, styles.user)}
 			data-active={active}
-            data-alert={typeof alert === 'string'}
+			data-alert={typeof alert === "string"}
-            data-online={typeof channel !== 'undefined' || (user.online && user.status?.presence !== Users.Presence.Invisible)}
+			data-online={
-            onContextMenu={attachContextMenu('Menu', {
+				typeof channel !== "undefined" ||
+				(user.online &&
+					user.status?.presence !== Users.Presence.Invisible)
+			}
+			onContextMenu={attachContextMenu("Menu", {
 				user: user._id,
 				channel: channel?._id,
 				unread: alert,
-                contextualChannel: context?._id
+				contextualChannel: context?._id,
 			})}>
-            <UserIcon className={styles.avatar} target={user} size={32} status />
+			<UserIcon
+				className={styles.avatar}
+				target={user}
+				size={32}
+				status
+			/>
 			<div className={styles.name}>
 				<div>{user.username}</div>
 				{
@@ -60,56 +79,74 @@ export function UserButton(props: UserProps) {
 					context.owner === user._id && (
 						<Localizer>
 							<Tooltip
-                                content={
+								content={<Text id="app.main.groups.owner" />}>
-                                    <Text id="app.main.groups.owner" />
-                                }
-                            >
 								<Crown size={20} />
 							</Tooltip>
 						</Localizer>
 					)}
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
+				{alert && (
-                { !isTouchscreenDevice && channel &&
+					<div className={styles.alert} data-style={alert}>
-                    <IconButton className={styles.icon}
+						{alertCount}
-                        onClick={e => stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
+					</div>
+				)}
+				{!isTouchscreenDevice && channel && (
+					<IconButton
+						className={styles.icon}
+						onClick={(e) =>
+							stopPropagation(e) &&
+							openScreen({
+								id: "special_prompt",
+								type: "close_dm",
+								target: channel,
+							})
+						}>
 						<X size={24} />
 					</IconButton>
-                }
+				)}
 			</div>
 		</div>
-    )
+	);
 }
 
 type ChannelProps = CommonProps & {
-    channel: Channels.Channel & { unread?: string },
+	channel: Channels.Channel & { unread?: string };
-    user?: Users.User
+	user?: Users.User;
-    compact?: boolean
+	compact?: boolean;
-}
+};
 
 export function ChannelButton(props: ChannelProps) {
-    const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
+	const { active, alert, alertCount, channel, user, compact, ...divProps } =
+		props;
 
-    if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
+	if (channel.channel_type === "SavedMessages") throw "Invalid channel type.";
-    if (channel.channel_type === 'DirectMessage') {
+	if (channel.channel_type === "DirectMessage") {
-        if (typeof user === 'undefined') throw "No user provided.";
+		if (typeof user === "undefined") throw "No user provided.";
-        return <UserButton {...{ active, alert, channel, user }} />
+		return <UserButton {...{ active, alert, channel, user }} />;
 	}
 
 	const { openScreen } = useIntermediate();
 
 	return (
-        <div {...divProps}
+		<div
+			{...divProps}
 			data-active={active}
-            data-alert={typeof alert === 'string'}
+			data-alert={typeof alert === "string"}
 			aria-label={{}} /*FIXME: ADD ARIA LABEL*/
 			className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
+			onContextMenu={attachContextMenu("Menu", {
-            <ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
+				channel: channel._id,
+				unread: typeof channel.unread !== "undefined",
+			})}>
+			<ChannelIcon
+				className={styles.avatar}
+				target={channel}
+				size={compact ? 24 : 32}
+			/>
 			<div className={styles.name}>
 				<div>{channel.name}</div>
-                { channel.channel_type === 'Group' &&
+				{channel.channel_type === "Group" && (
 					<div className={styles.subText}>
-                        {(channel.last_message && alert) ? (
+						{channel.last_message && alert ? (
 							channel.last_message.short
 						) : (
 							<Text
@@ -119,40 +156,68 @@ export function ChannelButton(props: ChannelProps) {
 							/>
 						)}
 					</div>
-                }
+				)}
 			</div>
 			<div className={styles.button}>
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
+				{alert && (
+					<div className={styles.alert} data-style={alert}>
+						{alertCount}
+					</div>
+				)}
 				{!isTouchscreenDevice && channel.channel_type === "Group" && (
 					<IconButton
 						className={styles.icon}
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'leave_group', target: channel })}>
+						onClick={() =>
+							openScreen({
+								id: "special_prompt",
+								type: "leave_group",
+								target: channel,
+							})
+						}>
 						<X size={24} />
 					</IconButton>
 				)}
 			</div>
 		</div>
-    )
+	);
 }
 
 type ButtonProps = CommonProps & {
-    onClick?: () => void
+	onClick?: () => void;
-    children?: Children
+	children?: Children;
-    className?: string
+	className?: string;
-    compact?: boolean
+	compact?: boolean;
-}
+};
 
 export default function ButtonItem(props: ButtonProps) {
-    const { active, alert, alertCount, onClick, className, children, compact, ...divProps } = props;
+	const {
+		active,
+		alert,
+		alertCount,
+		onClick,
+		className,
+		children,
+		compact,
+		...divProps
+	} = props;
 
 	return (
-        <div {...divProps}
+		<div
-            className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
+			{...divProps}
+			className={classNames(
+				styles.item,
+				{ [styles.compact]: compact, [styles.normal]: !compact },
+				className,
+			)}
 			onClick={onClick}
 			data-active={active}
-            data-alert={typeof alert === 'string'}>
+			data-alert={typeof alert === "string"}>
 			<div className={styles.content}>{children}</div>
-                {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
+			{alert && (
+				<div className={styles.alert} data-style={alert}>
+					{alertCount}
 				</div>
-    )
+			)}
+		</div>
+	);
 }

src/components/navigation/items/ConnectionStatus.tsx

@@ -1,7 +1,12 @@
 import { Text } from "preact-i18n";
-import Banner from "../../ui/Banner";
 import { useContext } from "preact/hooks";
-import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
+
+import {
+	ClientStatus,
+	StatusContext,
+} from "../../../context/revoltjs/RevoltClient";
+
+import Banner from "../../ui/Banner";
 
 export default function ConnectionStatus() {
 	const status = useContext(StatusContext);

src/components/navigation/left/HomeSidebar.tsx

@@ -1,31 +1,44 @@
+import {
+	Home,
+	UserDetail,
+	Wrench,
+	Notepad,
+} from "@styled-icons/boxicons-solid";
+import { Link, Redirect, useLocation, useParams } from "react-router-dom";
+import { Channels } from "revolt.js/dist/api/objects";
+import { Users as UsersNS } from "revolt.js/dist/api/objects";
+
 import { Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
-import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
 
-import Category from '../../ui/Category';
-import { dispatch } from "../../../redux";
-import PaintCounter from "../../../lib/PaintCounter";
-import UserHeader from "../../common/user/UserHeader";
-import { Channels } from "revolt.js/dist/api/objects";
-import { connectState } from "../../../redux/connector";
-import ConnectionStatus from '../items/ConnectionStatus';
-import { Unreads } from "../../../redux/reducers/unreads";
 import ConditionalLink from "../../../lib/ConditionalLink";
-import { mapChannelWithUnread, useUnreads } from "./common";
+import PaintCounter from "../../../lib/PaintCounter";
-import { Users as UsersNS } from 'revolt.js/dist/api/objects';
-import ButtonItem, { ChannelButton } from '../items/ButtonItem';
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
-import { Link, Redirect, useLocation, useParams } from "react-router-dom";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useDMs, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import {
+	useDMs,
+	useForceUpdate,
+	useUsers,
+} from "../../../context/revoltjs/hooks";
+
+import UserHeader from "../../common/user/UserHeader";
+import Category from "../../ui/Category";
 import placeholderSVG from "../items/placeholder.svg";
+import { mapChannelWithUnread, useUnreads } from "./common";
+
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import ButtonItem, { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
 
 type Props = {
 	unreads: Unreads;
-}
+};
 
 function HomeSidebar(props: Props) {
 	const { pathname } = useLocation();
@@ -36,7 +49,7 @@ function HomeSidebar(props: Props) {
 	const ctx = useForceUpdate();
 	const channels = useDMs(ctx);
 
-    const obj = channels.find(x => x?._id === channel);
+	const obj = channels.find((x) => x?._id === channel);
 	if (channel && !obj) return <Redirect to="/" />;
 	if (obj) useUnreads({ ...props, channel: obj });
 
@@ -44,20 +57,25 @@ function HomeSidebar(props: Props) {
 		if (!channel) return;
 
 		dispatch({
-            type: 'LAST_OPENED_SET',
+			type: "LAST_OPENED_SET",
-            parent: 'home',
+			parent: "home",
-            child: channel
+			child: channel,
 		});
 	}, [channel]);
 
 	const channelsArr = channels
-        .filter(x => x.channel_type !== 'SavedMessages')
+		.filter((x) => x.channel_type !== "SavedMessages")
-        .map(x => mapChannelWithUnread(x, props.unreads));
+		.map((x) => mapChannelWithUnread(x, props.unreads));
 
 	const users = useUsers(
-        (channelsArr as (Channels.DirectMessageChannel | Channels.GroupChannel)[])
+		(
-            .reduce((prev: any, cur) => [ ...prev, ...cur.recipients ], [])
+			channelsArr as (
-    , ctx);
+				| Channels.DirectMessageChannel
+				| Channels.GroupChannel
+			)[]
+		).reduce((prev: any, cur) => [...prev, ...cur.recipients], []),
+		ctx,
+	);
 
 	channelsArr.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 
@@ -71,60 +89,83 @@ function HomeSidebar(props: Props) {
 						<ConditionalLink active={pathname === "/"} to="/">
 							<ButtonItem active={pathname === "/"}>
 								<Home size={20} />
-                                <span><Text id="app.navigation.tabs.home" /></span>
+								<span>
+									<Text id="app.navigation.tabs.home" />
+								</span>
 							</ButtonItem>
 						</ConditionalLink>
-                        <ConditionalLink active={pathname === "/friends"} to="/friends">
+						<ConditionalLink
+							active={pathname === "/friends"}
+							to="/friends">
 							<ButtonItem
 								active={pathname === "/friends"}
 								alert={
 									typeof users.find(
-                                        user =>
+										(user) =>
 											user?.relationship ===
-                                            UsersNS.Relationship.Incoming
+											UsersNS.Relationship.Incoming,
-                                    ) !== "undefined" ? 'unread' : undefined
+									) !== "undefined"
-                                }
+										? "unread"
-                            >
+										: undefined
+								}>
 								<UserDetail size={20} />
-                                <span><Text id="app.navigation.tabs.friends" /></span>
+								<span>
+									<Text id="app.navigation.tabs.friends" />
+								</span>
 							</ButtonItem>
 						</ConditionalLink>
 					</>
 				)}
-                <ConditionalLink active={obj?.channel_type === "SavedMessages"} to="/open/saved">
+				<ConditionalLink
+					active={obj?.channel_type === "SavedMessages"}
+					to="/open/saved">
 					<ButtonItem active={obj?.channel_type === "SavedMessages"}>
 						<Notepad size={20} />
-                        <span><Text id="app.navigation.tabs.saved" /></span>
+						<span>
+							<Text id="app.navigation.tabs.saved" />
+						</span>
 					</ButtonItem>
 				</ConditionalLink>
 				{import.meta.env.DEV && (
 					<Link to="/dev">
 						<ButtonItem active={pathname === "/dev"}>
 							<Wrench size={20} />
-                            <span><Text id="app.navigation.tabs.dev" /></span>
+							<span>
+								<Text id="app.navigation.tabs.dev" />
+							</span>
 						</ButtonItem>
 					</Link>
 				)}
 				<Category
 					text={<Text id="app.main.categories.conversations" />}
-                    action={() => openScreen({ id: "special_input", type: "create_group" })} />
+					action={() =>
+						openScreen({
+							id: "special_input",
+							type: "create_group",
+						})
+					}
+				/>
 				{channelsArr.length === 0 && <img src={placeholderSVG} />}
-                {channelsArr.map(x => {
+				{channelsArr.map((x) => {
 					let user;
-                    if (x.channel_type === 'DirectMessage') {
+					if (x.channel_type === "DirectMessage") {
 						if (!x.active) return null;
 
 						let recipient = client.channels.getRecipient(x._id);
-                        user = users.find(x => x?._id === recipient);
+						user = users.find((x) => x?._id === recipient);
 
 						if (!user) {
-                            console.warn(`Skipped DM ${x._id} because user was missing.`);
+							console.warn(
+								`Skipped DM ${x._id} because user was missing.`,
+							);
 							return null;
 						}
 					}
 
 					return (
-                        <ConditionalLink active={x._id === channel} to={`/channel/${x._id}`}>
+						<ConditionalLink
+							active={x._id === channel}
+							to={`/channel/${x._id}`}>
 							<ChannelButton
 								user={user}
 								channel={x}
@@ -139,14 +180,14 @@ function HomeSidebar(props: Props) {
 			</GenericSidebarList>
 		</GenericSidebarBase>
 	);
-};
+}
 
 export default connectState(
 	HomeSidebar,
-    state => {
+	(state) => {
 		return {
-            unreads: state.unreads
+			unreads: state.unreads,
 		};
 	},
-    true
+	true,
 );

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,54 +1,63 @@
+import { Plus } from "@styled-icons/boxicons-regular";
+import { useLocation, useParams } from "react-router-dom";
+import { Channel, Servers } from "revolt.js/dist/api/objects";
+import styled, { css } from "styled-components";
+
+import { attachContextMenu, openContextMenu } from "preact-context-menu";
+
+import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
+import { connectState } from "../../../redux/connector";
+import { LastOpened } from "../../../redux/reducers/last_opened";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+	useChannels,
+	useForceUpdate,
+	useSelf,
+	useServers,
+} from "../../../context/revoltjs/hooks";
+
+import ServerIcon from "../../common/ServerIcon";
 import Tooltip from "../../common/Tooltip";
+import UserIcon from "../../common/user/UserIcon";
 import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";
-import styled, { css } from "styled-components";
-import ServerIcon from "../../common/ServerIcon";
-import { Children } from "../../../types/Preact";
-import UserIcon from "../../common/user/UserIcon";
-import PaintCounter from "../../../lib/PaintCounter";
-import { Plus } from "@styled-icons/boxicons-regular";
-import { connectState } from "../../../redux/connector";
-import { useLocation, useParams } from "react-router-dom";
-import { Unreads } from "../../../redux/reducers/unreads";
-import ConditionalLink from "../../../lib/ConditionalLink";
-import { Channel, Servers } from "revolt.js/dist/api/objects";
-import { LastOpened } from "../../../redux/reducers/last_opened";
-import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
-import { attachContextMenu, openContextMenu } from 'preact-context-menu';
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { useChannels, useForceUpdate, useSelf, useServers } from "../../../context/revoltjs/hooks";
 
-function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
+import { Children } from "../../../types/Preact";
+
+function Icon({
+	children,
+	unread,
+	size,
+}: {
+	children: Children;
+	unread?: "mention" | "unread";
+	size: number;
+}) {
 	return (
-        <svg
+		<svg width={size} height={size} aria-hidden="true" viewBox="0 0 32 32">
-            width={size}
-            height={size}
-            aria-hidden="true"
-            viewBox="0 0 32 32"
-        >
 			<use href="#serverIndicator" />
-            <foreignObject x="0" y="0" width="32" height="32" mask={ unread ? "url(#server)" : undefined }>
+			<foreignObject
+				x="0"
+				y="0"
+				width="32"
+				height="32"
+				mask={unread ? "url(#server)" : undefined}>
 				{children}
 			</foreignObject>
-            {unread === 'unread' && (
+			{unread === "unread" && (
-                <circle
+				<circle cx="27" cy="5" r="5" fill={"white"} />
-                    cx="27"
-                    cy="5"
-                    r="5"
-                    fill={"white"}
-                />
 			)}
-            {unread === 'mention' && (
+			{unread === "mention" && (
-                <circle
+				<circle cx="27" cy="5" r="5" fill={"red"} />
-                    cx="27"
-                    cy="5"
-                    r="5"
-                    fill={"red"}
-                />
 			)}
 		</svg>
-    )
+	);
 }
 
 const ServersBase = styled.div`
@@ -57,7 +66,8 @@ const ServersBase = styled.div`
 	display: flex;
 	flex-direction: column;
 
-    ${ isTouchscreenDevice && css`
+	${isTouchscreenDevice &&
+	css`
 		padding-bottom: 50px;
 	`}
 `;
@@ -81,7 +91,7 @@ const ServerList = styled.div`
 	}
 `;
 
-const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
+const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
 	height: 58px;
 	display: flex;
 	align-items: center;
@@ -104,7 +114,9 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
 			transform: translateY(1px);
 		}
 
-        ${ props => props.active && css`
+		${(props) =>
+			props.active &&
+			css`
 				background: var(--sidebar-active);
 				&:active {
 					transform: none;
@@ -116,14 +128,18 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
 		width: 6px;
 		height: 46px;
 
-        ${ props => props.active && css`
+		${(props) =>
+			props.active &&
+			css`
 				background-color: var(--sidebar-active);
 
-            &::before, &::after {
+				&::before,
+				&::after {
 					// outline: 1px solid blue;
 				}
 
-            &::before, &::after {
+				&::before,
+				&::after {
 					content: "";
 					display: block;
 					position: relative;
@@ -146,7 +162,9 @@ const ServerEntry = styled.div<{ active: boolean, home?: boolean }>`
 			`}
 	}
 
-    ${ props => (!props.active || props.home) && css`
+	${(props) =>
+		(!props.active || props.home) &&
+		css`
 			cursor: pointer;
 		`}
 `;
@@ -160,16 +178,16 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
 	const ctx = useForceUpdate();
 	const self = useSelf(ctx);
 	const activeServers = useServers(undefined, ctx) as Servers.Server[];
-    const channels = (useChannels(undefined, ctx) as Channel[])
+	const channels = (useChannels(undefined, ctx) as Channel[]).map((x) =>
-        .map(x => mapChannelWithUnread(x, unreads));
+		mapChannelWithUnread(x, unreads),
+	);
 
-    const unreadChannels = channels.filter(x => x.unread)
+	const unreadChannels = channels.filter((x) => x.unread).map((x) => x._id);
-        .map(x => x._id);
 
-    const servers = activeServers.map(server => {
+	const servers = activeServers.map((server) => {
 		let alertCount = 0;
 		for (let id of server.channels) {
-            let channel = channels.find(x => x._id === id);
+			let channel = channels.find((x) => x._id === id);
 			if (channel?.alertCount) {
 				alertCount += channel.alertCount;
 			}
@@ -177,37 +195,52 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
 
 		return {
 			...server,
-            unread: (typeof server.channels.find(x => unreadChannels.includes(x)) !== 'undefined' ?
+			unread: (typeof server.channels.find((x) =>
-                ( alertCount > 0 ? 'mention' : 'unread' ) : undefined) as 'mention' | 'unread' | undefined,
+				unreadChannels.includes(x),
-            alertCount
+			) !== "undefined"
-        }
+				? alertCount > 0
+					? "mention"
+					: "unread"
+				: undefined) as "mention" | "unread" | undefined,
+			alertCount,
+		};
 	});
 
 	const path = useLocation().pathname;
 	const { server: server_id } = useParams<{ server?: string }>();
-    const server = servers.find(x => x!._id == server_id);
+	const server = servers.find((x) => x!._id == server_id);
 
 	const { openScreen } = useIntermediate();
 
-    let homeUnread: 'mention' | 'unread' | undefined;
+	let homeUnread: "mention" | "unread" | undefined;
 	let alertCount = 0;
 	for (let x of channels) {
-        if (((x.channel_type === 'DirectMessage' && x.active) || x.channel_type === 'Group') && x.unread) {
+		if (
-            homeUnread = 'unread';
+			((x.channel_type === "DirectMessage" && x.active) ||
+				x.channel_type === "Group") &&
+			x.unread
+		) {
+			homeUnread = "unread";
 			alertCount += x.alertCount ?? 0;
 		}
 	}
 
-    if (alertCount > 0) homeUnread = 'mention';
+	if (alertCount > 0) homeUnread = "mention";
-    const homeActive = typeof server === 'undefined' && !path.startsWith('/invite');
+	const homeActive =
+		typeof server === "undefined" && !path.startsWith("/invite");
 
 	return (
 		<ServersBase>
 			<ServerList>
-                <ConditionalLink active={homeActive} to={lastOpened.home ? `/channel/${lastOpened.home}` : '/'}>
+				<ConditionalLink
+					active={homeActive}
+					to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
 					<ServerEntry home active={homeActive}>
-                        <div onContextMenu={attachContextMenu('Status')}
+						<div
-                            onClick={() => homeActive && openContextMenu("Status")}>
+							onContextMenu={attachContextMenu("Status")}
+							onClick={() =>
+								homeActive && openContextMenu("Status")
+							}>
 							<Icon size={42} unread={homeUnread}>
 								<UserIcon target={self} size={32} status />
 							</Icon>
@@ -216,16 +249,22 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
 					</ServerEntry>
 				</ConditionalLink>
 				<LineDivider />
-                {
+				{servers.map((entry) => {
-                    servers.map(entry => {
 					const active = entry!._id === server?._id;
 					const id = lastOpened[entry!._id];
 
 					return (
-                            <ConditionalLink active={active} to={`/server/${entry!._id}` + (id ? `/channel/${id}` : '')}>
+						<ConditionalLink
+							active={active}
+							to={
+								`/server/${entry!._id}` +
+								(id ? `/channel/${id}` : "")
+							}>
 							<ServerEntry
 								active={active}
-                                    onContextMenu={attachContextMenu('Menu', { server: entry!._id })}>
+								onContextMenu={attachContextMenu("Menu", {
+									server: entry!._id,
+								})}>
 								<Tooltip content={entry.name} placement="right">
 									<Icon size={42} unread={entry.unread}>
 										<ServerIcon size={32} target={entry} />
@@ -234,24 +273,26 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
 								<span />
 							</ServerEntry>
 						</ConditionalLink>
-                        )
+					);
+				})}
+				<IconButton
+					onClick={() =>
+						openScreen({
+							id: "special_input",
+							type: "create_server",
 						})
-                }
+					}>
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_server' })}>
 					<Plus size={36} />
 				</IconButton>
 				<PaintCounter small />
 			</ServerList>
 		</ServersBase>
-    )
+	);
 }
 
-export default connectState(
+export default connectState(ServerListSidebar, (state) => {
-    ServerListSidebar,
-    state => {
 	return {
 		unreads: state.unreads,
-            lastOpened: state.lastOpened
+		lastOpened: state.lastOpened,
 	};
-    }
+});
-);

src/components/navigation/left/ServerSidebar.tsx

@@ -1,20 +1,30 @@
 import { Redirect, useParams } from "react-router";
-import { ChannelButton } from "../items/ButtonItem";
 import { Channels } from "revolt.js/dist/api/objects";
-import { Unreads } from "../../../redux/reducers/unreads";
-import { useChannels, useForceUpdate, useServer } from "../../../context/revoltjs/hooks";
-import { mapChannelWithUnread, useUnreads } from "./common";
-import ConnectionStatus from '../items/ConnectionStatus';
-import { connectState } from "../../../redux/connector";
-import PaintCounter from "../../../lib/PaintCounter";
 import styled from "styled-components";
-import { attachContextMenu } from 'preact-context-menu';
+
-import ServerHeader from "../../common/ServerHeader";
+import { attachContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
-import Category from "../../ui/Category";
+
-import { dispatch } from "../../../redux";
 import ConditionalLink from "../../../lib/ConditionalLink";
+import PaintCounter from "../../../lib/PaintCounter";
+
+import { dispatch } from "../../../redux";
+import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
+
+import {
+	useChannels,
+	useForceUpdate,
+	useServer,
+} from "../../../context/revoltjs/hooks";
+
 import CollapsibleSection from "../../common/CollapsibleSection";
+import ServerHeader from "../../common/ServerHeader";
+import Category from "../../ui/Category";
+import { mapChannelWithUnread, useUnreads } from "./common";
+
+import { ChannelButton } from "../items/ButtonItem";
+import ConnectionStatus from "../items/ConnectionStatus";
 
 interface Props {
 	unreads: Unreads;
@@ -44,17 +54,20 @@ const ServerList = styled.div`
 `;
 
 function ServerSidebar(props: Props) {
-    const { server: server_id, channel: channel_id } = useParams<{ server?: string, channel?: string }>();
+	const { server: server_id, channel: channel_id } =
+		useParams<{ server?: string; channel?: string }>();
 	const ctx = useForceUpdate();
 
 	const server = useServer(server_id, ctx);
 	if (!server) return <Redirect to="/" />;
 
-    const channels = (useChannels(server.channels, ctx)
+	const channels = (
-        .filter(entry => typeof entry !== 'undefined') as Readonly<Channels.TextChannel | Channels.VoiceChannel>[])
+		useChannels(server.channels, ctx).filter(
-        .map(x => mapChannelWithUnread(x, props.unreads));
+			(entry) => typeof entry !== "undefined",
+		) as Readonly<Channels.TextChannel | Channels.VoiceChannel>[]
+	).map((x) => mapChannelWithUnread(x, props.unreads));
 
-    const channel = channels.find(x => x?._id === channel_id);
+	const channel = channels.find((x) => x?._id === channel_id);
 	if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
 	if (channel) useUnreads({ ...props, channel }, ctx);
 
@@ -62,9 +75,9 @@ function ServerSidebar(props: Props) {
 		if (!channel_id) return;
 
 		dispatch({
-            type: 'LAST_OPENED_SET',
+			type: "LAST_OPENED_SET",
 			parent: server_id!,
-            child: channel_id!
+			child: channel_id!,
 		});
 	}, [channel_id]);
 
@@ -72,13 +85,16 @@ function ServerSidebar(props: Props) {
 	let elements = [];
 
 	function addChannel(id: string) {
-        const entry = channels.find(x => x._id === id);
+		const entry = channels.find((x) => x._id === id);
 		if (!entry) return;
 
 		const active = channel?._id === entry._id;
 
 		return (
-            <ConditionalLink key={entry._id} active={active} to={`/server/${server!._id}/channel/${entry._id}`}>
+			<ConditionalLink
+				key={entry._id}
+				active={active}
+				to={`/server/${server!._id}/channel/${entry._id}`}>
 				<ChannelButton
 					channel={entry}
 					active={active}
@@ -103,7 +119,7 @@ function ServerSidebar(props: Props) {
 					defaultValue
 					summary={<Category text={category.title} />}>
 					{channels}
-                </CollapsibleSection>
+				</CollapsibleSection>,
 			);
 		}
 	}
@@ -116,19 +132,19 @@ function ServerSidebar(props: Props) {
 		<ServerBase>
 			<ServerHeader server={server} ctx={ctx} />
 			<ConnectionStatus />
-            <ServerList onContextMenu={attachContextMenu('Menu', { server_list: server._id })}>
+			<ServerList
+				onContextMenu={attachContextMenu("Menu", {
+					server_list: server._id,
+				})}>
 				{elements}
 			</ServerList>
 			<PaintCounter small />
 		</ServerBase>
-    )
-};
-
-export default connectState(
-    ServerSidebar,
-    state => {
-        return {
-            unreads: state.unreads
-        };
-    }
 	);
+}
+
+export default connectState(ServerSidebar, (state) => {
+	return {
+		unreads: state.unreads,
+	};
+});

src/components/navigation/left/common.ts

@@ -1,35 +1,50 @@
 import { Channel } from "revolt.js";
-import { dispatch } from "../../../redux";
+
 import { useLayoutEffect } from "preact/hooks";
+
+import { dispatch } from "../../../redux";
 import { Unreads } from "../../../redux/reducers/unreads";
+
 import { HookContext, useForceUpdate } from "../../../context/revoltjs/hooks";
 
 type UnreadProps = {
 	channel: Channel;
 	unreads: Unreads;
-}
+};
 
-export function useUnreads({ channel, unreads }: UnreadProps, context?: HookContext) {
+export function useUnreads(
+	{ channel, unreads }: UnreadProps,
+	context?: HookContext,
+) {
 	const ctx = useForceUpdate(context);
 
 	useLayoutEffect(() => {
 		function checkUnread(target?: Channel) {
 			if (!target) return;
 			if (target._id !== channel._id) return;
-            if (target.channel_type === "SavedMessages" ||
+			if (
-                target.channel_type === "VoiceChannel") return;
+				target.channel_type === "SavedMessages" ||
+				target.channel_type === "VoiceChannel"
+			)
+				return;
 
 			const unread = unreads[channel._id]?.last_id;
 			if (target.last_message) {
-                const message = typeof target.last_message === 'string' ? target.last_message : target.last_message._id;
+				const message =
+					typeof target.last_message === "string"
+						? target.last_message
+						: target.last_message._id;
 				if (!unread || (unread && message.localeCompare(unread) > 0)) {
 					dispatch({
 						type: "UNREADS_MARK_READ",
 						channel: channel._id,
-                        message
+						message,
 					});
 
-                    ctx.client.req('PUT', `/channels/${channel._id}/ack/${message}` as '/channels/id/ack/id');
+					ctx.client.req(
+						"PUT",
+						`/channels/${channel._id}/ack/${message}` as "/channels/id/ack/id",
+					);
 				}
 			}
 		}
@@ -37,33 +52,45 @@ export function useUnreads({ channel, unreads }: UnreadProps, context?: HookCont
 		checkUnread(channel);
 
 		ctx.client.channels.addListener("mutation", checkUnread);
-        return () => ctx.client.channels.removeListener("mutation", checkUnread);
+		return () =>
+			ctx.client.channels.removeListener("mutation", checkUnread);
 	}, [channel, unreads]);
 }
 
 export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
 	let last_message_id;
-    if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
+	if (
+		channel.channel_type === "DirectMessage" ||
+		channel.channel_type === "Group"
+	) {
 		last_message_id = channel.last_message?._id;
-    } else if (channel.channel_type === 'TextChannel') {
+	} else if (channel.channel_type === "TextChannel") {
 		last_message_id = channel.last_message;
 	} else {
-        return { ...channel, unread: undefined, alertCount: undefined, timestamp: channel._id };
+		return {
+			...channel,
+			unread: undefined,
+			alertCount: undefined,
+			timestamp: channel._id,
+		};
 	}
 
-    let unread: 'mention' | 'unread' | undefined;
+	let unread: "mention" | "unread" | undefined;
 	let alertCount: undefined | number;
 	if (last_message_id && unreads) {
 		const u = unreads[channel._id];
 		if (u) {
 			if (u.mentions && u.mentions.length > 0) {
 				alertCount = u.mentions.length;
-                unread = 'mention';
+				unread = "mention";
-            } else if (u.last_id && last_message_id.localeCompare(u.last_id) > 0) {
+			} else if (
-                unread = 'unread';
+				u.last_id &&
+				last_message_id.localeCompare(u.last_id) > 0
+			) {
+				unread = "unread";
 			}
 		} else {
-            unread = 'unread';
+			unread = "unread";
 		}
 	}
 
@@ -71,6 +98,6 @@ export function mapChannelWithUnread(channel: Channel, unreads: Unreads) {
 		...channel,
 		timestamp: last_message_id ?? channel._id,
 		unread,
-        alertCount
+		alertCount,
 	};
 }

src/components/navigation/right/ChannelDebugInfo.tsx

@@ -16,21 +16,24 @@ export function ChannelDebugInfo({ id }: Props) {
 					display: "block",
 					fontSize: "12px",
 					textTransform: "uppercase",
-                    fontWeight: "600"
+					fontWeight: "600",
-                }}
+				}}>
-            >
 				Channel Info
 			</span>
 			<p style={{ fontSize: "10px", userSelect: "text" }}>
 				State: <b>{view.type}</b> <br />
-                { view.type === 'RENDER' && view.messages.length > 0 &&
+				{view.type === "RENDER" && view.messages.length > 0 && (
 					<>
 						Start: <b>{view.messages[0]._id}</b> <br />
-                        End: <b>{view.messages[view.messages.length - 1]._id}</b> <br />
+						End:{" "}
+						<b>
+							{view.messages[view.messages.length - 1]._id}
+						</b>{" "}
+						<br />
 						At Top: <b>{view.atTop ? "Yes" : "No"}</b> <br />
 						At Bottom: <b>{view.atBottom ? "Yes" : "No"}</b>
 					</>
-                }
+				)}
 			</p>
 		</span>
 	);

src/components/navigation/right/MemberSidebar.tsx

@@ -1,23 +1,34 @@
+import { useParams } from "react-router";
+import { User } from "revolt.js";
+import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { User } from "revolt.js";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+	AppContext,
+	ClientStatus,
+	StatusContext,
+} from "../../../context/revoltjs/RevoltClient";
+import {
+	HookContext,
+	useChannel,
+	useForceUpdate,
+	useUsers,
+} from "../../../context/revoltjs/hooks";
+
 import Category from "../../ui/Category";
-import { useParams } from "react-router";
+import Preloader from "../../ui/Preloader";
+import placeholderSVG from "../items/placeholder.svg";
+
+import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import { UserButton } from "../items/ButtonItem";
 import { ChannelDebugInfo } from "./ChannelDebugInfo";
-import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
-import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
-import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
-import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
-
-import placeholderSVG from "../items/placeholder.svg";
-import Preloader from "../../ui/Preloader";
 
 interface Props {
-    ctx: HookContext
+	ctx: HookContext;
 }
 
 export default function MemberSidebar(props: { channel?: Channels.Channel }) {
@@ -26,18 +37,24 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
 	const channel = props.channel ?? useChannel(cid, ctx);
 
 	switch (channel?.channel_type) {
-        case 'Group': return <GroupMemberSidebar channel={channel} ctx={ctx} />;
+		case "Group":
-        case 'TextChannel': return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+			return <GroupMemberSidebar channel={channel} ctx={ctx} />;
-        default: return null;
+		case "TextChannel":
+			return <ServerMemberSidebar channel={channel} ctx={ctx} />;
+		default:
+			return null;
 	}
 }
 
-export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
+export function GroupMemberSidebar({
+	channel,
+	ctx,
+}: Props & { channel: Channels.GroupChannel }) {
 	const { openScreen } = useIntermediate();
 	const users = useUsers(undefined, ctx);
 	let members = channel.recipients
-        .map(x => users.find(y => y?._id === x))
+		.map((x) => users.find((y) => y?._id === x))
-        .filter(x => typeof x !== "undefined") as User[];
+		.filter((x) => typeof x !== "undefined") as User[];
 
 	/*const voice = useContext(VoiceContext);
     const voiceActive = voice.roomId === channel._id;
@@ -56,8 +73,16 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
 
 	members.sort((a, b) => {
 		// ! FIXME: should probably rewrite all this code
-        let l = +((a.online && a.status?.presence !== Users.Presence.Invisible) ?? false) | 0;
+		let l =
-        let r = +((b.online && b.status?.presence !== Users.Presence.Invisible) ?? false) | 0;
+			+(
+				(a.online && a.status?.presence !== Users.Presence.Invisible) ??
+				false
+			) | 0;
+		let r =
+			+(
+				(b.online && b.status?.presence !== Users.Presence.Invisible) ??
+				false
+			) | 0;
 
 		let n = r - l;
 		if (n !== 0) {
@@ -96,7 +121,7 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
                         )}
                     </Fragment>
                 )*/}
-                {!(members.length === 0 /*&& voiceActive*/) && (
+				{!((members.length === 0) /*&& voiceActive*/) && (
 					<Category
 						variant="uniform"
 						text={
@@ -107,33 +132,50 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
 						}
 					/>
 				)}
-                {members.length === 0 && /*!voiceActive &&*/ <img src={placeholderSVG} />}
+				{members.length === 0 && (
+					/*!voiceActive &&*/ <img src={placeholderSVG} />
+				)}
 				{members.map(
-                    user =>
+					(user) =>
 						user && (
 							<UserButton
 								key={user._id}
 								user={user}
 								context={channel}
-                                onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
+								onClick={() =>
-                        )
+									openScreen({
+										id: "profile",
+										user_id: user._id,
+									})
+								}
+							/>
+						),
 				)}
 			</GenericSidebarList>
 		</GenericSidebarBase>
 	);
 }
 
-export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channels.TextChannel }) {
+export function ServerMemberSidebar({
-    const [members, setMembers] = useState<Servers.Member[] | undefined>(undefined);
+	channel,
-    const users = useUsers(members?.map(x => x._id.user) ?? []).filter(x => typeof x !== 'undefined', ctx) as Users.User[];
+	ctx,
+}: Props & { channel: Channels.TextChannel }) {
+	const [members, setMembers] = useState<Servers.Member[] | undefined>(
+		undefined,
+	);
+	const users = useUsers(members?.map((x) => x._id.user) ?? []).filter(
+		(x) => typeof x !== "undefined",
+		ctx,
+	) as Users.User[];
 	const { openScreen } = useIntermediate();
 	const status = useContext(StatusContext);
 	const client = useContext(AppContext);
 
 	useEffect(() => {
-        if (status === ClientStatus.ONLINE && typeof members === 'undefined') {
+		if (status === ClientStatus.ONLINE && typeof members === "undefined") {
-            client.servers.members.fetchMembers(channel.server)
+			client.servers.members
-                .then(members => setMembers(members))
+				.fetchMembers(channel.server)
+				.then((members) => setMembers(members));
 		}
 	}, [status]);
 
@@ -141,24 +183,43 @@ export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channel
 	useEffect(() => {
 		function onPacket(packet: ClientboundNotification) {
 			if (!members) return;
-            if (packet.type === 'ServerMemberJoin') {
+			if (packet.type === "ServerMemberJoin") {
 				if (packet.id !== channel.server) return;
-                setMembers([ ...members, { _id: { server: packet.id, user: packet.user } } ]);
+				setMembers([
-            } else if (packet.type === 'ServerMemberLeave') {
+					...members,
+					{ _id: { server: packet.id, user: packet.user } },
+				]);
+			} else if (packet.type === "ServerMemberLeave") {
 				if (packet.id !== channel.server) return;
-                setMembers(members.filter(x => !(x._id.user === packet.user && x._id.server === packet.id)));
+				setMembers(
+					members.filter(
+						(x) =>
+							!(
+								x._id.user === packet.user &&
+								x._id.server === packet.id
+							),
+					),
+				);
 			}
 		}
 
-        client.addListener('packet', onPacket);
+		client.addListener("packet", onPacket);
-        return () => client.removeListener('packet', onPacket);
+		return () => client.removeListener("packet", onPacket);
 	}, [members]);
 
 	// copy paste from above
 	users.sort((a, b) => {
 		// ! FIXME: should probably rewrite all this code
-        let l = +((a.online && a.status?.presence !== Users.Presence.Invisible) ?? false) | 0;
+		let l =
-        let r = +((b.online && b.status?.presence !== Users.Presence.Invisible) ?? false) | 0;
+			+(
+				(a.online && a.status?.presence !== Users.Presence.Invisible) ??
+				false
+			) | 0;
+		let r =
+			+(
+				(b.online && b.status?.presence !== Users.Presence.Invisible) ??
+				false
+			) | 0;
 
 		let n = r - l;
 		if (n !== 0) {
@@ -184,14 +245,20 @@ export function ServerMemberSidebar({ channel, ctx }: Props & { channel: Channel
 				{!members && <Preloader type="ring" />}
 				{members && users.length === 0 && <img src={placeholderSVG} />}
 				{users.map(
-                    user =>
+					(user) =>
 						user && (
 							<UserButton
 								key={user._id}
 								user={user}
 								context={channel}
-                                onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
+								onClick={() =>
-                        )
+									openScreen({
+										id: "profile",
+										user_id: user._id,
+									})
+								}
+							/>
+						),
 				)}
 			</GenericSidebarList>
 		</GenericSidebarBase>

src/components/ui/Category.tsx

@@ -1,8 +1,9 @@
-import styled, { css } from "styled-components";
-import { Children } from "../../types/Preact";
 import { Plus } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
 
-const CategoryBase = styled.div<Pick<Props, 'variant'>>`
+import { Children } from "../../types/Preact";
+
+const CategoryBase = styled.div<Pick<Props, "variant">>`
 	font-size: 12px;
 	font-weight: 700;
 	text-transform: uppercase;
@@ -26,16 +27,21 @@ const CategoryBase = styled.div<Pick<Props, 'variant'>>`
 		padding-top: 0;
 	}
 
-    ${ props => props.variant === 'uniform' && css`
+	${(props) =>
+		props.variant === "uniform" &&
+		css`
 			padding-top: 6px;
 		`}
 `;
 
-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'action'> & {
+type Props = Omit<
+	JSX.HTMLAttributes<HTMLDivElement>,
+	"children" | "as" | "action"
+> & {
 	text: Children;
 	action?: () => void;
-    variant?: 'default' | 'uniform';
+	variant?: "default" | "uniform";
-}
+};
 
 export default function Category(props: Props) {
 	let { text, action, ...otherProps } = props;
@@ -43,9 +49,7 @@ export default function Category(props: Props) {
 	return (
 		<CategoryBase {...otherProps}>
 			{text}
-            {action && (
+			{action && <Plus size={16} onClick={action} />}
-                <Plus size={16} onClick={action} />
-            )}
 		</CategoryBase>
 	);
-};
+}

src/components/ui/Checkbox.tsx

@@ -1,7 +1,8 @@
 import { Check } from "@styled-icons/boxicons-regular";
-import { Children } from "../../types/Preact";
 import styled, { css } from "styled-components";
 
+import { Children } from "../../types/Preact";
+
 const CheckboxBase = styled.label`
 	margin-top: 20px;
 	gap: 4px;
@@ -27,7 +28,7 @@ const CheckboxBase = styled.label`
 	}
 
 	&[disabled] {
-        opacity: .5;
+		opacity: 0.5;
 		cursor: not-allowed;
 
 		&:hover {
@@ -45,7 +46,7 @@ const CheckboxContent = styled.span`
 `;
 
 const CheckboxDescription = styled.span`
-    font-size: .75rem;
+	font-size: 0.75rem;
 	font-weight: 400;
 	color: var(--secondary-foreground);
 `;

src/components/ui/ColourSwatches.tsx

@@ -1,8 +1,9 @@
-import { useRef } from "preact/hooks";
 import { Check } from "@styled-icons/boxicons-regular";
 import { Palette } from "@styled-icons/boxicons-solid";
 import styled, { css } from "styled-components";
 
+import { useRef } from "preact/hooks";
+
 interface Props {
 	value: string;
 	onChange: (value: string) => void;
@@ -97,8 +98,7 @@ export default function ColourSwatches({ value, onChange }: Props) {
 			<Swatch
 				colour={value}
 				type="large"
-                onClick={() => ref.current.click()}
+				onClick={() => ref.current.click()}>
-            >
 				<Palette size={32} />
 			</Swatch>
 			<input
@@ -115,11 +115,8 @@ export default function ColourSwatches({ value, onChange }: Props) {
 								colour={swatch}
 								type="small"
 								key={i}
-                                onClick={() => onChange(swatch)}
+								onClick={() => onChange(swatch)}>
-                            >
+								{swatch === value && <Check size={18} />}
-                                {swatch === value && (
-                                    <Check size={18} />
-                                )}
 							</Swatch>
 						))}
 					</div>

src/components/ui/ComboBox.tsx

@@ -6,11 +6,11 @@ export default styled.select`
 	font-family: inherit;
 	color: var(--secondary-foreground);
 	background: var(--secondary-background);
-    font-size: .875rem;
+	font-size: 0.875rem;
 	border: none;
 	outline: 2px solid transparent;
 	transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow .3s;
+	transition: box-shadow 0.3s;
 	cursor: pointer;
 	width: 100%;
 

src/components/ui/DateDivider.tsx

@@ -11,14 +11,16 @@ const Base = styled.div<{ unread?: boolean }>`
 
 	time {
 		margin-top: -2px;
-        font-size: .6875rem;
+		font-size: 0.6875rem;
-        line-height: .6875rem;
+		line-height: 0.6875rem;
 		padding: 2px 5px 2px 0;
 		color: var(--tertiary-foreground);
 		background: var(--primary-background);
 	}
 
-    ${ props => props.unread && css`
+	${(props) =>
+		props.unread &&
+		css`
 			border-top: thin solid var(--accent);
 		`}
 `;
@@ -40,9 +42,7 @@ export default function DateDivider(props: Props) {
 	return (
 		<Base unread={props.unread}>
 			{props.unread && <Unread>NEW</Unread>}
-            <time>
+			<time>{dayjs(props.date).format("LL")}</time>
-                { dayjs(props.date).format("LL") }
-            </time>
 		</Base>
 	);
 }

src/components/ui/Details.tsx

@@ -1,19 +1,24 @@
 import styled, { css } from "styled-components";
 
-export default styled.details<{ sticky?: boolean, large?: boolean }>`
+export default styled.details<{ sticky?: boolean; large?: boolean }>`
 	summary {
-        ${ props => props.sticky && css`
+		${(props) =>
+			props.sticky &&
+			css`
 				top: -1px;
 				z-index: 10;
 				position: sticky;
 			`}
 
-        ${ props => props.large && css`
+		${(props) =>
+			props.large &&
+			css`
 				/*padding: 5px 0;*/
 				background: var(--primary-background);
 				color: var(--secondary-foreground);
 
-            .padding { /*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
+				.padding {
+					/*TOFIX: make this applicable only for the friends list menu, DO NOT REMOVE.*/
 					display: flex;
 					align-items: center;
 					padding: 5px 0;
@@ -26,13 +31,14 @@ export default styled.details<{ sticky?: boolean, large?: boolean }>`
 		cursor: pointer;
 		list-style: none;
 		align-items: center;
-        transition: .2s opacity;
+		transition: 0.2s opacity;
 
 		font-size: 12px;
 		font-weight: 600;
 		text-transform: uppercase;
 
-        &::marker, &::-webkit-details-marker {
+		&::marker,
+		&::-webkit-details-marker {
 			display: none;
 		}
 
@@ -51,14 +57,14 @@ export default styled.details<{ sticky?: boolean, large?: boolean }>`
 			> svg {
 				flex-shrink: 0;
 				margin-inline-end: 4px;
-                transition: .2s ease transform;
+				transition: 0.2s ease transform;
 			}
 		}
 	}
 
 	&:not([open]) {
 		summary {
-            opacity: .7;
+			opacity: 0.7;
 		}
 
 		summary svg {

src/components/ui/Header.tsx

@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 interface Props {
 	borders?: boolean;
 	background?: boolean;
-    placement: 'primary' | 'secondary'
+	placement: "primary" | "secondary";
 }
 
 export default styled.div<Props>`
@@ -33,19 +33,25 @@ export default styled.div<Props>`
 		height: 56px;
 	}
 
-    ${ props => props.background && css`
+	${(props) =>
+		props.background &&
+		css`
 			height: 120px !important;
 			align-items: flex-end;
 
 			text-shadow: 0px 0px 1px black;
 		`}
 
-    ${ props => props.placement === 'secondary' && css`
+	${(props) =>
+		props.placement === "secondary" &&
+		css`
 			background-color: var(--secondary-header);
 			padding: 14px;
 		`}
 
-    ${ props => props.borders && css`    
+    ${(props) =>
+		props.borders &&
+		css`
 			border-start-start-radius: 8px;
 		`}
 `;

src/components/ui/IconButton.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
 
 interface Props {
-    type?: 'default' | 'circle'
+	type?: "default" | "circle";
 }
 
 const normal = `var(--secondary-foreground)`;
@@ -12,7 +12,7 @@ export default styled.div<Props>`
 	display: grid;
 	cursor: pointer;
 	place-items: center;
-    transition: .1s ease background-color;
+	transition: 0.1s ease background-color;
 
 	fill: ${normal};
 	color: ${normal};
@@ -32,7 +32,9 @@ export default styled.div<Props>`
 		}
 	}
 
-    ${ props => props.type === 'circle' && css`
+	${(props) =>
+		props.type === "circle" &&
+		css`
 			padding: 4px;
 			border-radius: 50%;
 			background-color: var(--secondary-header);

src/components/ui/Masks.tsx

@@ -2,7 +2,7 @@
 
 export default function Masks() {
 	return (
-        <svg width={0} height={0} style={{ position: 'fixed' }}>
+		<svg width={0} height={0} style={{ position: "fixed" }}>
 			<defs>
 				<mask id="server">
 					<rect x="0" y="0" width="32" height="32" fill="white" />
@@ -18,5 +18,5 @@ export default function Masks() {
 				</mask>
 			</defs>
 		</svg>
-    )
+	);
 }

src/components/ui/Modal.tsx

@@ -1,9 +1,11 @@
-import Button from "./Button";
-import classNames from "classnames";
-import { Children } from "../../types/Preact";
-import { createPortal, useEffect } from "preact/compat";
 import styled, { css, keyframes } from "styled-components";
 
+import classNames from "classnames";
+import { createPortal, useEffect } from "preact/compat";
+
+import { Children } from "../../types/Preact";
+import Button from "./Button";
+
 const open = keyframes`
     0% {opacity: 0;}
     70% {opacity: 0;}
@@ -44,10 +46,12 @@ const ModalContainer = styled.div`
 
 	animation-name: ${zoomIn};
 	animation-duration: 0.25s;
-    animation-timing-function: cubic-bezier(.3,.3,.18,1.1);
+	animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
 `;
 
-const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'border' | 'padding']?: boolean }>`
+const ModalContent = styled.div<
+	{ [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
+>`
 	border-radius: 8px;
 	text-overflow: ellipsis;
 
@@ -60,19 +64,27 @@ const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'borde
 		flex-direction: column;
 	}
 
-    ${ props => !props.noBackground && css`
+	${(props) =>
+		!props.noBackground &&
+		css`
 			background: var(--secondary-header);
 		`}
 
-    ${ props => props.padding && css`
+	${(props) =>
+		props.padding &&
+		css`
 			padding: 1.5em;
 		`}
 
-    ${ props => props.attachment && css`
+    ${(props) =>
+		props.attachment &&
+		css`
 			border-radius: 8px 8px 0 0;
 		`}
 
-    ${ props => props.border && css`
+    ${(props) =>
+		props.border &&
+		css`
 			border-radius: 10px;
 			border: 2px solid var(--secondary-background);
 		`}
@@ -143,7 +155,9 @@ export default function Modal(props: Props) {
 		return () => document.body.removeEventListener("keydown", keyDown);
 	}, [props.disallowClosing, props.onClose]);
 
-    let confirmationAction = props.actions?.find(action => action.confirmation);
+	let confirmationAction = props.actions?.find(
+		(action) => action.confirmation,
+	);
 	useEffect(() => {
 		if (!confirmationAction) return;
 
@@ -161,12 +175,13 @@ export default function Modal(props: Props) {
 	}, [confirmationAction]);
 
 	return createPortal(
-        <ModalBase onClick={(!props.disallowClosing && props.onClose) || undefined}>
+		<ModalBase
-            <ModalContainer onClick={e => (e.cancelBubble = true)}>
+			onClick={(!props.disallowClosing && props.onClose) || undefined}>
+			<ModalContainer onClick={(e) => (e.cancelBubble = true)}>
 				{content}
 				{props.actions && (
 					<ModalActions>
-                        {props.actions.map(x => (
+						{props.actions.map((x) => (
 							<Button
 								contrast={x.contrast ?? true}
 								error={x.error ?? false}
@@ -179,6 +194,6 @@ export default function Modal(props: Props) {
 				)}
 			</ModalContainer>
 		</ModalBase>,
-        document.body
+		document.body,
 	);
 }

src/components/ui/Overline.tsx

@@ -1,20 +1,24 @@
 import styled, { css } from "styled-components";
-import { Children } from "../../types/Preact";
-import { Text } from 'preact-i18n';
 
-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
+import { Text } from "preact-i18n";
+
+import { Children } from "../../types/Preact";
+
+type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "as"> & {
 	error?: string;
 	block?: boolean;
 	spaced?: boolean;
 	children?: Children;
 	type?: "default" | "subtle" | "error";
-}
+};
 
 const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
 	display: inline;
 	margin: 0.4em 0;
 
-    ${ props => props.spaced && css`
+	${(props) =>
+		props.spaced &&
+		css`
 			margin-top: 0.8em;
 		`}
 
@@ -50,9 +54,11 @@ export default function Overline(props: Props) {
 		<OverlineBase {...props}>
 			{props.children}
 			{props.children && props.error && <> &middot; </>}
-            {props.error && <Overline type="error">
+			{props.error && (
+				<Overline type="error">
 					<Text id={`error.${props.error}`}>{props.error}</Text>
-            </Overline>}
+				</Overline>
+			)}
 		</OverlineBase>
 	);
 }

src/components/ui/Preloader.tsx

@@ -87,7 +87,7 @@ const PreloaderBase = styled.div`
 `;
 
 interface Props {
-    type: 'spinner' | 'ring'
+	type: "spinner" | "ring";
 }
 
 export default function Preloader({ type }: Props) {

src/components/ui/Radio.tsx

@@ -1,6 +1,7 @@
-import { Children } from "../../types/Preact";
-import styled, { css } from "styled-components";
 import { Circle } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
 
 interface Props {
 	children: Children;
@@ -92,8 +93,7 @@ export default function Radio(props: Props) {
 			disabled={props.disabled}
 			onClick={() =>
 				!props.disabled && props.onSelect && props.onSelect()
-            }
+			}>
-        >
 			<div>
 				<Circle size={12} />
 			</div>

src/components/ui/TextArea.tsx

@@ -17,30 +17,39 @@ export default styled.textarea<TextAreaProps>`
 	display: block;
 	color: var(--foreground);
 	background: var(--secondary-background);
-    padding: ${ props => props.padding ?? DEFAULT_TEXT_AREA_PADDING }px;
+	padding: ${(props) => props.padding ?? DEFAULT_TEXT_AREA_PADDING}px;
-    line-height: ${ props => props.lineHeight ?? DEFAULT_LINE_HEIGHT }px;
+	line-height: ${(props) => props.lineHeight ?? DEFAULT_LINE_HEIGHT}px;
 
-    ${ props => props.hideBorder && css`
+	${(props) =>
+		props.hideBorder &&
+		css`
 			border: none;
 		`}
 
-    ${ props => !props.hideBorder && css`
+	${(props) =>
+		!props.hideBorder &&
+		css`
 			border-radius: 4px;
-        transition: border-color .2s ease-in-out;
+			transition: border-color 0.2s ease-in-out;
 			border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
 		`}
 
     &:focus {
 		outline: none;
 
-        ${ props => !props.hideBorder && css`
+		${(props) =>
+			!props.hideBorder &&
+			css`
 				border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
 			`}
 	}
 
-    ${ props => props.code ? css`
+	${(props) =>
+		props.code
+			? css`
 					font-family: var(--monoscape-font-font), monospace;
-    ` : css`
+			  `
+			: css`
 					font-family: inherit;
 			  `}
 

src/components/ui/Tip.tsx

@@ -1,10 +1,11 @@
-import { Children } from "../../types/Preact";
-import styled, { css } from "styled-components";
 import { InfoCircle } from "@styled-icons/boxicons-regular";
+import styled, { css } from "styled-components";
+
+import { Children } from "../../types/Preact";
 
 interface Props {
-    warning?: boolean
+	warning?: boolean;
-    error?: boolean
+	error?: boolean;
 }
 
 export const Separator = styled.div<Props>`
@@ -37,13 +38,17 @@ export const TipBase = styled.div<Props>`
 		margin-inline-end: 10px;
 	}
 
-    ${ props => props.warning && css`
+	${(props) =>
+		props.warning &&
+		css`
 			color: var(--warning);
 			border: 2px solid var(--warning);
 			background: var(--secondary-header);
 		`}
 
-    ${ props => props.error && css`
+	${(props) =>
+		props.error &&
+		css`
 			color: var(--error);
 			border: 2px solid var(--error);
 			background: var(--secondary-header);
@@ -60,6 +65,5 @@ export default function Tip(props: Props & { children: Children }) {
 				<span>{props.children}</span>
 			</TipBase>
 		</>
-        
 	);
 }

src/context/Locale.tsx

@@ -1,13 +1,16 @@
-import { IntlProvider } from "preact-i18n";
-import defaultsDeep from "lodash.defaultsdeep";
-import { connectState } from "../redux/connector";
-import { useEffect, useState } from "preact/hooks";
-import definition from "../../external/lang/en.json";
-
 import dayjs from "dayjs";
 import calendar from "dayjs/plugin/calendar";
-import update from "dayjs/plugin/updateLocale";
 import format from "dayjs/plugin/localizedFormat";
+import update from "dayjs/plugin/updateLocale";
+import defaultsDeep from "lodash.defaultsdeep";
+
+import { IntlProvider } from "preact-i18n";
+import { useEffect, useState } from "preact/hooks";
+
+import { connectState } from "../redux/connector";
+
+import definition from "../../external/lang/en.json";
+
 dayjs.extend(calendar);
 dayjs.extend(format);
 dayjs.extend(update);
@@ -96,15 +99,33 @@ export const Languages: { [key in Language]: LanguageEntry } = {
 		dayjs: "zh",
 	},
 
-    owo: { display: "OwO", emoji: "🐱", i18n: "owo", dayjs: "en-gb", alt: true },
+	owo: {
-    pr: { display: "Pirate", emoji: "🏴‍☠️", i18n: "pr", dayjs: "en-gb", alt: true },
+		display: "OwO",
-    bottom: { display: "Bottom", emoji: "🥺", i18n: "bottom", dayjs: "en-gb", alt: true },
+		emoji: "🐱",
+		i18n: "owo",
+		dayjs: "en-gb",
+		alt: true,
+	},
+	pr: {
+		display: "Pirate",
+		emoji: "🏴‍☠️",
+		i18n: "pr",
+		dayjs: "en-gb",
+		alt: true,
+	},
+	bottom: {
+		display: "Bottom",
+		emoji: "🥺",
+		i18n: "bottom",
+		dayjs: "en-gb",
+		alt: true,
+	},
 	piglatin: {
 		display: "Pig Latin",
 		emoji: "🐖",
 		i18n: "piglatin",
 		dayjs: "en-gb",
-        alt: true
+		alt: true,
 	},
 };
 
@@ -115,7 +136,8 @@ interface Props {
 
 function Locale({ children, locale }: Props) {
 	// TODO: create and use LanguageDefinition type here
-    const [defns, setDefinition] = useState<Record<string, unknown>>(definition);
+	const [defns, setDefinition] =
+		useState<Record<string, unknown>>(definition);
 	const lang = Languages[locale];
 
 	// TODO: clean this up and use the built in Intl API
@@ -125,20 +147,27 @@ function Locale({ children, locale }: Props) {
 		const dayjs = obj.dayjs;
 		const defaults = dayjs.defaults;
 
-        const twelvehour = defaults?.twelvehour === 'yes' || true;
+		const twelvehour = defaults?.twelvehour === "yes" || true;
-        const separator: '/' | '-' | '.' = defaults?.date_separator ?? '/';
+		const separator: "/" | "-" | "." = defaults?.date_separator ?? "/";
-        const date: 'traditional' | 'simplified' | 'ISO8601' = defaults?.date_format ?? 'traditional';
+		const date: "traditional" | "simplified" | "ISO8601" =
+			defaults?.date_format ?? "traditional";
 
 		const DATE_FORMATS = {
 			traditional: `DD${separator}MM${separator}YYYY`,
 			simplified: `MM${separator}DD${separator}YYYY`,
-            ISO8601: 'YYYY-MM-DD'
+			ISO8601: "YYYY-MM-DD",
-        }
+		};
 
-        dayjs['sameElse'] = DATE_FORMATS[date];
+		dayjs["sameElse"] = DATE_FORMATS[date];
 		Object.keys(dayjs)
-            .filter(k => k !== 'defaults')
+			.filter((k) => k !== "defaults")
-            .forEach(k => dayjs[k] = dayjs[k].replace(/{{time}}/g, twelvehour ? 'LT' : 'HH:mm'));
+			.forEach(
+				(k) =>
+					(dayjs[k] = dayjs[k].replace(
+						/{{time}}/g,
+						twelvehour ? "LT" : "HH:mm",
+					)),
+			);
 
 		return obj;
 	}
@@ -148,7 +177,7 @@ function Locale({ children, locale }: Props) {
 			const defn = transformLanguage(definition);
 			setDefinition(defn);
 			dayjs.locale("en");
-            dayjs.updateLocale('en', { calendar: defn.dayjs });
+			dayjs.updateLocale("en", { calendar: defn.dayjs });
 			return;
 		}
 
@@ -156,7 +185,9 @@ function Locale({ children, locale }: Props) {
 			async (lang_file) => {
 				const defn = transformLanguage(lang_file.default);
 				const target = lang.dayjs ?? lang.i18n;
-                const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);
+				const dayjs_locale = await import(
+					`../../node_modules/dayjs/esm/locale/${target}.js`
+				);
 
 				if (defn.dayjs) {
 					dayjs.updateLocale(target, { calendar: defn.dayjs });
@@ -164,7 +195,7 @@ function Locale({ children, locale }: Props) {
 
 				dayjs.locale(dayjs_locale.default);
 				setDefinition(defn);
-            }
+			},
 		);
 	}, [locale, lang]);
 
@@ -182,5 +213,5 @@ export default connectState<Omit<Props, "locale">>(
 			locale: state.locale,
 		};
 	},
-    true
+	true,
 );

src/context/Settings.tsx

@@ -6,26 +6,35 @@
 // if it does cause problems though.
 //
 // This now also supports Audio stuff.
-
-import { DEFAULT_SOUNDS, Settings, SoundOptions } from "../redux/reducers/settings";
-import { playSound, Sounds } from "../assets/sounds/Audio";
-import { connectState } from "../redux/connector";
 import defaultsDeep from "lodash.defaultsdeep";
-import { Children } from "../types/Preact";
+
 import { createContext } from "preact";
 import { useMemo } from "preact/hooks";
 
+import { connectState } from "../redux/connector";
+import {
+	DEFAULT_SOUNDS,
+	Settings,
+	SoundOptions,
+} from "../redux/reducers/settings";
+
+import { playSound, Sounds } from "../assets/sounds/Audio";
+import { Children } from "../types/Preact";
+
 export const SettingsContext = createContext<Settings>({});
-export const SoundContext = createContext<((sound: Sounds) => void)>(null!);
+export const SoundContext = createContext<(sound: Sounds) => void>(null!);
 
 interface Props {
-    children?: Children,
+	children?: Children;
-    settings: Settings
+	settings: Settings;
 }
 
-function Settings({ settings, children }: Props) {
+function SettingsProvider({ settings, children }: Props) {
 	const play = useMemo(() => {
-        const enabled: SoundOptions = defaultsDeep(settings.notification?.sounds ?? {}, DEFAULT_SOUNDS);
+		const enabled: SoundOptions = defaultsDeep(
+			settings.notification?.sounds ?? {},
+			DEFAULT_SOUNDS,
+		);
 		return (sound: Sounds) => {
 			if (enabled[sound]) {
 				playSound(sound);
@@ -39,11 +48,14 @@ function Settings({ settings, children }: Props) {
 				{children}
 			</SoundContext.Provider>
 		</SettingsContext.Provider>
-    )
+	);
 }
 
-export default connectState<Omit<Props, 'settings'>>(Settings, state => {
+export default connectState<Omit<Props, "settings">>(
+	SettingsProvider,
+	(state) => {
 		return {
-        settings: state.settings
+			settings: state.settings,
-    }
+		};
-});
+	},
+);

src/context/Theme.tsx

@@ -1,10 +1,14 @@
-import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
-import { createGlobalStyle } from "styled-components";
-import { connectState } from "../redux/connector";
-import { Children } from "../types/Preact";
-import { useEffect } from "preact/hooks";
-import { createContext } from "preact";
 import { Helmet } from "react-helmet";
+import { createGlobalStyle } from "styled-components";
+
+import { createContext } from "preact";
+import { useEffect } from "preact/hooks";
+
+import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
+
+import { connectState } from "../redux/connector";
+
+import { Children } from "../types/Preact";
 
 export type Variables =
 	| "accent"
@@ -30,7 +34,7 @@ export type Variables =
 	| "status-away"
 	| "status-busy"
 	| "status-streaming"
-    | "status-invisible"
+	| "status-invisible";
 
 // While this isn't used, it'd be good to keep this up to date as a reference or for future use
 export type HiddenVariables =
@@ -38,10 +42,27 @@ export type HiddenVariables =
 	| "ligatures"
 	| "app-height"
 	| "sidebar-active"
-    | "monospace-font"
+	| "monospace-font";
 
-export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
+export type Fonts =
-export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
+	| "Open Sans"
+	| "Inter"
+	| "Atkinson Hyperlegible"
+	| "Roboto"
+	| "Noto Sans"
+	| "Lato"
+	| "Bree Serif"
+	| "Montserrat"
+	| "Poppins"
+	| "Raleway"
+	| "Ubuntu"
+	| "Comic Neue";
+export type MonoscapeFonts =
+	| "Fira Code"
+	| "Roboto Mono"
+	| "Source Code Pro"
+	| "Space Mono"
+	| "Ubuntu Mono";
 
 export type Theme = {
 	[variable in Variables]: string;
@@ -61,7 +82,7 @@ export interface ThemeOptions {
 // import aaa from "@fontsource/open-sans/300.css?raw";
 // console.info(aaa);
 
-export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
+export const FONTS: Record<Fonts, { name: string; load: () => void }> = {
 	"Open Sans": {
 		name: "Open Sans",
 		load: async () => {
@@ -70,7 +91,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/open-sans/600.css");
 			await import("@fontsource/open-sans/700.css");
 			await import("@fontsource/open-sans/400-italic.css");
-        }
+		},
 	},
 	Inter: {
 		name: "Inter",
@@ -79,7 +100,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/inter/400.css");
 			await import("@fontsource/inter/600.css");
 			await import("@fontsource/inter/700.css");
-        }
+		},
 	},
 	"Atkinson Hyperlegible": {
 		name: "Atkinson Hyperlegible",
@@ -87,15 +108,15 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/atkinson-hyperlegible/400.css");
 			await import("@fontsource/atkinson-hyperlegible/700.css");
 			await import("@fontsource/atkinson-hyperlegible/400-italic.css");
-        }
 		},
-    "Roboto": {
+	},
+	Roboto: {
 		name: "Roboto",
 		load: async () => {
 			await import("@fontsource/roboto/400.css");
 			await import("@fontsource/roboto/700.css");
 			await import("@fontsource/roboto/400-italic.css");
-        }
+		},
 	},
 	"Noto Sans": {
 		name: "Noto Sans",
@@ -103,22 +124,22 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/noto-sans/400.css");
 			await import("@fontsource/noto-sans/700.css");
 			await import("@fontsource/noto-sans/400-italic.css");
-        }
+		},
 	},
 	"Bree Serif": {
 		name: "Bree Serif",
-        load: () => import("@fontsource/bree-serif/400.css")
+		load: () => import("@fontsource/bree-serif/400.css"),
 	},
-    "Lato": {
+	Lato: {
 		name: "Lato",
 		load: async () => {
 			await import("@fontsource/lato/300.css");
 			await import("@fontsource/lato/400.css");
 			await import("@fontsource/lato/700.css");
 			await import("@fontsource/lato/400-italic.css");
-        }
 		},
-    "Montserrat": {
+	},
+	Montserrat: {
 		name: "Montserrat",
 		load: async () => {
 			await import("@fontsource/montserrat/300.css");
@@ -126,9 +147,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/montserrat/600.css");
 			await import("@fontsource/montserrat/700.css");
 			await import("@fontsource/montserrat/400-italic.css");
-        }
 		},
-    "Poppins": {
+	},
+	Poppins: {
 		name: "Poppins",
 		load: async () => {
 			await import("@fontsource/poppins/300.css");
@@ -136,9 +157,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/poppins/600.css");
 			await import("@fontsource/poppins/700.css");
 			await import("@fontsource/poppins/400-italic.css");
-        }
 		},
-    "Raleway": {
+	},
+	Raleway: {
 		name: "Raleway",
 		load: async () => {
 			await import("@fontsource/raleway/300.css");
@@ -146,9 +167,9 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/raleway/600.css");
 			await import("@fontsource/raleway/700.css");
 			await import("@fontsource/raleway/400-italic.css");
-        }
 		},
-    "Ubuntu": {
+	},
+	Ubuntu: {
 		name: "Ubuntu",
 		load: async () => {
 			await import("@fontsource/ubuntu/300.css");
@@ -156,7 +177,7 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/ubuntu/500.css");
 			await import("@fontsource/ubuntu/700.css");
 			await import("@fontsource/ubuntu/400-italic.css");
-        }
+		},
 	},
 	"Comic Neue": {
 		name: "Comic Neue",
@@ -165,38 +186,41 @@ export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
 			await import("@fontsource/comic-neue/400.css");
 			await import("@fontsource/comic-neue/700.css");
 			await import("@fontsource/comic-neue/400-italic.css");
-        }
+		},
-    }
+	},
 };
 
-export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
+export const MONOSCAPE_FONTS: Record<
+	MonoscapeFonts,
+	{ name: string; load: () => void }
+> = {
 	"Fira Code": {
 		name: "Fira Code",
-        load: () => import("@fontsource/fira-code/400.css")
+		load: () => import("@fontsource/fira-code/400.css"),
 	},
 	"Roboto Mono": {
 		name: "Roboto Mono",
-        load: () => import("@fontsource/roboto-mono/400.css")
+		load: () => import("@fontsource/roboto-mono/400.css"),
 	},
 	"Source Code Pro": {
 		name: "Source Code Pro",
-        load: () => import("@fontsource/source-code-pro/400.css")
+		load: () => import("@fontsource/source-code-pro/400.css"),
 	},
 	"Space Mono": {
 		name: "Space Mono",
-        load: () => import("@fontsource/space-mono/400.css")
+		load: () => import("@fontsource/space-mono/400.css"),
 	},
 	"Ubuntu Mono": {
 		name: "Ubuntu Mono",
-        load: () => import("@fontsource/ubuntu-mono/400.css")
+		load: () => import("@fontsource/ubuntu-mono/400.css"),
-    }
+	},
 };
 
 export const FONT_KEYS = Object.keys(FONTS).sort();
 export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
 
-export const DEFAULT_FONT = 'Open Sans';
+export const DEFAULT_FONT = "Open Sans";
-export const DEFAULT_MONO_FONT = 'Fira Code';
+export const DEFAULT_MONO_FONT = "Fira Code";
 
 // Generated from https://gitlab.insrt.uk/revolt/community/themes
 export const PRESETS: Record<string, Theme> = {
@@ -225,7 +249,7 @@ export const PRESETS: Record<string, Theme> = {
 		"status-away": "#F39F00",
 		"status-busy": "#F84848",
 		"status-streaming": "#977EFF",
-        "status-invisible": "#A5A5A5"
+		"status-invisible": "#A5A5A5",
 	},
 	dark: {
 		light: false,
@@ -252,7 +276,7 @@ export const PRESETS: Record<string, Theme> = {
 		"status-away": "#F39F00",
 		"status-busy": "#F84848",
 		"status-streaming": "#977EFF",
-        "status-invisible": "#A5A5A5"
+		"status-invisible": "#A5A5A5",
 	},
 };
 
@@ -268,7 +292,7 @@ const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
 `;
 
 // Load the default default them and apply extras later
-export const ThemeContext = createContext<Theme>(PRESETS['dark']);
+export const ThemeContext = createContext<Theme>(PRESETS["dark"]);
 
 interface Props {
 	children: Children;
@@ -278,33 +302,34 @@ interface Props {
 function Theme({ children, options }: Props) {
 	const theme: Theme = {
 		...PRESETS["dark"],
-        ...PRESETS[options?.preset ?? ''],
+		...PRESETS[options?.preset ?? ""],
-        ...options?.custom
+		...options?.custom,
 	};
 
 	const root = document.documentElement.style;
 	useEffect(() => {
 		const font = theme.font ?? DEFAULT_FONT;
-        root.setProperty('--font', `"${font}"`);
+		root.setProperty("--font", `"${font}"`);
 		FONTS[font].load();
 	}, [theme.font]);
 
 	useEffect(() => {
 		const font = theme.monoscapeFont ?? DEFAULT_MONO_FONT;
-        root.setProperty('--monoscape-font', `"${font}"`);
+		root.setProperty("--monoscape-font", `"${font}"`);
 		MONOSCAPE_FONTS[font].load();
 	}, [theme.monoscapeFont]);
 
 	useEffect(() => {
-        root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
+		root.setProperty("--ligatures", options?.ligatures ? "normal" : "none");
 	}, [options?.ligatures]);
 
 	useEffect(() => {
-        const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
+		const resize = () =>
+			root.setProperty("--app-height", `${window.innerHeight}px`);
 		resize();
 
-        window.addEventListener('resize', resize);
+		window.addEventListener("resize", resize);
-        return () => window.removeEventListener('resize', resize);
+		return () => window.removeEventListener("resize", resize);
 	}, []);
 
 	return (
@@ -328,8 +353,8 @@ function Theme({ children, options }: Props) {
 	);
 }
 
-export default connectState<{ children: Children }>(Theme, state => {
+export default connectState<{ children: Children }>(Theme, (state) => {
 	return {
-        options: state.settings.theme
+		options: state.settings.theme,
 	};
 });

src/context/Voice.tsx

@@ -1,11 +1,13 @@
 import { createContext } from "preact";
-import { Children } from "../types/Preact";
-import { useForceUpdate } from "./revoltjs/hooks";
-import { AppContext } from "./revoltjs/RevoltClient";
-import type VoiceClient from "../lib/vortex/VoiceClient";
-import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
 import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+
+import type { ProduceType, VoiceUser } from "../lib/vortex/Types";
+import type VoiceClient from "../lib/vortex/VoiceClient";
+
+import { Children } from "../types/Preact";
 import { SoundContext } from "./Settings";
+import { AppContext } from "./revoltjs/RevoltClient";
+import { useForceUpdate } from "./revoltjs/hooks";
 
 export enum VoiceStatus {
 	LOADING = 0,
@@ -15,7 +17,7 @@ export enum VoiceStatus {
 	CONNECTING = 4,
 	AUTHENTICATING,
 	RTC_CONNECTING,
-    CONNECTED
+	CONNECTED,
 	// RECONNECTING
 }
 
@@ -46,7 +48,7 @@ export default function Voice({ children }: Props) {
 	const [client, setClient] = useState<VoiceClient | undefined>(undefined);
 	const [state, setState] = useState<VoiceState>({
 		status: VoiceStatus.LOADING,
-        participants: new Map()
+		participants: new Map(),
 	});
 
 	function setStatus(status: VoiceStatus, roomId?: string) {
@@ -58,7 +60,7 @@ export default function Voice({ children }: Props) {
 	}
 
 	useEffect(() => {
-        import('../lib/vortex/VoiceClient')
+		import("../lib/vortex/VoiceClient")
 			.then(({ default: VoiceClient }) => {
 				const client = new VoiceClient();
 				setClient(client);
@@ -69,25 +71,24 @@ export default function Voice({ children }: Props) {
 					setStatus(VoiceStatus.READY);
 				}
 			})
-            .catch(err => {
+			.catch((err) => {
-                console.error('Failed to load voice library!', err);
+				console.error("Failed to load voice library!", err);
 				setStatus(VoiceStatus.UNAVAILABLE);
-            })
+			});
 	}, []);
 
 	const isConnecting = useRef(false);
 	const operations: VoiceOperations = useMemo(() => {
 		return {
-            connect: async channelId => {
+			connect: async (channelId) => {
-                if (!client?.supported())
+				if (!client?.supported()) throw new Error("RTC is unavailable");
-                    throw new Error("RTC is unavailable");
 
 				isConnecting.current = true;
 				setStatus(VoiceStatus.CONNECTING, channelId);
 
 				try {
 					const call = await revoltClient.channels.joinCall(
-                        channelId
+						channelId,
 					);
 
 					if (!isConnecting.current) {
@@ -97,7 +98,10 @@ export default function Voice({ children }: Props) {
 
 					// ! FIXME: use configuration to check if voso is enabled
 					// await client.connect("wss://voso.revolt.chat/ws");
-                    await client.connect("wss://voso.revolt.chat/ws", channelId);
+					await client.connect(
+						"wss://voso.revolt.chat/ws",
+						channelId,
+					);
 
 					setStatus(VoiceStatus.AUTHENTICATING);
 
@@ -115,8 +119,7 @@ export default function Voice({ children }: Props) {
 				isConnecting.current = false;
 			},
 			disconnect: () => {
-                if (!client?.supported())
+				if (!client?.supported()) throw new Error("RTC is unavailable");
-                    throw new Error("RTC is unavailable");
 
 				// if (status <= VoiceStatus.READY) return;
 				// this will not update in this context
@@ -134,17 +137,18 @@ export default function Voice({ children }: Props) {
 			startProducing: async (type: ProduceType) => {
 				switch (type) {
 					case "audio": {
-                        if (client?.audioProducer !== undefined) return console.log('No audio producer.'); // ! FIXME: let the user know
+						if (client?.audioProducer !== undefined)
-                        if (navigator.mediaDevices === undefined) return console.log('No media devices.'); // ! FIXME: let the user know
+							return console.log("No audio producer."); // ! FIXME: let the user know
-                        const mediaStream = await navigator.mediaDevices.getUserMedia(
+						if (navigator.mediaDevices === undefined)
-                            {
+							return console.log("No media devices."); // ! FIXME: let the user know
-                                audio: true
+						const mediaStream =
-                            }
+							await navigator.mediaDevices.getUserMedia({
-                        );
+								audio: true,
+							});
 
 						await client?.startProduce(
 							mediaStream.getAudioTracks()[0],
-                            "audio"
+							"audio",
 						);
 						return;
 					}
@@ -152,8 +156,8 @@ export default function Voice({ children }: Props) {
 			},
 			stopProducing: (type: ProduceType) => {
 				return client?.stopProduce(type);
-            }
+			},
-        }
+		};
 	}, [client]);
 
 	const { forceUpdate } = useForceUpdate();
@@ -170,11 +174,11 @@ export default function Voice({ children }: Props) {
 		client.on("stopProduce", forceUpdate);
 
 		client.on("userJoined", () => {
-            playSound('call_join');
+			playSound("call_join");
 			forceUpdate();
 		});
 		client.on("userLeft", () => {
-            playSound('call_leave');
+			playSound("call_leave");
 			forceUpdate();
 		});
 		client.on("userStartProduce", forceUpdate);

src/context/index.tsx

@@ -1,13 +1,14 @@
-import State from "../redux/State";
-import { Children } from "../types/Preact";
 import { BrowserRouter as Router } from "react-router-dom";
 
-import Intermediate from './intermediate/Intermediate';
+import State from "../redux/State";
-import Client from './revoltjs/RevoltClient';
+
-import Settings from "./Settings";
+import { Children } from "../types/Preact";
 import Locale from "./Locale";
-import Voice from "./Voice";
+import Settings from "./Settings";
 import Theme from "./Theme";
+import Voice from "./Voice";
+import Intermediate from "./intermediate/Intermediate";
+import Client from "./revoltjs/RevoltClient";
 
 export default function Context({ children }: { children: Children }) {
 	return (
@@ -18,9 +19,7 @@ export default function Context({ children }: { children: Children }) {
 						<Locale>
 							<Intermediate>
 								<Client>
-                                    <Voice>
+									<Voice>{children}</Voice>
-                                        {children}
-                                    </Voice>
 								</Client>
 							</Intermediate>
 						</Locale>

src/context/intermediate/Intermediate.tsx

@@ -1,12 +1,22 @@
-import { Attachment, Channels, EmbedImage, Servers, Users } from "revolt.js/dist/api/objects";
-import { useContext, useEffect, useMemo, useState } from "preact/hooks";
-import { internalSubscribe } from "../../lib/eventEmitter";
-import { Action } from "../../components/ui/Modal";
-import { useHistory } from "react-router-dom";
-import { Children } from "../../types/Preact";
-import { createContext } from "preact";
 import { Prompt } from "react-router";
-import Modals from './Modals';
+import { useHistory } from "react-router-dom";
+import {
+	Attachment,
+	Channels,
+	EmbedImage,
+	Servers,
+	Users,
+} from "revolt.js/dist/api/objects";
+
+import { createContext } from "preact";
+import { useContext, useEffect, useMemo, useState } from "preact/hooks";
+
+import { internalSubscribe } from "../../lib/eventEmitter";
+
+import { Action } from "../../components/ui/Modal";
+
+import { Children } from "../../types/Preact";
+import Modals from "./Modals";
 
 export type Screen =
 	| { id: "none" }
@@ -15,24 +25,42 @@ export type Screen =
 	| { id: "signed_out" }
 	| { id: "error"; error: string }
 	| { id: "clipboard"; text: string }
-| { id: "_prompt"; question: Children; content?: Children; actions: Action[] }
+	| {
+			id: "_prompt";
+			question: Children;
+			content?: Children;
+			actions: Action[];
+	  }
 	| ({ id: "special_prompt" } & (
-    { type: "leave_group", target: Channels.GroupChannel } |
+			| { type: "leave_group"; target: Channels.GroupChannel }
-    { type: "close_dm", target: Channels.DirectMessageChannel } |
+			| { type: "close_dm"; target: Channels.DirectMessageChannel }
-    { type: "leave_server", target: Servers.Server } |
+			| { type: "leave_server"; target: Servers.Server }
-    { type: "delete_server", target: Servers.Server } |
+			| { type: "delete_server"; target: Servers.Server }
-    { type: "delete_channel", target: Channels.TextChannel } |
+			| { type: "delete_channel"; target: Channels.TextChannel }
-    { type: "delete_message", target: Channels.Message } |
+			| { type: "delete_message"; target: Channels.Message }
-    { type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } |
+			| {
-    { type: "kick_member", target: Servers.Server, user: string } |
+					type: "create_invite";
-    { type: "ban_member", target: Servers.Server, user: string } |
+					target: Channels.TextChannel | Channels.GroupChannel;
-    { type: "unfriend_user", target: Users.User } |
+			  }
-    { type: "block_user", target: Users.User } |
+			| { type: "kick_member"; target: Servers.Server; user: string }
-    { type: "create_channel", target: Servers.Server }
+			| { type: "ban_member"; target: Servers.Server; user: string }
-)) |
+			| { type: "unfriend_user"; target: Users.User }
-({ id: "special_input" } & (
+			| { type: "block_user"; target: Users.User }
-    { type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
+			| { type: "create_channel"; target: Servers.Server }
-    { type: "create_role", server: string, callback: (id: string) => void }
+	  ))
+	| ({ id: "special_input" } & (
+			| {
+					type:
+						| "create_group"
+						| "create_server"
+						| "set_custom_status"
+						| "add_friend";
+			  }
+			| {
+					type: "create_role";
+					server: string;
+					callback: (id: string) => void;
+			  }
 	  ))
 	| {
 			id: "_input";
@@ -45,12 +73,12 @@ export type Screen =
 			id: "onboarding";
 			callback: (
 				username: string,
-          loginAfterSuccess?: true
+				loginAfterSuccess?: true,
 			) => Promise<void>;
 	  }
 
 	// Pop-overs
-| { id: "image_viewer"; attachment?: Attachment; embed?: EmbedImage; }
+	| { 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 }
@@ -63,12 +91,12 @@ export type Screen =
 
 export const IntermediateContext = createContext({
 	screen: { id: "none" } as Screen,
-    focusTaken: false
+	focusTaken: false,
 });
 
 export const IntermediateActionsContext = createContext({
 	openScreen: (screen: Screen) => {},
-    writeClipboard: (text: string) => {}
+	writeClipboard: (text: string) => {},
 });
 
 interface Props {
@@ -81,7 +109,7 @@ export default function Intermediate(props: Props) {
 
 	const value = {
 		screen,
-        focusTaken: screen.id !== 'none'
+		focusTaken: screen.id !== "none",
 	};
 
 	const actions = useMemo(() => {
@@ -93,26 +121,27 @@ export default function Intermediate(props: Props) {
 				} else {
 					actions.openScreen({ id: "clipboard", text });
 				}
-            }
+			},
-        }
+		};
 	}, []);
 
 	useEffect(() => {
-        const openProfile = (user_id: string) => openScreen({ id: "profile", user_id });
+		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)
+			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 }
+				{screen.id !== "onboarding" && props.children}
 				<Modals
 					{...value}
 					{...actions}
@@ -121,10 +150,19 @@ export default function Intermediate(props: Props) {
 					} /** 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)}
+					when={[
+						"modify_account",
+						"special_prompt",
+						"special_input",
+						"image_viewer",
+						"profile",
+						"channel_info",
+						"pending_requests",
+						"user_picker",
+					].includes(screen.id)}
 					message={(_, action) => {
-                        if (action === 'POP') {
+						if (action === "POP") {
-                            openScreen({ id: 'none' });
+							openScreen({ id: "none" });
 							setTimeout(() => history.push(history.location), 0);
 
 							return false;

src/context/intermediate/Modals.tsx

@@ -1,11 +1,10 @@
 import { Screen } from "./Intermediate";
-
+import { ClipboardModal } from "./modals/Clipboard";
 import { ErrorModal } from "./modals/Error";
 import { InputModal } from "./modals/Input";
+import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
-import { ClipboardModal } from "./modals/Clipboard";
-import { OnboardingModal } from "./modals/Onboarding";
 
 export interface Props {
 	screen: Screen;

src/context/intermediate/Popovers.tsx

@@ -1,14 +1,14 @@
-import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { useContext } from "preact/hooks";
 
-import { UserPicker } from "./popovers/UserPicker";
+import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
-import { UserProfile } from "./popovers/UserProfile";
-import { ImageViewer } from "./popovers/ImageViewer";
 import { ChannelInfo } from "./popovers/ChannelInfo";
-import { PendingRequests } from "./popovers/PendingRequests";
+import { ImageViewer } from "./popovers/ImageViewer";
 import { ModifyAccountModal } from "./popovers/ModifyAccount";
+import { PendingRequests } from "./popovers/PendingRequests";
+import { UserPicker } from "./popovers/UserPicker";
+import { UserProfile } from "./popovers/UserProfile";
 
 export default function Popovers() {
 	const { screen } = useContext(IntermediateContext);

src/context/intermediate/modals/Clipboard.tsx

@@ -1,4 +1,5 @@
 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -16,10 +17,9 @@ export function ClipboardModal({ onClose, text }: Props) {
 				{
 					onClick: onClose,
 					confirmation: true,
-                    text: <Text id="app.special.modals.actions.close" />
+					text: <Text id="app.special.modals.actions.close" />,
-                }
+				},
-            ]}
+			]}>
-        >
 			{location.protocol !== "https:" && (
 				<p>
 					<Text id="app.special.modals.clipboard.https" />

src/context/intermediate/modals/Error.tsx

@@ -1,4 +1,5 @@
 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -16,14 +17,13 @@ export function ErrorModal({ onClose, error }: Props) {
 				{
 					onClick: onClose,
 					confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />
+					text: <Text id="app.special.modals.actions.ok" />,
 				},
 				{
 					onClick: () => location.reload(),
-                    text: <Text id="app.special.modals.actions.reload" />
+					text: <Text id="app.special.modals.actions.reload" />,
-                }
+				},
-            ]}
+			]}>
-        >
 			<Text id={`error.${error}`}>{error}</Text>
 		</Modal>
 	);

src/context/intermediate/modals/Input.tsx

@@ -1,13 +1,16 @@
-import { ulid } from "ulid";
-import { Text } from "preact-i18n";
 import { useHistory } from "react-router";
-import Modal from "../../../components/ui/Modal";
+import { ulid } from "ulid";
-import { Children } from "../../../types/Preact";
+
-import { takeError } from "../../revoltjs/util";
+import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
-import Overline from '../../../components/ui/Overline';
+
-import InputBox from '../../../components/ui/InputBox';
+import InputBox from "../../../components/ui/InputBox";
+import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
+
+import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
+import { takeError } from "../../revoltjs/util";
 
 interface Props {
 	onClose: () => void;
@@ -22,7 +25,7 @@ export function InputModal({
 	question,
 	field,
 	defaultValue,
-    callback
+	callback,
 }: Props) {
 	const [processing, setProcessing] = useState(false);
 	const [value, setValue] = useState(defaultValue ?? "");
@@ -41,26 +44,29 @@ export function InputModal({
 						setProcessing(true);
 						callback(value)
 							.then(onClose)
-                            .catch(err => {
+							.catch((err) => {
 								setError(takeError(err));
-                                setProcessing(false)
+								setProcessing(false);
-                            })
+							});
-                    }
+					},
 				},
 				{
 					text: <Text id="app.special.modals.actions.cancel" />,
-                    onClick: onClose
+					onClick: onClose,
-                }
+				},
 			]}
-            onClose={onClose}
+			onClose={onClose}>
-        >
 			<form>
-                { field ? <Overline error={error} block>
+				{field ? (
+					<Overline error={error} block>
 						{field}
-                </Overline> : (error && <Overline error={error} type="error" block />) }
+					</Overline>
+				) : (
+					error && <Overline error={error} type="error" block />
+				)}
 				<InputBox
 					value={value}
-                    onChange={e => setValue(e.currentTarget.value)}
+					onChange={(e) => setValue(e.currentTarget.value)}
 				/>
 			</form>
 		</Modal>
@@ -68,9 +74,15 @@ export function InputModal({
 }
 
 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();
@@ -79,76 +91,86 @@ export function SpecialInputModal(props: SpecialProps) {
 	const { onClose } = props;
 	switch (props.type) {
 		case "create_group": {
-            return <InputModal
+			return (
+				<InputModal
 					onClose={onClose}
 					question={<Text id="app.main.groups.create" />}
 					field={<Text id="app.main.groups.name" />}
-                callback={async name => {
+					callback={async (name) => {
-                    const group = await client.channels.createGroup(
+						const group = await client.channels.createGroup({
-                        {
 							name,
 							nonce: ulid(),
-                            users: []
+							users: [],
-                        }
+						});
-                    );
 
 						history.push(`/channel/${group._id}`);
 					}}
-            />;
+				/>
+			);
 		}
 		case "create_server": {
-            return <InputModal
+			return (
+				<InputModal
 					onClose={onClose}
 					question={<Text id="app.main.servers.create" />}
 					field={<Text id="app.main.servers.name" />}
-                callback={async name => {
+					callback={async (name) => {
-                    const server = await client.servers.createServer(
+						const server = await client.servers.createServer({
-                        {
 							name,
-                            nonce: ulid()
+							nonce: ulid(),
-                        }
+						});
-                    );
 
 						history.push(`/server/${server._id}`);
 					}}
-            />;
+				/>
+			);
 		}
 		case "create_role": {
-            return <InputModal
+			return (
+				<InputModal
 					onClose={onClose}
-                question={<Text id="app.settings.permissions.create_role" />}
+					question={
+						<Text id="app.settings.permissions.create_role" />
+					}
 					field={<Text id="app.settings.permissions.role_name" />}
-                callback={async name => {
+					callback={async (name) => {
-                    const role = await client.servers.createRole(props.server, name);
+						const role = await client.servers.createRole(
+							props.server,
+							name,
+						);
 						props.callback(role.id);
 					}}
-            />;
+				/>
+			);
 		}
 		case "set_custom_status": {
-            return <InputModal
+			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 =>
+					callback={(text) =>
 						client.users.editUser({
 							status: {
 								...client.user?.status,
-                            text: text.trim().length > 0 ? text : undefined
+								text: text.trim().length > 0 ? text : undefined,
-                        }
+							},
 						})
 					}
-            />;
+				/>
+			);
 		}
 		case "add_friend": {
-            return <InputModal
+			return (
+				<InputModal
 					onClose={onClose}
 					question={"Add Friend"}
-                callback={username =>
+					callback={(username) => client.users.addFriend(username)}
-                    client.users.addFriend(username)
+				/>
+			);
 		}
-            />;
+		default:
-        }
+			return null;
-        default: return null;
 	}
 }

src/context/intermediate/modals/Onboarding.tsx

@@ -1,13 +1,15 @@
+import { SubmitHandler, useForm } from "react-hook-form";
+
+import styles from "./Onboarding.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
-import { SubmitHandler, useForm } from "react-hook-form";
+
-import styles from "./Onboarding.module.scss";
+import wideSVG from "../../../assets/wide.svg";
-import { takeError } from "../../revoltjs/util";
 import Button from "../../../components/ui/Button";
-import FormField from "../../../pages/login/FormField";
 import Preloader from "../../../components/ui/Preloader";
 
-import wideSVG from '../../../assets/wide.svg';
+import FormField from "../../../pages/login/FormField";
+import { takeError } from "../../revoltjs/util";
 
 interface Props {
 	onClose: () => void;
@@ -15,7 +17,7 @@ interface Props {
 }
 
 interface FormInputs {
-    username: string
+	username: string;
 }
 
 export function OnboardingModal({ onClose, callback }: Props) {
@@ -31,7 +33,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
 				setError(takeError(err));
 				setLoading(false);
 			});
-    }
+	};
 
 	return (
 		<div className={styles.onboarding}>
@@ -49,7 +51,12 @@ export function OnboardingModal({ onClose, callback }: Props) {
 						<p>
 							<Text id="app.special.modals.onboarding.pick" />
 						</p>
-                        <form onSubmit={handleSubmit(onSubmit) as JSX.GenericEventHandler<HTMLFormElement>}>
+						<form
+							onSubmit={
+								handleSubmit(
+									onSubmit,
+								) as JSX.GenericEventHandler<HTMLFormElement>
+							}>
 							<div>
 								<FormField
 									type="username"

src/context/intermediate/modals/Prompt.tsx

@@ -1,20 +1,24 @@
-import { ulid } from "ulid";
-import { Text } from "preact-i18n";
-import styles from './Prompt.module.scss';
 import { useHistory } from "react-router-dom";
-import Radio from "../../../components/ui/Radio";
+import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
-import { Children } from "../../../types/Preact";
+import { ulid } from "ulid";
-import { useIntermediate } from "../Intermediate";
+
+import styles from "./Prompt.module.scss";
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { TextReact } from "../../../lib/i18n";
+
+import Message from "../../../components/common/messaging/Message";
+import UserIcon from "../../../components/common/user/UserIcon";
 import InputBox from "../../../components/ui/InputBox";
+import Modal, { Action } from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
+import Radio from "../../../components/ui/Radio";
+
+import { Children } from "../../../types/Preact";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { mapMessage, takeError } from "../../revoltjs/util";
-import Modal, { Action } from "../../../components/ui/Modal";
+import { useIntermediate } from "../Intermediate";
-import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
-import { useContext, useEffect, useState } from "preact/hooks";
-import UserIcon from "../../../components/common/user/UserIcon";
-import Message from "../../../components/common/messaging/Message";
-import { TextReact } from "../../../lib/i18n";
 
 interface Props {
 	onClose: () => void;
@@ -25,7 +29,14 @@ interface Props {
 	error?: string;
 }
 
-export function PromptModal({ onClose, question, content, actions, disabled, error }: Props) {
+export function PromptModal({
+	onClose,
+	question,
+	content,
+	actions,
+	disabled,
+	error,
+}: Props) {
 	return (
 		<Modal
 			visible={true}
@@ -40,19 +51,22 @@ export function PromptModal({ onClose, question, content, actions, disabled, err
 }
 
 type SpecialProps = { onClose: () => void } & (
-    { type: "leave_group", target: Channels.GroupChannel } |
+	| { type: "leave_group"; target: Channels.GroupChannel }
-    { type: "close_dm", target: Channels.DirectMessageChannel } |
+	| { type: "close_dm"; target: Channels.DirectMessageChannel }
-    { type: "leave_server", target: Servers.Server } |
+	| { type: "leave_server"; target: Servers.Server }
-    { type: "delete_server", target: Servers.Server } |
+	| { type: "delete_server"; target: Servers.Server }
-    { type: "delete_channel", target: Channels.TextChannel } |
+	| { type: "delete_channel"; target: Channels.TextChannel }
-    { type: "delete_message", target: Channels.Message } |
+	| { type: "delete_message"; target: Channels.Message }
-    { type: "create_invite", target: Channels.TextChannel | Channels.GroupChannel } |
+	| {
-    { type: "kick_member", target: Servers.Server, user: string } |
+			type: "create_invite";
-    { type: "ban_member", target: Servers.Server, user: string } |
+			target: Channels.TextChannel | Channels.GroupChannel;
-    { type: "unfriend_user", target: Users.User } |
+	  }
-    { type: "block_user", target: Users.User } |
+	| { type: "kick_member"; target: Servers.Server; user: string }
-    { type: "create_channel", target: Servers.Server }
+	| { 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);
@@ -61,61 +75,86 @@ export function SpecialPromptModal(props: SpecialProps) {
 
 	const { onClose } = props;
 	switch (props.type) {
-        case 'leave_group':
+		case "leave_group":
-        case 'close_dm':
+		case "close_dm":
-        case 'leave_server':
+		case "leave_server":
-        case 'delete_server': 
+		case "delete_server":
-        case 'delete_channel':
+		case "delete_channel":
-        case 'unfriend_user': 
+		case "unfriend_user":
-        case 'block_user': {
+		case "block_user": {
 			const EVENTS = {
-                'close_dm':       ['confirm_close_dm', 'close'],
+				close_dm: ["confirm_close_dm", "close"],
-                'delete_server':  ['confirm_delete', 'delete'],
+				delete_server: ["confirm_delete", "delete"],
-                'delete_channel': ['confirm_delete', 'delete'],
+				delete_channel: ["confirm_delete", "delete"],
-                'leave_group':    ['confirm_leave', 'leave'],
+				leave_group: ["confirm_leave", "leave"],
-                'leave_server':   ['confirm_leave', 'leave'],
+				leave_server: ["confirm_leave", "leave"],
-                'unfriend_user':  ['unfriend_user', 'remove'],
+				unfriend_user: ["unfriend_user", "remove"],
-                'block_user':     ['block_user', 'block']
+				block_user: ["block_user", "block"],
 			};
 
 			let event = EVENTS[props.type];
 			let name;
 			switch (props.type) {
-                case 'unfriend_user':
+				case "unfriend_user":
-                case 'block_user': name = props.target.username; break;
+				case "block_user":
-                case 'close_dm': name = client.users.get(client.channels.getRecipient(props.target._id))?.username; break;
+					name = props.target.username;
-                default: name = props.target.name;
+					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
+					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]}`} />,
+							text: (
+								<Text
+									id={`app.special.modals.actions.${event[1]}`}
+								/>
+							),
 							onClick: async () => {
 								setProcessing(true);
 
 								try {
 									switch (props.type) {
-                                        case 'unfriend_user':
+										case "unfriend_user":
-                                            await client.users.removeFriend(props.target._id); break;
+											await client.users.removeFriend(
-                                        case 'block_user':
+												props.target._id,
-                                            await client.users.blockUser(props.target._id); break;
+											);
-                                        case 'leave_group':
+											break;
-                                        case 'close_dm':
+										case "block_user":
-                                        case 'delete_channel':
+											await client.users.blockUser(
-                                            await client.channels.delete(props.target._id); break;
+												props.target._id,
-                                        case 'leave_server':
+											);
-                                        case 'delete_server':
+											break;
-                                            await client.servers.delete(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();
@@ -123,61 +162,90 @@ export function SpecialPromptModal(props: SpecialProps) {
 									setError(takeError(err));
 									setProcessing(false);
 								}
-                            }
 							},
-                        { text: <Text id="app.special.modals.actions.cancel" />, onClick: onClose }
+						},
+						{
+							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> }} />}
+					content={
+						<TextReact
+							id={`app.special.modals.prompt.${event[0]}_long`}
+							fields={{ name: <b>{name}</b> }}
+						/>
+					}
 					disabled={processing}
 					error={error}
 				/>
-            )
+			);
 		}
-        case 'delete_message': {
+		case "delete_message": {
 			return (
 				<PromptModal
 					onClose={onClose}
-                    question={<Text id={'app.context_menu.delete_message'} />}
+					question={<Text id={"app.context_menu.delete_message"} />}
 					actions={[
 						{
 							confirmation: true,
 							contrast: true,
 							error: true,
-                            text: <Text id="app.special.modals.actions.delete" />,
+							text: (
+								<Text id="app.special.modals.actions.delete" />
+							),
 							onClick: async () => {
 								setProcessing(true);
 
 								try {
-                                    await client.channels.deleteMessage(props.target.channel, props.target._id);
+									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 }
+						},
+						{
+							text: (
+								<Text id="app.special.modals.actions.cancel" />
+							),
+							onClick: onClose,
+						},
 					]}
-                    content={<>
+					content={
-                        <Text id={`app.special.modals.prompt.confirm_delete_message_long`} />
+						<>
-                        <Message message={mapMessage(props.target)} head={true} contrast />
+							<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 [code, setCode] = useState("abcdef");
 			const { writeClipboard } = useIntermediate();
 
 			useEffect(() => {
 				setProcessing(true);
 
-                client.channels.createInvite(props.target._id)
+				client.channels
-                    .then(code => setCode(code))
+					.createInvite(props.target._id)
-                    .catch(err => setError(takeError(err)))
+					.then((code) => setCode(code))
+					.catch((err) => setError(takeError(err)))
 					.finally(() => setProcessing(false));
 			}, []);
 
@@ -189,25 +257,30 @@ export function SpecialPromptModal(props: SpecialProps) {
 						{
 							text: <Text id="app.special.modals.actions.ok" />,
 							confirmation: true,
-                            onClick: onClose
+							onClick: onClose,
 						},
 						{
 							text: <Text id="app.context_menu.copy_link" />,
-                            onClick: () => writeClipboard(`${window.location.protocol}//${window.location.host}/invite/${code}`)
+							onClick: () =>
-                        }
+								writeClipboard(
+									`${window.location.protocol}//${window.location.host}/invite/${code}`,
+								),
+						},
 					]}
 					content={
-                        processing ?
+						processing ? (
 							<Text id="app.special.modals.prompt.create_invite_generate" />
-                          : <div className={styles.invite}>
+						) : (
+							<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);
@@ -226,26 +299,37 @@ export function SpecialPromptModal(props: SpecialProps) {
 								setProcessing(true);
 
 								try {
-                                    await client.servers.members.kickMember(props.target._id, props.user);
+									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 }
+						},
+						{
+							text: (
+								<Text id="app.special.modals.actions.cancel" />
+							),
+							onClick: onClose,
+						},
 					]}
-                    content={<div className={styles.column}>
+					content={
+						<div className={styles.column}>
 							<UserIcon target={user} size={64} />
 							<Text
 								id="app.special.modals.prompt.confirm_kick"
-                            fields={{ name: user?.username }} />
+								fields={{ name: user?.username }}
-                    </div>}
+							/>
+						</div>
+					}
 					disabled={processing}
 					error={error}
 				/>
-            )
+			);
 		}
 		case "ban_member": {
 			const [reason, setReason] = useState<string | undefined>(undefined);
@@ -265,32 +349,51 @@ export function SpecialPromptModal(props: SpecialProps) {
 								setProcessing(true);
 
 								try {
-                                    await client.servers.banUser(props.target._id, props.user, { reason });
+									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 }
+						},
+						{
+							text: (
+								<Text id="app.special.modals.actions.cancel" />
+							),
+							onClick: onClose,
+						},
 					]}
-                    content={<div className={styles.column}>
+					content={
+						<div className={styles.column}>
 							<UserIcon target={user} size={64} />
 							<Text
 								id="app.special.modals.prompt.confirm_ban"
-                            fields={{ name: user?.username }} />
+								fields={{ name: user?.username }}
-                        <Overline><Text id="app.special.modals.prompt.confirm_ban_reason" /></Overline>
+							/>
-                        <InputBox value={reason ?? ''} onChange={e => setReason(e.currentTarget.value)} />
+							<Overline>
-                    </div>}
+								<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': {
+		case "create_channel": {
-            const [ name, setName ] = useState('');
+			const [name, setName] = useState("");
-            const [ type, setType ] = useState<'Text' | 'Voice'>('Text');
+			const [type, setType] = useState<"Text" | "Voice">("Text");
 			const history = useHistory();
 
 			return (
@@ -301,46 +404,70 @@ export function SpecialPromptModal(props: SpecialProps) {
 						{
 							confirmation: true,
 							contrast: true,
-                            text: <Text id="app.special.modals.actions.create" />,
+							text: (
+								<Text id="app.special.modals.actions.create" />
+							),
 							onClick: async () => {
 								setProcessing(true);
 
 								try {
-                                    const channel = await client.servers.createChannel(
+									const channel =
+										await client.servers.createChannel(
 											props.target._id,
 											{
 												type,
 												name,
-                                            nonce: ulid()
+												nonce: ulid(),
-                                        }
+											},
 										);
 
-                                    history.push(`/server/${props.target._id}/channel/${channel._id}`);
+									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 }
+						},
+						{
+							text: (
+								<Text id="app.special.modals.actions.cancel" />
+							),
+							onClick: onClose,
+						},
 					]}
-                    content={<>
+					content={
-                        <Overline block type="subtle"><Text id="app.main.servers.channel_type" /></Overline>
+						<>
-                        <Radio checked={type === 'Text'} onSelect={() => setType('Text')}>
+							<Overline block type="subtle">
-                            <Text id="app.main.servers.text_channel" /></Radio>
+								<Text id="app.main.servers.channel_type" />
-                        <Radio checked={type === 'Voice'} onSelect={() => setType('Voice')}>
+							</Overline>
-                            <Text id="app.main.servers.voice_channel" /></Radio>
+							<Radio
-                        <Overline block type="subtle"><Text id="app.main.servers.channel_name" /></Overline>
+								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)} />
+								onChange={(e) => setName(e.currentTarget.value)}
-                    </>}
+							/>
+						</>
+					}
 					disabled={processing}
 					error={error}
 				/>
-            )
+			);
 		}
-        default: return null;
+		default:
+			return null;
 	}
 }

src/context/intermediate/modals/SignedOut.tsx

@@ -1,4 +1,5 @@
 import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
 
 interface Props {
@@ -15,8 +16,8 @@ export function SignedOutModal({ onClose }: Props) {
 				{
 					onClick: onClose,
 					confirmation: true,
-                    text: <Text id="app.special.modals.actions.ok" />
+					text: <Text id="app.special.modals.actions.ok" />,
-                }
+				},
 			]}
 		/>
 	);

src/context/intermediate/popovers/ChannelInfo.tsx

@@ -1,9 +1,12 @@
 import { X } from "@styled-icons/boxicons-regular";
+
 import styles from "./ChannelInfo.module.scss";
+
 import Modal from "../../../components/ui/Modal";
-import { getChannelName } from "../../revoltjs/util";
+
 import Markdown from "../../../components/markdown/Markdown";
 import { useChannel, useForceUpdate } from "../../revoltjs/hooks";
+import { getChannelName } from "../../revoltjs/util";
 
 interface Props {
 	channel_id: string;
@@ -15,7 +18,10 @@ export function ChannelInfo({ channel_id, onClose }: Props) {
 	const channel = useChannel(channel_id, ctx);
 	if (!channel) return null;
 
-    if (channel.channel_type === "DirectMessage" || channel.channel_type === 'SavedMessages') {
+	if (
+		channel.channel_type === "DirectMessage" ||
+		channel.channel_type === "SavedMessages"
+	) {
 		onClose();
 		return null;
 	}

src/context/intermediate/popovers/ImageViewer.tsx

@@ -1,10 +1,13 @@
-import styles from "./ImageViewer.module.scss";
-import Modal from "../../../components/ui/Modal";
-import { useContext, useEffect } from "preact/hooks";
-import { AppContext } from "../../revoltjs/RevoltClient";
 import { Attachment, EmbedImage } from "revolt.js/dist/api/objects";
-import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
+
+import styles from "./ImageViewer.module.scss";
+import { useContext, useEffect } from "preact/hooks";
+
 import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
+import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
+import Modal from "../../../components/ui/Modal";
+
+import { AppContext } from "../../revoltjs/RevoltClient";
 
 interface Props {
 	onClose: () => void;
@@ -16,7 +19,7 @@ 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);
+		return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
 	}
 
 	if (attachment && attachment.metadata.type !== "Image") return null;
@@ -25,18 +28,18 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
 	return (
 		<Modal visible={true} onClose={onClose} noBackground>
 			<div className={styles.viewer}>
-                { attachment &&
+				{attachment && (
 					<>
 						<img src={client.generateFileURL(attachment)} />
 						<AttachmentActions attachment={attachment} />
 					</>
-                }
+				)}
-                { embed &&
+				{embed && (
 					<>
 						<img src={proxyImage(embed.url)} />
 						<EmbedMediaActions embed={embed} />
 					</>
-                }
+				)}
 			</div>
 		</Modal>
 	);

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -1,11 +1,14 @@
-import { Text } from "preact-i18n";
 import { SubmitHandler, useForm } from "react-hook-form";
-import Modal from "../../../components/ui/Modal";
+
-import { takeError } from "../../revoltjs/util";
+import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
-import FormField from '../../../pages/login/FormField';
+
+import Modal from "../../../components/ui/Modal";
 import Overline from "../../../components/ui/Overline";
+
+import FormField from "../../../pages/login/FormField";
 import { AppContext } from "../../revoltjs/RevoltClient";
+import { takeError } from "../../revoltjs/util";
 
 interface Props {
 	onClose: () => void;
@@ -13,14 +16,14 @@ interface Props {
 }
 
 interface FormInputs {
-    password: string,
+	password: string;
-    new_email: string,
+	new_email: string;
-    new_username: string,
+	new_username: string;
-    new_password: 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
+	current_password?: string;
 }
 
 export function ModifyAccountModal({ onClose, field }: Props) {
@@ -32,32 +35,32 @@ export function ModifyAccountModal({ onClose, field }: Props) {
 		password,
 		new_username,
 		new_email,
-        new_password
+		new_password,
 	}) => {
 		try {
 			if (field === "email") {
 				await client.req("POST", "/auth/change/email", {
 					password,
-                    new_email
+					new_email,
 				});
 				onClose();
 			} else if (field === "password") {
 				await client.req("POST", "/auth/change/password", {
 					password,
-                    new_password
+					new_password,
 				});
 				onClose();
 			} else if (field === "username") {
 				await client.req("PATCH", "/users/id/username", {
 					username: new_username,
-                    password
+					password,
 				});
 				onClose();
 			}
 		} catch (err) {
 			setError(takeError(err));
 		}
-    }
+	};
 
 	return (
 		<Modal
@@ -73,16 +76,20 @@ export function ModifyAccountModal({ onClose, field }: Props) {
 							<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" />
+					text: <Text id="app.special.modals.actions.close" />,
-                }
+				},
-            ]}
+			]}>
-        >
 			{/* Preact / React typing incompatabilities */}
-            <form onSubmit={handleSubmit(onSubmit) as JSX.GenericEventHandler<HTMLFormElement>}>
+			<form
+				onSubmit={
+					handleSubmit(
+						onSubmit,
+					) as JSX.GenericEventHandler<HTMLFormElement>
+				}>
 				{field === "email" && (
 					<FormField
 						type="email"

src/context/intermediate/popovers/PendingRequests.tsx

@@ -1,8 +1,10 @@
-import { Text } from "preact-i18n";
 import styles from "./UserPicker.module.scss";
-import { useUsers } from "../../revoltjs/hooks";
+import { Text } from "preact-i18n";
+
 import Modal from "../../../components/ui/Modal";
+
 import { Friend } from "../../../pages/friends/Friend";
+import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
 	users: string[];
@@ -19,8 +21,10 @@ export function PendingRequests({ users: ids, onClose }: Props) {
 			onClose={onClose}>
 			<div className={styles.list}>
 				{users
-                    .filter(x => typeof x !== 'undefined')
+					.filter((x) => typeof x !== "undefined")
-                    .map(x => <Friend user={x!} key={x!._id} />) }
+					.map((x) => (
+						<Friend user={x!} key={x!._id} />
+					))}
 			</div>
 		</Modal>
 	);

src/context/intermediate/popovers/UserPicker.tsx

@@ -1,10 +1,13 @@
+import { User, Users } from "revolt.js/dist/api/objects";
+
+import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
-import styles from "./UserPicker.module.scss";
+
-import { useUsers } from "../../revoltjs/hooks";
-import Modal from "../../../components/ui/Modal";
-import { User, Users } from "revolt.js/dist/api/objects";
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
+import Modal from "../../../components/ui/Modal";
+
+import { useUsers } from "../../revoltjs/hooks";
 
 interface Props {
 	omit?: string[];
@@ -26,33 +29,34 @@ export function UserPicker(props: Props) {
 			actions={[
 				{
 					text: <Text id="app.special.modals.actions.ok" />,
-                    onClick: () => props.callback(selected).then(props.onClose)
+					onClick: () => props.callback(selected).then(props.onClose),
-                }
+				},
-            ]}
+			]}>
-        >
 			<div className={styles.list}>
-                {(users.filter(
+				{(
-                    x =>
+					users.filter(
+						(x) =>
 							x &&
 							x.relationship === Users.Relationship.Friend &&
-                        !omit.includes(x._id)
+							!omit.includes(x._id),
-                ) as User[])
+					) as User[]
-                    .map(x => {
+				)
+					.map((x) => {
 						return {
 							...x,
-                            selected: selected.includes(x._id)
+							selected: selected.includes(x._id),
 						};
 					})
-                    .map(x => (
+					.map((x) => (
 						<UserCheckbox
 							user={x}
 							checked={x.selected}
-                            onChange={v => {
+							onChange={(v) => {
 								if (v) {
 									setSelected([...selected, x._id]);
 								} else {
 									setSelected(
-                                        selected.filter(y => y !== x._id)
+										selected.filter((y) => y !== x._id),
 									);
 								}
 							}}

src/context/intermediate/popovers/UserProfile.tsx

@@ -1,23 +1,41 @@
-import { decodeTime } from "ulid";
+import {
+	Envelope,
+	Edit,
+	UserPlus,
+	Shield,
+	Money,
+} from "@styled-icons/boxicons-regular";
 import { Link, useHistory } from "react-router-dom";
-import { Localizer, Text } from "preact-i18n";
-import styles from "./UserProfile.module.scss";
-import Modal from "../../../components/ui/Modal";
-import { Route } from "revolt.js/dist/api/routes";
 import { Users } from "revolt.js/dist/api/objects";
-import { useIntermediate } from "../Intermediate";
-import Preloader from "../../../components/ui/Preloader";
-import Tooltip from '../../../components/common/Tooltip';
-import IconButton from "../../../components/ui/IconButton";
-import Markdown from '../../../components/markdown/Markdown';
 import { UserPermission } from "revolt.js/dist/api/permissions";
-import UserIcon from '../../../components/common/user/UserIcon';
+import { Route } from "revolt.js/dist/api/routes";
-import ChannelIcon from '../../../components/common/ChannelIcon';
+import { decodeTime } from "ulid";
-import UserStatus from '../../../components/common/user/UserStatus';
+
-import { Envelope, Edit, UserPlus, Shield, Money } from "@styled-icons/boxicons-regular";
+import styles from "./UserProfile.module.scss";
+import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
-import { AppContext, ClientStatus, StatusContext } from "../../revoltjs/RevoltClient";
+
-import { useChannels, useForceUpdate, useUserPermission, useUsers } from "../../revoltjs/hooks";
+import ChannelIcon from "../../../components/common/ChannelIcon";
+import Tooltip from "../../../components/common/Tooltip";
+import UserIcon from "../../../components/common/user/UserIcon";
+import UserStatus from "../../../components/common/user/UserStatus";
+import IconButton from "../../../components/ui/IconButton";
+import Modal from "../../../components/ui/Modal";
+import Preloader from "../../../components/ui/Preloader";
+
+import Markdown from "../../../components/markdown/Markdown";
+import {
+	AppContext,
+	ClientStatus,
+	StatusContext,
+} from "../../revoltjs/RevoltClient";
+import {
+	useChannels,
+	useForceUpdate,
+	useUserPermission,
+	useUsers,
+} from "../../revoltjs/hooks";
+import { useIntermediate } from "../Intermediate";
 
 interface Props {
 	user_id: string;
@@ -31,14 +49,14 @@ enum Badges {
 	Translator = 2,
 	Supporter = 4,
 	ResponsibleDisclosure = 8,
-    EarlyAdopter = 256
+	EarlyAdopter = 256,
 }
 
 export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 	const { openScreen, writeClipboard } = useIntermediate();
 
 	const [profile, setProfile] = useState<undefined | null | Users.Profile>(
-        undefined
+		undefined,
 	);
 	const [mutual, setMutual] = useState<
 		undefined | null | Route<"GET", "/users/id/mutual">["response"]
@@ -53,8 +71,10 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 	const all_users = useUsers(undefined, ctx);
 	const channels = useChannels(undefined, ctx);
 
-    const user = all_users.find(x => x!._id === user_id);
+	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 users = mutual?.users
+		? all_users.filter((x) => mutual.users.includes(x!._id))
+		: undefined;
 
 	if (!user) {
 		useEffect(onClose, []);
@@ -65,8 +85,8 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 
 	useLayoutEffect(() => {
 		if (!user_id) return;
-        if (typeof profile !== 'undefined') setProfile(undefined);
+		if (typeof profile !== "undefined") setProfile(undefined);
-        if (typeof mutual  !== 'undefined') setMutual(undefined);
+		if (typeof mutual !== "undefined") setMutual(undefined);
 	}, [user_id]);
 
 	if (dummy) {
@@ -77,60 +97,54 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 
 	useEffect(() => {
 		if (dummy) return;
-        if (
+		if (status === ClientStatus.ONLINE && typeof mutual === "undefined") {
-            status === ClientStatus.ONLINE &&
-            typeof mutual === "undefined"
-        ) {
 			setMutual(null);
-            client.users
+			client.users.fetchMutual(user_id).then((data) => setMutual(data));
-                .fetchMutual(user_id)
-                .then(data => setMutual(data));
 		}
 	}, [mutual, status]);
 
 	useEffect(() => {
 		if (dummy) return;
-        if (
+		if (status === ClientStatus.ONLINE && typeof profile === "undefined") {
-            status === ClientStatus.ONLINE &&
-            typeof profile === "undefined"
-        ) {
 			setProfile(null);
 
 			if (permissions & UserPermission.ViewProfile) {
 				client.users
 					.fetchProfile(user_id)
-                    .then(data => setProfile(data))
+					.then((data) => setProfile(data))
 					.catch(() => {});
 			}
 		}
 	}, [profile, status]);
 
 	const mutualGroups = channels.filter(
-        channel =>
+		(channel) =>
 			channel?.channel_type === "Group" &&
-            channel.recipients.includes(user_id)
+			channel.recipients.includes(user_id),
 	);
 
-    const backgroundURL = profile && client.users.getBackgroundURL(profile, { width: 1000 }, true);
+	const backgroundURL =
-    const badges = (user.badges ?? 0) | (decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
+		profile &&
+		client.users.getBackgroundURL(profile, { width: 1000 }, true);
+	const badges =
+		(user.badges ?? 0) |
+		(decodeTime(user._id) < 1623751765790 ? Badges.EarlyAdopter : 0);
 
 	return (
-        <Modal visible
+		<Modal
+			visible
 			border={dummy}
 			padding={false}
 			onClose={onClose}
 			dontModal={dummy}>
 			<div
 				className={styles.header}
-                data-force={
+				data-force={profile?.background ? "light" : undefined}
-                    profile?.background
-                        ? "light"
-                        : undefined
-                }
 				style={{
-                    backgroundImage: backgroundURL && `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`
+					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}>
@@ -152,8 +166,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 							<Tooltip
 								content={
 									<Text id="app.context_menu.message_user" />
-                                }
+								}>
-                            >
 								<IconButton
 									onClick={() => {
 										onClose();
@@ -176,7 +189,10 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 					)}
 					{(user.relationship === Users.Relationship.Incoming ||
 						user.relationship === Users.Relationship.None) && (
-                        <IconButton onClick={() => client.users.addFriend(user.username)}>
+						<IconButton
+							onClick={() =>
+								client.users.addFriend(user.username)
+							}>
 							<UserPlus size={28} />
 						</IconButton>
 					)}
@@ -184,43 +200,46 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 				<div className={styles.tabs}>
 					<div
 						data-active={tab === "profile"}
-                        onClick={() => setTab("profile")}
+						onClick={() => setTab("profile")}>
-                    >
 						<Text id="app.special.popovers.user_profile.profile" />
 					</div>
-                    { user.relationship !== Users.Relationship.User &&
+					{user.relationship !== Users.Relationship.User && (
 						<>
 							<div
 								data-active={tab === "friends"}
-                                onClick={() => setTab("friends")}
+								onClick={() => setTab("friends")}>
-                            >
 								<Text id="app.special.popovers.user_profile.mutual_friends" />
 							</div>
 							<div
 								data-active={tab === "groups"}
-                                onClick={() => setTab("groups")}
+								onClick={() => setTab("groups")}>
-                            >
 								<Text id="app.special.popovers.user_profile.mutual_groups" />
 							</div>
 						</>
-                    }
+					)}
 				</div>
 			</div>
 			<div className={styles.content}>
-                {tab === "profile" &&
+				{tab === "profile" && (
 					<div>
-                    { !(profile?.content || (badges > 0)) &&
+						{!(profile?.content || badges > 0) && (
-                        <div className={styles.empty}><Text id="app.special.popovers.user_profile.empty" /></div> }
+							<div className={styles.empty}>
-                    { (badges > 0) && <div className={styles.category}><Text id="app.special.popovers.user_profile.sub.badges" /></div> }
+								<Text id="app.special.popovers.user_profile.empty" />
-                    { (badges > 0) && (
+							</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>
 									) : (
@@ -230,8 +249,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 										<Tooltip
 											content={
 												<Text id="app.special.popovers.user_profile.badges.translator" />
-                                        }
+											}>
-                                    >
 											<img src="/assets/badges/translator.svg" />
 										</Tooltip>
 									) : (
@@ -241,8 +259,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 										<Tooltip
 											content={
 												<Text id="app.special.popovers.user_profile.badges.early_adopter" />
-                                        }
+											}>
-                                    >
 											<img src="/assets/badges/early_adopter.svg" />
 										</Tooltip>
 									) : (
@@ -252,8 +269,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 										<Tooltip
 											content={
 												<Text id="app.special.popovers.user_profile.badges.supporter" />
-                                        }
+											}>
-                                    >
 											<Money size={32} color="#efab44" />
 										</Tooltip>
 									) : (
@@ -263,8 +279,7 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 										<Tooltip
 											content={
 												<Text id="app.special.popovers.user_profile.badges.responsible_disclosure" />
-                                        }
+											}>
-                                    >
 											<Shield size={32} color="gray" />
 										</Tooltip>
 									) : (
@@ -273,10 +288,15 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 								</Localizer>
 							</div>
 						)}
-                    { profile?.content && <div className={styles.category}><Text id="app.special.popovers.user_profile.sub.information" /></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>}
+					</div>
+				)}
 				{tab === "friends" &&
 					(users ? (
 						<div className={styles.entries}>
@@ -286,15 +306,24 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 								</div>
 							) : (
 								users.map(
-                                    x =>
+									(x) =>
 										x && (
-                                            <div onClick={() => openScreen({ id: 'profile', user_id: x._id })}
+											<div
+												onClick={() =>
+													openScreen({
+														id: "profile",
+														user_id: x._id,
+													})
+												}
 												className={styles.entry}
 												key={x._id}>
-                                                <UserIcon size={32} target={x} />
+												<UserIcon
+													size={32}
+													target={x}
+												/>
 												<span>{x.username}</span>
 											</div>
-                                        )
+										),
 								)
 							)}
 						</div>
@@ -309,18 +338,20 @@ export function UserProfile({ user_id, onClose, dummy, dummyProfile }: Props) {
 							</div>
 						) : (
 							mutualGroups.map(
-                                x =>
+								(x) =>
 									x?.channel_type === "Group" && (
 										<Link to={`/channel/${x._id}`}>
 											<div
 												className={styles.entry}
-                                                key={x._id}
+												key={x._id}>
-                                            >
+												<ChannelIcon
-                                                <ChannelIcon target={x} size={32} />
+													target={x}
+													size={32}
+												/>
 												<span>{x.name}</span>
 											</div>
 										</Link>
-                                    )
+									),
 							)
 						)}
 					</div>

src/context/revoltjs/CheckAuth.tsx

@@ -1,7 +1,8 @@
-import { useContext } from "preact/hooks";
 import { Redirect } from "react-router-dom";
-import { Children } from "../../types/Preact";
 
+import { useContext } from "preact/hooks";
+
+import { Children } from "../../types/Preact";
 import { OperationsContext } from "./RevoltClient";
 
 interface Props {

src/context/revoltjs/FileUploads.tsx

@@ -1,45 +1,76 @@
-import { Text } from "preact-i18n";
-import { takeError } from "./util";
-import classNames from "classnames";
-import { AppContext } from "./RevoltClient";
-import styles from './FileUploads.module.scss';
-import Axios, { AxiosRequestConfig } from "axios";
-import { useContext, useEffect, useState } from "preact/hooks";
-import Preloader from "../../components/ui/Preloader";
-import { determineFileSize } from "../../lib/fileSize";
-import IconButton from '../../components/ui/IconButton';
 import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
 import { Pencil } from "@styled-icons/boxicons-solid";
+import Axios, { AxiosRequestConfig } from "axios";
+
+import styles from "./FileUploads.module.scss";
+import classNames from "classnames";
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import { determineFileSize } from "../../lib/fileSize";
+
+import IconButton from "../../components/ui/IconButton";
+import Preloader from "../../components/ui/Preloader";
+
 import { useIntermediate } from "../intermediate/Intermediate";
+import { AppContext } from "./RevoltClient";
+import { takeError } from "./util";
 
 type Props = {
-    maxFileSize: number
+	maxFileSize: number;
-    remove: () => Promise<void>
+	remove: () => Promise<void>;
-    fileType: 'backgrounds' | 'icons' | 'avatars' | 'attachments' | 'banners'
+	fileType: "backgrounds" | "icons" | "avatars" | "attachments" | "banners";
 } & (
-    { behaviour: 'ask', onChange: (file: File) => void } |
+	| { behaviour: "ask"; onChange: (file: File) => void }
-    { behaviour: 'upload', onUpload: (id: string) => Promise<void> } |
+	| { behaviour: "upload"; onUpload: (id: string) => Promise<void> }
-    { behaviour: 'multi', onChange: (files: File[]) => void, append?: (files: File[]) => void }
+	| {
-) & (
+			behaviour: "multi";
-    { style: 'icon' | 'banner', defaultPreview?: string, previewURL?: string, width?: number, height?: number } |
+			onChange: (files: File[]) => void;
-    { style: 'attachment', attached: boolean, uploading: boolean, cancel: () => void, size?: number }
+			append?: (files: File[]) => void;
-)
+	  }
+) &
+	(
+		| {
+				style: "icon" | "banner";
+				defaultPreview?: string;
+				previewURL?: string;
+				width?: number;
+				height?: number;
+		  }
+		| {
+				style: "attachment";
+				attached: boolean;
+				uploading: boolean;
+				cancel: () => void;
+				size?: number;
+		  }
+	);
 
-export async function uploadFile(autumnURL: string, tag: string, file: File, config?: AxiosRequestConfig) {
+export async function uploadFile(
+	autumnURL: string,
+	tag: string,
+	file: File,
+	config?: AxiosRequestConfig,
+) {
 	const formData = new FormData();
 	formData.append("file", file);
 
 	const res = await Axios.post(autumnURL + "/" + tag, formData, {
 		headers: {
-            "Content-Type": "multipart/form-data"
+			"Content-Type": "multipart/form-data",
 		},
-        ...config
+		...config,
 	});
 
 	return res.data.id;
 }
 
-export function grabFiles(maxFileSize: number, cb: (files: File[]) => void, tooLarge: () => void, multiple?: boolean) {
+export function grabFiles(
+	maxFileSize: number,
+	cb: (files: File[]) => void,
+	tooLarge: () => void,
+	multiple?: boolean,
+) {
 	const input = document.createElement("input");
 	input.type = "file";
 	input.multiple = multiple ?? false;
@@ -69,31 +100,40 @@ export function FileUploader(props: Props) {
 	function onClick() {
 		if (uploading) return;
 
-        grabFiles(maxFileSize, async files => {
+		grabFiles(
+			maxFileSize,
+			async (files) => {
 				setUploading(true);
 
 				try {
-                if (props.behaviour === 'multi') {
+					if (props.behaviour === "multi") {
 						props.onChange(files);
-                } else if (props.behaviour === 'ask') {
+					} else if (props.behaviour === "ask") {
 						props.onChange(files[0]);
 					} else {
-                    await props.onUpload(await uploadFile(client.configuration!.features.autumn.url, fileType, files[0]));
+						await props.onUpload(
+							await uploadFile(
+								client.configuration!.features.autumn.url,
+								fileType,
+								files[0],
+							),
+						);
 					}
 				} catch (err) {
 					return openScreen({ id: "error", error: takeError(err) });
 				} finally {
 					setUploading(false);
 				}
-        }, () =>
+			},
-            openScreen({ id: "error", error: "FileTooLarge" }),
+			() => openScreen({ id: "error", error: "FileTooLarge" }),
-            props.behaviour === 'multi');
+			props.behaviour === "multi",
+		);
 	}
 
 	function removeOrUpload() {
 		if (uploading) return;
 
-        if (props.style === 'attachment') {
+		if (props.style === "attachment") {
 			if (props.attached) {
 				props.remove();
 			} else {
@@ -108,13 +148,13 @@ export function FileUploader(props: Props) {
 		}
 	}
 
-    if (props.behaviour === 'multi' && props.append) {
+	if (props.behaviour === "multi" && props.append) {
 		useEffect(() => {
 			// File pasting.
 			function paste(e: ClipboardEvent) {
 				const items = e.clipboardData?.items;
 				if (typeof items === "undefined") return;
-                if (props.behaviour !== 'multi' || !props.append) return;
+				if (props.behaviour !== "multi" || !props.append) return;
 
 				let files = [];
 				for (const item of items) {
@@ -122,7 +162,10 @@ export function FileUploader(props: Props) {
 						const blob = item.getAsFile();
 						if (blob) {
 							if (blob.size > props.maxFileSize) {
-                                openScreen({ id: 'error', error: 'FileTooLarge' });
+								openScreen({
+									id: "error",
+									error: "FileTooLarge",
+								});
 							}
 
 							files.push(blob);
@@ -143,14 +186,14 @@ export function FileUploader(props: Props) {
 			// File dropping.
 			function drop(e: DragEvent) {
 				e.preventDefault();
-                if (props.behaviour !== 'multi' || !props.append) return;
+				if (props.behaviour !== "multi" || !props.append) return;
 
 				const dropped = e.dataTransfer?.files;
 				if (dropped) {
 					let files = [];
 					for (const item of dropped) {
 						if (item.size > props.maxFileSize) {
-                            openScreen({ id: 'error', error: 'FileTooLarge' });
+							openScreen({ id: "error", error: "FileTooLarge" });
 						}
 
 						files.push(item);
@@ -172,38 +215,60 @@ export function FileUploader(props: Props) {
 		}, [props.append]);
 	}
 
-    if (props.style === 'icon' || props.style === 'banner') {
+	if (props.style === "icon" || props.style === "banner") {
 		const { style, previewURL, defaultPreview, width, height } = props;
 		return (
-            <div className={classNames(styles.uploader,
+			<div
-                { [styles.icon]: style === 'icon',
+				className={classNames(styles.uploader, {
-                [styles.banner]: style === 'banner' })}
+					[styles.icon]: style === "icon",
+					[styles.banner]: style === "banner",
+				})}
 				data-uploading={uploading}>
-                <div className={styles.image}
+				<div
-                    style={{ backgroundImage:
+					className={styles.image}
-                        style === 'icon' ? `url('${previewURL ?? defaultPreview}')` :
+					style={{
-                        (previewURL ? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')` : 'black'),
+						backgroundImage:
-                        width, height
+							style === "icon"
+								? `url('${previewURL ?? defaultPreview}')`
+								: previewURL
+								? `linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('${previewURL}')`
+								: "black",
+						width,
+						height,
 					}}
 					onClick={onClick}>
-                    { uploading ?
+					{uploading ? (
 						<div className={styles.uploading}>
 							<Preloader type="ring" />
-                        </div> :
+						</div>
+					) : (
 						<div className={styles.edit}>
 							<Pencil size={30} />
-                        </div> }
+						</div>
+					)}
 				</div>
 				<div className={styles.modify}>
-                    <span onClick={removeOrUpload}>{ 
+					<span onClick={removeOrUpload}>
-                        uploading ? <Text id="app.main.channel.uploading_file" /> :
+						{uploading ? (
-                        props.previewURL ? <Text id="app.settings.actions.remove" /> :
+							<Text id="app.main.channel.uploading_file" />
-                        <Text id="app.settings.actions.upload" /> }</span>
+						) : props.previewURL ? (
-                    <span className={styles.small}><Text id="app.settings.actions.max_filesize" fields={{ filesize: determineFileSize(maxFileSize) }} /></span>
+							<Text id="app.settings.actions.remove" />
+						) : (
+							<Text id="app.settings.actions.upload" />
+						)}
+					</span>
+					<span className={styles.small}>
+						<Text
+							id="app.settings.actions.max_filesize"
+							fields={{
+								filesize: determineFileSize(maxFileSize),
+							}}
+						/>
+					</span>
 				</div>
 			</div>
-        )
+		);
-    } else if (props.style === 'attachment') {
+	} else if (props.style === "attachment") {
 		const { attached, uploading, cancel, size } = props;
 		return (
 			<IconButton
@@ -212,9 +277,15 @@ export function FileUploader(props: Props) {
 					if (attached) return remove();
 					onClick();
 				}}>
-                { uploading ? <XCircle size={size} /> : attached ? <X size={size} /> : <Plus size={size} />}
+				{uploading ? (
+					<XCircle size={size} />
+				) : attached ? (
+					<X size={size} />
+				) : (
+					<Plus size={size} />
+				)}
 			</IconButton>
-        )
+		);
 	}
 
 	return null;

src/context/revoltjs/Notifications.tsx

@@ -1,14 +1,22 @@
+import { Route, Switch, useHistory, useParams } from "react-router-dom";
+import { Message, SYSTEM_USER_ID, User } from "revolt.js";
+import { Users } from "revolt.js/dist/api/objects";
 import { decodeTime } from "ulid";
+
+import { useContext, useEffect } from "preact/hooks";
+
+import { useTranslation } from "../../lib/i18n";
+
+import { connectState } from "../../redux/connector";
+import {
+	getNotificationState,
+	Notifications,
+	shouldNotify,
+} from "../../redux/reducers/notifications";
+import { NotificationOptions } from "../../redux/reducers/settings";
+
 import { SoundContext } from "../Settings";
 import { AppContext } from "./RevoltClient";
-import { useTranslation } from "../../lib/i18n";
-import { Users } from "revolt.js/dist/api/objects";
-import { useContext, useEffect } from "preact/hooks";
-import { connectState } from "../../redux/connector";
-import { Message, SYSTEM_USER_ID, User } from "revolt.js";
-import { NotificationOptions } from "../../redux/reducers/settings";
-import { Route, Switch, useHistory, useParams } from "react-router-dom";
-import { getNotificationState, Notifications, shouldNotify } from "../../redux/reducers/notifications";
 
 interface Props {
 	options?: NotificationOptions;
@@ -17,7 +25,10 @@ interface Props {
 
 const notifications: { [key: string]: Notification } = {};
 
-async function createNotification(title: string, options: globalThis.NotificationOptions) {
+async function createNotification(
+	title: string,
+	options: globalThis.NotificationOptions,
+) {
 	try {
 		return new Notification(title, options);
 	} catch (err) {
@@ -51,7 +62,7 @@ function Notifier({ options, notifs }: Props) {
 		const notifState = getNotificationState(notifs, channel);
 		if (!shouldNotify(notifState, msg, client.user!._id)) return;
 
-        playSound('message');
+		playSound("message");
 		if (!showNotification) return;
 
 		let title;
@@ -79,9 +90,13 @@ function Notifier({ options, notifs }: Props) {
 
 		let image;
 		if (msg.attachments) {
-            let imageAttachment = msg.attachments.find(x => x.metadata.type === 'Image');
+			let imageAttachment = msg.attachments.find(
+				(x) => x.metadata.type === "Image",
+			);
 			if (imageAttachment) {
-                image = client.generateFileURL(imageAttachment, { max_side: 720 });
+				image = client.generateFileURL(imageAttachment, {
+					max_side: 720,
+				});
 			}
 		}
 
@@ -95,10 +110,19 @@ function Notifier({ options, notifs }: Props) {
 				case "user_added":
 				case "user_remove":
 					body = translate(
-                        `app.main.channel.system.${msg.content.type === 'user_added' ? 'added_by' : 'removed_by'}`,
+						`app.main.channel.system.${
-                        { user: users.get(msg.content.id)?.username, other_user: users.get(msg.content.by)?.username }
+							msg.content.type === "user_added"
+								? "added_by"
+								: "removed_by"
+						}`,
+						{
+							user: users.get(msg.content.id)?.username,
+							other_user: users.get(msg.content.by)?.username,
+						},
 					);
-                    icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
+					icon = client.users.getAvatarURL(msg.content.id, {
+						max_side: 256,
+					});
 					break;
 				case "user_joined":
 				case "user_left":
@@ -106,24 +130,33 @@ function Notifier({ options, notifs }: Props) {
 				case "user_banned":
 					body = translate(
 						`app.main.channel.system.${msg.content.type}`,
-                        { user: users.get(msg.content.id)?.username }
+						{ user: users.get(msg.content.id)?.username },
 					);
-                    icon = client.users.getAvatarURL(msg.content.id, { max_side: 256 });
+					icon = client.users.getAvatarURL(msg.content.id, {
+						max_side: 256,
+					});
 					break;
 				case "channel_renamed":
 					body = translate(
 						`app.main.channel.system.channel_renamed`,
-                        { user: users.get(msg.content.by)?.username, name: msg.content.name }
+						{
+							user: users.get(msg.content.by)?.username,
+							name: msg.content.name,
+						},
 					);
-                    icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
+					icon = client.users.getAvatarURL(msg.content.by, {
+						max_side: 256,
+					});
 					break;
 				case "channel_description_changed":
 				case "channel_icon_changed":
 					body = translate(
 						`app.main.channel.system.${msg.content.type}`,
-                        { user: users.get(msg.content.by)?.username }
+						{ user: users.get(msg.content.by)?.username },
 					);
-                    icon = client.users.getAvatarURL(msg.content.by, { max_side: 256 });
+					icon = client.users.getAvatarURL(msg.content.by, {
+						max_side: 256,
+					});
 					break;
 			}
 		}
@@ -134,8 +167,8 @@ function Notifier({ options, notifs }: Props) {
 			body,
 			timestamp: decodeTime(msg._id),
 			tag: msg.channel,
-            badge: '/assets/icons/android-chrome-512x512.png',
+			badge: "/assets/icons/android-chrome-512x512.png",
-            silent: true
+			silent: true,
 		});
 
 		if (notif) {
@@ -145,8 +178,10 @@ function Notifier({ options, notifs }: Props) {
 				if (id !== channel_id) {
 					let channel = client.channels.get(id);
 					if (channel) {
-                        if (channel.channel_type === 'TextChannel') {
+						if (channel.channel_type === "TextChannel") {
-                            history.push(`/server/${channel.server}/channel/${id}`);
+							history.push(
+								`/server/${channel.server}/channel/${id}`,
+							);
 						} else {
 							history.push(`/channel/${id}`);
 						}
@@ -157,7 +192,7 @@ function Notifier({ options, notifs }: Props) {
 			notifications[msg.channel] = notif;
 			notif.addEventListener(
 				"close",
-                () => delete notifications[msg.channel]
+				() => delete notifications[msg.channel],
 			);
 		}
 	}
@@ -170,10 +205,14 @@ function Notifier({ options, notifs }: Props) {
 		let event;
 		switch (user.relationship) {
 			case Users.Relationship.Incoming:
-                event = translate("notifications.sent_request", { person: user.username });
+				event = translate("notifications.sent_request", {
+					person: user.username,
+				});
 				break;
 			case Users.Relationship.Friend:
-                event = translate("notifications.now_friends", { person: user.username });
+				event = translate("notifications.now_friends", {
+					person: user.username,
+				});
 				break;
 			default:
 				return;
@@ -181,8 +220,8 @@ function Notifier({ options, notifs }: Props) {
 
 		let notif = await createNotification(event, {
 			icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
-            badge: '/assets/icons/android-chrome-512x512.png',
+			badge: "/assets/icons/android-chrome-512x512.png",
-            timestamp: +new Date()
+			timestamp: +new Date(),
 		});
 
 		notif?.addEventListener("click", () => {
@@ -221,16 +260,16 @@ function Notifier({ options, notifs }: Props) {
 
 const NotifierComponent = connectState(
 	Notifier,
-    state => {
+	(state) => {
 		return {
 			options: state.settings.notification,
-            notifs: state.notifications
+			notifs: state.notifications,
 		};
 	},
-    true
+	true,
 );
 
-export default function Notifications() {
+export default function NotificationsComponent() {
 	return (
 		<Switch>
 			<Route path="/server/:server/channel/:channel">

src/context/revoltjs/RequiresOnline.tsx

@@ -1,9 +1,12 @@
-import { Text } from "preact-i18n";
-import styled from "styled-components";
-import { useContext } from "preact/hooks";
-import { Children } from "../../types/Preact";
 import { WifiOff } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
 import Preloader from "../../components/ui/Preloader";
+
+import { Children } from "../../types/Preact";
 import { ClientStatus, StatusContext } from "./RevoltClient";
 
 interface Props {

src/context/revoltjs/RevoltClient.tsx

@@ -1,18 +1,23 @@
-import { openDB } from 'idb';
+import { openDB } from "idb";
+import { useHistory } from "react-router-dom";
 import { Client } from "revolt.js";
-import { takeError } from "./util";
-import { createContext } from "preact";
-import { dispatch } from '../../redux';
-import { Children } from "../../types/Preact";
-import { useHistory } from 'react-router-dom';
 import { Route } from "revolt.js/dist/api/routes";
-import { connectState } from "../../redux/connector";
+
-import Preloader from "../../components/ui/Preloader";
+import { createContext } from "preact";
-import { AuthState } from "../../redux/reducers/auth";
 import { useEffect, useMemo, useState } from "preact/hooks";
-import { useIntermediate } from '../intermediate/Intermediate';
+
+import { SingletonMessageRenderer } from "../../lib/renderer/Singleton";
+
+import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+import { AuthState } from "../../redux/reducers/auth";
+
+import Preloader from "../../components/ui/Preloader";
+
+import { Children } from "../../types/Preact";
+import { useIntermediate } from "../intermediate/Intermediate";
 import { registerEvents, setReconnectDisallowed } from "./events";
-import { SingletonMessageRenderer } from '../../lib/renderer/Singleton';
+import { takeError } from "./util";
 
 export enum ClientStatus {
 	INIT,
@@ -50,31 +55,40 @@ function Context({ auth, children }: Props) {
 	const history = useHistory();
 	const { openScreen } = useIntermediate();
 	const [status, setStatus] = useState(ClientStatus.INIT);
-    const [client, setClient] = useState<Client>(undefined as unknown as Client);
+	const [client, setClient] = useState<Client>(
+		undefined as unknown as Client,
+	);
 
 	useEffect(() => {
 		(async () => {
 			let db;
 			try {
 				// Match sw.ts#L23
-                db = await openDB('state', 3, {
+				db = await openDB("state", 3, {
 					upgrade(db) {
-                        for (let store of [ "channels", "servers", "users", "members" ]) {
+						for (let store of [
+							"channels",
+							"servers",
+							"users",
+							"members",
+						]) {
 							db.createObjectStore(store, {
-                                keyPath: '_id'
+								keyPath: "_id",
 							});
 						}
 					},
 				});
 			} catch (err) {
-                console.error('Failed to open IndexedDB store, continuing without.');
+				console.error(
+					"Failed to open IndexedDB store, continuing without.",
+				);
 			}
 
 			const client = new Client({
 				autoReconnect: false,
 				apiURL: import.meta.env.VITE_API_URL,
 				debug: import.meta.env.DEV,
-                db
+				db,
 			});
 
 			setClient(client);
@@ -87,7 +101,7 @@ function Context({ auth, children }: Props) {
 
 	const operations: ClientOperations = useMemo(() => {
 		return {
-            login: async data => {
+			login: async (data) => {
 				setReconnectDisallowed(true);
 
 				try {
@@ -96,14 +110,14 @@ function Context({ auth, children }: Props) {
 					const login = () =>
 						dispatch({
 							type: "LOGIN",
-                            session: client.session! // This [null assertion] is ok, we should have a session by now. - insert's words
+							session: client.session!, // This [null assertion] is ok, we should have a session by now. - insert's words
 						});
 
 					if (onboarding) {
 						openScreen({
 							id: "onboarding",
 							callback: (username: string) =>
-                                onboarding(username, true).then(login)
+								onboarding(username, true).then(login),
 						});
 					} else {
 						login();
@@ -113,7 +127,7 @@ function Context({ auth, children }: Props) {
 					throw err;
 				}
 			},
-            logout: async shouldRequest => {
+			logout: async (shouldRequest) => {
 				dispatch({ type: "LOGOUT" });
 
 				client.reset();
@@ -133,19 +147,20 @@ function Context({ auth, children }: Props) {
 				}
 			},
 			loggedIn: () => typeof auth.active !== "undefined",
-            ready: () => (
+			ready: () =>
-                operations.loggedIn() &&
+				operations.loggedIn() && typeof client.user !== "undefined",
-                typeof client.user !== "undefined"
-            ),
 			openDM: async (user_id: string) => {
 				let channel = await client.users.openDM(user_id);
 				history.push(`/channel/${channel!._id}`);
 				return channel!._id;
-            }
+			},
-        }
+		};
 	}, [client, auth.active]);
 
-    useEffect(() => registerEvents({ operations }, setStatus, client), [ client ]);
+	useEffect(
+		() => registerEvents({ operations }, setStatus, client),
+		[client],
+	);
 
 	useEffect(() => {
 		(async () => {
@@ -162,21 +177,20 @@ function Context({ auth, children }: Props) {
 					return setStatus(ClientStatus.OFFLINE);
 				}
 
-                if (operations.ready())
+				if (operations.ready()) setStatus(ClientStatus.CONNECTING);
-                    setStatus(ClientStatus.CONNECTING);
 
 				if (navigator.onLine) {
 					await client
 						.fetchConfiguration()
 						.catch(() =>
-                            console.error("Failed to connect to API server.")
+							console.error("Failed to connect to API server."),
 						);
 				}
 
 				try {
 					await client.fetchConfiguration();
 					const callback = await client.useExistingSession(
-                        active.session
+						active.session,
 					);
 
 					if (callback) {
@@ -194,7 +208,7 @@ function Context({ auth, children }: Props) {
 				}
 			} else {
 				try {
-                    await client.fetchConfiguration()
+					await client.fetchConfiguration();
 				} catch (err) {
 					console.error("Failed to connect to API server.");
 				}
@@ -219,12 +233,9 @@ function Context({ auth, children }: Props) {
 	);
 }
 
-export default connectState<{ children: Children }>(
+export default connectState<{ children: Children }>(Context, (state) => {
-    Context,
-    state => {
 	return {
 		auth: state.auth,
-            sync: state.sync
+		sync: state.sync,
 	};
-    }
+});
-);

src/context/revoltjs/StateMonitor.tsx

@@ -1,18 +1,20 @@
 /**
  * This file monitors the message cache to delete any queued messages that have already sent.
  */
-
 import { Message } from "revolt.js";
-import { AppContext } from "./RevoltClient";
+
-import { Typing } from "../../redux/reducers/typing";
 import { useContext, useEffect } from "preact/hooks";
+
+import { dispatch } from "../../redux";
 import { connectState } from "../../redux/connector";
 import { QueuedMessage } from "../../redux/reducers/queue";
-import { dispatch } from "../../redux";
+import { Typing } from "../../redux/reducers/typing";
+
+import { AppContext } from "./RevoltClient";
 
 type Props = {
 	messages: QueuedMessage[];
-    typing: Typing
+	typing: Typing;
 };
 
 function StateMonitor(props: Props) {
@@ -20,23 +22,23 @@ function StateMonitor(props: Props) {
 
 	useEffect(() => {
 		dispatch({
-            type: 'QUEUE_DROP_ALL'
+			type: "QUEUE_DROP_ALL",
 		});
 	}, []);
 
 	useEffect(() => {
 		function add(msg: Message) {
 			if (!msg.nonce) return;
-            if (!props.messages.find(x => x.id === msg.nonce)) return;
+			if (!props.messages.find((x) => x.id === msg.nonce)) return;
 
 			dispatch({
-                type: 'QUEUE_REMOVE',
+				type: "QUEUE_REMOVE",
-                nonce: msg.nonce
+				nonce: msg.nonce,
 			});
 		}
 
-        client.addListener('message', add);
+		client.addListener("message", add);
-        return () => client.removeListener('message', add);
+		return () => client.removeListener("message", add);
 	}, [props.messages]);
 
 	useEffect(() => {
@@ -48,9 +50,9 @@ function StateMonitor(props: Props) {
 				for (let user of users) {
 					if (+new Date() > user.started + 5000) {
 						dispatch({
-                            type: 'TYPING_STOP',
+							type: "TYPING_STOP",
 							channel,
-                            user: user.id
+							user: user.id,
 						});
 					}
 				}
@@ -66,12 +68,9 @@ function StateMonitor(props: Props) {
 	return null;
 }
 
-export default connectState(
+export default connectState(StateMonitor, (state) => {
-    StateMonitor,
-    state => {
 	return {
 		messages: [...state.queue],
-            typing: state.typing
+		typing: state.typing,
 	};
-    }
+});
-);

src/context/revoltjs/SyncManager.tsx

@@ -1,29 +1,39 @@
 /**
  * This file monitors changes to settings and syncs them to the server.
  */
-
 import isEqual from "lodash.isequal";
-import { Language } from "../Locale";
 import { Sync } from "revolt.js/dist/api/objects";
-import { useContext, useEffect } from "preact/hooks";
-import { connectState } from "../../redux/connector";
-import { Settings } from "../../redux/reducers/settings";
-import { Notifications } from "../../redux/reducers/notifications";
-import { AppContext, ClientStatus, StatusContext } from "./RevoltClient";
 import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
-import { DEFAULT_ENABLED_SYNC, SyncData, SyncKeys, SyncOptions } from "../../redux/reducers/sync";
+
+import { useContext, useEffect } from "preact/hooks";
+
 import { dispatch } from "../../redux";
+import { connectState } from "../../redux/connector";
+import { Notifications } from "../../redux/reducers/notifications";
+import { Settings } from "../../redux/reducers/settings";
+import {
+	DEFAULT_ENABLED_SYNC,
+	SyncData,
+	SyncKeys,
+	SyncOptions,
+} from "../../redux/reducers/sync";
+
+import { Language } from "../Locale";
+import { AppContext, ClientStatus, StatusContext } from "./RevoltClient";
 
 type Props = {
-    settings: Settings,
+	settings: Settings;
-    locale: Language,
+	locale: Language;
-    sync: SyncOptions,
+	sync: SyncOptions;
-    notifications: Notifications
+	notifications: Notifications;
 };
 
 var lastValues: { [key in SyncKeys]?: any } = {};
 
-export function mapSync(packet: Sync.UserSettings, revision?: Record<string, number>) {
+export function mapSync(
+	packet: Sync.UserSettings,
+	revision?: Record<string, number>,
+) {
 	let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
 	for (let key of Object.keys(packet)) {
 		let [timestamp, obj] = packet[key];
@@ -32,8 +42,8 @@ export function mapSync(packet: Sync.UserSettings, revision?: Record<string, num
 		}
 
 		let object;
-        if (obj[0] === '{') {
+		if (obj[0] === "{") {
-            object = JSON.parse(obj)
+			object = JSON.parse(obj);
 		} else {
 			object = obj;
 		}
@@ -52,38 +62,50 @@ function SyncManager(props: Props) {
 	useEffect(() => {
 		if (status === ClientStatus.ONLINE) {
 			client
-                .syncFetchSettings(DEFAULT_ENABLED_SYNC.filter(x => !props.sync?.disabled?.includes(x)))
+				.syncFetchSettings(
-                .then(data => {
+					DEFAULT_ENABLED_SYNC.filter(
+						(x) => !props.sync?.disabled?.includes(x),
+					),
+				)
+				.then((data) => {
 					dispatch({
-                        type: 'SYNC_UPDATE',
+						type: "SYNC_UPDATE",
-                        update: mapSync(data)
+						update: mapSync(data),
 					});
 				});
 
 			client
 				.syncFetchUnreads()
-                .then(unreads => dispatch({ type: 'UNREADS_SET', unreads }));
+				.then((unreads) => dispatch({ type: "UNREADS_SET", unreads }));
 		}
 	}, [status]);
 
 	function syncChange(key: SyncKeys, data: any) {
 		let timestamp = +new Date();
 		dispatch({
-            type: 'SYNC_SET_REVISION',
+			type: "SYNC_SET_REVISION",
 			key,
-            timestamp
+			timestamp,
 		});
 
-        client.syncSetSettings({
+		client.syncSetSettings(
-            [key]: data
+			{
-        }, timestamp);
+				[key]: data,
+			},
+			timestamp,
+		);
 	}
 
 	let disabled = props.sync.disabled ?? [];
-    for (let [key, object] of [ ['appearance', props.settings.appearance], ['theme', props.settings.theme], ['locale', props.locale], ['notifications', props.notifications] ] as [SyncKeys, any][]) {
+	for (let [key, object] of [
+		["appearance", props.settings.appearance],
+		["theme", props.settings.theme],
+		["locale", props.locale],
+		["notifications", props.notifications],
+	] as [SyncKeys, any][]) {
 		useEffect(() => {
 			if (disabled.indexOf(key) === -1) {
-                if (typeof lastValues[key] !== 'undefined') {
+				if (typeof lastValues[key] !== "undefined") {
 					if (!isEqual(lastValues[key], object)) {
 						syncChange(key, object);
 					}
@@ -96,31 +118,29 @@ function SyncManager(props: Props) {
 
 	useEffect(() => {
 		function onPacket(packet: ClientboundNotification) {
-            if (packet.type === 'UserSettingsUpdate') {
+			if (packet.type === "UserSettingsUpdate") {
-                let update: { [key in SyncKeys]?: [ number, SyncData[key] ] } = mapSync(packet.update, props.sync.revision);
+				let update: { [key in SyncKeys]?: [number, SyncData[key]] } =
+					mapSync(packet.update, props.sync.revision);
 
 				dispatch({
-                    type: 'SYNC_UPDATE',
+					type: "SYNC_UPDATE",
-                    update
+					update,
 				});
 			}
 		}
 
-        client.addListener('packet', onPacket);
+		client.addListener("packet", onPacket);
-        return () => client.removeListener('packet', onPacket);
+		return () => client.removeListener("packet", onPacket);
 	}, [disabled, props.sync]);
 
 	return null;
 }
 
-export default connectState(
+export default connectState(SyncManager, (state) => {
-    SyncManager,
-    state => {
 	return {
 		settings: state.settings,
 		locale: state.locale,
 		sync: state.sync,
-            notifications: state.notifications
+		notifications: state.notifications,
 	};
-    }
+});
-);

src/context/revoltjs/events.ts

@@ -1,12 +1,12 @@
-import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
 import { Client, Message } from "revolt.js/dist";
-import {
+import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
-    ClientOperations,
+
-    ClientStatus
-} from "./RevoltClient";
 import { StateUpdater } from "preact/hooks";
+
 import { dispatch } from "../../redux";
 
+import { ClientOperations, ClientStatus } from "./RevoltClient";
+
 export var preventReconnect = false;
 let preventUntil = 0;
 
@@ -14,14 +14,16 @@ export function setReconnectDisallowed(allowed: boolean) {
 	preventReconnect = allowed;
 }
 
-export function registerEvents({
+export function registerEvents(
-    operations
+	{ operations }: { operations: ClientOperations },
-}: { operations: ClientOperations }, setStatus: StateUpdater<ClientStatus>, client: Client) {
+	setStatus: StateUpdater<ClientStatus>,
+	client: Client,
+) {
 	function attemptReconnect() {
 		if (preventReconnect) return;
 		function reconnect() {
 			preventUntil = +new Date() + 2000;
-            client.websocket.connect().catch(err => console.error(err));
+			client.websocket.connect().catch((err) => console.error(err));
 		}
 
 		if (+new Date() > preventUntil) {
@@ -49,7 +51,7 @@ export function registerEvents({
 					dispatch({
 						type: "TYPING_START",
 						channel: packet.id,
-                        user: packet.user
+						user: packet.user,
 					});
 					break;
 				}
@@ -58,7 +60,7 @@ export function registerEvents({
 					dispatch({
 						type: "TYPING_STOP",
 						channel: packet.id,
-                        user: packet.user
+						user: packet.user,
 					});
 					break;
 				}
@@ -66,7 +68,7 @@ export function registerEvents({
 					dispatch({
 						type: "UNREADS_MARK_READ",
 						channel: packet.id,
-                        message: packet.message_id
+						message: packet.message_id,
 					});
 					break;
 				}
@@ -78,21 +80,23 @@ export function registerEvents({
 				dispatch({
 					type: "UNREADS_MENTION",
 					channel: message.channel,
-                    message: message._id
+					message: message._id,
 				});
 			}
 		},
 
-        ready: () => setStatus(ClientStatus.ONLINE)
+		ready: () => setStatus(ClientStatus.ONLINE),
 	};
 
 	if (import.meta.env.DEV) {
 		listeners = new Proxy(listeners, {
-            get: (target, listener, receiver) => (...args: unknown[]) => {
+			get:
+				(target, listener, receiver) =>
+				(...args: unknown[]) => {
 					console.debug(`Calling ${listener.toString()} with`, args);
-                Reflect.get(target, listener)(...args)
+					Reflect.get(target, listener)(...args);
-            }
+				},
-        })
+		});
 	}
 
 	// TODO: clean this a bit and properly handle types
@@ -101,14 +105,14 @@ export function registerEvents({
 	}
 
 	function logMutation(target: string, key: string) {
-        console.log('(o) Object mutated', target, '\nChanged:', key);
+		console.log("(o) Object mutated", target, "\nChanged:", key);
 	}
 
 	if (import.meta.env.DEV) {
-        client.users.addListener('mutation', logMutation);
+		client.users.addListener("mutation", logMutation);
-        client.servers.addListener('mutation', logMutation);
+		client.servers.addListener("mutation", logMutation);
-        client.channels.addListener('mutation', logMutation);
+		client.channels.addListener("mutation", logMutation);
-        client.servers.members.addListener('mutation', logMutation);
+		client.servers.members.addListener("mutation", logMutation);
 	}
 
 	const online = () => {
@@ -132,14 +136,17 @@ export function registerEvents({
 
 	return () => {
 		for (const listener in listeners) {
-            client.removeListener(listener, listeners[listener as keyof typeof listeners]);
+			client.removeListener(
+				listener,
+				listeners[listener as keyof typeof listeners],
+			);
 		}
 
 		if (import.meta.env.DEV) {
-            client.users.removeListener('mutation', logMutation);
+			client.users.removeListener("mutation", logMutation);
-            client.servers.removeListener('mutation', logMutation);
+			client.servers.removeListener("mutation", logMutation);
-            client.channels.removeListener('mutation', logMutation);
+			client.channels.removeListener("mutation", logMutation);
-            client.servers.members.removeListener('mutation', logMutation);
+			client.servers.members.removeListener("mutation", logMutation);
 		}
 
 		window.removeEventListener("online", online);

src/context/revoltjs/hooks.ts

@@ -1,12 +1,14 @@
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import { Client, PermissionCalculator } from "revolt.js";
 import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
-import { Client, PermissionCalculator } from 'revolt.js';
-import { AppContext } from "./RevoltClient";
 import Collection from "revolt.js/dist/maps/Collection";
 
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+
+import { AppContext } from "./RevoltClient";
+
 export interface HookContext {
-    client: Client,
+	client: Client;
-    forceUpdate: () => void
+	forceUpdate: () => void;
 }
 
 export function useForceUpdate(context?: HookContext): HookContext {
@@ -19,7 +21,7 @@ export function useForceUpdate(context?: HookContext): HookContext {
 		let [, u] = H;
 		updateState = u;
 	} else {
-        console.warn('Failed to construct using useState.');
+		console.warn("Failed to construct using useState.");
 		updateState = () => {};
 	}
 
@@ -27,20 +29,35 @@ export function useForceUpdate(context?: HookContext): HookContext {
 }
 
 // TODO: utils.d.ts maybe?
-type PickProperties<T, U> = Pick<T, {
+type PickProperties<T, U> = Pick<
-    [K in keyof T]: T[K] extends U ? K : never
+	T,
-}[keyof T]>
+	{
+		[K in keyof T]: T[K] extends U ? K : never;
+	}[keyof T]
+>;
 
 // The keys in Client that are an object
 // for some reason undefined keeps appearing despite there being no reason to so it's filtered out
-type ClientCollectionKey = Exclude<keyof PickProperties<Client, Collection<any>>, undefined>;
+type ClientCollectionKey = Exclude<
+	keyof PickProperties<Client, Collection<any>>,
+	undefined
+>;
 
-function useObject(type: ClientCollectionKey, id?: string | string[], context?: HookContext) {
+function useObject(
+	type: ClientCollectionKey,
+	id?: string | string[],
+	context?: HookContext,
+) {
 	const ctx = useForceUpdate(context);
 
 	function update(target: any) {
-        if (typeof id === 'string' ? target === id :
+		if (
-            Array.isArray(id) ? id.includes(target) : true) {
+			typeof id === "string"
+				? target === id
+				: Array.isArray(id)
+				? id.includes(target)
+				: true
+		) {
 			ctx.forceUpdate();
 		}
 	}
@@ -51,14 +68,16 @@ function useObject(type: ClientCollectionKey, id?: string | string[], context?:
 		return () => map.removeListener("update", update);
 	}, [id]);
 
-    return typeof id === 'string' ? map.get(id)
+	return typeof id === "string"
-        : Array.isArray(id) ? id.map(x => map.get(x))
+		? map.get(id)
+		: Array.isArray(id)
+		? id.map((x) => map.get(x))
 		: map.toArray();
 }
 
 export function useUser(id?: string, context?: HookContext) {
 	if (typeof id === "undefined") return;
-    return useObject('users', id, context) as Readonly<Users.User> | undefined;
+	return useObject("users", id, context) as Readonly<Users.User> | undefined;
 }
 
 export function useSelf(context?: HookContext) {
@@ -67,25 +86,38 @@ export function useSelf(context?: HookContext) {
 }
 
 export function useUsers(ids?: string[], context?: HookContext) {
-    return useObject('users', ids, context) as (Readonly<Users.User> | undefined)[];
+	return useObject("users", ids, context) as (
+		| Readonly<Users.User>
+		| undefined
+	)[];
 }
 
 export function useChannel(id?: string, context?: HookContext) {
 	if (typeof id === "undefined") return;
-    return useObject('channels', id, context) as Readonly<Channels.Channel> | undefined;
+	return useObject("channels", id, context) as
+		| Readonly<Channels.Channel>
+		| undefined;
 }
 
 export function useChannels(ids?: string[], context?: HookContext) {
-    return useObject('channels', ids, context) as (Readonly<Channels.Channel> | undefined)[];
+	return useObject("channels", ids, context) as (
+		| Readonly<Channels.Channel>
+		| undefined
+	)[];
 }
 
 export function useServer(id?: string, context?: HookContext) {
 	if (typeof id === "undefined") return;
-    return useObject('servers', id, context) as Readonly<Servers.Server> | undefined;
+	return useObject("servers", id, context) as
+		| Readonly<Servers.Server>
+		| undefined;
 }
 
 export function useServers(ids?: string[], context?: HookContext) {
-    return useObject('servers', ids, context) as (Readonly<Servers.Server> | undefined)[];
+	return useObject("servers", ids, context) as (
+		| Readonly<Servers.Server>
+		| undefined
+	)[];
 }
 
 export function useDMs(context?: HookContext) {
@@ -94,7 +126,10 @@ export function useDMs(context?: HookContext) {
 	function mutation(target: string) {
 		let channel = ctx.client.channels.get(target);
 		if (channel) {
-            if (channel.channel_type === 'DirectMessage' || channel.channel_type === 'Group') {
+			if (
+				channel.channel_type === "DirectMessage" ||
+				channel.channel_type === "Group"
+			) {
 				ctx.forceUpdate();
 			}
 		}
@@ -108,13 +143,22 @@ export function useDMs(context?: HookContext) {
 
 	return map
 		.toArray()
-        .filter(x => x.channel_type === 'DirectMessage' || x.channel_type === 'Group' || x.channel_type === 'SavedMessages') as (Channels.GroupChannel | Channels.DirectMessageChannel | Channels.SavedMessagesChannel)[];
+		.filter(
+			(x) =>
+				x.channel_type === "DirectMessage" ||
+				x.channel_type === "Group" ||
+				x.channel_type === "SavedMessages",
+		) as (
+		| Channels.GroupChannel
+		| Channels.DirectMessageChannel
+		| Channels.SavedMessagesChannel
+	)[];
 }
 
 export function useUserPermission(id: string, context?: HookContext) {
 	const ctx = useForceUpdate(context);
 
-    const mutation = (target: string) => (target === id) && ctx.forceUpdate();
+	const mutation = (target: string) => target === id && ctx.forceUpdate();
 	useEffect(() => {
 		ctx.client.users.addListener("update", mutation);
 		return () => ctx.client.users.removeListener("update", mutation);
@@ -128,11 +172,18 @@ export function useChannelPermission(id: string, context?: HookContext) {
 	const ctx = useForceUpdate(context);
 
 	const channel = ctx.client.channels.get(id);
-    const server = (channel && (channel.channel_type === 'TextChannel' || channel.channel_type === 'VoiceChannel')) ? channel.server : undefined;
+	const server =
+		channel &&
+		(channel.channel_type === "TextChannel" ||
+			channel.channel_type === "VoiceChannel")
+			? channel.server
+			: undefined;
 
-    const mutation = (target: string) => (target === id) && ctx.forceUpdate();
+	const mutation = (target: string) => target === id && ctx.forceUpdate();
-    const mutationServer = (target: string) => (target === server) && ctx.forceUpdate();
+	const mutationServer = (target: string) =>
-    const mutationMember = (target: string) => (target.substr(26) === ctx.client.user!._id) && ctx.forceUpdate();
+		target === server && ctx.forceUpdate();
+	const mutationMember = (target: string) =>
+		target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
 
 	useEffect(() => {
 		ctx.client.channels.addListener("update", mutation);
@@ -147,9 +198,12 @@ export function useChannelPermission(id: string, context?: HookContext) {
 
 			if (server) {
 				ctx.client.servers.removeListener("update", mutationServer);
-                ctx.client.servers.members.removeListener("update", mutationMember);
+				ctx.client.servers.members.removeListener(
-            }
+					"update",
+					mutationMember,
+				);
 			}
+		};
 	}, [id]);
 
 	let calculator = new PermissionCalculator(ctx.client);
@@ -159,8 +213,9 @@ export function useChannelPermission(id: string, context?: HookContext) {
 export function useServerPermission(id: string, context?: HookContext) {
 	const ctx = useForceUpdate(context);
 
-    const mutation = (target: string) => (target === id) && ctx.forceUpdate();
+	const mutation = (target: string) => target === id && ctx.forceUpdate();
-    const mutationMember = (target: string) => (target.substr(26) === ctx.client.user!._id) && ctx.forceUpdate();
+	const mutationMember = (target: string) =>
+		target.substr(26) === ctx.client.user!._id && ctx.forceUpdate();
 
 	useEffect(() => {
 		ctx.client.servers.addListener("update", mutation);
@@ -169,7 +224,7 @@ export function useServerPermission(id: string, context?: HookContext) {
 		return () => {
 			ctx.client.servers.removeListener("update", mutation);
 			ctx.client.servers.members.removeListener("update", mutationMember);
-        }
+		};
 	}, [id]);
 
 	let calculator = new PermissionCalculator(ctx.client);

src/context/revoltjs/util.tsx

@@ -1,17 +1,17 @@
-import { Channel, Message, User } from "revolt.js/dist/api/objects";
-import { Children } from "../../types/Preact";
-import { Text } from "preact-i18n";
 import { Client } from "revolt.js";
+import { Channel, Message, User } from "revolt.js/dist/api/objects";
 
-export function takeError(
+import { Text } from "preact-i18n";
-    error: any
+
-): string {
+import { Children } from "../../types/Preact";
+
+export function takeError(error: any): string {
 	const type = error?.response?.data?.type;
 	let id = type;
 	if (!type) {
 		if (error?.response?.status === 403) {
 			return "Unauthorized";
-        } else if (error && (!!error.isAxiosError && !error.response)) {
+		} else if (error && !!error.isAxiosError && !error.response) {
 			return "NetworkError";
 		}
 
@@ -22,13 +22,22 @@ export function takeError(
 	return id;
 }
 
-export function getChannelName(client: Client, channel: Channel, prefixType?: boolean): Children {
+export function getChannelName(
+	client: Client,
+	channel: Channel,
+	prefixType?: boolean,
+): Children {
 	if (channel.channel_type === "SavedMessages")
 		return <Text id="app.navigation.tabs.saved" />;
 
 	if (channel.channel_type === "DirectMessage") {
 		let uid = client.channels.getRecipient(channel._id);
-        return <>{prefixType && "@"}{client.users.get(uid)?.username}</>;
+		return (
+			<>
+				{prefixType && "@"}
+				{client.users.get(uid)?.username}
+			</>
+		);
 	}
 
 	if (channel.channel_type === "TextChannel" && prefixType) {

src/env.d.ts

@@ -2,4 +2,3 @@ interface ImportMetaEnv {
 	VITE_API_URL: string;
 	VITE_THEMES_URL: string;
 }
-  

src/lib/ConditionalLink.tsx

@@ -1,7 +1,8 @@
 import { Link, LinkProps } from "react-router-dom";
 
-type Props = LinkProps & JSX.HTMLAttributes<HTMLAnchorElement> & {
+type Props = LinkProps &
-    active: boolean
+	JSX.HTMLAttributes<HTMLAnchorElement> & {
+		active: boolean;
 	};
 
 export default function ConditionalLink(props: Props) {

src/lib/PaintCounter.tsx

@@ -2,17 +2,21 @@ import { useState } from "preact/hooks";
 
 const counts: { [key: string]: number } = {};
 
-export default function PaintCounter({ small, always }: { small?: boolean, always?: boolean }) {
+export default function PaintCounter({
+	small,
+	always,
+}: {
+	small?: boolean;
+	always?: boolean;
+}) {
 	if (import.meta.env.PROD && !always) return null;
 
-    const [uniqueId] = useState('' + Math.random());
+	const [uniqueId] = useState("" + Math.random());
 	const count = counts[uniqueId] ?? 0;
 	counts[uniqueId] = count + 1;
 	return (
-        <div style={{ textAlign: 'center', fontSize: '0.8em' }}>
+		<div style={{ textAlign: "center", fontSize: "0.8em" }}>
-            { small ? <>P: { count + 1 }</> : <>
+			{small ? <>P: {count + 1}</> : <>Painted {count + 1} time(s).</>}
-                Painted {count + 1} time(s).
-            </> }
 		</div>
-    )
+	);
 }

src/lib/TextAreaAutoSize.tsx

@@ -1,24 +1,54 @@
 import { useEffect, useRef } from "preact/hooks";
+
+import TextArea, {
+	DEFAULT_LINE_HEIGHT,
+	DEFAULT_TEXT_AREA_PADDING,
+	TextAreaProps,
+	TEXT_AREA_BORDER_WIDTH,
+} from "../components/ui/TextArea";
+
 import { internalSubscribe } from "./eventEmitter";
 import { isTouchscreenDevice } from "./isTouchscreenDevice";
-import TextArea, { DEFAULT_LINE_HEIGHT, DEFAULT_TEXT_AREA_PADDING, TextAreaProps, TEXT_AREA_BORDER_WIDTH } from "../components/ui/TextArea";
 
-type TextAreaAutoSizeProps = Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, 'style' | 'value'> & TextAreaProps & {
+type TextAreaAutoSizeProps = Omit<
-    forceFocus?: boolean
+	JSX.HTMLAttributes<HTMLTextAreaElement>,
-    autoFocus?: boolean
+	"style" | "value"
-    minHeight?: number
+> &
-    maxRows?: number
+	TextAreaProps & {
-    value: string
+		forceFocus?: boolean;
+		autoFocus?: boolean;
+		minHeight?: number;
+		maxRows?: number;
+		value: string;
 
-    id?: string
+		id?: string;
 	};
 
 export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
-    const { autoFocus, minHeight, maxRows, value, padding, lineHeight, hideBorder, forceFocus, children, as, ...textAreaProps } = props;
+	const {
+		autoFocus,
+		minHeight,
+		maxRows,
+		value,
+		padding,
+		lineHeight,
+		hideBorder,
+		forceFocus,
+		children,
+		as,
+		...textAreaProps
+	} = props;
 	const line = lineHeight ?? DEFAULT_LINE_HEIGHT;
 
-    const heightPadding = ((padding ?? DEFAULT_TEXT_AREA_PADDING) + (hideBorder ? 0 : TEXT_AREA_BORDER_WIDTH)) * 2;
+	const heightPadding =
-    const height = Math.max(Math.min(value.split('\n').length, maxRows ?? Infinity) * line + heightPadding, minHeight ?? 0);
+		((padding ?? DEFAULT_TEXT_AREA_PADDING) +
+			(hideBorder ? 0 : TEXT_AREA_BORDER_WIDTH)) *
+		2;
+	const height = Math.max(
+		Math.min(value.split("\n").length, maxRows ?? Infinity) * line +
+			heightPadding,
+		minHeight ?? 0,
+	);
 
 	const ref = useRef<HTMLTextAreaElement>();
 
@@ -69,12 +99,15 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
 		return internalSubscribe("TextArea", "focus", focus);
 	}, [ref]);
 
-    return <TextArea
+	return (
+		<TextArea
 			ref={ref}
 			value={value}
 			padding={padding}
 			style={{ height }}
 			hideBorder={hideBorder}
 			lineHeight={lineHeight}
-        {...textAreaProps} />;
+			{...textAreaProps}
+		/>
+	);
 }

src/lib/conversion.ts

@@ -5,5 +5,5 @@ export function urlBase64ToUint8Array(base64String: string) {
 		.replace(/_/g, "/");
 	const rawData = window.atob(base64);
 
-    return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
+	return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
 }

src/lib/eventEmitter.ts

@@ -1,13 +1,18 @@
 import EventEmitter from "eventemitter3";
+
 export const InternalEvent = new EventEmitter();
 
-export function internalSubscribe(ns: string, event: string, fn: (...args: any[]) => void) {
+export function internalSubscribe(
-    InternalEvent.addListener(ns + '/' + event, fn);
+	ns: string,
-    return () => InternalEvent.removeListener(ns + '/' + event, fn);
+	event: string,
+	fn: (...args: any[]) => void,
+) {
+	InternalEvent.addListener(ns + "/" + event, fn);
+	return () => InternalEvent.removeListener(ns + "/" + event, fn);
 }
 
 export function internalEmit(ns: string, event: string, ...args: any[]) {
-    InternalEvent.emit(ns + '/' + event, ...args);
+	InternalEvent.emit(ns + "/" + event, ...args);
 }
 
 // Event structure: namespace/event

src/lib/i18n.tsx

@@ -1,22 +1,23 @@
 import { IntlContext, translate } from "preact-i18n";
 import { useContext } from "preact/hooks";
+
 import { Children } from "../types/Preact";
 
 interface Fields {
-    [key: string]: Children
+	[key: string]: Children;
 }
 
 interface Props {
 	id: string;
-    fields: Fields
+	fields: Fields;
 }
 
 export interface IntlType {
 	intl: {
 		dictionary: {
-            [key: string]: Object | string
+			[key: string]: Object | string;
-        }
+		};
-    }
+	};
 }
 
 // This will exhibit O(2^n) behaviour.
@@ -24,10 +25,11 @@ function recursiveReplaceFields(input: string, fields: Fields) {
 	const key = Object.keys(fields)[0];
 	if (key) {
 		const { [key]: field, ...restOfFields } = fields;
-        if (typeof field === 'undefined') return [ input ];
+		if (typeof field === "undefined") return [input];
 
-        const values: (Children | string[])[] = input.split(`{{${key}}}`)
+		const values: (Children | string[])[] = input
-            .map(v => recursiveReplaceFields(v, restOfFields));
+			.split(`{{${key}}}`)
+			.map((v) => recursiveReplaceFields(v, restOfFields));
 
 		for (let i = values.length - 1; i > 0; i -= 2) {
 			values.splice(i, 0, field);
@@ -43,7 +45,7 @@ function recursiveReplaceFields(input: string, fields: Fields) {
 export function TextReact({ id, fields }: Props) {
 	const { intl } = useContext(IntlContext) as unknown as IntlType;
 
-    const path = id.split('.');
+	const path = id.split(".");
 	let entry = intl.dictionary[path.shift()!];
 	for (let key of path) {
 		// @ts-expect-error
@@ -55,5 +57,6 @@ export function TextReact({ id, fields }: Props) {
 
 export function useTranslation() {
 	const { intl } = useContext(IntlContext) as unknown as IntlType;
-    return (id: string, fields?: Object, plural?: number, fallback?: string) => translate(id, "", intl.dictionary, fields, plural, fallback);
+	return (id: string, fields?: Object, plural?: number, fallback?: string) =>
+		translate(id, "", intl.dictionary, fields, plural, fallback);
 }