feat(react/settings): port max content width

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

@@ -9,6 +9,15 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
 }
 
 export default function FormTextBox({ inputRef, className, type, currentValue, onChange, ...rest}: FormTextBoxProps) {
+    if (type === "number" && currentValue) {
+        const { min, max } = rest;
+        if (min && currentValue < min) {
+            currentValue = String(min);
+        } else if (max && currentValue > max) {
+            currentValue = String(max);
+        }
+    }
+
     return (
         <input
             ref={inputRef}

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

@@ -14,6 +14,8 @@ import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import FormText from "../../react/FormText";
 import Button from "../../react/Button";
 
+const MIN_CONTENT_WIDTH = 640;
+
 interface Theme {
     val: string;
     title: string;
@@ -85,6 +87,7 @@ export default function AppearanceSettings() {
             <ApplicationTheme />
             {overrideThemeFonts === "true" && <Fonts />}
             {isElectron() && <ElectronIntegration /> }
+            <MaxContentWidth />
         </div>
     )
 }
@@ -159,7 +162,7 @@ function Fonts() {
             <FormText>{t("fonts.not_all_fonts_available")}</FormText>
 
             <p>
-                {t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" />
+                {t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" onClick={reloadFrontendApp} />
             </p>
         </OptionsSection>
     );
@@ -230,3 +233,28 @@ function ElectronIntegration() {
         </OptionsSection>
     )
 }
+
+function MaxContentWidth() {
+    const [ maxContentWidth, setMaxContentWidth ] = useTriliumOption("maxContentWidth");
+
+    return (
+        <OptionsSection title={t("max_content_width.title")}>
+            <FormText>{t("max_content_width.default_description")}</FormText>
+
+            <Column md={6}>
+                <FormGroup label={t("max_content_width.max_width_label")}>
+                    <FormTextBoxWithUnit
+                        name="max-content-width"
+                        type="number" min={MIN_CONTENT_WIDTH} step="10" 
+                        currentValue={maxContentWidth} onChange={setMaxContentWidth}
+                        unit={t("max_content_width.max_width_unit")}
+                    />
+                </FormGroup>
+            </Column>
+
+            <p>
+                {t("max_content_width.apply_changes_description")} <Button text={t("max_content_width.reload_button")} size="micro" onClick={reloadFrontendApp} />
+            </p>
+        </OptionsSection>
+    )
+}

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

@@ -1,47 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import utils from "../../../../services/utils.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const MIN_VALUE = 640;
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("max_content_width.title")}</h4>
-
-    <p class="form-text">${t("max_content_width.default_description")}</p>
-
-    <div class="form-group row">
-        <div class="col-md-6">
-            <label for="max-content-width">${t("max_content_width.max_width_label")}</label>
-            <label class="input-group tn-number-unit-pair">
-                <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
-                <span class="input-group-text">${t("max_content_width.max_width_unit")}</span>
-            </label>
-        </div>
-    </div>
-
-    <p>
-        ${t("max_content_width.apply_changes_description")}
-        <button class="btn btn-secondary btn-micro reload-frontend-button">${t("max_content_width.reload_button")}</button>
-    </p>
-</div>`;
-
-export default class MaxContentWidthOptions extends OptionsWidget {
-
-    private $maxContentWidth!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$maxContentWidth = this.$widget.find(".max-content-width");
-
-        this.$maxContentWidth.on("change", async () => this.updateOption("maxContentWidth", String(this.$maxContentWidth.val())));
-
-        this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp(t("max_content_width.reload_description")));
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$maxContentWidth.val(Math.max(MIN_VALUE, parseInt(options.maxContentWidth, 10)));
-    }
-}