chore(refactor): clean up component folder structure

src/components/settings/account/AccountManagement.tsx

@@ -0,0 +1,64 @@
+import { Block } from "@styled-icons/boxicons-regular";
+import { Trash } from "@styled-icons/boxicons-solid";
+
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import { CategoryButton } from "@revoltchat/ui";
+
+import { modalController } from "../../../context/modals";
+import {
+    LogOutContext,
+    useClient,
+} from "../../../context/revoltjs/RevoltClient";
+
+export default function AccountManagement() {
+    const logOut = useContext(LogOutContext);
+    const client = useClient();
+
+    const callback = (route: "disable" | "delete") => () =>
+        modalController.push({
+            type: "mfa_flow",
+            state: "known",
+            client,
+            callback: ({ token }) =>
+                client.api
+                    .post(`/auth/account/${route}`, undefined, {
+                        headers: {
+                            "X-MFA-Ticket": token,
+                        },
+                    })
+                    .then(() => logOut(true)),
+        });
+
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.account.manage.title" />
+            </h3>
+
+            <h5>
+                <Text id="app.settings.pages.account.manage.description" />
+            </h5>
+            <CategoryButton
+                icon={<Block size={24} color="var(--error)" />}
+                description={
+                    "Disable your account. You won't be able to access it unless you contact support."
+                }
+                action="chevron"
+                onClick={callback("disable")}>
+                <Text id="app.settings.pages.account.manage.disable" />
+            </CategoryButton>
+
+            <CategoryButton
+                icon={<Trash size={24} color="var(--error)" />}
+                description={
+                    "Your account will be queued for deletion, a confirmation email will be sent."
+                }
+                action="chevron"
+                onClick={callback("delete")}>
+                <Text id="app.settings.pages.account.manage.delete" />
+            </CategoryButton>
+        </>
+    );
+}

src/components/settings/account/EditAccount.tsx

@@ -0,0 +1,75 @@
+import { At } from "@styled-icons/boxicons-regular";
+import { Envelope, Key, Pencil } from "@styled-icons/boxicons-solid";
+
+import { Text } from "preact-i18n";
+import { useContext, useEffect, useState } from "preact/hooks";
+
+import {
+    AccountDetail,
+    CategoryButton,
+    Column,
+    HiddenValue,
+} from "@revoltchat/ui";
+
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import {
+    ClientStatus,
+    StatusContext,
+    useClient,
+} from "../../../context/revoltjs/RevoltClient";
+
+export default function EditAccount() {
+    const client = useClient();
+    const status = useContext(StatusContext);
+    const { openScreen } = useIntermediate();
+
+    const [email, setEmail] = useState("...");
+
+    useEffect(() => {
+        if (email === "..." && status === ClientStatus.ONLINE) {
+            client.api
+                .get("/auth/account/")
+                .then((account) => setEmail(account.email));
+        }
+    }, [client, email, status]);
+
+    return (
+        <>
+            <Column group>
+                <AccountDetail user={client.user!} />
+            </Column>
+
+            {(
+                [
+                    ["username", client.user!.username, At],
+                    ["email", email, Envelope],
+                    ["password", "•••••••••", Key],
+                ] as const
+            ).map(([field, value, Icon]) => (
+                <CategoryButton
+                    key={field}
+                    icon={<Icon size={24} />}
+                    description={
+                        field === "email" ? (
+                            <HiddenValue
+                                value={value}
+                                placeholder={"•••••••••••@••••••.•••"}
+                            />
+                        ) : (
+                            value
+                        )
+                    }
+                    account
+                    action={<Pencil size={20} />}
+                    onClick={() =>
+                        openScreen({
+                            id: "modify_account",
+                            field,
+                        })
+                    }>
+                    <Text id={`login.${field}`} />
+                </CategoryButton>
+            ))}
+        </>
+    );
+}

src/components/settings/account/MultiFactorAuthentication.tsx

@@ -0,0 +1,37 @@
+import { Lock } from "@styled-icons/boxicons-solid";
+
+import { Text } from "preact-i18n";
+
+import { CategoryButton } from "@revoltchat/ui";
+
+export default function MultiFactorAuthentication() {
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.account.2fa.title" />
+            </h3>
+            <h5>
+                {/*<Text id="app.settings.pages.account.2fa.description" />*/}
+                Two-factor authentication is currently in-development, see{" "}
+                <a href="https://github.com/revoltchat/revite/issues/675">
+                    tracking issue here
+                </a>
+                .
+            </h5>
+            <CategoryButton
+                icon={<Lock size={24} color="var(--error)" />}
+                description={"Set up 2FA on your account."}
+                disabled
+                action={<Text id="general.unavailable" />}>
+                Set up Two-factor authentication
+            </CategoryButton>
+            {/*<CategoryButton
+                icon={<ListOl size={24} />}
+                description={"View and download your 2FA backup codes."}
+                disabled
+                action="chevron">
+                View my backup codes
+            </CategoryButton>*/}
+        </>
+    );
+}

src/components/settings/appearance/EmojiSelector.tsx

