feat(refactor): partially rewrite appearance settings

src/components/settings/appearance/AdvancedOptions.tsx

@@ -0,0 +1,63 @@
+import { observer } from "mobx-react-lite";
+
+import { Text } from "preact-i18n";
+
+import { ObservedInputElement } from "@revoltchat/ui";
+
+import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import {
+    MonospaceFonts,
+    MONOSPACE_FONTS,
+    MONOSPACE_FONT_KEYS,
+} from "../../../context/Theme";
+
+/**
+ * ! LEGACY
+ * Component providing a way to edit custom CSS.
+ */
+export const ShimThemeCustomCSS = observer(() => {
+    const theme = useApplicationState().settings.theme;
+    return (
+        <>
+            <h3>
+                <Text id="app.settings.pages.appearance.custom_css" />
+            </h3>
+            <TextAreaAutoSize
+                maxRows={20}
+                minHeight={480}
+                code
+                value={theme.getCSS() ?? ""}
+                onChange={(ev) => theme.setCSS(ev.currentTarget.value)}
+            />
+        </>
+    );
+});
+
+export default function AdvancedOptions() {
+    const settings = useApplicationState().settings;
+    return (
+        <>
+            {/** Combo box of available monospaced fonts */}
+            <h3>
+                <Text id="app.settings.pages.appearance.mono_font" />
+            </h3>
+            <ObservedInputElement
+                type="combo"
+                value={() => settings.theme.getMonospaceFont()}
+                onChange={(value) =>
+                    settings.theme.setMonospaceFont(value as MonospaceFonts)
+                }
+                options={MONOSPACE_FONT_KEYS.map((value) => ({
+                    value,
+                    name: MONOSPACE_FONTS[value as keyof typeof MONOSPACE_FONTS]
+                        .name,
+                }))}
+            />
+            {/** Custom CSS */}
+            <ShimThemeCustomCSS />
+        </>
+    );
+}