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() {
{t("experimental_features.disclaimer")}
{filteredFeatures.map((feature) => (
-
- toggleFeature(feature.id, enabled)}
- />
-
+ currentValue={enabledFeatures.includes(feature.id)}
+ onChange={(enabled) => toggleFeature(feature.id, enabled)}
+ />
))}
);
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
);
}
+
+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 (
+
+
+
+ );
+}
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 (
-
-
-
+
{mcpEnabled && (
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 (
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+ currentValue={fuzzyEnabled}
+ onChange={setFuzzyEnabled}
+ />
-
-
-
+ currentValue={autocompleteFuzzy}
+ onChange={setAutocompleteFuzzy}
+ />
);
}
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() {
{t("spellcheck.restart-required")}
-
-
-
+