Make the linter happy.

src/pages/settings/panes/Account.tsx

@@ -6,7 +6,7 @@ import {
     Trash,
 } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
-import { Link, useHistory } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import { Profile } from "revolt-api/types/Users";
 
 import styles from "./Panes.module.scss";
@@ -55,7 +55,7 @@ export const Account = observer(() => {
                 .user!.fetchProfile()
                 .then((profile) => setProfile(profile ?? {}));
         }
-    }, [status]);
+    }, [client, email, profile, status]);
 
     return (
         <div className={styles.user}>
@@ -95,12 +95,17 @@ export const Account = observer(() => {
             <div>
                 {(
                     [
-                        ["username", client.user!.username, <At size={24} />],
-                        ["email", email, <Envelope size={24} />],
-                        ["password", "•••••••••", <Key size={24} />],
+                        [
+                            "username",
+                            client.user!.username,
+                            <At key="at" size={24} />,
+                        ],
+                        ["email", email, <Envelope key="envelope" size={24} />],
+                        ["password", "•••••••••", <Key key="key" size={24} />],
                     ] as const
                 ).map(([field, value, icon]) => (
                     <CategoryButton
+                        key={field}
                         icon={icon}
                         description={
                             field === "email" ? (
@@ -152,13 +157,15 @@ export const Account = observer(() => {
             </h3>
             <h5>
                 {/*<Text id="app.settings.pages.account.2fa.description" />*/}
-                Two-factor authentication is currently work-in-progress, see {` `}
+                Two-factor authentication is currently work-in-progress, see{" "}
+                {` `}
                 <a
                     href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
                     target="_blank"
                     rel="noreferrer">
                     tracking issue here
-                </a>.
+                </a>
+                .
             </h5>
             <CategoryButton
                 icon={<Lock size={24} color="var(--error)" />}
@@ -188,7 +195,7 @@ export const Account = observer(() => {
                     description={
                         "Delete your account, including all of your data."
                     }
-                    onClick={() => {}}
+                    hover
                     action="external">
                     <Text id="app.settings.pages.account.manage.delete" />
                 </CategoryButton>

src/pages/settings/panes/Appearance.tsx

@@ -1,6 +1,6 @@
 import { Reset, Import } from "@styled-icons/boxicons-regular";
 import { Pencil } from "@styled-icons/boxicons-solid";
-// @ts-ignore
+// @ts-expect-error shade-blend-color does not have typings.
 import pSBC from "shade-blend-color";
 
 import styles from "./Panes.module.scss";
@@ -17,8 +17,10 @@ import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
 import {
     DEFAULT_FONT,
     DEFAULT_MONO_FONT,
+    Fonts,
     FONTS,
     FONT_KEYS,
+    MonospaceFonts,
     MONOSPACE_FONTS,
     MONOSPACE_FONT_KEYS,
     Theme,
@@ -30,6 +32,7 @@ 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";
 import ComboBox from "../../../components/ui/ComboBox";
 import InputBox from "../../../components/ui/InputBox";
@@ -56,12 +59,12 @@ export function Component(props: Props) {
         });
     }
 
-    function pushOverride(custom: Partial<Theme>) {
+    const pushOverride = useCallback((custom: Partial<Theme>) => {
         dispatch({
             type: "SETTINGS_SET_THEME_OVERRIDE",
             custom,
         });
-    }
+    }, []);
 
     function setAccent(accent: string) {
         setOverride({
@@ -80,12 +83,14 @@ export function Component(props: Props) {
         });
     }
 
-    const setOverride = useCallback(debounce(pushOverride, 200), []) as (
-        custom: Partial<Theme>,
-    ) => void;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const setOverride = useCallback(
+        debounce(pushOverride as (...args: unknown[]) => void, 200),
+        [pushOverride],
+    ) as (custom: Partial<Theme>) => void;
     const [css, setCSS] = useState(props.settings.theme?.custom?.css ?? "");
 
-    useEffect(() => setOverride({ css }), [css]);
+    useEffect(() => setOverride({ css }), [setOverride, css]);
 
     const selected = props.settings.theme?.preset ?? "dark";
     return (
@@ -169,15 +174,15 @@ export function Component(props: Props) {
             <ComboBox
                 value={theme.font ?? DEFAULT_FONT}
                 onChange={(e) =>
-                    pushOverride({ font: e.currentTarget.value as any })
+                    pushOverride({ font: e.currentTarget.value as Fonts })
                 }>
                 {FONT_KEYS.map((key) => (
-                    <option value={key}>
+                    <option value={key} key={key}>
                         {FONTS[key as keyof typeof FONTS].name}
                     </option>
                 ))}
             </ComboBox>
-            {/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.
+            {/* TOFIX: Only show when a font with ligature support is selected, i.e.: Inter.*/}
             <p>
                 <Checkbox
                     checked={props.settings.theme?.ligatures === true}
@@ -191,7 +196,7 @@ export function Component(props: Props) {
                     }>
                     <Text id="app.settings.pages.appearance.ligatures" />
                 </Checkbox>
-                </p>*/}
+            </p>
 
             <h3>
                 <Text id="app.settings.pages.appearance.emoji_pack" />
@@ -405,11 +410,12 @@ export function Component(props: Props) {
                     value={theme.monospaceFont ?? DEFAULT_MONO_FONT}
                     onChange={(e) =>
                         pushOverride({
-                            monospaceFont: e.currentTarget.value as any,
+                            monospaceFont: e.currentTarget
+                                .value as MonospaceFonts,
                         })
                     }>
                     {MONOSPACE_FONT_KEYS.map((key) => (
-                        <option value={key}>
+                        <option value={key} key={key}>
                             {
                                 MONOSPACE_FONTS[
                                     key as keyof typeof MONOSPACE_FONTS

src/pages/settings/panes/Experiments.tsx

@@ -23,6 +23,7 @@ export function Component(props: Props) {
             </h3>
             {AVAILABLE_EXPERIMENTS.map((key) => (
                 <Checkbox
+                    key={key}
                     checked={(props.options?.enabled ?? []).indexOf(key) > -1}
                     onChange={(enabled) =>
                         dispatch({

src/pages/settings/panes/Feedback.tsx

@@ -70,7 +70,7 @@ export function Feedback() {
                             placeholder={
                                 (
                                     <Text id="app.settings.pages.feedback.other" />
-                                ) as any
+                                ) as unknown as string
                             }
                         />
                     </Localizer>

src/pages/settings/panes/Native.tsx

@@ -1,15 +1,9 @@
 import { useEffect, useState } from "preact/hooks";
 
-import { SyncOptions } from "../../../redux/reducers/sync";
-
 import Button from "../../../components/ui/Button";
 import Checkbox from "../../../components/ui/Checkbox";
 
-interface Props {
-    options?: SyncOptions;
-}
-
-export function Native(props: Props) {
+export function Native() {
     const [config, setConfig] = useState(window.native.getConfig());
     const [autoStart, setAutoStart] = useState<boolean | undefined>();
     const fetchValue = () => window.native.getAutoStart().then(setAutoStart);
@@ -41,8 +35,7 @@ export function Native(props: Props) {
                 description="Launch Revolt when you log into your computer.">
                 Start with computer
             </Checkbox>
-            
-            
+
             <Checkbox
                 checked={config.discordRPC}
                 onChange={(discordRPC) => {
@@ -181,4 +174,4 @@ export function Native(props: Props) {
             )}
         </div>
     );
-}
+}

src/pages/settings/panes/Notifications.tsx

@@ -127,6 +127,7 @@ export function Component({ options }: Props) {
             </h3>
             {SOUNDS_ARRAY.map((key) => (
                 <Checkbox
+                    key={key}
                     checked={!!enabledSounds[key]}
                     onChange={(enabled) =>
                         dispatch({

src/pages/settings/panes/Profile.tsx

@@ -1,8 +1,11 @@
+import { Profile as ProfileI } from "revolt-api/types/Users";
+
 import styles from "./Panes.module.scss";
-import { IntlContext, Text, translate } from "preact-i18n";
-import { useContext, useEffect, useState } from "preact/hooks";
+import { Text } from "preact-i18n";
+import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+import { useTranslation } from "../../../lib/i18n";
 
 import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
@@ -16,31 +19,27 @@ import AutoComplete, {
     useAutoComplete,
 } from "../../../components/common/AutoComplete";
 import Button from "../../../components/ui/Button";
-import { Profile } from "revolt-api/types/Users";
 
 export function Profile() {
-    const { intl } = useContext(IntlContext);
     const status = useContext(StatusContext);
-
+    const translate = useTranslation();
     const client = useClient();
 
-    const [profile, setProfile] = useState<undefined | Profile>(
-        undefined,
-    );
+    const [profile, setProfile] = useState<undefined | ProfileI>(undefined);
 
     // ! FIXME: temporary solution
     // ! we should just announce profile changes through WS
-    function refreshProfile() {
+    const refreshProfile = useCallback(() => {
         client
             .user!.fetchProfile()
             .then((profile) => setProfile(profile ?? {}));
-    }
+    }, [client.user, setProfile]);
 
     useEffect(() => {
         if (profile === undefined && status === ClientStatus.ONLINE) {
             refreshProfile();
         }
-    }, [status]);
+    }, [profile, status, refreshProfile]);
 
     const [changed, setChanged] = useState(false);
     function setContent(content?: string) {
@@ -69,7 +68,6 @@ export function Profile() {
                     user_id={client.user!._id}
                     dummy={true}
                     dummyProfile={profile}
-                    onClose={() => {}}
                 />
             </div>
             <div className={styles.row}>
@@ -85,9 +83,7 @@ export function Profile() {
                         behaviour="upload"
                         maxFileSize={4_000_000}
                         onUpload={(avatar) => client.users.edit({ avatar })}
-                        remove={() =>
-                            client.users.edit({ remove: "Avatar" })
-                        }
+                        remove={() => client.users.edit({ remove: "Avatar" })}
                         defaultPreview={client.user!.generateAvatarURL(
                             { max_side: 256 },
                             true,
@@ -152,8 +148,6 @@ export function Profile() {
                             ? "fetching"
                             : "placeholder"
                     }`,
-                    "",
-                    (intl as any).dictionary as Record<string, unknown>,
                 )}
                 onKeyUp={onKeyUp}
                 onKeyDown={onKeyDown}

src/pages/settings/panes/Sessions.tsx

@@ -50,7 +50,7 @@ export function Sessions() {
             );
             setSessions(data);
         });
-    }, []);
+    }, [client, setSessions, deviceId]);
 
     if (typeof sessions === "undefined") {
         return (
@@ -123,6 +123,7 @@ export function Sessions() {
                 const systemIcon = getSystemIcon(session);
                 return (
                     <div
+                        key={session.id}
                         className={styles.entry}
                         data-active={session.id === deviceId}
                         data-deleting={

src/pages/settings/panes/Sync.tsx

@@ -26,6 +26,7 @@ export function Component(props: Props) {
                 ] as [SyncKeys, string][]
             ).map(([key, title]) => (
                 <Checkbox
+                    key={key}
                     checked={
                         (props.options?.disabled ?? []).indexOf(key) === -1
                     }