Format and automatically fix linted code.

2026-03-07 01:15:28 +00:00 · 2021-07-10 15:57:29 +01:00
parent 1a59bb1abd
commit b3386ade33
87 changed files with 789 additions and 563 deletions
--- a/src/components/common/AgeGate.tsx
+++ b/src/components/common/AgeGate.tsx
@@ -1,12 +1,16 @@
 import { useHistory } from "react-router-dom";
-import { useState } from "preact/hooks";
-import styled from "styled-components";
-import { dispatch, getState } from "../../redux";
-import Checkbox from "../ui/Checkbox";
-import Button from "../ui/Button";
-import { Children } from "../../types/Preact";
 import { Channel } from "revolt.js";
+import styled from "styled-components";
+
 import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
+
+import { dispatch, getState } from "../../redux";
+
+import Button from "../ui/Button";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";

 const Base = styled.div`
    display: flex;
@@ -38,53 +42,66 @@ type Props = {
    gated: boolean;
    children: Children;
 } & {
-    type: 'channel';
+    type: "channel";
    channel: Channel;
-}
+};

 export default function AgeGate(props: Props) {
    const history = useHistory();
-    const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false);
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
    const [ageGate, setAgeGate] = useState(false);

    if (ageGate || !props.gated) {
-        return <>{ props.children }</>;
-    } else {
-        if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
+        return <>{props.children}</>;
+    }
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;

-        return (
-            <Base>
-                <img
-                    src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
-                    draggable={false}
-                />
-                <h2>{props.channel.name}</h2>
-                <span className="subtext">
-                    <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
-                    <a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
-                </span>
+    return (
+        <Base>
+            <img
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                draggable={false}
+            />
+            <h2>{props.channel.name}</h2>
+            <span className="subtext">
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <a href="#">
+                    <Text id={`app.main.channel.nsfw.learn_more`} />
+                </a>
+            </span>

-                <Checkbox checked={consent} onChange={(v) => {
+            <Checkbox
+                checked={consent}
+                onChange={(v) => {
                    setConsent(v);
                    if (v) {
-                        dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true });
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
                    } else {
-                        dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' });
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
                    }
                }}>
-                    <Text id="app.main.channel.nsfw.confirm" />
-                </Checkbox>
-                <div className="actions">
-                    <Button contrast onClick={() => history.goBack()}>
-                        <Text id="app.special.modals.actions.back" />
-                    </Button>
-                    <Button
-                        contrast
-                        onClick={() => consent && setAgeGate(true)}>
-                        <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
-                    </Button>
-                </div>
-            </Base>
-        );
-    }
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
+            <div className="actions">
+                <Button contrast onClick={() => history.goBack()}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                </Button>
+            </div>
+        </Base>
+    );
 }
--- a/src/components/common/AutoComplete.tsx
+++ b/src/components/common/AutoComplete.tsx
@@ -58,10 +58,10 @@ export function useAutoComplete(
        el: HTMLTextAreaElement,
    ): ["emoji" | "user" | "channel", string, number] | undefined {
        if (el.selectionStart === el.selectionEnd) {
-            let cursor = el.selectionStart;
-            let content = el.value.slice(0, cursor);
+            const cursor = el.selectionStart;
+            const content = el.value.slice(0, cursor);

-            let valid = /\w/;
+            const valid = /\w/;

            let j = content.length - 1;
            if (content[j] === "@") {
@@ -75,10 +75,10 @@ export function useAutoComplete(
            }

            if (j === -1) return;
-            let current = content[j];
+            const current = content[j];

            if (current === ":" || current === "@" || current === "#") {
-                let search = content.slice(j + 1, content.length);
+                const search = content.slice(j + 1, content.length);
                if (search.length > 0) {
                    return [
                        current === "#"
@@ -97,19 +97,19 @@ export function useAutoComplete(
    function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
        const el = ev.currentTarget;

-        let result = findSearchString(el);
+        const result = findSearchString(el);
        if (result) {
-            let [type, search] = result;
+            const [type, search] = result;
            const regex = new RegExp(search, "i");

            if (type === "emoji") {
                // ! FIXME: we should convert it to a Binary Search Tree and use that
-                let matches = Object.keys(emojiDictionary)
+                const matches = Object.keys(emojiDictionary)
                    .filter((emoji: string) => emoji.match(regex))
                    .splice(0, 5);

                if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                        state.type !== "none" ? state.selected : 0;

                    setState({
@@ -130,7 +130,9 @@ export function useAutoComplete(
                        users = client.users.toArray();
                        break;
                    case "channel": {
-                        let channel = client.channels.get(searchClues.users.id);
+                        const channel = client.channels.get(
+                            searchClues.users.id,
+                        );
                        switch (channel?.channel_type) {
                            case "Group":
                            case "DirectMessage":
@@ -162,7 +164,7 @@ export function useAutoComplete(

                users = users.filter((x) => x._id !== SYSTEM_USER_ID);

-                let matches = (
+                const matches = (
                    search.length > 0
                        ? users.filter((user) =>
                              user.username.toLowerCase().match(regex),
@@ -173,7 +175,7 @@ export function useAutoComplete(
                    .filter((x) => typeof x !== "undefined");

                if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                        state.type !== "none" ? state.selected : 0;

                    setState({
@@ -188,14 +190,14 @@ export function useAutoComplete(
            }

            if (type === "channel" && searchClues?.channels) {
-                let channels = client.servers
+                const channels = client.servers
                    .get(searchClues.channels.server)
                    ?.channels.map((x) => client.channels.get(x))
                    .filter(
                        (x) => typeof x !== "undefined",
                    ) as Channels.TextChannel[];

-                let matches = (
+                const matches = (
                    search.length > 0
                        ? channels.filter((channel) =>
                              channel.name.toLowerCase().match(regex),
@@ -206,7 +208,7 @@ export function useAutoComplete(
                    .filter((x) => typeof x !== "undefined");

                if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                        state.type !== "none" ? state.selected : 0;

                    setState({
@@ -228,11 +230,11 @@ export function useAutoComplete(

    function selectCurrent(el: HTMLTextAreaElement) {
        if (state.type !== "none") {
-            let result = findSearchString(el);
+            const result = findSearchString(el);
            if (result) {
-                let [_type, search, index] = result;
+                const [_type, search, index] = result;

-                let content = el.value.split("");
+                const content = el.value.split("");
                if (state.type === "emoji") {
                    content.splice(
                        index,
--- a/src/components/common/ChannelIcon.tsx
+++ b/src/components/common/ChannelIcon.tsx
@@ -45,9 +45,8 @@ export default function ChannelIcon(
        if (isServerChannel) {
            if (target?.channel_type === "VoiceChannel") {
                return <VolumeFull size={size} />;
-            } else {
-                return <Hash size={size} />;
            }
+            return <Hash size={size} />;
        }
    }

--- a/src/components/common/Emoji.tsx
+++ b/src/components/common/Emoji.tsx
@@ -1,6 +1,6 @@
 import { EmojiPacks } from "../../redux/reducers/settings";

-var EMOJI_PACK = "mutant";
+let EMOJI_PACK = "mutant";
 const REVISION = 3;

 export function setEmojiPack(pack: EmojiPacks) {
@@ -41,7 +41,7 @@ function toCodePoint(rune: string) {
 }

 function parseEmoji(emoji: string) {
-    let codepoint = toCodePoint(emoji);
+    const codepoint = toCodePoint(emoji);
    return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`;
 }

