From 0c5a8a24da271cf0a800b5908bc60faecb8d6f5b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 14:40:46 +0300
Subject: [PATCH] refactor(options): create OptionsRowWithToggle

---
 .../widgets/type_widgets/options/advanced.tsx | 15 +++----
 .../options/components/OptionsRow.tsx         | 26 +++++++++++
 .../src/widgets/type_widgets/options/llm.tsx  | 17 ++++---
 .../widgets/type_widgets/options/media.tsx    | 45 +++++++++----------
 .../widgets/type_widgets/options/other.tsx    | 27 ++++-------
 .../type_widgets/options/spellcheck.tsx       | 16 +++----
 6 files changed, 77 insertions(+), 69 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/advanced.tsx b/apps/client/src/widgets/type_widgets/options/advanced.tsx
index 619a1fb514..8f41d4c69f 100644
--- a/apps/client/src/widgets/type_widgets/options/advanced.tsx
+++ b/apps/client/src/widgets/type_widgets/options/advanced.tsx
@@ -8,9 +8,8 @@ import toast from "../../../services/toast";
 import Button from "../../react/Button";
 import Column from "../../react/Column";
 import FormText from "../../react/FormText";
-import FormToggle from "../../react/FormToggle";
 import { useTriliumOptionJson } from "../../react/hooks";
