From a62a7e351e186c27b2fae3282533abeab0be693a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 17:23:25 +0300
Subject: [PATCH] feat(options/appearance): use toggles everywhere

---
 .../src/translations/en/translation.json      | 10 +++---
 .../type_widgets/options/appearance.tsx       | 33 ++++++++++++-------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index d24a6c6c83..573ed5a69d 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1248,11 +1248,11 @@
   },
   "ui-performance": {
     "title": "Performance",
-    "enable-motion": "Enable transitions and animations",
-    "enable-shadows": "Enable shadows",
-    "enable-backdrop-effects": "Enable background effects for menus, popups and panels",
-    "enable-smooth-scroll": "Enable smooth scrolling",
-    "app-restart-required": "(a restart of the application is required for the change to take effect)"
+    "enable-motion": "Transitions and animations",
+    "enable-shadows": "Shadows",
+    "enable-backdrop-effects": "Background effects for menus, popups and panels",
+    "enable-smooth-scroll": "Smooth scrolling",
+    "app-restart-required": "Requires app restart"
   },
   "zoom_factor": {
     "title": "Zoom Factor (desktop build only)",
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index ccf8b142af..3be65ba14e 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -546,19 +546,25 @@ function Performance() {
     const [ backdropEffectsEnabled, setBackdropEffectsEnabled ] = useTriliumOptionBool("backdropEffectsEnabled");
 
     return <OptionsSection title={t("ui-performance.title")}>
-        <FormCheckbox
+        <OptionsRowWithToggle
+            name="motion-enabled"
             label={t("ui-performance.enable-motion")}
-            currentValue={motionEnabled} onChange={setMotionEnabled}
+            currentValue={motionEnabled}
+            onChange={setMotionEnabled}
         />
 
-        <FormCheckbox
+        <OptionsRowWithToggle
+            name="shadows-enabled"
             label={t("ui-performance.enable-shadows")}
-            currentValue={shadowsEnabled} onChange={setShadowsEnabled}
+            currentValue={shadowsEnabled}
+            onChange={setShadowsEnabled}
         />
 
-        {!isMobile() && <FormCheckbox
+        {!isMobile() && <OptionsRowWithToggle
+            name="backdrop-effects-enabled"
             label={t("ui-performance.enable-backdrop-effects")}
-            currentValue={backdropEffectsEnabled} onChange={setBackdropEffectsEnabled}
+            currentValue={backdropEffectsEnabled}
+            onChange={setBackdropEffectsEnabled}
         />}
 
         {isElectron() && <SmoothScrollEnabledOption />}
@@ -569,9 +575,12 @@ function Performance() {
 function SmoothScrollEnabledOption() {
     const [ smoothScrollEnabled, setSmoothScrollEnabled ] = useTriliumOptionBool("smoothScrollEnabled");
 
-    return <FormCheckbox
-        label={`${t("ui-performance.enable-smooth-scroll")} ${t("ui-performance.app-restart-required")}`}
-        currentValue={smoothScrollEnabled} onChange={setSmoothScrollEnabled}
+    return <OptionsRowWithToggle
+        name="smooth-scroll-enabled"
+        label={t("ui-performance.enable-smooth-scroll")}
+        description={t("ui-performance.app-restart-required")}
+        currentValue={smoothScrollEnabled}
+        onChange={setSmoothScrollEnabled}
     />;
 }
 
@@ -605,9 +614,11 @@ function RibbonOptions() {
 
     return (
         <OptionsSection title={t('ribbon.widgets')}>
-            <FormCheckbox
+            <OptionsRowWithToggle
+                name="edited-notes-open-in-ribbon"
                 label={t('ribbon.edited_notes_message')}
-                currentValue={editedNotesOpenInRibbon} onChange={setEditedNotesOpenInRibbon}
+                currentValue={editedNotesOpenInRibbon}
+                onChange={setEditedNotesOpenInRibbon}
             />
         </OptionsSection>
     );