Format and automatically fix linted code.

src/components/common/AgeGate.tsx

@@ -1,12 +1,16 @@
 import { useHistory } from "react-router-dom";
-import { useState } from "preact/hooks";
-import styled from "styled-components";
-import { dispatch, getState } from "../../redux";
-import Checkbox from "../ui/Checkbox";
-import Button from "../ui/Button";
-import { Children } from "../../types/Preact";
 import { Channel } from "revolt.js";
+import styled from "styled-components";
+
 import { Text } from "preact-i18n";
+import { useState } from "preact/hooks";
+
+import { dispatch, getState } from "../../redux";
+
+import Button from "../ui/Button";
+import Checkbox from "../ui/Checkbox";
+
+import { Children } from "../../types/Preact";
 
 const Base = styled.div`
     display: flex;
@@ -38,53 +42,66 @@ type Props = {
     gated: boolean;
     children: Children;
 } & {
-    type: 'channel';
+    type: "channel";
     channel: Channel;
-}
+};
 
 export default function AgeGate(props: Props) {
     const history = useHistory();
-    const [consent, setConsent] = useState(getState().sectionToggle['nsfw'] ?? false);
+    const [consent, setConsent] = useState(
+        getState().sectionToggle["nsfw"] ?? false,
+    );
     const [ageGate, setAgeGate] = useState(false);
 
     if (ageGate || !props.gated) {
-        return <>{ props.children }</>;
-    } else {
-        if (!(props.channel.channel_type === 'Group' || props.channel.channel_type === 'TextChannel')) return <>{ props.children }</>;
+        return <>{props.children}</>;
+    }
+    if (
+        !(
+            props.channel.channel_type === "Group" ||
+            props.channel.channel_type === "TextChannel"
+        )
+    )
+        return <>{props.children}</>;
 
-        return (
-            <Base>
-                <img
-                    src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
-                    draggable={false}
-                />
-                <h2>{props.channel.name}</h2>
-                <span className="subtext">
-                    <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
-                    <a href="#"><Text id={`app.main.channel.nsfw.learn_more`} /></a>
-                </span>
+    return (
+        <Base>
+            <img
+                src={"https://static.revolt.chat/emoji/mutant/26a0.svg"}
+                draggable={false}
+            />
+            <h2>{props.channel.name}</h2>
+            <span className="subtext">
+                <Text id={`app.main.channel.nsfw.${props.type}.marked`} />{" "}
+                <a href="#">
+                    <Text id={`app.main.channel.nsfw.learn_more`} />
+                </a>
+            </span>
 
-                <Checkbox checked={consent} onChange={(v) => {
+            <Checkbox
+                checked={consent}
+                onChange={(v) => {
                     setConsent(v);
                     if (v) {
-                        dispatch({ type: 'SECTION_TOGGLE_SET', id: 'nsfw', state: true });
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: "nsfw",
+                            state: true,
+                        });
                     } else {
-                        dispatch({ type: 'SECTION_TOGGLE_UNSET', id: 'nsfw' });
+                        dispatch({ type: "SECTION_TOGGLE_UNSET", id: "nsfw" });
                     }
                 }}>
-                    <Text id="app.main.channel.nsfw.confirm" />
-                </Checkbox>
-                <div className="actions">
-                    <Button contrast onClick={() => history.goBack()}>
-                        <Text id="app.special.modals.actions.back" />
-                    </Button>
-                    <Button
-                        contrast
-                        onClick={() => consent && setAgeGate(true)}>
-                        <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
-                    </Button>
-                </div>
-            </Base>
-        );
-    }
+                <Text id="app.main.channel.nsfw.confirm" />
+            </Checkbox>
+            <div className="actions">
+                <Button contrast onClick={() => history.goBack()}>
+                    <Text id="app.special.modals.actions.back" />
+                </Button>
+                <Button contrast onClick={() => consent && setAgeGate(true)}>
+                    <Text id={`app.main.channel.nsfw.${props.type}.confirm`} />
+                </Button>
+            </div>
+        </Base>
+    );
 }

src/components/common/AutoComplete.tsx

@@ -58,10 +58,10 @@ export function useAutoComplete(
         el: HTMLTextAreaElement,
     ): ["emoji" | "user" | "channel", string, number] | undefined {
         if (el.selectionStart === el.selectionEnd) {
-            let cursor = el.selectionStart;
-            let content = el.value.slice(0, cursor);
+            const cursor = el.selectionStart;
+            const content = el.value.slice(0, cursor);
 
-            let valid = /\w/;
+            const valid = /\w/;
 
             let j = content.length - 1;
             if (content[j] === "@") {
@@ -75,10 +75,10 @@ export function useAutoComplete(
             }
 
             if (j === -1) return;
-            let current = content[j];
+            const current = content[j];
 
             if (current === ":" || current === "@" || current === "#") {
-                let search = content.slice(j + 1, content.length);
+                const search = content.slice(j + 1, content.length);
                 if (search.length > 0) {
                     return [
                         current === "#"
@@ -97,19 +97,19 @@ export function useAutoComplete(
     function onChange(ev: JSX.TargetedEvent<HTMLTextAreaElement, Event>) {
         const el = ev.currentTarget;
 
-        let result = findSearchString(el);
+        const result = findSearchString(el);
         if (result) {
-            let [type, search] = result;
+            const [type, search] = result;
             const regex = new RegExp(search, "i");
 
             if (type === "emoji") {
                 // ! FIXME: we should convert it to a Binary Search Tree and use that
-                let matches = Object.keys(emojiDictionary)
+                const matches = Object.keys(emojiDictionary)
                     .filter((emoji: string) => emoji.match(regex))
                     .splice(0, 5);
 
                 if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                         state.type !== "none" ? state.selected : 0;
 
                     setState({
@@ -130,7 +130,9 @@ export function useAutoComplete(
                         users = client.users.toArray();
                         break;
                     case "channel": {
-                        let channel = client.channels.get(searchClues.users.id);
+                        const channel = client.channels.get(
+                            searchClues.users.id,
+                        );
                         switch (channel?.channel_type) {
                             case "Group":
                             case "DirectMessage":
@@ -162,7 +164,7 @@ export function useAutoComplete(
 
                 users = users.filter((x) => x._id !== SYSTEM_USER_ID);
 
-                let matches = (
+                const matches = (
                     search.length > 0
                         ? users.filter((user) =>
                               user.username.toLowerCase().match(regex),
@@ -173,7 +175,7 @@ export function useAutoComplete(
                     .filter((x) => typeof x !== "undefined");
 
                 if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                         state.type !== "none" ? state.selected : 0;
 
                     setState({
@@ -188,14 +190,14 @@ export function useAutoComplete(
             }
 
             if (type === "channel" && searchClues?.channels) {
-                let channels = client.servers
+                const channels = client.servers
                     .get(searchClues.channels.server)
                     ?.channels.map((x) => client.channels.get(x))
                     .filter(
                         (x) => typeof x !== "undefined",
                     ) as Channels.TextChannel[];
 
-                let matches = (
+                const matches = (
                     search.length > 0
                         ? channels.filter((channel) =>
                               channel.name.toLowerCase().match(regex),
@@ -206,7 +208,7 @@ export function useAutoComplete(
                     .filter((x) => typeof x !== "undefined");
 
                 if (matches.length > 0) {
-                    let currentPosition =
+                    const currentPosition =
                         state.type !== "none" ? state.selected : 0;
 
                     setState({
@@ -228,11 +230,11 @@ export function useAutoComplete(
 
     function selectCurrent(el: HTMLTextAreaElement) {
         if (state.type !== "none") {
-            let result = findSearchString(el);
+            const result = findSearchString(el);
             if (result) {
-                let [_type, search, index] = result;
+                const [_type, search, index] = result;
 
-                let content = el.value.split("");
+                const content = el.value.split("");
                 if (state.type === "emoji") {
                     content.splice(
                         index,

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}
-                        onMouseDown={e => e.preventDefault()}>
+                        className="mobile"
+                        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>
-                <MessageDetail message={message} position="left" />
-            </MessageInfo> }
+            {!hideInfo && (
+                <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}
-                    className={classNames({ [styles.margin]: hasContent, spoiler })}>
-                    <img src={url} alt={filename}
+                <SizedGrid
+                    width={metadata.width}
+                    height={metadata.height}
+                    className={classNames({
+                        [styles.margin]: hasContent,
+                        spoiler,
+                    })}>
+                    <img
+                        src={url}
+                        alt={filename}
                         className={styles.image}
                         loading="lazy"
                         onClick={() =>
@@ -44,20 +51,28 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         }
                         onMouseDown={(ev) =>
                             ev.button === 1 && window.open(url, "_blank")
-                        } />
-                    { spoiler && <Spoiler set={setSpoiler} /> }
+                        }
+                    />
+                    {spoiler && <Spoiler set={setSpoiler} />}
                 </SizedGrid>
-            )
+            );
         }
 
         case "Video": {
             return (
-                <div className={classNames(styles.container, { [styles.margin]: hasContent })}
-                    style={{ '--width': metadata.width + 'px' }}>
+                <div
+                    className={classNames(styles.container, {
+                        [styles.margin]: hasContent,
+                    })}
+                    style={{ "--width": `${metadata.width}px` }}>
                     <AttachmentActions attachment={attachment} />
-                    <SizedGrid width={metadata.width} height={metadata.height}
+                    <SizedGrid
+                        width={metadata.width}
+                        height={metadata.height}
                         className={classNames({ spoiler })}>
-                        <video src={url} alt={filename}
+                        <video
+                            src={url}
+                            alt={filename}
                             controls
                             loading="lazy"
                             width={metadata.width}
@@ -66,10 +81,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
                                 ev.button === 1 && window.open(url, "_blank")
                             }
                         />
-                        { spoiler && <Spoiler set={setSpoiler} /> }
+                        {spoiler && <Spoiler set={setSpoiler} />}
                     </SizedGrid>
                 </div>
-            )
+            );
         }
 
         case "Audio": {
@@ -82,7 +97,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 </div>
             );
         }
-        
+
         case "Text": {
             return (
                 <div

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

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

@@ -1,21 +1,21 @@
 import { Reply } from "@styled-icons/boxicons-regular";
 import { File } from "@styled-icons/boxicons-solid";
+import { useHistory } from "react-router-dom";
 import { SYSTEM_USER_ID } from "revolt.js";
+import { Users } from "revolt.js/dist/api/objects";
 import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
 
 import { useRenderState } from "../../../../lib/renderer/Singleton";
 
 import { useForceUpdate, useUser } from "../../../../context/revoltjs/hooks";
+import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
 import { SystemMessage } from "../SystemMessage";
-import { Users } from "revolt.js/dist/api/objects";
-import { useHistory } from "react-router-dom";
-import { useEffect, useLayoutEffect, useState } from "preact/hooks";
-import { mapMessage, MessageObject } from "../../../../context/revoltjs/util";
 
 interface Props {
     channel: string;
@@ -73,7 +73,7 @@ export const ReplyBase = styled.div<{
         align-items: center;
         flex-direction: row;
         transition: filter 1s ease-in-out;
-        transition: transform ease-in-out .1s;
+        transition: transform ease-in-out 0.1s;
         filter: brightness(1);
 
         &:hover {
@@ -123,7 +123,9 @@ export function MessageReply({ index, channel, id }: Props) {
     const view = useRenderState(channel);
     if (view?.type !== "RENDER") return null;
 
-    const [ message, setMessage ] = useState<MessageObject | undefined>(undefined);
+    const [message, setMessage] = useState<MessageObject | undefined>(
+        undefined,
+    );
     useLayoutEffect(() => {
         // ! FIXME: We should do this through the message renderer, so it can fetch it from cache if applicable.
         const m = view.messages.find((x) => x._id === id);
@@ -131,10 +133,11 @@ export function MessageReply({ index, channel, id }: Props) {
         if (m) {
             setMessage(m);
         } else {
-            ctx.client.channels.fetchMessage(channel, id)
-                .then(m => setMessage(mapMessage(m)));
+            ctx.client.channels
+                .fetchMessage(channel, id)
+                .then((m) => setMessage(mapMessage(m)));
         }
-    }, [ view.messages ]);
+    }, [view.messages]);
 
     if (!message) {
         return (
@@ -153,32 +156,47 @@ export function MessageReply({ index, channel, id }: Props) {
     return (
         <ReplyBase head={index === 0}>
             <Reply size={16} />
-            { user?.relationship === Users.Relationship.Blocked ?
-                <>Blocked User</> :
+            {user?.relationship === Users.Relationship.Blocked ? (
+                <>Blocked User</>
+            ) : (
                 <>
                     {message.author === SYSTEM_USER_ID ? (
                         <SystemMessage message={message} hideInfo />
-                    ) : <>
-                        <div className="user"><UserShort user={user} size={16} /></div>
-                        <div className="content" onClick={() => {
-                            let obj = ctx.client.channels.get(channel);
-                            if (obj?.channel_type === 'TextChannel') {
-                                history.push(`/server/${obj.server}/channel/${obj._id}/${message._id}`);
-                            } else {
-                                history.push(`/channel/${channel}/${message._id}`);
-                            }
-                        }}>
-                            {message.attachments && message.attachments.length > 0 && (
-                                <File size={16} />
-                            )}
-                            <Markdown
-                                disallowBigEmoji
-                                content={(message.content as string).replace(/\n/g, " ")}
-                            />
-                        </div>
-                    </>}
+                    ) : (
+                        <>
+                            <div className="user">
+                                <UserShort user={user} size={16} />
+                            </div>
+                            <div
+                                className="content"
+                                onClick={() => {
+                                    const obj =
+                                        ctx.client.channels.get(channel);
+                                    if (obj?.channel_type === "TextChannel") {
+                                        history.push(
+                                            `/server/${obj.server}/channel/${obj._id}/${message._id}`,
+                                        );
+                                    } else {
+                                        history.push(
+                                            `/channel/${channel}/${message._id}`,
+                                        );
+                                    }
+                                }}>
+                                {message.attachments &&
+                                    message.attachments.length > 0 && (
+                                        <File size={16} />
+                                    )}
+                                <Markdown
+                                    disallowBigEmoji
+                                    content={(
+                                        message.content as string
+                                    ).replace(/\n/g, " ")}
+                                />
+                            </div>
+                        </>
+                    )}
                 </>
-            }
+            )}
         </ReplyBase>
     );
 }

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/JumpToBottom.tsx

@@ -28,7 +28,7 @@ const Bar = styled.div`
         transition: color ease-in-out 0.08s;
         background: var(--secondary-background);
         border-radius: var(--border-radius) var(--border-radius) 0 0;