-import OptionsRow from "./components/OptionsRow";
+import { OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 
 export default function AdvancedSettings() {
@@ -201,18 +200,14 @@ function ExperimentalOptions() {
             <FormText>{t("experimental_features.disclaimer")}</FormText>
 
             {filteredFeatures.map((feature) => (
-                <OptionsRow
+                <OptionsRowWithToggle
                     key={feature.id}
                     name={`experimental-${feature.id}`}
                     label={feature.name}
                     description={feature.description}
-                >
-                    <FormToggle
-                        switchOnName="" switchOffName=""
-                        currentValue={enabledFeatures.includes(feature.id)}
-                        onChange={(enabled) => toggleFeature(feature.id, enabled)}
-                    />
-                </OptionsRow>
+                    currentValue={enabledFeatures.includes(feature.id)}
+                    onChange={(enabled) => toggleFeature(feature.id, enabled)}
+                />
             ))}
         </OptionsSection>
     );
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
index 0ff8b737b0..43ff7b5bc1 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
@@ -2,6 +2,7 @@ import "./OptionsRow.css";
 
 import { cloneElement, VNode } from "preact";
 
+import FormToggle from "../../../react/FormToggle";
 import { useUniqueName } from "../../../react/hooks";
 
 interface OptionsRowProps {
@@ -52,3 +53,28 @@ export function OptionsRowLink({ label, description, href }: OptionsRowLinkProps
         </a>
     );
 }
+
+interface OptionsRowWithToggleProps {
+    name: string;
+    label: string;
+    description?: string;
+    currentValue: boolean | null;
+    onChange: (newValue: boolean) => void;
+    disabled?: boolean;
+    helpPage?: string;
+}
+
+export function OptionsRowWithToggle({ name, label, description, currentValue, onChange, disabled, helpPage }: OptionsRowWithToggleProps) {
+    return (
+        <OptionsRow name={name} label={label} description={description}>
+            <FormToggle
+                switchOnName=""
+                switchOffName=""
+                currentValue={currentValue}
+                onChange={onChange}
+                disabled={disabled}
+                helpPage={helpPage}
+            />
+        </OptionsRow>
+    );
+}
diff --git a/apps/client/src/widgets/type_widgets/options/llm.tsx b/apps/client/src/widgets/type_widgets/options/llm.tsx
index 9da9f50ca6..ce709ef742 100644
--- a/apps/client/src/widgets/type_widgets/options/llm.tsx
+++ b/apps/client/src/widgets/type_widgets/options/llm.tsx
@@ -5,9 +5,8 @@ import { isExperimentalFeatureEnabled } from "../../../services/experimental_fea
 import { t } from "../../../services/i18n";
 import ActionButton from "../../react/ActionButton";
 import Button from "../../react/Button";
-import FormToggle from "../../react/FormToggle";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
-import OptionsRow from "./components/OptionsRow";
+import OptionsRow, { OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import AddProviderModal, { type LlmProviderConfig, PROVIDER_TYPES } from "./llm/AddProviderModal";
 
@@ -92,13 +91,13 @@ function McpSettings() {
 
     return (
         <OptionsSection title={t("llm.mcp_title")}>
-            <OptionsRow name="mcp-enabled" label={t("llm.mcp_enabled")} description={t("llm.mcp_enabled_description")}>
-                <FormToggle
-                    switchOnName="" switchOffName=""
-                    currentValue={mcpEnabled}
-                    onChange={setMcpEnabled}
-                />
-            </OptionsRow>
+            <OptionsRowWithToggle
+                name="mcp-enabled"
+                label={t("llm.mcp_enabled")}
+                description={t("llm.mcp_enabled_description")}
+                currentValue={mcpEnabled}
+                onChange={setMcpEnabled}
+            />
 
             {mcpEnabled && (
                 <OptionsRow name="mcp-endpoint" label={t("llm.mcp_endpoint_title")} description={t("llm.mcp_endpoint_description")}>
diff --git a/apps/client/src/widgets/type_widgets/options/media.tsx b/apps/client/src/widgets/type_widgets/options/media.tsx
index ba90385016..a5af9343d0 100644
--- a/apps/client/src/widgets/type_widgets/options/media.tsx
+++ b/apps/client/src/widgets/type_widgets/options/media.tsx
@@ -5,10 +5,9 @@ import server from "../../../services/server";
 import toast from "../../../services/toast";
 import { isElectron } from "../../../services/utils";
 import { FormTextBoxWithUnit } from "../../react/FormTextBox";
-import FormToggle from "../../react/FormToggle";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import Slider from "../../react/Slider";
-import OptionsRow from "./components/OptionsRow";
+import OptionsRow, { OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import RelatedSettings from "./components/RelatedSettings";
 
@@ -29,21 +28,21 @@ function ImageSettings() {
 
     return (
         <OptionsSection title={t("images.images_section_title")}>
-            <OptionsRow name="download-images-automatically" label={t("images.download_images_automatically")} description={t("images.download_images_description")}>
-                <FormToggle
-                    switchOnName="" switchOffName=""
-                    currentValue={downloadImagesAutomatically}
-                    onChange={setDownloadImagesAutomatically}
-                />
-            </OptionsRow>
+            <OptionsRowWithToggle
+                name="download-images-automatically"
+                label={t("images.download_images_automatically")}
+                description={t("images.download_images_description")}
+                currentValue={downloadImagesAutomatically}
+                onChange={setDownloadImagesAutomatically}
+            />
 
-            <OptionsRow name="image-compression-enabled" label={t("images.enable_image_compression")} description={t("images.enable_image_compression_description")}>
-                <FormToggle
-                    switchOnName="" switchOffName=""
-                    currentValue={compressImages}
-                    onChange={setCompressImages}
-                />
-            </OptionsRow>
+            <OptionsRowWithToggle
+                name="image-compression-enabled"
+                label={t("images.enable_image_compression")}
+                description={t("images.enable_image_compression_description")}
+                currentValue={compressImages}
+                onChange={setCompressImages}
+            />
 
             <OptionsRow name="image-max-width-height" label={t("images.max_image_dimensions")} description={t("images.max_image_dimensions_description")}>
                 <FormTextBoxWithUnit
@@ -72,13 +71,13 @@ function OcrSettings() {
     return (
         <>
             <OptionsSection title={t("images.ocr_section_title")}>
-                <OptionsRow name="ocr-auto-process" label={t("images.ocr_auto_process")} description={t("images.ocr_auto_process_description")}>
-                    <FormToggle
-                        switchOnName="" switchOffName=""
-                        currentValue={ocrAutoProcess}
-                        onChange={setOcrAutoProcess}
-                    />
-                </OptionsRow>
+                <OptionsRowWithToggle
+                    name="ocr-auto-process"
+                    label={t("images.ocr_auto_process")}
+                    description={t("images.ocr_auto_process_description")}
+                    currentValue={ocrAutoProcess}
+                    onChange={setOcrAutoProcess}
+                />
 
                 <OptionsRow name="ocr-min-confidence" label={`${t("images.ocr_min_confidence")} (${Math.round(parseFloat(ocrMinConfidence ?? "0.75") * 100)}%)`} description={t("images.ocr_confidence_description")}>
                     <Slider
diff --git a/apps/client/src/widgets/type_widgets/options/other.tsx b/apps/client/src/widgets/type_widgets/options/other.tsx
index b1ccfcfcc0..9b86093a07 100644
--- a/apps/client/src/widgets/type_widgets/options/other.tsx
+++ b/apps/client/src/widgets/type_widgets/options/other.tsx
@@ -14,9 +14,8 @@ import FormGroup from "../../react/FormGroup";
 import FormSelect from "../../react/FormSelect";
 import FormText from "../../react/FormText";
 import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
-import FormToggle from "../../react/FormToggle";
 import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
-import OptionsRow from "./components/OptionsRow";
+import { OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import TimeSelector from "./components/TimeSelector";
 
@@ -45,29 +44,21 @@ function SearchSettings() {
 
     return (
         <OptionsSection title={t("search.title")}>
-            <OptionsRow
+            <OptionsRowWithToggle
                 name="search-fuzzy-matching"
                 label={t("search.fuzzy_matching_label")}
                 description={t("search.fuzzy_matching_description")}
-            >
-                <FormToggle
-                    switchOnName="" switchOffName=""
-                    currentValue={fuzzyEnabled}
-                    onChange={setFuzzyEnabled}
-                />
-            </OptionsRow>
+                currentValue={fuzzyEnabled}
+                onChange={setFuzzyEnabled}
+            />
 
-            <OptionsRow
+            <OptionsRowWithToggle
                 name="search-autocomplete-fuzzy"
                 label={t("search.autocomplete_fuzzy_label")}
                 description={t("search.autocomplete_fuzzy_description")}
-            >
-                <FormToggle
-                    switchOnName="" switchOffName=""
-                    currentValue={autocompleteFuzzy}
-                    onChange={setAutocompleteFuzzy}
-                />
-            </OptionsRow>
+                currentValue={autocompleteFuzzy}
+                onChange={setAutocompleteFuzzy}
+            />
         </OptionsSection>
     );
 }
diff --git a/apps/client/src/widgets/type_widgets/options/spellcheck.tsx b/apps/client/src/widgets/type_widgets/options/spellcheck.tsx
index e91804e3f3..22ec3e8ba7 100644
--- a/apps/client/src/widgets/type_widgets/options/spellcheck.tsx
+++ b/apps/client/src/widgets/type_widgets/options/spellcheck.tsx
@@ -5,11 +5,10 @@ import { t } from "../../../services/i18n";
 import { dynamicRequire, isElectron, restartDesktopApp } from "../../../services/utils";
 import Button from "../../react/Button";
 import FormText from "../../react/FormText";
-import FormToggle from "../../react/FormToggle";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import NoItems from "../../react/NoItems";
 import CheckboxList from "./components/CheckboxList";
-import OptionsRow from "./components/OptionsRow";
+import OptionsRow, { OptionsRowWithToggle } from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 
 export default function SpellcheckSettings() {
@@ -32,13 +31,12 @@ function ElectronSpellcheckSettings() {
             <OptionsSection title={t("spellcheck.title")}>
                 <FormText>{t("spellcheck.restart-required")}</FormText>
 
-                <OptionsRow name="spell-check-enabled" label={t("spellcheck.enable")}>
-                    <FormToggle
-                        switchOnName="" switchOffName=""
-                        currentValue={spellCheckEnabled}
-                        onChange={setSpellCheckEnabled}
-                    />
-                </OptionsRow>
+                <OptionsRowWithToggle
+                    name="spell-check-enabled"
+                    label={t("spellcheck.enable")}
+                    currentValue={spellCheckEnabled}
+                    onChange={setSpellCheckEnabled}
+                />
 
                 <OptionsRow name="restart" centered>
                     <Button