--- a/src/components/common/UpdateIndicator.tsx
+++ b/src/components/common/UpdateIndicator.tsx
@@ -10,7 +10,7 @@ import IconButton from "../ui/IconButton";

 import { updateSW } from "../../main";

-var pendingUpdate = false;
+let pendingUpdate = false;
 internalSubscribe("PWA", "update", () => (pendingUpdate = true));

 export default function UpdateIndicator() {
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -219,19 +219,18 @@ export function MessageDetail({
                    </span>
                </>
            );
-        } else {
-            return (
-                <>
-                    <time>
-                        <i className="copyBracket">[</i>
-                        {dayjs(decodeTime(message._id)).format(
-                            dict.dayjs.timeFormat,
-                        )}
-                        <i className="copyBracket">]</i>
-                    </time>
-                </>
-            );
        }
+        return (
+            <>
+                <time>
+                    <i className="copyBracket">[</i>
+                    {dayjs(decodeTime(message._id)).format(
+                        dict.dayjs.timeFormat,
+                    )}
+                    <i className="copyBracket">]</i>
+                </time>
+            </>
+        );
    }

    return (
@@ -239,7 +238,9 @@ export function MessageDetail({
            <time>{dayjs(decodeTime(message._id)).calendar()}</time>
            {message.edited && (
                <Tooltip content={dayjs(message.edited).format("LLLL")}>
-                    <span className="edited"><Text id="app.main.channel.edited" /></span>
+                    <span className="edited">
+                        <Text id="app.main.channel.edited" />
+                    </span>
                </Tooltip>
            )}
        </DetailBase>
--- a/src/components/common/messaging/MessageBox.tsx
+++ b/src/components/common/messaging/MessageBox.tsx
@@ -232,7 +232,7 @@ export default function MessageBox({ channel }: Props) {

    async function sendFile(content: string) {
        if (uploadState.type !== "attached") return;
-        let attachments: string[] = [];
+        const attachments: string[] = [];

        const cancel = Axios.CancelToken.source();
        const files = uploadState.files;
@@ -502,8 +502,9 @@ export default function MessageBox({ channel }: Props) {
                        <HappyAlt size={20} />
                </IconButton>*/}
                    <IconButton
-                        className="mobile" onClick={send}
-                        onMouseDown={e => e.preventDefault()}>
+                        className="mobile"
+                        onClick={send}
+                        onMouseDown={(e) => e.preventDefault()}>
                        <Send size={20} />
                    </IconButton>
                </Action>
--- a/src/components/common/messaging/SystemMessage.tsx
+++ b/src/components/common/messaging/SystemMessage.tsx
@@ -39,11 +39,16 @@ interface Props {
    hideInfo?: boolean;
 }

-export function SystemMessage({ attachContext, message, highlight, hideInfo }: Props) {
+export function SystemMessage({
+    attachContext,
+    message,
+    highlight,
+    hideInfo,
+}: Props) {
    const ctx = useForceUpdate();

    let data: SystemMessageParsed;
-    let content = message.content;
+    const content = message.content;
    if (typeof content === "object") {
        switch (content.type) {
            case "text":
@@ -154,9 +159,11 @@ export function SystemMessage({ attachContext, message, highlight, hideInfo }: P
                      })
                    : undefined
            }>
-            { !hideInfo && <MessageInfo>
-                <MessageDetail message={message} position="left" />
-            </MessageInfo> }
+            {!hideInfo && (
+                <MessageInfo>
+                    <MessageDetail message={message} position="left" />
+                </MessageInfo>
+            )}
            <SystemContent>{children}</SystemContent>
        </MessageBase>
    );
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -8,9 +8,9 @@ import { useIntermediate } from "../../../../context/intermediate/Intermediate";
 import { AppContext } from "../../../../context/revoltjs/RevoltClient";

 import AttachmentActions from "./AttachmentActions";
-import TextFile from "./TextFile";
 import { SizedGrid } from "./Grid";
 import Spoiler from "./Spoiler";
+import TextFile from "./TextFile";

 interface Props {
    attachment: AttachmentRJS;
@@ -34,9 +34,16 @@ export default function Attachment({ attachment, hasContent }: Props) {
    switch (metadata.type) {
        case "Image": {
            return (
-                <SizedGrid width={metadata.width} height={metadata.height}
-                    className={classNames({ [styles.margin]: hasContent, spoiler })}>
-                    <img src={url} alt={filename}
+                <SizedGrid
+                    width={metadata.width}
+                    height={metadata.height}
+                    className={classNames({
+                        [styles.margin]: hasContent,
+                        spoiler,
+                    })}>
+                    <img
+                        src={url}
+                        alt={filename}
                        className={styles.image}
                        loading="lazy"
                        onClick={() =>
@@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
                        }
                        onMouseDown={(ev) =>
                            ev.button === 1 && window.open(url, "_blank")
-                        } />
-                    { spoiler && <Spoiler set={setSpoiler} /> }
+                        }
+                    />
+                    {spoiler && <Spoiler set={setSpoiler} />}
                </SizedGrid>
-            )
+            );
        }

        case "Video": {
            return (
-                <div className={classNames(styles.container, { [styles.margin]: hasContent })}
-                    style={{ '--width': metadata.width + 'px' }}>
+                <div
+                    className={classNames(styles.container, {
+                        [styles.margin]: hasContent,
+                    })}
+                    style={{ "--width": `${metadata.width}px` }}>
                    <AttachmentActions attachment={attachment} />
-                    <SizedGrid width={metadata.width} height={metadata.height}
+                    <SizedGrid
+                        width={metadata.width}
+                        height={metadata.height}
                        className={classNames({ spoiler })}>
-                        <video src={url} alt={filename}
+                        <video
+                            src={url}
+                            alt={filename}
                            controls
                            loading="lazy"
                            width={metadata.width}
@@ -66,10 +81,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
                                ev.button === 1 && window.open(url, "_blank")
                            }
                        />
-                        { spoiler && <Spoiler set={setSpoiler} /> }
+                        {spoiler && <Spoiler set={setSpoiler} />}
                    </SizedGrid>
                </div>
-            )
+            );
        }

        case "Audio": {
@@ -82,7 +97,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                </div>
            );
        }
-        
+
        case "Text": {
            return (
                <div
--- a/src/components/common/messaging/attachments/AttachmentActions.tsx
+++ b/src/components/common/messaging/attachments/AttachmentActions.tsx
@@ -37,12 +37,13 @@ export default function AttachmentActions({ attachment }: Props) {
                <div className={classNames(styles.actions, styles.imageAction)}>
                    <span className={styles.filename}>{filename}</span>
                    <span className={styles.filesize}>
-                        {metadata.width + "x" + metadata.height} ({filesize})
+                        {`${metadata.width}x${metadata.height}`} ({filesize})
                    </span>
                    <a
                        href={open_url}
                        target="_blank"
-                        className={styles.iconType}>
+                        className={styles.iconType}
+                        rel="noreferrer">
                        <IconButton>
                            <LinkExternal size={24} />
                        </IconButton>
@@ -51,7 +52,8 @@ export default function AttachmentActions({ attachment }: Props) {
                        href={download_url}
                        className={styles.downloadIcon}
                        download
-                        target="_blank">
+                        target="_blank"
+                        rel="noreferrer">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -68,7 +70,8 @@ export default function AttachmentActions({ attachment }: Props) {
                        href={download_url}
                        className={styles.downloadIcon}
                        download
-                        target="_blank">
+                        target="_blank"
+                        rel="noreferrer">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -81,13 +84,14 @@ export default function AttachmentActions({ attachment }: Props) {
                    <Video size={24} className={styles.iconType} />
                    <span className={styles.filename}>{filename}</span>
                    <span className={styles.filesize}>
-                        {metadata.width + "x" + metadata.height} ({filesize})
+                        {`${metadata.width}x${metadata.height}`} ({filesize})
                    </span>
                    <a
                        href={download_url}
                        className={styles.downloadIcon}
                        download
-                        target="_blank">
+                        target="_blank"
+                        rel="noreferrer">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
@@ -104,7 +108,8 @@ export default function AttachmentActions({ attachment }: Props) {
                        <a
                            href={open_url}
                            target="_blank"
-                            className={styles.externalType}>
+                            className={styles.externalType}
+                            rel="noreferrer">
                            <IconButton>
                                <LinkExternal size={24} />
                            </IconButton>
@@ -114,7 +119,8 @@ export default function AttachmentActions({ attachment }: Props) {
                        href={download_url}
                        className={styles.downloadIcon}
                        download
-                        target="_blank">
+                        target="_blank"
+                        rel="noreferrer">
                        <IconButton>
                            <Download size={24} />
                        </IconButton>
--- a/src/components/common/messaging/attachments/Grid.tsx
+++ b/src/components/common/messaging/attachments/Grid.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 import { Children } from "../../../../types/Preact";

 const Grid = styled.div`
@@ -9,7 +10,8 @@ const Grid = styled.div`
    max-height: min(var(--attachment-max-height), var(--height));
    aspect-ratio: var(--aspect-ratio);

-    img, video {
+    img,
+    video {
        min-width: 100%;
        min-height: 100%;

@@ -23,35 +25,40 @@ const Grid = styled.div`
    }

    &.spoiler {
-        img, video {
+        img,
+        video {
            filter: blur(44px);
        }
-        
+
        border-radius: var(--border-radius);
    }
 `;

 export default Grid;

-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'style'> & {
-    style?: JSX.CSSProperties,
-    children?: Children,
-    width: number,
-    height: number,
+type Props = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as" | "style"
+> & {
+    style?: JSX.CSSProperties;
+    children?: Children;
+    width: number;
+    height: number;
 };

 export function SizedGrid(props: Props) {
    const { width, height, children, style, ...divProps } = props;

    return (
-        <Grid {...divProps}
+        <Grid
+            {...divProps}
            style={{
                ...style,
-                "--width": width + 'px',
-                "--height": height + 'px',
+                "--width": `${width}px`,
+                "--height": `${height}px`,
                "--aspect-ratio": width / height,
            }}>
-            { children }
+            {children}
        </Grid>
-    )
+    );
 }
--- a/src/components/common/messaging/attachments/MessageReply.tsx
+++ b/src/components/common/messaging/attachments/MessageReply.tsx
@@ -1,21 +1,21 @@
 import { Reply } from "@styled-icons/boxicons-regular";
 import { File } from "@styled-icons/boxicons-solid";
+import { useHistory } from "react-router-dom";
 import { SYSTEM_USER_ID } from "revolt.js";
+import { Users } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";

 import { Text } from "preact-i18n";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";

 import { useRenderState } from "../../../../lib/renderer/Singleton";

 import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
+import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";

 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
-import { Users } from "revolt.js/dist/api/objects";
-import { useHistory } from "react-router-dom";
-import { useEffect, useLayoutEffect, useState } from "preact/hooks";
-import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";

 interface Props {
    channel: string;
@@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{
        align-items: center;
        flex-direction: row;
        transition: filter 1s ease-in-out;
-        transition: transform ease-in-out .1s;
+        transition: transform ease-in-out 0.1s;
        filter: brightness(1);

        &:hover {
@@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) {
    const view = useRenderState(channel);
    if (view?.type !== "RENDER") return null;

-    const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
+    const [message, setMessage] = useState<MessageObject | undefined>(
+        undefined,
+    );
    useLayoutEffect(() => {
        // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
        const m = view.messages.find((x) => x._id === id);
@@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) {
        if (m) {
            setMessage(m);
        } else {
-            ctx.client.channels.fetchMessage(channel, id)
-                .then(m => setMessage(mapMessage(m)));
+            ctx.client.channels
+                .fetchMessage(channel, id)
+                .then((m) => setMessage(mapMessage(m)));
        }
-    }, [ view.messages ]);
+    }, [view.messages]);

    if (!message) {
        return (
@@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) {
    return (
        <ReplyBase head={index === 0}>
            <Reply size={16} />
-            { user?.relationship === Users.Relationship.Blocked ?
-                <>Blocked User</> :
+            {user?.relationship === Users.Relationship.Blocked ? (
+                <>Blocked User</>
+            ) : (
                <>
                    {message.author === SYSTEM_USER_ID ? (
                        <SystemMessage message={message} hideInfo />
-                    ) : <>
-                        <div className="user"><UserShort user={user} size={16} /></div>
-                        <div className="content" onClick={() => {
-                            let obj = ctx.client.channels.get(channel);
-                            if (obj?.channel_type === 'TextChannel') {
-                                history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
-                            } else {
-                                history.push(`/channel/${channel}/${message._id}`);
-                            }
-                        }}>
-                            {message.attachments && message.attachments.length > 0 && (
-                                <File size={16} />
-                            )}
-                            <Markdown
-                                disallowBigEmoji
-                                content={(message.content as string).replace(/\n/g, " ")}
-                            />
-                        </div>
-                    </>}
+                    ) : (
+                        <>
+                            <div className="user">
+                                <UserShort user={user} size={16} />
+                            </div>
+                            <div
+                                className="content"
+                                onClick={() => {
+                                    const obj =
+                                        ctx.client.channels.get(channel);
+                                    if (obj?.channel_type === "TextChannel") {
+                                        history.push(
+                                            `/server/${obj.server}/channel/${obj._id}/${message._id}`,
+                                        );
+                                    } else {
+                                        history.push(
+                                            `/channel/${channel}/${message._id}`,
+                                        );
+                                    }
+                                }}>
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
+                                        <File size={16} />
+                                    )}
+                                <Markdown
+                                    disallowBigEmoji
+                                    content={(
+                                        message.content as string
+                                    ).replace(/\n/g, " ")}
+                                />
+                            </div>
+                        </>
+                    )}
                </>
-            }
+            )}
        </ReplyBase>
    );
 }
--- a/src/components/common/messaging/attachments/Spoiler.tsx
+++ b/src/components/common/messaging/attachments/Spoiler.tsx
@@ -1,5 +1,6 @@
+import styled from "styled-components";
+
 import { Text } from "preact-i18n";
-import styled from "styled-components"

 const Base = styled.div`
    display: grid;
@@ -21,13 +22,15 @@ const Base = styled.div`
 `;

 interface Props {
-    set: (v: boolean) => void
+    set: (v: boolean) => void;
 }

 export default function Spoiler({ set }: Props) {
    return (
        <Base onClick={() => set(false)}>
-            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
+            <span>
+                <Text id="app.main.channel.misc.spoiler_attachment" />
+            </span>
        </Base>
-    )
-}
+    );
+}
--- a/src/components/common/messaging/attachments/TextFile.tsx
+++ b/src/components/common/messaging/attachments/TextFile.tsx
@@ -39,7 +39,7 @@ export default function TextFile({ attachment }: Props) {

        setLoading(true);

-        let cached = fileCache[attachment._id];
+        const cached = fileCache[attachment._id];
        if (cached) {
            setContent(cached);
            setLoading(false);
--- a/src/components/common/messaging/bars/FilePreview.tsx
+++ b/src/components/common/messaging/bars/FilePreview.tsx
@@ -160,7 +160,7 @@ function FileEntry({
    const [url, setURL] = useState("");

    useEffect(() => {
-        let url: string = URL.createObjectURL(file);
+        const url: string = URL.createObjectURL(file);
        setURL(url);
        return () => URL.revokeObjectURL(url);
    }, [file]);
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -28,7 +28,7 @@ const Bar = styled.div`
        transition: color ease-in-out 0.08s;
        background: var(--secondary-background);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
-        
+
        > div {
            display: flex;
            align-items: center;
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -78,7 +78,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
    return (
        <div>
            {replies.map((reply, index) => {
-                let message = messages.find((x) => reply.id === x._id);
+                const 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
@@ -90,7 +90,7 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                        </span>
                    );

-                let user = users.find((x) => message!.author === x?._id);
+                const user = users.find((x) => message!.author === x?._id);
                if (!user) return;

                return (
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/src/components/common/messaging/embed/Embed.tsx
@@ -22,7 +22,7 @@ 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();
@@ -35,14 +35,14 @@ export default function Embed({ embed }: Props) {
        w: number,
        h: number,
    ): { width: number; height: number } {
-        let limitingWidth = Math.min(maxWidth, w);
+        const limitingWidth = Math.min(maxWidth, w);

-        let limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);
+        const limitingHeight = Math.min(MAX_EMBED_HEIGHT, h);

        // Calculate smallest possible WxH.
-        let width = Math.min(limitingWidth, limitingHeight * (w / h));
+        const width = Math.min(limitingWidth, limitingHeight * (w / h));

-        let height = Math.min(limitingHeight, limitingWidth * (h / w));
+        const height = Math.min(limitingHeight, limitingWidth * (h / w));

        return { width, height };
    }
@@ -51,7 +51,7 @@ export default function Embed({ embed }: Props) {
        case "Website": {
            // Determine special embed size.
            let mw, mh;
-            let largeMedia =
+            const largeMedia =
                (embed.special && embed.special.type !== "None") ||
                embed.image?.size === "Large";
            switch (embed.special?.type) {
@@ -80,7 +80,7 @@ export default function Embed({ embed }: Props) {
                }
            }

-            let { width, height } = calculateSize(mw, mh);
+            const { width, height } = calculateSize(mw, mh);
            return (
                <div
                    className={classNames(styles.embed, styles.website)}
@@ -115,7 +115,8 @@ export default function Embed({ embed }: Props) {
                                <a
                                    href={embed.url}
                                    target={"_blank"}
-                                    className={styles.title}>
+                                    className={styles.title}
+                                    rel="noreferrer">
                                    {embed.title}
                                </a>
                            </span>
--- a/src/components/common/messaging/embed/EmbedMedia.tsx
+++ b/src/components/common/messaging/embed/EmbedMedia.tsx
@@ -14,7 +14,7 @@ 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;
@@ -75,7 +75,7 @@ export default function EmbedMedia({ embed, width, height }: Props) {
        }
        default: {
            if (embed.image) {
-                let url = embed.image.url;
+                const url = embed.image.url;
                return (
                    <img
                        className={styles.image}
--- a/src/components/common/messaging/embed/EmbedMediaActions.tsx
+++ b/src/components/common/messaging/embed/EmbedMediaActions.tsx
@@ -16,9 +16,13 @@ export default function EmbedMediaActions({ embed }: Props) {
        <div className={styles.actions}>
            <span className={styles.filename}>{filename}</span>
            <span className={styles.filesize}>
-                {embed.width + "x" + embed.height}
+                {`${embed.width}x${embed.height}`}
            </span>
-            <a href={embed.url} class={styles.openIcon} target="_blank">
+            <a
+                href={embed.url}
+                class={styles.openIcon}
+                target="_blank"
+                rel="noreferrer">
                <IconButton>
                    <LinkExternal size={24} />
                </IconButton>
--- a/src/components/common/user/UserHover.tsx
+++ b/src/components/common/user/UserHover.tsx
@@ -1,14 +1,15 @@
 import { InfoCircle } from "@styled-icons/boxicons-regular";
-import { Children } from "../../../types/Preact";
-import { Username } from "./UserShort";
-import styled from "styled-components";
-import UserStatus from "./UserStatus";
-import Tooltip from "../Tooltip";
 import { User } from "revolt.js";
+import styled from "styled-components";
+
+import { Children } from "../../../types/Preact";
+import Tooltip from "../Tooltip";
+import { Username } from "./UserShort";
+import UserStatus from "./UserStatus";

 interface Props {
-    user?: User,
-    children: Children
+    user?: User;
+    children: Children;
 }

 const Base = styled.div`
@@ -38,16 +39,18 @@ const Base = styled.div`

 export default function UserHover({ user, children }: Props) {
    return (
-        <Tooltip placement="right-end" content={
-            <Base>
-                <Username className="username" user={user} />
-                <span className="status">
-                    <UserStatus user={user} />
-                </span>
-                {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
-            </Base>
-        }>
-            { children }
+        <Tooltip
+            placement="right-end"
+            content={
+                <Base>
+                    <Username className="username" user={user} />
+                    <span className="status">
+                        <UserStatus user={user} />
+                    </span>
+                    {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
+                </Base>
+            }>
+            {children}
        </Tooltip>
-    )
+    );
 }
--- a/src/components/common/user/UserStatus.tsx
+++ b/src/components/common/user/UserStatus.tsx
@@ -2,6 +2,7 @@ import { User } from "revolt.js";
 import { Users } from "revolt.js/dist/api/objects";

 import { Text } from "preact-i18n";
+
 import Tooltip from "../Tooltip";

 interface Props {
@@ -14,10 +15,10 @@ export default function UserStatus({ user, tooltip }: Props) {
        if (user.status?.text) {
            if (tooltip) {
                return (
-                    <Tooltip arrow={undefined} content={ user.status.text }>
-                        { user.status.text }
+                    <Tooltip arrow={undefined} content={user.status.text}>
+                        {user.status.text}
                    </Tooltip>
-                )
+                );
            }

            return <>{user.status.text}</>;
--- a/src/components/markdown/Renderer.tsx
+++ b/src/components/markdown/Renderer.tsx
@@ -35,7 +35,7 @@ declare global {
 if (typeof window !== "undefined") {
    window.copycode = function (element: HTMLDivElement) {
        try {
-            let code = element.parentElement?.parentElement?.children[1];
+            const code = element.parentElement?.parentElement?.children[1];
            if (code) {
                navigator.clipboard.writeText(code.textContent?.trim() ?? "");
            }
@@ -47,9 +47,9 @@ export const md: MarkdownIt = MarkdownIt({
    breaks: true,
    linkify: true,
    highlight: (str, lang) => {
-        let v = Prism.languages[lang];
+        const v = Prism.languages[lang];
        if (v) {
-            let out = Prism.highlight(str, v, lang);
+            const out = Prism.highlight(str, v, lang);
            return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
        }

@@ -66,7 +66,7 @@ export const md: MarkdownIt = MarkdownIt({
    .use(MarkdownKatex, {
        throwOnError: false,
        maxExpand: 0,
-        maxSize: 10
+        maxSize: 10,
    });

 // TODO: global.d.ts file for defining globals
@@ -89,7 +89,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {

    // We replace the message with the mention at the time of render.
    // We don't care if the mention changes.
-    let newContent = content.replace(
+    const newContent = content.replace(
        RE_MENTIONS,
        (sub: string, ...args: any[]) => {
            const id = args[0],
@@ -109,7 +109,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {

    const toggle = useCallback((ev: MouseEvent) => {
        if (ev.currentTarget) {
-            let element = ev.currentTarget as HTMLDivElement;
+            const element = ev.currentTarget as HTMLDivElement;
            if (element.classList.contains("spoiler")) {
                element.classList.add("shown");
            }
@@ -123,7 +123,7 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {
            const pathname = url.pathname;

            if (pathname.startsWith("/@")) {
-                let id = pathname.substr(2);
+                const id = pathname.substr(2);
                if (/[0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}/.test(id)) {
                    ev.preventDefault();
                    internalEmit("Intermediate", "openProfile", id);
@@ -137,19 +137,20 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {

    return (
        <span
-            ref={el => {
+            ref={(el) => {
                if (el) {
-                    (el.querySelectorAll<HTMLDivElement>('.spoiler'))
-                        .forEach(element => {
-                            element.removeEventListener('click', toggle);
-                            element.addEventListener('click', toggle);
-                        });
+                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
+                        (element) => {
+                            element.removeEventListener("click", toggle);
+                            element.addEventListener("click", toggle);
+                        },
+                    );

-                    (el.querySelectorAll<HTMLAnchorElement>('a'))
-                        .forEach(element => {
-                            element.removeEventListener('click', handleLink);
-                            element.removeAttribute('data-type');
-                            element.removeAttribute('target');
+                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
+                        (element) => {
+                            element.removeEventListener("click", handleLink);
+                            element.removeAttribute("data-type");
+                            element.removeAttribute("target");

                            let internal;
                            const href = element.href;
@@ -159,19 +160,26 @@ export default function Renderer({ content, disallowBigEmoji }: MarkdownProps) {

                                    if (url.hostname === location.hostname) {
                                        internal = true;
-                                        element.addEventListener('click', handleLink);
+                                        element.addEventListener(
+                                            "click",
+                                            handleLink,
+                                        );

-                                        if (url.pathname.startsWith('/@')) {
-                                            element.setAttribute('data-type', 'mention');
+                                        if (url.pathname.startsWith("/@")) {
+                                            element.setAttribute(
+                                                "data-type",
+                                                "mention",
+                                            );
                                        }
                                    }
                                } catch (err) {}
                            }

                            if (!internal) {
-                                element.setAttribute('target', '_blank');
+                                element.setAttribute("target", "_blank");
                            }
-                        });
+                        },
+                    );
                }
            }}
            className={styles.markdown}
--- a/src/components/navigation/BottomNavigation.tsx
+++ b/src/components/navigation/BottomNavigation.tsx
@@ -1,5 +1,5 @@
-import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
 import { Search } from "@styled-icons/boxicons-regular";
+import { Message, Group, Inbox } from "@styled-icons/boxicons-solid";
 import { useHistory, useLocation } from "react-router";
 import styled, { css } from "styled-components";

@@ -113,7 +113,6 @@ export function BottomNavigation({ lastOpened }: Props) {
                </Button>
            </Navbar>
        </Base>
-        
    );
 }

--- a/src/components/navigation/left/HomeSidebar.tsx
+++ b/src/components/navigation/left/HomeSidebar.tsx
@@ -149,7 +149,7 @@ function HomeSidebar(props: Props) {
                    if (x.channel_type === "DirectMessage") {
                        if (!x.active) return null;

-                        let recipient = client.channels.getRecipient(x._id);
+                        const recipient = client.channels.getRecipient(x._id);
                        user = users.find((x) => x?._id === recipient);

                        if (!user) {
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -21,16 +21,16 @@ import {
    useServers,
 } from "../../../context/revoltjs/hooks";

+import logoSVG from "../../../assets/logo.svg";
 import ServerIcon from "../../common/ServerIcon";
 import Tooltip from "../../common/Tooltip";
+import UserHover from "../../common/user/UserHover";
 import UserIcon from "../../common/user/UserIcon";
 import IconButton from "../../ui/IconButton";
 import LineDivider from "../../ui/LineDivider";
 import { mapChannelWithUnread } from "./common";

-import logoSVG from '../../../assets/logo.svg';
 import { Children } from "../../../types/Preact";
-import UserHover from "../../common/user/UserHover";

 function Icon({
    children,
@@ -129,7 +129,7 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
            !props.active &&
            css`
                display: none;
-            ` }
+            `}

        svg {
            width: 57px;
@@ -152,13 +152,17 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
 function Swoosh() {
    return (
        <span>
-            <svg xmlns="http://www.w3.org/2000/svg" width="57" height="117" fill="var(--sidebar-active)">
-                <path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z"/>
-                <path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z"/>
-                <path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z"/>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="57"
+                height="117"
+                fill="var(--sidebar-active)">
+                <path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z" />
+                <path d="M56 58.465c0 15.464-12.536 28-28 28s-28-12.536-28-28 12.536-28 28-28 28 12.536 28 28z" />
+                <path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z" />
            </svg>
        </span>
-    )
+    );
 }

 interface Props {
@@ -178,8 +182,8 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {

    const servers = activeServers.map((server) => {
        let alertCount = 0;
-        for (let id of server.channels) {
-            let channel = channels.find((x) => x._id === id);
+        for (const id of server.channels) {
+            const channel = channels.find((x) => x._id === id);
            if (channel?.alertCount) {
                alertCount += channel.alertCount;
            }
@@ -206,7 +210,7 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {

    let homeUnread: "mention" | "unread" | undefined;
    let alertCount = 0;
-    for (let x of channels) {
+    for (const x of channels) {
        if (
            ((x.channel_type === "DirectMessage" && x.active) ||
                x.channel_type === "Group") &&
@@ -229,10 +233,14 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                    to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
                    <ServerEntry home active={homeActive}>
                        <Swoosh />
-                        { isTouchscreenDevice ?
+                        {isTouchscreenDevice ? (
                            <Icon size={42} unread={homeUnread}>
-                                <img style={{ width: 32, height: 32 }} src={logoSVG} />
-                            </Icon> :
+                                <img
+                                    style={{ width: 32, height: 32 }}
+                                    src={logoSVG}
+                                />
+                            </Icon>
+                        ) : (
                            <div
                                onContextMenu={attachContextMenu("Status")}
                                onClick={() =>
@@ -240,11 +248,15 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                                }>
                                <UserHover user={self}>
                                    <Icon size={42} unread={homeUnread}>
-                                        <UserIcon target={self} size={32} status />
+                                        <UserIcon
+                                            target={self}
+                                            size={32}
+                                            status
+                                        />
                                    </Icon>
                                </UserHover>
                            </div>
-                        }
+                        )}
                    </ServerEntry>
                </ConditionalLink>
                <LineDivider />
@@ -255,10 +267,9 @@ export function ServerListSidebar({ unreads, lastOpened }: Props) {
                    return (
                        <ConditionalLink
                            active={active}
-                            to={
-                                `/server/${entry!._id}` +
-                                (id ? `/channel/${id}` : "")
-                            }>
+                            to={`/server/${entry!._id}${
+                                id ? `/channel/${id}` : ""
+                            }`}>
                            <ServerEntry
                                active={active}
                                onContextMenu={attachContextMenu("Menu", {
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -81,8 +81,8 @@ function ServerSidebar(props: Props) {
        });
    }, [channel_id]);

-    let uncategorised = new Set(server.channels);
-    let elements = [];
+    const uncategorised = new Set(server.channels);
+    const elements = [];

    function addChannel(id: string) {
        const entry = channels.find((x) => x._id === id);
@@ -106,9 +106,9 @@ function ServerSidebar(props: Props) {
    }

    if (server.categories) {
-        for (let category of server.categories) {
-            let channels = [];
-            for (let id of category.channels) {
+        for (const category of server.categories) {
+            const channels = [];
+            for (const id of category.channels) {
                uncategorised.delete(id);
                channels.push(addChannel(id));
            }
@@ -124,7 +124,7 @@ function ServerSidebar(props: Props) {
        }
    }

-    for (let id of Array.from(uncategorised).reverse()) {
+    for (const id of Array.from(uncategorised).reverse()) {
        elements.unshift(addChannel(id));
    }

--- a/src/components/navigation/right/ChannelDebugInfo.tsx
+++ b/src/components/navigation/right/ChannelDebugInfo.tsx
@@ -6,7 +6,7 @@ interface Props {

 export function ChannelDebugInfo({ id }: Props) {
    if (process.env.NODE_ENV !== "development") return null;
-    let view = useRenderState(id);
+    const view = useRenderState(id);
    if (!view) return null;

    return (
--- a/src/components/navigation/right/MemberSidebar.tsx
+++ b/src/components/navigation/right/MemberSidebar.tsx
@@ -1,12 +1,14 @@
 import { useParams } from "react-router";
+import { Link } from "react-router-dom";
 import { User } from "revolt.js";
 import { Channels, Message, Servers, Users } from "revolt.js/dist/api/objects";
 import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";

-import { Link } from "react-router-dom";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";

+import { getState } from "../../../redux";
+
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import {
    AppContext,
@@ -22,14 +24,13 @@ import {

 import CollapsibleSection from "../../common/CollapsibleSection";
 import Category from "../../ui/Category";
+import InputBox from "../../ui/InputBox";
 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 InputBox from "../../ui/InputBox";
-import { getState } from "../../../redux";

 interface Props {
    ctx: HookContext;
@@ -56,7 +57,7 @@ export function GroupMemberSidebar({
 }: Props & { channel: Channels.GroupChannel }) {
    const { openScreen } = useIntermediate();
    const users = useUsers(undefined, ctx);
-    let members = channel.recipients
+    const members = channel.recipients
        .map((x) => users.find((y) => y?._id === x))
        .filter((x) => typeof x !== "undefined") as User[];

@@ -77,18 +78,18 @@ export function GroupMemberSidebar({

    members.sort((a, b) => {
        // ! FIXME: should probably rewrite all this code
-        let l =
+        const l =
            +(
                (a.online && a.status?.presence !== Users.Presence.Invisible) ??
                false
            ) | 0;
-        let r =
+        const r =
            +(
                (b.online && b.status?.presence !== Users.Presence.Invisible) ??
                false
            ) | 0;

-        let n = r - l;
+        const n = r - l;
        if (n !== 0) {
            return n;
        }
@@ -219,18 +220,18 @@ export function ServerMemberSidebar({
    // copy paste from above
    users.sort((a, b) => {
        // ! FIXME: should probably rewrite all this code
-        let l =
+        const l =
            +(
                (a.online && a.status?.presence !== Users.Presence.Invisible) ??
                false
            ) | 0;
-        let r =
+        const r =
            +(
                (b.online && b.status?.presence !== Users.Presence.Invisible) ??
                false
            ) | 0;

-        let n = r - l;
+        const n = r - l;
        if (n !== 0) {
            return n;
        }
@@ -246,16 +247,15 @@ export function ServerMemberSidebar({
                <div>{!members && <Preloader type="ring" />}</div>
                {members && (
                    <CollapsibleSection
-                        //sticky //will re-add later, need to fix css 
+                        //sticky //will re-add later, need to fix css
                        id="members"
                        defaultValue
-                        summary={<span>
-                                        <Text id="app.main.categories.members" />{" "}
-                                        — {users.length}
-                                    </span>
-                                }
-
-                        >
+                        summary={
+                            <span>
+                                <Text id="app.main.categories.members" /> —{" "}
+                                {users.length}
+                            </span>
+                        }>
                        {users.length === 0 && <img src={placeholderSVG} />}
                        {users.map(
                            (user) =>
@@ -281,14 +281,18 @@ export function ServerMemberSidebar({
 }

 function Search({ channel }: { channel: string }) {
-    if (!getState().experiments.enabled?.includes('search')) return null;
+    if (!getState().experiments.enabled?.includes("search")) return null;

    const client = useContext(AppContext);
-    const [query,setV] = useState('');
-    const [results,setResults] = useState<Message[]>([]);
+    const [query, setV] = useState("");
+    const [results, setResults] = useState<Message[]>([]);

    async function search() {
-        let data = await client.channels.searchWithUsers(channel, { query, sort: 'Relevance' }, true);
+        const data = await client.channels.searchWithUsers(
+            channel,
+            { query, sort: "Relevance" },
+            true,
+        );
        setResults(data.messages);
    }

@@ -298,27 +302,47 @@ function Search({ channel }: { channel: string }) {
            id="search"
            defaultValue={false}
            summary={"Search (BETA)"}>
-            <InputBox style={{ width: '100%' }}
-                onKeyDown={e => e.key === 'Enter' && search()}
-                value={query} onChange={e => setV(e.currentTarget.value)} />
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '8px' }}>
-            {
-                results.map(message => {
-                    let href = '';
-                    let channel = client.channels.get(message.channel);
-                    if (channel?.channel_type === 'TextChannel') {
+            <InputBox
+                style={{ width: "100%" }}
+                onKeyDown={(e) => e.key === "Enter" && search()}
+                value={query}
+                onChange={(e) => setV(e.currentTarget.value)}
+            />
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "4px",
+                    marginTop: "8px",
+                }}>
+                {results.map((message) => {
+                    let href = "";
+                    const channel = client.channels.get(message.channel);
+                    if (channel?.channel_type === "TextChannel") {
                        href += `/server/${channel.server}`;
                    }

                    href += `/channel/${message.channel}/${message._id}`;

-                    return <Link to={href}><div style={{ margin: '2px', padding: '6px', background: 'var(--primary-background)' }}>
-                        <b>@{ client.users.get(message.author)?.username }</b><br/>
-                        { message.content }
-                    </div></Link>
-                })
-            }
+                    return (
+                        <Link to={href}>
+                            <div
+                                style={{
+                                    margin: "2px",
+                                    padding: "6px",
+                                    background: "var(--primary-background)",
+                                }}>
+                                <b>
+                                    @
+                                    {client.users.get(message.author)?.username}
+                                </b>
+                                <br />
+                                {message.content}
+                            </div>
+                        </Link>
+                    );
+                })}
            </div>
        </CollapsibleSection>
-    )
+    );
 }
--- a/src/components/ui/Category.tsx
+++ b/src/components/ui/Category.tsx
@@ -44,7 +44,7 @@ type Props = Omit<
 };

 export default function Category(props: Props) {
-    let { text, action, ...otherProps } = props;
+    const { text, action, ...otherProps } = props;

    return (
        <CategoryBase {...otherProps}>
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -55,7 +55,11 @@ const SwatchesBase = styled.div`
        div {
            width: 8px;
            height: 68px;
-            background: linear-gradient(to right, var(--primary-background), transparent);
+            background: linear-gradient(
+                to right,
+                var(--primary-background),
+                transparent
+            );
        }
    }
 `;
@@ -127,8 +131,10 @@ export default function ColourSwatches({ value, onChange }: Props) {
                <Palette size={32} />
            </Swatch>

-            <div class="overlay"><div /></div>
-            
+            <div class="overlay">
+                <div />
+            </div>
+
            <Rows>
                {presets.map((row, i) => (
                    <div key={i}>
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
                    </div>
                ))}
            </Rows>
-            
-            
        </SwatchesBase>
    );
 }
--- a/src/components/ui/ComboBox.tsx
+++ b/src/components/ui/ComboBox.tsx
@@ -5,7 +5,7 @@ export default styled.select`
    padding: 10px;
    cursor: pointer;
    border-radius: var(--border-radius);
-    
+
    font-family: inherit;
    font-size: var(--text-size);
    color: var(--secondary-foreground);
--- a/src/components/ui/DateDivider.tsx
+++ b/src/components/ui/DateDivider.tsx
@@ -12,8 +12,8 @@ const Base = styled.div<{ unread?: boolean }>`

    time {
        margin-top: -2px;
-        font-size: .6875rem;
-        line-height: .6875rem;
+        font-size: 0.6875rem;
+        line-height: 0.6875rem;
        padding: 2px 0 2px 0;
        padding-inline-end: 5px;
        color: var(--tertiary-foreground);
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -2,9 +2,10 @@ import styled, { css, keyframes } from "styled-components";

 import { createPortal, useEffect, useState } from "preact/compat";

+import { internalSubscribe } from "../../lib/eventEmitter";
+
 import { Children } from "../../types/Preact";
 import Button, { ButtonProps } from "./Button";
-import { internalSubscribe } from "../../lib/eventEmitter";

 const open = keyframes`
    0% {opacity: 0;}
@@ -52,7 +53,7 @@ const ModalBase = styled.div`
    &.closing {
        animation-name: ${close};
    }
-    
+
    &.closing > div {
        animation-name: ${zoomOut};
    }
@@ -145,7 +146,7 @@ export let isModalClosing = false;
 export default function Modal(props: Props) {
    if (!props.visible) return null;

-    let content = (
+    const content = (
        <ModalContent
            attachment={!!props.actions}
            noBackground={props.noBackground}
@@ -167,7 +168,7 @@ export default function Modal(props: Props) {
        setTimeout(() => props.onClose(), 2e2);
    }

-    useEffect(() => internalSubscribe('Modal', 'close', onClose), []);
+    useEffect(() => internalSubscribe("Modal", "close", onClose), []);

    useEffect(() => {
        if (props.disallowClosing) return;
@@ -182,7 +183,7 @@ export default function Modal(props: Props) {
        return () => document.body.removeEventListener("keydown", keyDown);
    }, [props.disallowClosing, props.onClose]);

-    let confirmationAction = props.actions?.find(
+    const confirmationAction = props.actions?.find(
        (action) => action.confirmation,
    );

@@ -203,7 +204,8 @@ export default function Modal(props: Props) {
    }, [confirmationAction]);

    return createPortal(
-        <ModalBase className={animateClose ? 'closing' : undefined}
+        <ModalBase
+            className={animateClose ? "closing" : undefined}
            onClick={(!props.disallowClosing && props.onClose) || undefined}>
            <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
                {content}