feat(react/settings): port override theme fonts

apps/client/src/widgets/react/Column.tsx

@@ -1,13 +1,14 @@
 import type { ComponentChildren } from "preact";
 
 interface ColumnProps {
-    md: number;
+    md?: number;
     children: ComponentChildren;
+    className?: string;
 }
 
-export default function Column({ md, children }: ColumnProps) {
+export default function Column({ md, children, className }: ColumnProps) {
     return (
-        <div className={`col-md-${md}`}>
+        <div className={`col-md-${md ?? 6} ${className ?? ""}`}>
             {children}
         </div>
     )

apps/client/src/widgets/react/hooks.tsx

@@ -5,6 +5,7 @@ import SpacedUpdate from "../../services/spaced_update";
 import { OptionNames } from "@triliumnext/commons";
 import options from "../../services/options";
 import utils, { reloadFrontendApp } from "../../services/utils";
+import { __values } from "tslib";
 
 /**
  * Allows a React component to react to Trilium events (e.g. `entitiesReloaded`). When the desired event is triggered, the handler is invoked with the event parameters.
@@ -93,6 +94,14 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
     ]
 }
 
+export function useTriliumOptionBool(name: OptionNames): [boolean, (newValue: boolean) => Promise<void>] {
+    const [ value, setValue ] = useTriliumOption(name);
+    return [
+        (value === "true"),
+        (newValue) => setValue(newValue ? "true" : "false")
+    ]
+}
+
 /**
  * Generates a unique name via a random alphanumeric string of a fixed length.
  * 

apps/client/src/widgets/type_widgets/options/appearance.tsx

@@ -4,9 +4,10 @@ import { isMobile, reloadFrontendApp } from "../../../services/utils";
 import Column from "../../react/Column";
 import FormRadioGroup from "../../react/FormRadioGroup";
 import FormSelect from "../../react/FormSelect";
-import { useTriliumOption } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
 import server from "../../../services/server";
+import FormCheckbox from "../../react/FormCheckbox";
 
 interface Theme {
     val: string;
@@ -26,6 +27,7 @@ const BUILTIN_THEMES: Theme[] = [
 export default function AppearanceSettings() {
     const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
     const [ theme, setTheme ] = useTriliumOption("theme", true);
+    const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
 
     const [ themes, setThemes ] = useState<Theme[]>([]);
 
@@ -58,10 +60,17 @@ export default function AppearanceSettings() {
             </OptionsSection>
 
             <OptionsSection title={t("theme.title")}>
-                <Column md={6}>
+                <Column>
                     <label>{t("theme.theme_label")}</label>
                     <FormSelect values={themes} currentValue={theme} onChange={setTheme} />
                 </Column>
+
+                <Column className="side-checkbox">
+                    <FormCheckbox
+                        name="override-theme-fonts"
+                        label={t("theme.override_theme_fonts_label")}
+                        currentValue={overrideThemeFonts} onChange={setOverrideThemeFonts} />
+                </Column>
             </OptionsSection>
         </>
     )

apps/client/src/widgets/type_widgets/options/appearance/theme.ts

@@ -1,38 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import server from "../../../../services/server.js";
-import utils from "../../../../services/utils.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <div class="form-group row">
-        <div class="col-md-6 side-checkbox">
-            <label class="form-check tn-checkbox">
-                <input type="checkbox" class="override-theme-fonts form-check-input">
-                ${t("theme.override_theme_fonts_label")}
-            </label>
-        </div>
-    </div>
-</div>
-`;
-
-export default class ThemeOptions extends OptionsWidget {
-
-    private $overrideThemeFonts!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$themeSelect = this.$widget.find(".theme-select");
-        this.$overrideThemeFonts = this.$widget.find(".override-theme-fonts");
-
-
-        this.$overrideThemeFonts.on("change", () => this.updateCheckboxOption("overrideThemeFonts", this.$overrideThemeFonts));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.setCheckboxState(this.$overrideThemeFonts, options.overrideThemeFonts);
-
-        this.$widget.find(`input[name="layout-orientation"][value="${options.layoutOrientation}"]`).prop("checked", "true");
-    }
-}

apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx

@@ -10,7 +10,9 @@ export default function OptionsSection({ title, children }: OptionsSectionProps)
         <div className="options-section">
             <h4>{title}</h4>
 
+            <div className="form-group row">
                 {children}
             </div>
+        </div>
     );
 }