Format and automatically fix linted code.

src/assets/emojis.ts

@@ -1,6 +1,6 @@
 export const emojiDictionary = {
-    "100": "💯",
+    100: "💯",
-    "1234": "🔢",
+    1234: "🔢",
     grinning: "😀",
     smiley: "😃",
     smile: "😄",

src/assets/sounds/Audio.ts

@@ -19,8 +19,8 @@ export const SOUNDS_ARRAY: Sounds[] = [
 ];
 
 export function playSound(sound: Sounds) {
-    let file = SoundMap[sound];
+    const file = SoundMap[sound];
-    let el = new Audio(file);
+    const el = new Audio(file);
     try {
         el.play();
     } catch (err) {

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 }</>;
+        return <>{props.children}</>;
-    } else {
+    }
-        if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;
 
-        return (
+    return (
-            <Base>
+        <Base>
-                <img
+            <img
-                    src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
-                    draggable={false}
+                draggable={false}
-                />
+            />
-                <h2>{props.channel.name}</h2>
+            <h2>{props.channel.name}</h2>
-                <span className="subtext">
+            <span className="subtext">
-                    <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
-                    <a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
+                <a href="#">
-                </span>
+                    <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" />
+                <Text id="app.main.channel.nsfw.confirm" />
-                </Checkbox>
+            </Checkbox>
-                <div className="actions">
+            <div className="actions">
-                    <Button contrast onClick={() => history.goBack()}>
+                <Button contrast onClick={() => history.goBack()}>
-                        <Text id="app.special.modals.actions.back" />
+                    <Text id="app.special.modals.actions.back" />
-                    </Button>
+                </Button>
-                    <Button
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
-                        contrast
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
-                        onClick={() => consent && setAgeGate(true)}>
+                </Button>
-                        <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+            </div>
-                    </Button>
+        </Base>
-                </div>
+    );
-            </Base>
-        );
-    }
 }

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;
+            const cursor = el.selectionStart;
-            let content = el.value.slice(0, cursor);
+            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,

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} />;
         }
     }
 

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}`;
 }
 

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() {

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>

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}
+                        className="mobile"
-                        onMouseDown={e => e.preventDefault()}>
+                        onClick={send}
+                        onMouseDown={(e) => e.preventDefault()}>
                         <Send size={20} />
                     </IconButton>
                 </Action>

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>
+            {!hideInfo && (
-                <MessageDetail message={message} position="left" />
+                <MessageInfo>
-            </MessageInfo> }
+                    <MessageDetail message={message} position="left" />
+                </MessageInfo>
+            )}
             <SystemContent>{children}</SystemContent>
         </MessageBase>
     );

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}
+                <SizedGrid
-                    className={classNames({ [styles.margin]: hasContent, spoiler })}>
+                    width={metadata.width}
-                    <img src={url} alt={filename}
+                    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 })}
+                <div
-                    style={{ '--width': metadata.width + 'px' }}>
+                    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": {

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>

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,7 +25,8 @@ const Grid = styled.div`
     }
 
     &.spoiler {
-        img, video {
+        img,
+        video {
             filter: blur(44px);
         }
 
@@ -33,25 +36,29 @@ const Grid = styled.div`
 
 export default Grid;
 
-type Props = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as' | 'style'> & {
+type Props = Omit<
-    style?: JSX.CSSProperties,
+    JSX.HTMLAttributes<HTMLDivElement>,
-    children?: Children,
+    "children" | "as" | "style"
-    width: number,
+> & {
-    height: number,
+    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',
+                "--width": `${width}px`,
-                "--height": height + 'px',
+                "--height": `${height}px`,
                 "--aspect-ratio": width / height,
             }}>
-            { children }
+            {children}
         </Grid>
-    )
+    );
 }

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)
+            ctx.client.channels
-                .then(m => setMessage(mapMessage(m)));
+                .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 ?
+            {user?.relationship === Users.Relationship.Blocked ? (
-                <>Blocked User</> :
+                <>Blocked User</>
+            ) : (
                 <>
                     {message.author === SYSTEM_USER_ID ? (
                         <SystemMessage message={message} hideInfo />
-                    ) : <>
+                    ) : (
-                        <div className="user"><UserShort user={user} size={16} /></div>
+                        <>
-                        <div className="content" onClick={() => {
+                            <div className="user">
-                            let obj = ctx.client.channels.get(channel);
+                                <UserShort user={user} size={16} />
-                            if (obj?.channel_type === 'TextChannel') {
+                            </div>
-                                history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
+                            <div
-                            } else {
+                                className="content"
-                                history.push(`/channel/${channel}/${message._id}`);
+                                onClick={() => {
-                            }
+                                    const obj =
-                        }}>
+                                        ctx.client.channels.get(channel);
-                            {message.attachments && message.attachments.length > 0 && (
+                                    if (obj?.channel_type === "TextChannel") {
-                                <File size={16} />
+                                        history.push(
-                            )}
+                                            `/server/${obj.server}/channel/${obj._id}/${message._id}`,
-                            <Markdown
+                                        );
-                                disallowBigEmoji
+                                    } else {
-                                content={(message.content as string).replace(/\n/g, " ")}
+                                        history.push(
-                            />
+                                            `/channel/${channel}/${message._id}`,
-                        </div>
+                                        );
-                    </>}
+                                    }
+                                }}>
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
+                                        <File size={16} />
+                                    )}
+                                <Markdown
+                                    disallowBigEmoji
+                                    content={(
+                                        message.content as string
+                                    ).replace(/\n/g, " ")}
+                                />
+                            </div>
+                        </>
+                    )}
                 </>
-            }
+            )}
         </ReplyBase>
     );
 }

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>
-    )
+    );
 }

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);

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]);

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 (

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>

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}

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>

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,
+    user?: User;
-    children: Children
+    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={
+        <Tooltip
-            <Base>
+            placement="right-end"
-                <Username className="username" user={user} />
+            content={
-                <span className="status">
+                <Base>
-                    <UserStatus user={user} />
+                    <Username className="username" user={user} />
-                </span>
+                    <span className="status">
-                {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
+                        <UserStatus user={user} />
-            </Base>
+                    </span>
-        }>
+                    {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
-            { children }
+                </Base>
+            }>
+            {children}
         </Tooltip>
-    )
+    );
 }

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 }>
+                    <Tooltip arrow={undefined} content={user.status.text}>
-                        { user.status.text }
+                        {user.status.text}
                     </Tooltip>
-                )
+                );
             }
 
             return <>{user.status.text}</>;

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'))
+                    el.querySelectorAll<HTMLDivElement>(".spoiler").forEach(
-                        .forEach(element => {
+                        (element) => {
-                            element.removeEventListener('click', toggle);
+                            element.removeEventListener("click", toggle);
-                            element.addEventListener('click', toggle);
+                            element.addEventListener("click", toggle);
-                        });
+                        },
+                    );
 
-                    (el.querySelectorAll<HTMLAnchorElement>('a'))
+                    el.querySelectorAll<HTMLAnchorElement>("a").forEach(
-                        .forEach(element => {
+                        (element) => {
-                            element.removeEventListener('click', handleLink);
+                            element.removeEventListener("click", handleLink);
-                            element.removeAttribute('data-type');
+                            element.removeAttribute("data-type");
-                            element.removeAttribute('target');
+                            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('/@')) {
+                                        if (url.pathname.startsWith("/@")) {
-                                            element.setAttribute('data-type', 'mention');
+                                            element.setAttribute(
+                                                "data-type",
+                                                "mention",
+                                            );
                                         }
                                     }
                                 } catch (err) {}
                             }
 
                             if (!internal) {
-                                element.setAttribute('target', '_blank');
+                                element.setAttribute("target", "_blank");
                             }
-                        });
+                        },
+                    );
                 }
             }}
             className={styles.markdown}

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>
-        
     );
 }
 

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) {

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)">
+            <svg
-                <path d="M27.746 86.465c14 0 28 11.407 28 28s.256-56 .256-56-42.256 28-28.256 28z"/>
+                xmlns="http://www.w3.org/2000/svg"
-                <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"/>
+                width="57"
-                <path d="M28.002 30.465c14 0 28-11.407 28-28s0 56 0 56-42-28-28-28z"/>
+                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) {
+        for (const id of server.channels) {
-            let channel = channels.find((x) => x._id === id);
+            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} />
+                                <img
-                            </Icon> :
+                                    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={
+                            to={`/server/${entry!._id}${
-                                `/server/${entry!._id}` +
+                                id ? `/channel/${id}` : ""
-                                (id ? `/channel/${id}` : "")
+                            }`}>
-                            }>
                             <ServerEntry
                                 active={active}
                                 onContextMenu={attachContextMenu("Menu", {

src/components/navigation/left/ServerSidebar.tsx

@@ -81,8 +81,8 @@ function ServerSidebar(props: Props) {
         });
     }, [channel_id]);
 
-    let uncategorised = new Set(server.channels);
+    const uncategorised = new Set(server.channels);
-    let elements = [];
+    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) {
+        for (const category of server.categories) {
-            let channels = [];
+            const channels = [];
-            for (let id of category.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));
     }
 

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 (

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;
         }
@@ -249,13 +250,12 @@ export function ServerMemberSidebar({
                         //sticky //will re-add later, need to fix css
                         id="members"
                         defaultValue
-                        summary={<span>
+                        summary={
-                                        <Text id="app.main.categories.members" />{" "}
+                            <span>
-                                        — {users.length}
+                                <Text id="app.main.categories.members" /> —{" "}
-                                    </span>
+                                {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 [query, setV] = useState("");
-    const [results,setResults] = useState<Message[]>([]);
+    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%' }}
+            <InputBox
-                onKeyDown={e => e.key === 'Enter' && search()}
+                style={{ width: "100%" }}
-                value={query} onChange={e => setV(e.currentTarget.value)} />
+                onKeyDown={(e) => e.key === "Enter" && search()}
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '8px' }}>
+                value={query}
-            {
+                onChange={(e) => setV(e.currentTarget.value)}
-                results.map(message => {
+            />
-                    let href = '';
+            <div
-                    let channel = client.channels.get(message.channel);
+                style={{
-                    if (channel?.channel_type === 'TextChannel') {
+                    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)' }}>
+                    return (
-                        <b>@{ client.users.get(message.author)?.username }</b><br/>
+                        <Link to={href}>
-                        { message.content }
+                            <div
-                    </div></Link>
+                                style={{
-                })
+                                    margin: "2px",
-            }
+                                    padding: "6px",
+                                    background: "var(--primary-background)",
+                                }}>
+                                <b>
+                                    @
+                                    {client.users.get(message.author)?.username}
+                                </b>
+                                <br />
+                                {message.content}
+                            </div>
+                        </Link>
+                    );
+                })}
             </div>
         </CollapsibleSection>
-    )
+    );
 }

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}>

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,7 +131,9 @@ 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) => (
@@ -144,8 +150,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
                     </div>
                 ))}
             </Rows>
-            
-            
         </SwatchesBase>
     );
 }

src/components/ui/DateDivider.tsx

@@ -12,8 +12,8 @@ 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 0 2px 0;
         padding-inline-end: 5px;
         color: var(--tertiary-foreground);

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;}
@@ -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}

src/context/Theme.tsx

@@ -335,8 +335,7 @@ function Theme({ children, options }: Props) {
     return (
         <ThemeContext.Provider value={theme}>
             <Helmet>
-                <meta name="theme-color" content={theme["background"]}
+                <meta name="theme-color" content={theme["background"]} />
-                />
             </Helmet>
             <GlobalTheme theme={theme} />
             {theme.css && (

src/context/intermediate/Modals.tsx

@@ -1,5 +1,7 @@
-import { isModalClosing } from "../../components/ui/Modal";
 import { internalEmit } from "../../lib/eventEmitter";
+
+import { isModalClosing } from "../../components/ui/Modal";
+
 import { Screen } from "./Intermediate";
 import { ClipboardModal } from "./modals/Clipboard";
 import { ErrorModal } from "./modals/Error";
@@ -14,7 +16,10 @@ export interface Props {
 }
 
 export default function Modals({ screen, openScreen }: Props) {
-    const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
+    const onClose = () =>
+        isModalClosing
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "_prompt":

src/context/intermediate/Popovers.tsx

@@ -1,7 +1,9 @@
 import { useContext } from "preact/hooks";
-import { isModalClosing } from "../../components/ui/Modal";
+
 import { internalEmit } from "../../lib/eventEmitter";
 
+import { isModalClosing } from "../../components/ui/Modal";
+
 import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
@@ -16,7 +18,10 @@ export default function Popovers() {
     const { screen } = useContext(IntermediateContext);
     const { openScreen } = useIntermediate();
 
-    const onClose = () => isModalClosing ? openScreen({ id: "none" }) : internalEmit('Modal', 'close');
+    const onClose = () =>
+        isModalClosing
+            ? openScreen({ id: "none" })
+            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "profile":

src/context/intermediate/modals/Prompt.tsx

@@ -92,7 +92,7 @@ export function SpecialPromptModal(props: SpecialProps) {
                 block_user: ["block_user", "block"],
             };
 
-            let event = EVENTS[props.type];
+            const event = EVENTS[props.type];
             let name;
             switch (props.type) {
                 case "unfriend_user":

src/context/intermediate/popovers/ImageViewer.tsx

@@ -25,7 +25,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") {

src/context/revoltjs/FileUploads.tsx

@@ -55,7 +55,7 @@ export async function uploadFile(
     const formData = new FormData();
     formData.append("file", file);
 
-    const res = await Axios.post(autumnURL + "/" + tag, formData, {
+    const res = await Axios.post(`${autumnURL}/${tag}`, formData, {
         headers: {
             "Content-Type": "multipart/form-data",
         },
@@ -78,7 +78,7 @@ export function grabFiles(
     input.onchange = async (e) => {
         const files = (e.currentTarget as HTMLInputElement)?.files;
         if (!files) return;
-        for (let file of files) {
+        for (const file of files) {
             if (file.size > maxFileSize) {
                 return tooLarge();
             }
@@ -139,12 +139,10 @@ export function FileUploader(props: Props) {
             } else {
                 onClick();
             }
+        } else if (props.previewURL) {
+            props.remove();
         } else {
-            if (props.previewURL) {
+            onClick();
-                props.remove();
-            } else {
-                onClick();
-            }
         }
     }
 
@@ -156,7 +154,7 @@ export function FileUploader(props: Props) {
                 if (typeof items === "undefined") return;
                 if (props.behaviour !== "multi" || !props.append) return;
 
-                let files = [];
+                const files = [];
                 for (const item of items) {
                     if (!item.type.startsWith("text/")) {
                         const blob = item.getAsFile();
@@ -190,7 +188,7 @@ export function FileUploader(props: Props) {
 
                 const dropped = e.dataTransfer?.files;
                 if (dropped) {
-                    let files = [];
+                    const files = [];
                     for (const item of dropped) {
                         if (item.size > props.maxFileSize) {
                             openScreen({ id: "error", error: "FileTooLarge" });

src/context/revoltjs/Notifications.tsx

@@ -32,7 +32,7 @@ async function createNotification(
     try {
         return new Notification(title, options);
     } catch (err) {
-        let sw = await navigator.serviceWorker.getRegistration();
+        const sw = await navigator.serviceWorker.getRegistration();
         sw?.showNotification(title, options);
     }
 }
@@ -90,7 +90,7 @@ function Notifier({ options, notifs }: Props) {
 
         let image;
         if (msg.attachments) {
-            let imageAttachment = msg.attachments.find(
+            const imageAttachment = msg.attachments.find(
                 (x) => x.metadata.type === "Image",
             );
             if (imageAttachment) {
@@ -105,7 +105,7 @@ function Notifier({ options, notifs }: Props) {
             body = client.markdownToText(msg.content);
             icon = client.users.getAvatarURL(msg.author, { max_side: 256 });
         } else {
-            let users = client.users;
+            const users = client.users;
             switch (msg.content.type) {
                 case "user_added":
                 case "user_remove":
@@ -161,7 +161,7 @@ function Notifier({ options, notifs }: Props) {
             }
         }
 
-        let notif = await createNotification(title, {
+        const notif = await createNotification(title, {
             icon,
             image,
             body,
@@ -176,7 +176,7 @@ function Notifier({ options, notifs }: Props) {
                 window.focus();
                 const id = msg.channel;
                 if (id !== channel_id) {
-                    let channel = client.channels.get(id);
+                    const channel = client.channels.get(id);
                     if (channel) {
                         if (channel.channel_type === "TextChannel") {
                             history.push(
@@ -218,7 +218,7 @@ function Notifier({ options, notifs }: Props) {
                 return;
         }
 
-        let notif = await createNotification(event, {
+        const notif = await createNotification(event, {
             icon: client.users.getAvatarURL(user._id, { max_side: 256 }),
             badge: "/assets/icons/android-chrome-512x512.png",
             timestamp: +new Date(),

src/context/revoltjs/RevoltClient.tsx

@@ -66,7 +66,7 @@ function Context({ auth, children }: Props) {
                 // Match sw.ts#L23
                 db = await openDB("state", 3, {
                     upgrade(db) {
-                        for (let store of [
+                        for (const store of [
                             "channels",
                             "servers",
                             "users",
@@ -150,7 +150,7 @@ function Context({ auth, children }: Props) {
             ready: () =>
                 operations.loggedIn() && typeof client.user !== "undefined",
             openDM: async (user_id: string) => {
-                let channel = await client.users.openDM(user_id);
+                const channel = await client.users.openDM(user_id);
                 history.push(`/channel/${channel!._id}`);
                 return channel!._id;
             },

src/context/revoltjs/StateMonitor.tsx

@@ -44,10 +44,10 @@ function StateMonitor(props: Props) {
     useEffect(() => {
         function removeOld() {
             if (!props.typing) return;
-            for (let channel of Object.keys(props.typing)) {
+            for (const channel of Object.keys(props.typing)) {
-                let users = props.typing[channel];
+                const users = props.typing[channel];
 
-                for (let user of users) {
+                for (const user of users) {
                     if (+new Date() > user.started + 5000) {
                         dispatch({
                             type: "TYPING_STOP",
@@ -61,7 +61,7 @@ function StateMonitor(props: Props) {
 
         removeOld();
 
-        let interval = setInterval(removeOld, 1000);
+        const interval = setInterval(removeOld, 1000);
         return () => clearInterval(interval);
     }, [props.typing]);
 

src/context/revoltjs/SyncManager.tsx

@@ -28,15 +28,15 @@ type Props = {
     notifications: Notifications;
 };
 
-var lastValues: { [key in SyncKeys]?: any } = {};
+const lastValues: { [key in SyncKeys]?: any } = {};
 
 export function mapSync(
     packet: Sync.UserSettings,
     revision?: Record<string, number>,
 ) {
-    let update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
+    const update: { [key in SyncKeys]?: [number, SyncData[key]] } = {};
-    for (let key of Object.keys(packet)) {
+    for (const key of Object.keys(packet)) {
-        let [timestamp, obj] = packet[key];
+        const [timestamp, obj] = packet[key];
         if (timestamp < (revision ?? {})[key] ?? 0) {
             continue;
         }
@@ -81,7 +81,7 @@ function SyncManager(props: Props) {
     }, [status]);
 
     function syncChange(key: SyncKeys, data: any) {
-        let timestamp = +new Date();
+        const timestamp = +new Date();
         dispatch({
             type: "SYNC_SET_REVISION",
             key,
@@ -96,8 +96,8 @@ function SyncManager(props: Props) {
         );
     }
 
-    let disabled = props.sync.disabled ?? [];
+    const disabled = props.sync.disabled ?? [];
-    for (let [key, object] of [
+    for (const [key, object] of [
         ["appearance", props.settings.appearance],
         ["theme", props.settings.theme],
         ["locale", props.locale],
@@ -119,7 +119,7 @@ function SyncManager(props: Props) {
     useEffect(() => {
         function onPacket(packet: ClientboundNotification) {
             if (packet.type === "UserSettingsUpdate") {
-                let update: { [key in SyncKeys]?: [number, SyncData[key]] } =
+                const update: { [key in SyncKeys]?: [number, SyncData[key]] } =
                     mapSync(packet.update, props.sync.revision);
 
                 dispatch({

src/context/revoltjs/hooks.ts

@@ -16,9 +16,9 @@ export function useForceUpdate(context?: HookContext): HookContext {
     if (context) return context;
 
     const H = useState(0);
-    var updateState: (_: number) => void;
+    let updateState: (_: number) => void;
     if (Array.isArray(H)) {
-        let [, u] = H;
+        const [, u] = H;
         updateState = u;
     } else {
         console.warn("Failed to construct using useState.");
@@ -124,7 +124,7 @@ export function useDMs(context?: HookContext) {
     const ctx = useForceUpdate(context);
 
     function mutation(target: string) {
-        let channel = ctx.client.channels.get(target);
+        const channel = ctx.client.channels.get(target);
         if (channel) {
             if (
                 channel.channel_type === "DirectMessage" ||
@@ -164,7 +164,7 @@ export function useUserPermission(id: string, context?: HookContext) {
         return () => ctx.client.users.removeListener("update", mutation);
     }, [id]);
 
-    let calculator = new PermissionCalculator(ctx.client);
+    const calculator = new PermissionCalculator(ctx.client);
     return calculator.forUser(id);
 }
 
@@ -206,7 +206,7 @@ export function useChannelPermission(id: string, context?: HookContext) {
         };
     }, [id]);
 
-    let calculator = new PermissionCalculator(ctx.client);
+    const calculator = new PermissionCalculator(ctx.client);
     return calculator.forChannel(id);
 }
 
@@ -227,6 +227,6 @@ export function useServerPermission(id: string, context?: HookContext) {
         };
     }, [id]);
 
-    let calculator = new PermissionCalculator(ctx.client);
+    const calculator = new PermissionCalculator(ctx.client);
     return calculator.forServer(id);
 }

src/context/revoltjs/util.tsx

@@ -7,7 +7,7 @@ import { Children } from "../../types/Preact";
 
 export function takeError(error: any): string {
     const type = error?.response?.data?.type;
-    let id = type;
+    const id = type;
     if (!type) {
         if (error?.response?.status === 403) {
             return "Unauthorized";
@@ -31,7 +31,7 @@ export function getChannelName(
         return <Text id="app.navigation.tabs.saved" />;
 
     if (channel.channel_type === "DirectMessage") {
-        let uid = client.channels.getRecipient(channel._id);
+        const uid = client.channels.getRecipient(channel._id);
         return (
             <>
                 {prefixType && "@"}

src/lib/ConditionalLink.tsx

@@ -10,7 +10,6 @@ export default function ConditionalLink(props: Props) {
 
     if (active) {
         return <a>{props.children}</a>;
-    } else {
-        return <Link {...linkProps} />;
     }
+    return <Link {...linkProps} />;
 }

src/lib/ContextMenus.tsx

@@ -10,7 +10,6 @@ import {
     LeftArrowAlt,
     Trash,
 } from "@styled-icons/boxicons-regular";
-import Tooltip from "../components/common/Tooltip";
 import { Cog, UserVoice } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 import {
@@ -61,6 +60,7 @@ import {
 } from "../context/revoltjs/hooks";
 import { takeError } from "../context/revoltjs/util";
 
+import Tooltip from "../components/common/Tooltip";
 import UserStatus from "../components/common/user/UserStatus";
 import IconButton from "../components/ui/IconButton";
 import LineDivider from "../components/ui/LineDivider";
@@ -168,7 +168,7 @@ function ContextMenus(props: Props) {
                         )
                             return;
 
-                        let message =
+                        const message =
                             data.channel.channel_type === "TextChannel"
                                 ? data.channel.last_message
                                 : data.channel.last_message._id;
@@ -292,8 +292,9 @@ function ContextMenus(props: Props) {
                         const { filename } = data.attachment;
                         writeClipboard(
                             // ! FIXME: do from r.js
-                            client.generateFileURL(data.attachment) +
+                            `${client.generateFileURL(
-                                `/${encodeURI(filename)}`,
+                                data.attachment,
+                            )}/${encodeURI(filename)}`,
                         );
                     }
                     break;
@@ -376,7 +377,7 @@ function ContextMenus(props: Props) {
 
                 case "clear_status":
                     {
-                        let { text, ...status } = client.user?.status ?? {};
+                        const { text, ...status } = client.user?.status ?? {};
                         await client.users.editUser({ status });
                     }
                     break;
@@ -459,7 +460,7 @@ function ContextMenus(props: Props) {
                 }: ContextMenuData) => {
                     const forceUpdate = useForceUpdate();
                     const elements: Children[] = [];
-                    var lastDivider = false;
+                    let lastDivider = false;
 
                     function generateAction(
                         action: Action,
@@ -487,8 +488,8 @@ function ContextMenus(props: Props) {
                     }
 
                     if (server_list) {
-                        let server = useServer(server_list, forceUpdate);
+                        const server = useServer(server_list, forceUpdate);
-                        let permissions = useServerPermission(
+                        const permissions = useServerPermission(
                             server_list,
                             forceUpdate,
                         );
@@ -742,7 +743,7 @@ function ContextMenus(props: Props) {
                         }
 
                         if (document.activeElement?.tagName === "A") {
-                            let link =
+                            const link =
                                 document.activeElement.getAttribute("href");
                             if (link) {
                                 pushDivider();
@@ -752,7 +753,7 @@ function ContextMenus(props: Props) {
                         }
                     }
 
-                    let id = sid ?? cid ?? uid ?? message?._id;
+                    const id = sid ?? cid ?? uid ?? message?._id;
                     if (id) {
                         pushDivider();
 
@@ -876,14 +877,23 @@ function ContextMenus(props: Props) {
                     <>
                         <div className="header">
                             <div className="main">
-                                <div className="username"
+                                <div
-                                    onClick={() => writeClipboard(client.user!.username)}>
+                                    className="username"
-                                    <Tooltip content={<Text id="app.special.copy_username" />}>
+                                    onClick={() =>
+                                        writeClipboard(client.user!.username)
+                                    }>
+                                    <Tooltip
+                                        content={
+                                            <Text id="app.special.copy_username" />
+                                        }>
                                         @{client.user!.username}
                                     </Tooltip>
                                 </div>
-                                <div className="status"
+                                <div
-                                    onClick={() => contextClick({ action: 'set_status' })}>
+                                    className="status"
+                                    onClick={() =>
+                                        contextClick({ action: "set_status" })
+                                    }>
                                     <UserStatus user={client.user!} />
                                 </div>
                             </div>
@@ -935,9 +945,7 @@ function ContextMenus(props: Props) {
                             data={{ action: "set_status" }}
                             disabled={!isOnline}>
                             <UserVoice size={18} />
-                            <Text
+                            <Text id={`app.context_menu.custom_status`} />
-                                id={`app.context_menu.custom_status`}
-                            />
                             {client.user!.status?.text && (
                                 <IconButton>
                                     <MenuItem data={{ action: "clear_status" }}>
@@ -959,7 +967,7 @@ function ContextMenus(props: Props) {
                         channel,
                     );
 
-                    let elements: Children[] = [
+                    const elements: Children[] = [
                         <MenuItem
                             data={{
                                 action: "set_notification_state",

src/lib/PaintCounter.tsx

@@ -11,7 +11,7 @@ export default function PaintCounter({
 }) {
     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 (

src/lib/TextAreaAutoSize.tsx

@@ -74,7 +74,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
 
     useLayoutEffect(() => {
         if (ref.current && ghost.current) {
-            ref.current.style.height = ghost.current.clientHeight + "px";
+            ref.current.style.height = `${ghost.current.clientHeight}px`;
         }
     }, [ghost, props.value]);
 

src/lib/eventEmitter.ts

@@ -7,12 +7,12 @@ export function internalSubscribe(
     event: string,
     fn: (...args: any[]) => void,
 ) {
-    InternalEvent.addListener(ns + "/" + event, fn);
+    InternalEvent.addListener(`${ns}/${event}`, fn);
-    return () => InternalEvent.removeListener(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

@@ -46,10 +46,9 @@ function recursiveReplaceFields(input: string, fields: Fields) {
         }
 
         return values.flat();
-    } else {
-        // base case
-        return [input];
     }
+    // base case
+    return [input];
 }
 
 export function TextReact({ id, fields }: Props) {
@@ -57,7 +56,7 @@ export function TextReact({ id, fields }: Props) {
 
     const path = id.split(".");
     let entry = intl.dictionary[path.shift()!];
-    for (let key of path) {
+    for (const key of path) {
         // @ts-expect-error
         entry = entry[key];
     }

src/lib/isTouchscreenDevice.ts

@@ -1,7 +1,7 @@
 import { isDesktop, isMobile, isTablet } from "react-device-detect";
 
 export const isTouchscreenDevice =
-    (isDesktop || isTablet)
+    isDesktop || isTablet
         ? false
         : (typeof window !== "undefined"
               ? navigator.maxTouchPoints > 0

src/lib/renderer/Singleton.ts

@@ -74,10 +74,15 @@ export class SingletonRenderer extends EventEmitter3 {
 
     async init(id: string, message_id?: string) {
         if (message_id) {
-            if (this.state.type === 'RENDER') {
+            if (this.state.type === "RENDER") {
-                let message = this.state.messages.find(x => x._id === message_id);
+                const message = this.state.messages.find(
+                    (x) => x._id === message_id,
+                );
                 if (message) {
-                    this.emit("scroll", { type: "ScrollToView", id: message_id });
+                    this.emit("scroll", {
+                        type: "ScrollToView",
+                        id: message_id,
+                    });
                     return;
                 }
             }
@@ -103,9 +108,9 @@ export class SingletonRenderer extends EventEmitter3 {
         function generateScroll(end: string): ScrollState {
             if (ref) {
                 let heightRemoved = 0;
-                let messageContainer = ref.children[0];
+                const messageContainer = ref.children[0];
                 if (messageContainer) {
-                    for (let child of Array.from(messageContainer.children)) {
+                    for (const child of Array.from(messageContainer.children)) {
                         // If this child has a ulid.
                         if (child.id?.length === 26) {
                             // Check whether it was removed.
@@ -127,12 +132,11 @@ export class SingletonRenderer extends EventEmitter3 {
                     type: "OffsetTop",
                     previousHeight: ref.scrollHeight - heightRemoved,
                 };
-            } else {
-                return {
-                    type: "OffsetTop",
-                    previousHeight: 0,
-                };
             }
+            return {
+                type: "OffsetTop",
+                previousHeight: 0,
+            };
         }
 
         await this.currentRenderer.loadTop(this, generateScroll);
@@ -148,9 +152,9 @@ export class SingletonRenderer extends EventEmitter3 {
         function generateScroll(start: string): ScrollState {
             if (ref) {
                 let heightRemoved = 0;
-                let messageContainer = ref.children[0];
+                const messageContainer = ref.children[0];
                 if (messageContainer) {
-                    for (let child of Array.from(messageContainer.children)) {
+                    for (const child of Array.from(messageContainer.children)) {
                         // If this child has a ulid.
                         if (child.id?.length === 26) {
                             // Check whether it was removed.
@@ -172,11 +176,10 @@ export class SingletonRenderer extends EventEmitter3 {
                     type: "ScrollTop",
                     y: ref.scrollTop - heightRemoved,
                 };
-            } else {
-                return {
-                    type: "ScrollToBottom",
-                };
             }
+            return {
+                type: "ScrollToBottom",
+            };
         }
 
         await this.currentRenderer.loadBottom(this, generateScroll);

src/lib/renderer/simple/SimpleRenderer.ts

@@ -8,10 +8,14 @@ export const SimpleRenderer: RendererRoutines = {
         if (renderer.client!.websocket.connected) {
             if (nearby)
                 renderer
-                    .client!.channels.fetchMessagesWithUsers(id, { nearby, limit: 100 }, true)
+                    .client!.channels.fetchMessagesWithUsers(
+                        id,
+                        { nearby, limit: 100 },
+                        true,
+                    )
                     .then(({ messages: data }) => {
                         data.sort((a, b) => a._id.localeCompare(b._id));
-                        let messages = data.map((x) => mapMessage(x));
+                        const messages = data.map((x) => mapMessage(x));
                         renderer.setState(
                             id,
                             {
@@ -28,7 +32,7 @@ export const SimpleRenderer: RendererRoutines = {
                     .client!.channels.fetchMessagesWithUsers(id, {}, true)
                     .then(({ messages: data }) => {
                         data.reverse();
-                        let messages = data.map((x) => mapMessage(x));
+                        const messages = data.map((x) => mapMessage(x));
                         renderer.setState(
                             id,
                             {
@@ -72,11 +76,11 @@ export const SimpleRenderer: RendererRoutines = {
         if (!channel) return;
         if (renderer.state.type !== "RENDER") return;
 
-        let messages = [...renderer.state.messages];
+        const messages = [...renderer.state.messages];
-        let index = messages.findIndex((x) => x._id === id);
+        const index = messages.findIndex((x) => x._id === id);
 
         if (index > -1) {
-            let message = { ...messages[index], ...mapMessage(patch) };
+            const message = { ...messages[index], ...mapMessage(patch) };
             messages.splice(index, 1, message);
 
             renderer.setState(
@@ -94,8 +98,8 @@ export const SimpleRenderer: RendererRoutines = {
         if (!channel) return;
         if (renderer.state.type !== "RENDER") return;
 
-        let messages = [...renderer.state.messages];
+        const messages = [...renderer.state.messages];
-        let index = messages.findIndex((x) => x._id === id);
+        const index = messages.findIndex((x) => x._id === id);
 
         if (index > -1) {
             messages.splice(index, 1);

src/lib/renderer/types.ts

@@ -8,7 +8,7 @@ export type ScrollState =
     | { type: "Free" }
     | { type: "Bottom"; scrollingUntil?: number }
     | { type: "ScrollToBottom" | "StayAtBottom"; smooth?: boolean }
-    | { type: "ScrollToView", id: string }
+    | { type: "ScrollToView"; id: string }
     | { type: "OffsetTop"; previousHeight: number }
     | { type: "ScrollTop"; y: number };
 

src/lib/vortex/Signaling.ts

@@ -117,10 +117,10 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
             this.once("close", onClose);
             const json = {
                 id: this.index,
-                type: type,
+                type,
                 data,
             };
-            ws.send(JSON.stringify(json) + "\n");
+            ws.send(`${JSON.stringify(json)}\n`);
             this.index++;
         });
     }
@@ -161,7 +161,7 @@ export default class Signaling extends EventEmitter<SignalingEvents> {
         type: ProduceType,
         rtpParameters: RtpParameters,
     ): Promise<string> {
-        let result = await this.sendRequest(WSCommandType.StartProduce, {
+        const result = await this.sendRequest(WSCommandType.StartProduce, {
             type,
             rtpParameters,
         });

src/lib/vortex/VoiceClient.ts

@@ -172,7 +172,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
         if (this.device === undefined || this.roomId === undefined)
             throw new ReferenceError("Voice Client is in an invalid state");
         const result = await this.signaling.authenticate(token, this.roomId);
-        let [room] = await Promise.all([
+        const [room] = await Promise.all([
             this.signaling.roomInfo(),
             this.device.load({ routerRtpCapabilities: result.rtpCapabilities }),
         ]);
@@ -229,7 +229,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
         });
 
         this.emit("ready");
-        for (let user of this.participants) {
+        for (const user of this.participants) {
             if (user[1].audio && user[0] !== this.userId)
                 this.startConsume(user[0], "audio");
         }
@@ -323,7 +323,7 @@ export default class VoiceClient extends EventEmitter<VoiceEvents> {
             await this.signaling.stopProduce(type);
         } catch (error) {
             if (error.error === WSErrorCode.ProducerNotFound) return;
-            else throw error;
+            throw error;
         }
     }
 }

src/pages/channels/Channel.tsx

@@ -10,10 +10,10 @@ import { dispatch, getState } from "../../redux";
 
 import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
 
+import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
-import AgeGate from "../../components/common/AgeGate";
 
 import MemberSidebar from "../../components/navigation/right/MemberSidebar";
 import ChannelHeader from "./ChannelHeader";
@@ -43,9 +43,8 @@ export function Channel({ id }: { id: string }) {
 
     if (channel.channel_type === "VoiceChannel") {
         return <VoiceChannel channel={channel} />;
-    } else {
-        return <TextChannel channel={channel} />;
     }
+    return <TextChannel channel={channel} />;
 }
 
 const MEMBERS_SIDEBAR_KEY = "sidebar_members";
@@ -54,14 +53,16 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
         getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
     );
 
-    let id = channel._id;
+    const id = channel._id;
     return (
         <AgeGate
             type="channel"
             channel={channel}
-            gated={(channel.channel_type === "TextChannel" ||
+            gated={
-                channel.channel_type === "Group") &&
+                (channel.channel_type === "TextChannel" ||
-                channel.name.includes("nsfw")}>
+                    channel.channel_type === "Group") &&
+                channel.name.includes("nsfw")
+            }>
             <ChannelHeader
                 channel={channel}
                 toggleSidebar={() => {

src/pages/channels/ChannelHeader.tsx

@@ -93,11 +93,11 @@ export default function ChannelHeader({
 
     return (
         <Header placement="primary">
-            {isTouchscreenDevice &&
+            {isTouchscreenDevice && (
                 <div className="menu">
                     <Menu size={27} />
                 </div>
-            }
+            )}
             {icon}
             <Info>
                 <span className="name">{name}</span>

src/pages/channels/actions/HeaderActions.tsx

@@ -3,7 +3,7 @@ import {
     Cog,
     PhoneCall,
     PhoneOutgoing,
-    Group
+    Group,
 } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 
@@ -64,11 +64,11 @@ export default function HeaderActions({
             )}
             <VoiceActions channel={channel} />
             {(channel.channel_type === "Group" ||
-                channel.channel_type === "TextChannel") &&
+                channel.channel_type === "TextChannel") && (
-                    <IconButton onClick={toggleSidebar}>
+                <IconButton onClick={toggleSidebar}>
-                        <Group size={25} />
+                    <Group size={25} />
-                    </IconButton>
+                </IconButton>
-                }
+            )}
         </>
     );
 }
@@ -90,22 +90,20 @@ function VoiceActions({ channel }: Pick<ChannelHeaderProps, "channel">) {
                     <PhoneOutgoing size={22} />
                 </IconButton>
             );
-        } else {
-            return (
-                <IconButton
-                    onClick={() => {
-                        disconnect();
-                        connect(channel._id);
-                    }}>
-                    <PhoneCall size={24} />
-                </IconButton>
-            );
         }
-    } else {
         return (
-            <IconButton>
+            <IconButton
-                <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
+                onClick={() => {
+                    disconnect();
+                    connect(channel._id);
+                }}>
+                <PhoneCall size={24} />
             </IconButton>
         );
     }
+    return (
+        <IconButton>
+            <PhoneCall size={24} /** ! FIXME: TEMP */ color="red" />
+        </IconButton>
+    );
 }

src/pages/channels/messaging/MessageArea.tsx

@@ -1,3 +1,4 @@
+import { useHistory, useParams } from "react-router-dom";
 import { animateScroll } from "react-scroll";
 import styled from "styled-components";
 import useResizeObserver from "use-resize-observer";
@@ -28,7 +29,6 @@ import Preloader from "../../../components/ui/Preloader";
 
 import ConversationStart from "./ConversationStart";
 import MessageRenderer from "./MessageRenderer";
-import { useHistory, useParams } from "react-router-dom";
 
 const Area = styled.div`
     height: 100%;
@@ -100,8 +100,9 @@ export function MessageArea({ id }: Props) {
                     duration: scrollState.current.smooth ? 150 : 0,
                 });
             } else if (scrollState.current.type === "ScrollToView") {
-                document.getElementById(scrollState.current.id)
+                document
-                    ?.scrollIntoView({ block: 'center' });
+                    .getElementById(scrollState.current.id)
+                    ?.scrollIntoView({ block: "center" });
 
                 setScrollState({ type: "Free" });
             } else if (scrollState.current.type === "OffsetTop") {
@@ -147,8 +148,9 @@ export function MessageArea({ id }: Props) {
 
     // ? Handle global jump to bottom, e.g. when editing last message in chat.
     useEffect(() => {
-        return internalSubscribe('MessageArea', 'jump_to_bottom',
+        return internalSubscribe("MessageArea", "jump_to_bottom", () =>
-            () => setScrollState({ type: 'ScrollToBottom' }));
+            setScrollState({ type: "ScrollToBottom" }),
+        );
     }, []);
 
     // ? Handle events from renderer.
@@ -175,8 +177,8 @@ export function MessageArea({ id }: Props) {
             setHighlight(message);
             SingletonMessageRenderer.init(id, message);
 
-            let channel = client.channels.get(id);
+            const channel = client.channels.get(id);
-            if (channel?.channel_type === 'TextChannel') {
+            if (channel?.channel_type === "TextChannel") {
                 history.push(`/server/${channel.server}/channel/${id}`);
             } else {
                 history.push(`/channel/${id}`);
@@ -287,7 +289,11 @@ export function MessageArea({ id }: Props) {
                         </RequiresOnline>
                     )}
                     {state.type === "RENDER" && (
-                        <MessageRenderer id={id} state={state} highlight={highlight} />
+                        <MessageRenderer
+                            id={id}
+                            state={state}
+                            highlight={highlight}
+                        />
                     )}
                     {state.type === "EMPTY" && <ConversationStart id={id} />}
                 </div>

src/pages/channels/messaging/MessageRenderer.tsx

@@ -61,7 +61,7 @@ function MessageRenderer({ id, state, queue, highlight }: Props) {
             for (let i = state.messages.length - 1; i >= 0; i--) {
                 if (state.messages[i].author === userId) {
                     setEditing(state.messages[i]._id);
-                    internalEmit('MessageArea', 'jump_to_bottom');
+                    internalEmit("MessageArea", "jump_to_bottom");
                     return;
                 }
             }

src/pages/friends/Friend.tsx

@@ -42,10 +42,7 @@ export function Friend({ user }: Props) {
             <>
                 <IconButton
                     type="circle"
-                    className={classNames(
+                    className={classNames(styles.button, styles.success)}
-                        styles.button,
-                        styles.success,
-                    )}
                     onClick={(ev) =>
                         stopPropagation(ev, openDM(user._id).then(connect))
                     }>
@@ -88,7 +85,11 @@ export function Friend({ user }: Props) {
         actions.push(
             <IconButton
                 type="circle"
-                className={classNames(styles.button, styles.remove, styles.error)}
+                className={classNames(
+                    styles.button,
+                    styles.remove,
+                    styles.error,
+                )}
                 onClick={(ev) =>
                     stopPropagation(
                         ev,

src/pages/home/Home.tsx

@@ -1,11 +1,11 @@
 import { Home as HomeIcon } from "@styled-icons/boxicons-solid";
-import Button from "../../components/ui/Button";
 import { Link } from "react-router-dom";
 
 import styles from "./Home.module.scss";
 import { Text } from "preact-i18n";
 
 import wideSVG from "../../assets/wide.svg";
+import Button from "../../components/ui/Button";
 import Header from "../../components/ui/Header";
 
 export default function Home() {
@@ -26,14 +26,13 @@ export default function Home() {
                     </Button>
                 </Link>
                 <Link to="/settings/feedback">
-                    <Button contrast>
+                    <Button contrast>Give feedback</Button>
-                        Give feedback
-                    </Button>
                 </Link>
-                <a href="https://gitlab.insrt.uk/revolt" target="_blank">
+                <a
-                    <Button contrast>
+                    href="https://gitlab.insrt.uk/revolt"
-                        Source code
+                    target="_blank"
-                    </Button>
+                    rel="noreferrer">
+                    <Button contrast>Source code</Button>
                 </a>
             </div>
         </div>

src/pages/invite/Invite.tsx

@@ -106,14 +106,22 @@ export default function Invite() {
                                     setProcessing(true);
 
                                     if (invite.type === "Server") {
-                                        if (client.servers.get(invite.server_id)) {
+                                        if (
-                                            history.push(`/server/${invite.server_id}/channel/${invite.channel_id}`);
+                                            client.servers.get(invite.server_id)
+                                        ) {
+                                            history.push(
+                                                `/server/${invite.server_id}/channel/${invite.channel_id}`,
+                                            );
                                         }
                                     }
 
-                                    let result = await client.joinInvite(code);
+                                    const result = await client.joinInvite(
+                                        code,
+                                    );
                                     if (result.type === "Server") {
-                                        history.push(`/server/${result.server._id}/channel/${result.channel._id}`);
+                                        history.push(
+                                            `/server/${result.server._id}/channel/${result.channel._id}`,
+                                        );
                                     }
                                 } catch (err) {
                                     setError(takeError(err));

src/pages/login/forms/Legal.tsx

@@ -4,15 +4,24 @@ import { Text } from "preact-i18n";
 export function Legal() {
     return (
         <span className={styles.footer}>
-            <a href="https://revolt.chat/about" target="_blank">
+            <a
+                href="https://revolt.chat/about"
+                target="_blank"
+                rel="noreferrer">
                 <Text id="general.about" />
             </a>
             &middot;
-            <a href="https://revolt.chat/terms" target="_blank">
+            <a
+                href="https://revolt.chat/terms"
+                target="_blank"
+                rel="noreferrer">
                 <Text id="general.tos" />
             </a>
             &middot;
-            <a href="https://revolt.chat/privacy" target="_blank">
+            <a
+                href="https://revolt.chat/privacy"
+                target="_blank"
+                rel="noreferrer">
                 <Text id="general.privacy" />
             </a>
         </span>

src/pages/login/forms/MailProvider.tsx

@@ -43,7 +43,7 @@ export function MailProvider({ email }: Props) {
 
     return (
         <div className={styles.mailProvider}>
-            <a href={provider[1]} target="_blank">
+            <a href={provider[1]} target="_blank" rel="noreferrer">
                 <Button>
                     <Text
                         id="login.open_mail_provider"

src/pages/settings/Settings.tsx

@@ -147,13 +147,19 @@ export default function Settings() {
             switchPage={switchPage}
             category="pages"
             custom={[
-                <a href="https://gitlab.insrt.uk/revolt" target="_blank">
+                <a
+                    href="https://gitlab.insrt.uk/revolt"
+                    target="_blank"
+                    rel="noreferrer">
                     <ButtonItem compact>
                         <Gitlab size={20} />
                         <Text id="app.settings.pages.source_code" />
                     </ButtonItem>
                 </a>,
-                <a href="https://ko-fi.com/insertish" target="_blank">
+                <a
+                    href="https://ko-fi.com/insertish"
+                    target="_blank"
+                    rel="noreferrer">
                     <ButtonItem className={styles.donate} compact>
                         <Coffee size={20} />
                         <Text id="app.settings.pages.donate.title" />
@@ -172,7 +178,8 @@ export default function Settings() {
                         <span className={styles.revision}>
                             <a
                                 href={`${REPO_URL}/${GIT_REVISION}`}
-                                target="_blank">
+                                target="_blank"
+                                rel="noreferrer">
                                 {GIT_REVISION.substr(0, 7)}
                             </a>
                             {` `}
@@ -182,7 +189,8 @@ export default function Settings() {
                                         ? `https://gitlab.insrt.uk/revolt/client/-/tree/${GIT_BRANCH}`
                                         : undefined
                                 }
-                                target="_blank">
+                                target="_blank"
+                                rel="noreferrer">
                                 ({GIT_BRANCH})
                             </a>
                         </span>

src/pages/settings/channel/Overview.tsx

@@ -1,4 +1,5 @@
 import { Channels } from "revolt.js/dist/api/objects";
+import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
@@ -7,7 +8,7 @@ import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
-import styled, { css } from "styled-components";
+
 import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
 
@@ -45,7 +46,7 @@ export default function Overview({ channel }: Props) {
 
     const [changed, setChanged] = useState(false);
     function save() {
-        let changes: any = {};
+        const changes: any = {};
         if (name !== channel.name) changes.name = name;
         if (description !== channel.description)
             changes.description = description;

src/pages/settings/channel/Permissions.tsx

@@ -33,11 +33,11 @@ export default function Permissions({ channel }: Props) {
     const client = useContext(AppContext);
 
     type R = { name: string; permissions: number };
-    let roles: { [key: string]: R } = {};
+    const roles: { [key: string]: R } = {};
     if (channel.channel_type !== "Group") {
         const server = useServer(channel.server);
         const a = server?.roles ?? {};
-        for (let b of Object.keys(a)) {
+        for (const b of Object.keys(a)) {
             roles[b] = {
                 name: a[b].name,
                 permissions: a[b].permissions[1],
@@ -73,7 +73,7 @@ export default function Permissions({ channel }: Props) {
             <h2>select role</h2>
             {selected}
             {keys.map((id) => {
-                let role: R = id === "default" ? defaultRole : roles[id];
+                const role: R = id === "default" ? defaultRole : roles[id];
 
                 return (
                     <Checkbox
@@ -85,7 +85,7 @@ export default function Permissions({ channel }: Props) {
             })}
             <h2>channel per??issions</h2>
             {Object.keys(ChannelPermission).map((perm) => {
-                let value =
+                const value =
                     ChannelPermission[perm as keyof typeof ChannelPermission];
                 if (value & DEFAULT_PERMISSION_DM) {
                     return (

src/pages/settings/panes/Account.tsx

@@ -118,7 +118,7 @@ export function Account() {
                                 onClick={() =>
                                     openScreen({
                                         id: "modify_account",
-                                        field: field,
+                                        field,
                                     })
                                 }
                                 contrast>
@@ -142,7 +142,8 @@ export function Account() {
                 Currently work in progress, see{" "}
                 <a
                     href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
-                    target="_blank">
+                    target="_blank"
+                    rel="noreferrer">
                     tracking issue here
                 </a>
                 .

src/pages/settings/panes/Appearance.tsx

@@ -1,4 +1,6 @@
 // @ts-ignore
+import { Reset, Import } from "@styled-icons/boxicons-regular";
+import { Pencil } from "@styled-icons/boxicons-solid";
 import pSBC from "shade-blend-color";
 
 import styles from "./Panes.module.scss";
@@ -26,6 +28,7 @@ import {
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import CollapsibleSection from "../../../components/common/CollapsibleSection";
+import Tooltip from "../../../components/common/Tooltip";
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 import ColourSwatches from "../../../components/ui/ColourSwatches";
@@ -37,9 +40,6 @@ import mutantSVG from "../assets/mutant_emoji.svg";
 import notoSVG from "../assets/noto_emoji.svg";
 import openmojiSVG from "../assets/openmoji_emoji.svg";
 import twemojiSVG from "../assets/twemoji_emoji.svg";
-import { Reset, Import } from "@styled-icons/boxicons-regular";
-import { Pencil } from "@styled-icons/boxicons-solid";
-import Tooltip from "../../../components/common/Tooltip";
 
 interface Props {
     settings: Settings;
@@ -205,7 +205,8 @@ export function Component(props: Props) {
                             Mutant Remix{" "}
                             <a
                                 href="https://mutant.revolt.chat"
-                                target="_blank">
+                                target="_blank"
+                                rel="noreferrer">
                                 (by Revolt)
                             </a>
                         </h4>
@@ -247,23 +248,37 @@ export function Component(props: Props) {
                 id="settings_overrides"
                 summary={<Text id="app.settings.pages.appearance.overrides" />}>
                 <div className={styles.actions}>
-                    <Tooltip content={<Text id="app.settings.pages.appearance.reset_overrides" />}>
+                    <Tooltip
-                        <Button contrast iconbutton onClick={() => setTheme({ custom: {} })}>
+                        content={
-                            <Reset size={22}/>
+                            <Text id="app.settings.pages.appearance.reset_overrides" />
+                        }>
+                        <Button
+                            contrast
+                            iconbutton
+                            onClick={() => setTheme({ custom: {} })}>
+                            <Reset size={22} />
                         </Button>
                     </Tooltip>
-                    <div className={styles.code} onClick={() => writeClipboard(JSON.stringify(theme))}>
+                    <div
-                        <Tooltip content={<Text id="app.special.copy" />}> {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
+                        className={styles.code}
+                        onClick={() => writeClipboard(JSON.stringify(theme))}>
+                        <Tooltip content={<Text id="app.special.copy" />}>
+                            {" "}
+                            {/*TOFIX: Try to put the tooltip above the .code div without messing up the css challenge */}
                             {JSON.stringify(theme)}
                         </Tooltip>
                     </div>
-                    <Tooltip content={<Text id="app.settings.pages.appearance.import" />}>
+                    <Tooltip
+                        content={
+                            <Text id="app.settings.pages.appearance.import" />
+                        }>
                         <Button
                             contrast
                             iconbutton
                             onClick={async () => {
                                 try {
-                                    const text = await navigator.clipboard.readText();
+                                    const text =
+                                        await navigator.clipboard.readText();
                                     setOverride(JSON.parse(text));
                                 } catch (err) {
                                     openScreen({
@@ -279,13 +294,11 @@ export function Component(props: Props) {
                                     });
                                 }
                             }}>
-                            <Import size={22}/>
+                            <Import size={22} />
                         </Button>
                     </Tooltip>
                 </div>
-                <h3>
+                <h3>App</h3>
-                    App
-                </h3>
                 <div className={styles.overrides}>
                     {(
                         [
@@ -315,7 +328,9 @@ export function Component(props: Props) {
                             "hover",
                         ] as const
                     ).map((x) => (
-                        <div className={styles.entry} key={x}
+                        <div
+                            className={styles.entry}
+                            key={x}
                             style={{ backgroundColor: theme[x] }}>
                             <div className={styles.input}>
                                 <input
@@ -330,8 +345,13 @@ export function Component(props: Props) {
                             </div>
                             <span>{x}</span>
                             <div className={styles.override}>
-                                <div className={styles.picker}
+                                <div
-                                    onClick={e => e.currentTarget.parentElement?.parentElement?.querySelector('input')?.click()}>
+                                    className={styles.picker}
+                                    onClick={(e) =>
+                                        e.currentTarget.parentElement?.parentElement
+                                            ?.querySelector("input")
+                                            ?.click()
+                                    }>
                                     <Pencil size={24} />
                                 </div>
                                 <InputBox

src/pages/settings/panes/Experiments.tsx

@@ -32,8 +32,8 @@ export function Component(props: Props) {
                             key,
                         })
                     }
-                    description={ EXPERIMENTS[key].description }>
+                    description={EXPERIMENTS[key].description}>
-                    { EXPERIMENTS[key].title }
+                    {EXPERIMENTS[key].title}
                 </Checkbox>
             ))}
             {AVAILABLE_EXPERIMENTS.length === 0 && (

src/pages/settings/panes/Languages.tsx

@@ -76,7 +76,8 @@ export function Component(props: Props) {
                 </span>{" "}
                 <a
                     href="https://weblate.insrt.uk/engage/revolt/?utm_source=widget"
-                    target="_blank">
+                    target="_blank"
+                    rel="noreferrer">
                     <Text id="app.settings.tips.languages.b" />
                 </a>
             </Tip>

src/pages/settings/panes/Notifications.tsx

@@ -59,7 +59,8 @@ export function Component({ options }: Props) {
                 }
                 onChange={async (desktopEnabled) => {
                     if (desktopEnabled) {
-                        let permission = await Notification.requestPermission();
+                        const permission =
+                            await Notification.requestPermission();
                         if (permission !== "granted") {
                             return openScreen({
                                 id: "error",
@@ -126,7 +127,7 @@ export function Component({ options }: Props) {
             </h3>
             {SOUNDS_ARRAY.map((key) => (
                 <Checkbox
-                    checked={enabledSounds[key] ? true : false}
+                    checked={!!enabledSounds[key]}
                     onChange={(enabled) =>
                         dispatch({
                             type: "SETTINGS_SET_NOTIFICATION_OPTIONS",

src/pages/settings/panes/Sessions.tsx

@@ -1,12 +1,18 @@
+import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
 import { HelpCircle } from "@styled-icons/boxicons-regular";
+import {
+    Safari,
+    Firefoxbrowser,
+    Microsoftedge,
+    Linux,
+    Macos,
+} from "@styled-icons/simple-icons";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useHistory } from "react-router-dom";
 import { decodeTime } from "ulid";
 
 import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
-import { Safari, Firefoxbrowser, Microsoftedge, Linux, Macos } from "@styled-icons/simple-icons";
-import { Chrome, Android, Apple, Windows } from "@styled-icons/boxicons-logos";
 import { useContext, useEffect, useState } from "preact/hooks";
 
 import { dayjs } from "../../../context/Locale";
@@ -95,7 +101,7 @@ export function Sessions() {
     });
 
     mapped.sort((a, b) => b.timestamp - a.timestamp);
-    let id = mapped.findIndex((x) => x.id === deviceId);
+    const id = mapped.findIndex((x) => x.id === deviceId);
 
     const render = [
         mapped[id],
@@ -114,7 +120,9 @@ export function Sessions() {
                     <div
                         className={styles.entry}
                         data-active={session.id === deviceId}
-                        data-deleting={attemptingDelete.indexOf(session.id) > -1}>
+                        data-deleting={
+                            attemptingDelete.indexOf(session.id) > -1
+                        }>
                         {deviceId === session.id && (
                             <span className={styles.label}>
                                 <Text id="app.settings.pages.sessions.this_device" />{" "}
@@ -122,18 +130,25 @@ export function Sessions() {
                         )}
                         <div className={styles.session}>
                             <div className={styles.detail}>
-                                <svg width={42} height={42}
+                                <svg width={42} height={42} viewBox="0 0 32 32">
-                                    viewBox="0 0 32 32">
                                     <foreignObject
                                         x="0"
                                         y="0"
                                         width="32"
                                         height="32"
-                                        mask={systemIcon ? "url(#session)": undefined}>
+                                        mask={
+                                            systemIcon
+                                                ? "url(#session)"
+                                                : undefined
+                                        }>
                                         {getIcon(session)}
                                     </foreignObject>
-                                    <foreignObject x="18" y="18" width="14" height="14">
+                                    <foreignObject
-                                        { systemIcon }
+                                        x="18"
+                                        y="18"
+                                        width="14"
+                                        height="14">
+                                        {systemIcon}
                                     </foreignObject>
                                 </svg>
                                 <div className={styles.info}>
@@ -142,7 +157,8 @@ export function Sessions() {
                                         className={styles.name}
                                         value={session.friendly_name}
                                         autocomplete="off"
-                                        style={{ pointerEvents: 'none' }} />
+                                        style={{ pointerEvents: "none" }}
+                                    />
                                     <span className={styles.time}>
                                         <Text
                                             id="app.settings.pages.sessions.created"
@@ -155,7 +171,7 @@ export function Sessions() {
                                     </span>
                                 </div>
                             </div>
-                                {deviceId !== session.id && (
+                            {deviceId !== session.id && (
                                 <Button
                                     onClick={async () => {
                                         setDelete([
@@ -173,35 +189,37 @@ export function Sessions() {
                                         );
                                     }}
                                     disabled={
-                                        attemptingDelete.indexOf(session.id) > -1
+                                        attemptingDelete.indexOf(session.id) >
+                                        -1
                                     }>
                                     <Text id="app.settings.pages.logOut" />
                                 </Button>
                             )}
                         </div>
                     </div>
-                )
+                );
             })}
-            <Button error
+            <Button
+                error
                 onClick={async () => {
                     // ! FIXME: add to rAuth
-                    let del: string[] = [];
+                    const del: string[] = [];
                     render.forEach((session) => {
                         if (deviceId !== session.id) {
                             del.push(session.id);
                         }
-                    })
+                    });
 
                     setDelete(del);
 
-                    for (let id of del) {
+                    for (const id of del) {
                         await client.req(
                             "DELETE",
                             `/auth/sessions/${id}` as "/auth/sessions",
                         );
                     }
 
-                    setSessions(sessions.filter(x => x.id === deviceId));
+                    setSessions(sessions.filter((x) => x.id === deviceId));
                 }}>
                 <Text id="app.settings.pages.sessions.logout" />
             </Button>

src/pages/settings/server/Invites.tsx

@@ -46,8 +46,8 @@ export function Invites({ server }: Props) {
             </div>
             {typeof invites === "undefined" && <Preloader type="ring" />}
             {invites?.map((invite) => {
-                let creator = users.find((x) => x?._id === invite.creator);
+                const creator = users.find((x) => x?._id === invite.creator);
-                let channel = channels.find((x) => x?._id === invite.channel);
+                const channel = channels.find((x) => x?._id === invite.channel);
 
                 return (
                     <div

src/pages/settings/server/Overview.tsx

@@ -40,7 +40,7 @@ export function Overview({ server }: Props) {
 
     const [changed, setChanged] = useState(false);
     function save() {
-        let changes: Partial<
+        const changes: Partial<
             Pick<Servers.Server, "name" | "description" | "system_messages">
         > = {};
         if (name !== server.name) changes.name = name;

src/pages/settings/server/Roles.tsx

@@ -88,15 +88,14 @@ export function Roles({ server }: Props) {
                                 <Text id="app.settings.permissions.default_role" />
                             </ButtonItem>
                         );
-                    } else {
-                        return (
-                            <ButtonItem
-                                active={role === id}
-                                onClick={() => setRole(id)}>
-                                {roles[id].name}
-                            </ButtonItem>
-                        );
                     }
+                    return (
+                        <ButtonItem
+                            active={role === id}
+                            onClick={() => setRole(id)}>
+                            {roles[id].name}
+                        </ButtonItem>
+                    );
                 })}
             </div>
             <div className={styles.permissions}>
@@ -118,7 +117,7 @@ export function Roles({ server }: Props) {
                     </Overline>
                     {Object.keys(ServerPermission).map((key) => {
                         if (key === "View") return;
-                        let value =
+                        const value =
                             ServerPermission[
                                 key as keyof typeof ServerPermission
                             ];
@@ -143,7 +142,7 @@ export function Roles({ server }: Props) {
                     </Overline>
                     {Object.keys(ChannelPermission).map((key) => {
                         if (key === "ManageChannel") return;
-                        let value =
+                        const value =
                             ChannelPermission[
                                 key as keyof typeof ChannelPermission
                             ];

src/redux/connector.tsx

@@ -11,6 +11,6 @@ export function connectState<T>(
     mapKeys: (state: State, props: T) => any,
     memoize?: boolean,
 ): ConnectedComponent<(props: any) => h.JSX.Element | null, T> {
-    let c = connect(mapKeys)(component);
+    const c = connect(mapKeys)(component);
     return memoize ? memo(c) : c;
 }

src/redux/reducers/experiments.ts

@@ -1,10 +1,12 @@
-export type Experiments = 'search';
+export type Experiments = "search";
-export const AVAILABLE_EXPERIMENTS: Experiments[] = [ 'search' ];
+export const AVAILABLE_EXPERIMENTS: Experiments[] = ["search"];
-export const EXPERIMENTS: { [key in Experiments]: { title: string, description: string } } = {
+export const EXPERIMENTS: {
-    'search': {
+    [key in Experiments]: { title: string; description: string };
-        title: 'Search',
+} = {
-        description: 'Allows you to search for messages in channels.'
+    search: {
-    }
+        title: "Search",
+        description: "Allows you to search for messages in channels.",
+    },
 };
 
 export interface ExperimentOptions {

src/revision.ts

@@ -1,3 +1,3 @@
 export const REPO_URL = "https://gitlab.insrt.uk/revolt/revite/-/commit";
 export const GIT_REVISION = "__GIT_REVISION__";
-export const GIT_BRANCH: string = "__GIT_BRANCH__";
+export const GIT_BRANCH = "__GIT_BRANCH__";

src/sw.ts

@@ -26,13 +26,13 @@ const ENCODING_LEN = ENCODING.length;
 const TIME_LEN = 10;
 
 function decodeTime(id: string) {
-    var time = id
+    const time = id
         .substr(0, TIME_LEN)
         .split("")
         .reverse()
-        .reduce(function (carry, char, index) {
+        .reduce((carry, char, index) => {
-            var encodingIndex = ENCODING.indexOf(char);
+            const encodingIndex = ENCODING.indexOf(char);
-            if (encodingIndex === -1) throw "invalid character found: " + char;
+            if (encodingIndex === -1) throw `invalid character found: ${char}`;
 
             return (carry += encodingIndex * Math.pow(ENCODING_LEN, index));
         }, 0);
@@ -43,9 +43,9 @@ function decodeTime(id: string) {
 self.addEventListener("push", (event) => {
     async function process() {
         if (event.data === null) return;
-        let data: Message = event.data.json();
+        const data: Message = event.data.json();
 
-        let item = await localStorage.getItem("state");
+        const item = await localStorage.getItem("state");
         if (!item) return;
 
         const state: State = JSON.parse(item);
@@ -57,7 +57,7 @@ self.addEventListener("push", (event) => {
             // Match RevoltClient.tsx#L55
             db = await openDB("state", 3, {
                 upgrade(db) {
-                    for (let store of [
+                    for (const store of [
                         "channels",
                         "servers",
                         "users",
@@ -87,8 +87,8 @@ self.addEventListener("push", (event) => {
             }
         }
 
-        let channel = await get<Channel>("channels", data.channel);
+        const channel = await get<Channel>("channels", data.channel);
-        let user = await get<User>("users", data.author);
+        const user = await get<User>("users", data.author);
 
         if (channel) {
             const notifs = getNotificationState(state.notifications, channel);
@@ -96,10 +96,10 @@ self.addEventListener("push", (event) => {
         }
 
         let title = `@${data.author}`;
-        let username = user?.username ?? data.author;
+        const username = user?.username ?? data.author;
         let image;
         if (data.attachments) {
-            let attachment = data.attachments[0];
+            const attachment = data.attachments[0];
             if (attachment.metadata.type === "Image") {
                 image = `${autumn_url}/${attachment.tag}/${attachment._id}`;
             }
@@ -120,7 +120,7 @@ self.addEventListener("push", (event) => {
                 break;
             case "TextChannel":
                 {
-                    let server = await get<Server>("servers", channel.server);
+                    const server = await get<Server>("servers", channel.server);
                     title = `@${user?.username} (#${channel.name}, ${server?.name})`;
                 }
                 break;
@@ -150,16 +150,16 @@ self.addEventListener("push", (event) => {
 
 // ? Open the app on notification click.
 // https://stackoverflow.com/a/39457287
-self.addEventListener("notificationclick", function (event) {
+self.addEventListener("notificationclick", (event) => {
-    let url = event.notification.data;
+    const url = event.notification.data;
     event.notification.close();
     event.waitUntil(
         self.clients
             .matchAll({ includeUncontrolled: true, type: "window" })
             .then((windowClients) => {
                 // Check if there is already a window/tab open with the target URL
-                for (var i = 0; i < windowClients.length; i++) {
+                for (let i = 0; i < windowClients.length; i++) {
-                    var client = windowClients[i];
+                    const client = windowClients[i];
                     // If so, just focus it.
                     if (client.url === url && "focus" in client) {
                         return client.focus();