-        
+
         > div {
             display: flex;
             align-items: center;

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,
-    children: Children
+    user?: User;
+    children: Children;
 }
 
 const Base = styled.div`
@@ -38,16 +39,18 @@ const Base = styled.div`
 
 export default function UserHover({ user, children }: Props) {
     return (
-        <Tooltip placement="right-end" content={
-            <Base>
-                <Username className="username" user={user} />
-                <span className="status">
-                    <UserStatus user={user} />
-                </span>
-                {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
-            </Base>
-        }>
-            { children }
+        <Tooltip
+            placement="right-end"
+            content={
+                <Base>
+                    <Username className="username" user={user} />
+                    <span className="status">
+                        <UserStatus user={user} />
+                    </span>
+                    {/*<div className="tip"><InfoCircle size={13}/>Right-click on the avatar to access the quick menu</div>*/}
+                </Base>
+            }>
+            {children}
         </Tooltip>
-    )
+    );
 }

src/components/common/user/UserStatus.tsx

@@ -2,6 +2,7 @@ import { User } from "revolt.js";
 import { Users } from "revolt.js/dist/api/objects";
 
 import { Text } from "preact-i18n";
+
 import Tooltip from "../Tooltip";
 
 interface Props {
@@ -14,10 +15,10 @@ export default function UserStatus({ user, tooltip }: Props) {
         if (user.status?.text) {
             if (tooltip) {
                 return (
-                    <Tooltip arrow={undefined} content={ user.status.text }>
-                        { user.status.text }
+                    <Tooltip arrow={undefined} content={user.status.text}>
+                        {user.status.text}
                     </Tooltip>
-                )
+                );
             }
 
             return <>{user.status.text}</>;