From 0f605ba99491479e6d2cc8cddce64e4a1388a201 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 17:45:23 +0300
Subject: [PATCH] feat(options/appearance): improve desktop-specific options

---
 .../type_widgets/options/appearance.tsx       | 41 +++++++++----------
 .../options/components/OptionsRow.tsx         |  6 +--
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 2a2cfdd390..c375b05594 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -10,10 +10,7 @@ import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import { isElectron, isMobile, reloadFrontendApp, restartDesktopApp } from "../../../services/utils";
 import { VerticalLayoutIcon } from "../../buttons/global_menu";
-import Button from "../../react/Button";
 import Dropdown from "../../react/Dropdown";
-import FormCheckbox from "../../react/FormCheckbox";
-import FormGroup from "../../react/FormGroup";
 import FormList, { FormListHeader, FormListItem } from "../../react/FormList";
 import { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
@@ -554,26 +551,28 @@ function ElectronIntegration() {
                 />
             </OptionsRow>
 
-            <FormGroup name="native-title-bar" description={t("electron_integration.native-title-bar-description")}>
-                <FormCheckbox
-                    label={t("electron_integration.native-title-bar")}
-                    currentValue={nativeTitleBarVisible} onChange={setNativeTitleBarVisible}
-                />
-            </FormGroup>
+            <OptionsRowWithToggle
+                name="native-title-bar"
+                label={t("electron_integration.native-title-bar")}
+                description={t("electron_integration.native-title-bar-description")}
+                currentValue={nativeTitleBarVisible}
+                onChange={setNativeTitleBarVisible}
+            />
 
-            <FormGroup name="background-effects" description={t("electron_integration.background-effects-description")}>
-                <FormCheckbox
-                    label={<>
-                        {t("electron_integration.background-effects")}
-                        {" "}
-                        <PlatformIndicator windows="11" mac />
-                    </>}
-                    currentValue={backgroundEffects} onChange={setBackgroundEffects}
-                    disabled={nativeTitleBarVisible}
-                />
-            </FormGroup>
+            <OptionsRowWithToggle
+                name="background-effects"
+                label={<>{t("electron_integration.background-effects")} <PlatformIndicator windows="11" mac /></>}
+                description={t("electron_integration.background-effects-description")}
+                currentValue={backgroundEffects}
+                onChange={setBackgroundEffects}
+                disabled={nativeTitleBarVisible}
+            />
 
-            <Button text={t("electron_integration.restart-app-button")} onClick={restartDesktopApp} />
+            <OptionsRowWithButton
+                label={t("electron_integration.restart-app-button")}
+                icon="bx bx-refresh"
+                onClick={restartDesktopApp}
+            />
         </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 3968c96259..5f5107c214 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
@@ -7,7 +7,7 @@ import { useUniqueName } from "../../../react/hooks";
 
 interface OptionsRowProps {
     name: string;
-    label?: string;
+    label?: ComponentChildren;
     description?: ComponentChildren;
     children: VNode;
     centered?: boolean;
@@ -56,8 +56,8 @@ export function OptionsRowLink({ label, description, href }: OptionsRowLinkProps
 
 interface OptionsRowWithToggleProps {
     name: string;
-    label: string;
-    description?: string;
+    label: ComponentChildren;
+    description?: ComponentChildren;
     currentValue: boolean | null;
     onChange: (newValue: boolean) => void;
     disabled?: boolean;