From 4787f644a6c14670ae144d51bb1007d9cdb3a413 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 10 Apr 2026 23:38:29 +0300
Subject: [PATCH] feat(options): friendlier zoom factor selection (closes
 #5444)

---
 .../type_widgets/options/appearance.tsx       | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 94fc1f1fbd..dc4a3bdc26 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -3,6 +3,7 @@ import "./appearance.css";
 import { FontFamily, OptionNames } from "@triliumnext/commons";
 import { useEffect, useState } from "preact/hooks";
 
+import zoomService from "../../../components/zoom";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import { isElectron, isMobile, reloadFrontendApp, restartDesktopApp } from "../../../services/utils";
@@ -14,9 +15,10 @@ import FormGroup from "../../react/FormGroup";
 import FormRadioGroup from "../../react/FormRadioGroup";
 import FormSelect, { FormSelectWithGroups } from "../../react/FormSelect";
 import FormText from "../../react/FormText";
-import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import Icon from "../../react/Icon";
+import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import PlatformIndicator from "./components/PlatformIndicator";
 import RadioWithIllustration from "./components/RadioWithIllustration";
@@ -333,20 +335,23 @@ function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, font
 }
 
 function ElectronIntegration() {
-    const [ zoomFactor, setZoomFactor ] = useTriliumOption("zoomFactor");
+    const [ zoomFactor ] = useTriliumOption("zoomFactor");
     const [ nativeTitleBarVisible, setNativeTitleBarVisible ] = useTriliumOptionBool("nativeTitleBarVisible");
     const [ backgroundEffects, setBackgroundEffects ] = useTriliumOptionBool("backgroundEffects");
 
+    const zoomPercentage = Math.round(parseFloat(zoomFactor || "1") * 100);
+
     return (
         <OptionsSection title={t("electron_integration.desktop-application")}>
-            <FormGroup name="zoom-factor" label={t("electron_integration.zoom-factor")} description={t("zoom_factor.description")}>
-                <FormTextBox
+            <OptionsRow name="zoom-factor" label={t("electron_integration.zoom-factor")} description={t("zoom_factor.description")}>
+                <FormTextBoxWithUnit
                     type="number"
-                    min="0.3" max="2.0" step="0.1"
-                    currentValue={zoomFactor} onChange={setZoomFactor}
+                    min={50} max={200} step={10}
+                    currentValue={String(zoomPercentage)}
+                    onChange={(v) => zoomService.setZoomFactorAndSave(parseInt(v, 10) / 100)}
+                    unit={t("units.percentage")}
                 />
-            </FormGroup>
-            <hr/>
+            </OptionsRow>
 
             <FormGroup name="native-title-bar" description={t("electron_integration.native-title-bar-description")}>
                 <FormCheckbox