@@ -2,10 +2,10 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import mutantSVG from "./mutant_emoji.svg";
-import notoSVG from "./noto_emoji.svg";
-import openmojiSVG from "./openmoji_emoji.svg";
-import twemojiSVG from "./twemoji_emoji.svg";
+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 { EmojiPack } from "../../common/Emoji";
 

src/components/settings/appearance/Shims.tsx

@@ -14,9 +14,9 @@ import {
     Radio,
 } from "@revoltchat/ui";
 
-import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 
-import { useApplicationState } from "../../mobx/State";
+import { useApplicationState } from "../../../mobx/State";
 
 import {
     Fonts,
@@ -25,15 +25,15 @@ import {
     MonospaceFonts,
     MONOSPACE_FONTS,
     MONOSPACE_FONT_KEYS,
-} from "../../context/Theme";
+} from "../../../context/Theme";
 
-import { EmojiSelector } from "./appearance/EmojiSelector";
-import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
+import { EmojiSelector } from "./EmojiSelector";
+import { ThemeBaseSelector } from "./ThemeBaseSelector";
 
 /**
  * Component providing a way to switch the base theme being used.
  */
-export const ThemeBaseSelectorShim = observer(() => {
+export const ShimThemeBaseSelector = observer(() => {
     const theme = useApplicationState().settings.theme;
     return (
         <ThemeBaseSelector
@@ -49,9 +49,8 @@ export const ThemeBaseSelectorShim = observer(() => {
 /**
  * Component providing a link to the theme shop.
  * Only appears if experiment is enabled.
- * TODO: stabilise
  */
-export const ThemeShopShim = () => {
+export const ShimThemeShop = () => {
     return (
         <Link to="/discover/themes" replace>
             <CategoryButton
@@ -69,7 +68,7 @@ export const ThemeShopShim = () => {
 /**
  * Component providing a way to change current accent colour.
  */
-export const ThemeAccentShim = observer(() => {
+export const ShimThemeAccent = observer(() => {
     const theme = useApplicationState().settings.theme;
     return (
         <>
@@ -90,7 +89,7 @@ export const ThemeAccentShim = observer(() => {
 /**
  * Component providing a way to edit custom CSS.
  */
-export const ThemeCustomCSSShim = observer(() => {
+export const ShimThemeCustomCSS = observer(() => {
     const theme = useApplicationState().settings.theme;
     return (
         <>
@@ -111,7 +110,7 @@ export const ThemeCustomCSSShim = observer(() => {
 /**
  * Component providing a way to switch between compact and normal message view.
  */
-export const DisplayCompactShim = () => {
+export const ShimDisplayCompact = () => {
     // TODO: WIP feature
     return (
         <>
@@ -146,7 +145,7 @@ export const DisplayCompactShim = () => {
 /**
  * Component providing a way to change primary text font.
  */
-export const DisplayFontShim = observer(() => {
+export const ShimDisplayFont = observer(() => {
     const theme = useApplicationState().settings.theme;
     return (
         <>
@@ -169,7 +168,7 @@ export const DisplayFontShim = observer(() => {
 /**
  * Component providing a way to change secondary, monospace text font.
  */
-export const DisplayMonospaceFontShim = observer(() => {
+export const ShimDisplayMonospaceFont = observer(() => {
     const theme = useApplicationState().settings.theme;
     return (
         <>
@@ -199,7 +198,7 @@ export const DisplayMonospaceFontShim = observer(() => {
 /**
  * Component providing a way to toggle font ligatures.
  */
-export const DisplayLigaturesShim = observer(() => {
+export const ShimDisplayLigatures = observer(() => {
     const settings = useApplicationState().settings;
     if (settings.theme.getFont() !== "Inter") return null;
 
@@ -220,7 +219,7 @@ export const DisplayLigaturesShim = observer(() => {
 /**
  * Component providing a way to toggle showing the send button on desktop.
  */
-export const ShowSendButtonShim = observer(() => {
+export const ShimShowSendButton = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
@@ -240,7 +239,7 @@ export const ShowSendButtonShim = observer(() => {
 /**
  * Component providing a way to toggle seasonal themes.
  */
-export const DisplaySeasonalShim = observer(() => {
+export const ShimDisplaySeasonal = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
@@ -260,7 +259,7 @@ export const DisplaySeasonalShim = observer(() => {
 /**
  * Component providing a way to toggle transparency effects.
  */
-export const DisplayTransparencyShim = observer(() => {
+export const ShimDisplayTransparency = observer(() => {
     const settings = useApplicationState().settings;
 
     return (
@@ -280,7 +279,7 @@ export const DisplayTransparencyShim = observer(() => {
 /**
  * Component providing a way to change emoji pack.
  */
-export const DisplayEmojiShim = observer(() => {
+export const ShimDisplayEmoji = observer(() => {
     const settings = useApplicationState().settings;
     return (
         <EmojiSelector

src/components/settings/appearance/ThemeBaseSelector.tsx

@@ -2,8 +2,8 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import darkSVG from "./dark.svg";
-import lightSVG from "./light.svg";
+import darkSVG from "./assets/dark.svg";
+import lightSVG from "./assets/light.svg";
 
 const List = styled.div`
     gap: 8px;