feat(settings): merge zoom factor with desktop app settings

src/public/app/widgets/type_widgets/content_widget.js

@@ -1,6 +1,5 @@
 import TypeWidget from "./type_widget.js";
-import ZoomFactorOptions from "./options/appearance/zoom_factor.js";
+import ElectronIntegrationOptions from "./options/appearance/electron_integration.js";
-import NativeTitleBarOptions from "./options/appearance/electron_integration.js";
 import ThemeOptions from "./options/appearance/theme.js";
 import FontsOptions from "./options/appearance/fonts.js";
 import MaxContentWidthOptions from "./options/appearance/max_content_width.js";
@@ -62,8 +61,7 @@ const CONTENT_WIDGETS = {
         ThemeOptions,
         FontsOptions,
         CodeBlockOptions,
-        ZoomFactorOptions,
+        ElectronIntegrationOptions,
-        NativeTitleBarOptions,
         MaxContentWidthOptions,
         RibbonOptions
     ],

src/public/app/widgets/type_widgets/options/appearance/electron_integration.js

@@ -6,6 +6,15 @@ const TPL = `
 <div class="options-section">    
     <h4>${t("electron_integration.desktop-application")}</h4>
 
+    <div class="form-group row">
+        <div class="col-12">
+            <label>${t("electron_integration.zoom-factor")}</label>
+            <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>            
+            <p>${t("zoom_factor.description")}</p>
+        </div>
+    </div>
+    <hr />
+
     <div class="side-checkbox">
         <label class="form-check">
             <input type="checkbox" class="native-title-bar form-check-input" />
@@ -29,6 +38,10 @@ const TPL = `
 export default class ElectronIntegrationOptions extends OptionsWidget {
     doRender() {
         this.$widget = $(TPL);
+
+        this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select");
+        this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
+
         this.$nativeTitleBar = this.$widget.find("input.native-title-bar");
         this.$nativeTitleBar.on("change", () => this.updateCheckboxOption("nativeTitleBarVisible", this.$nativeTitleBar));
 
@@ -48,6 +61,7 @@ export default class ElectronIntegrationOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options) {
+        this.$zoomFactorSelect.val(options.zoomFactor);
         this.setCheckboxState(this.$nativeTitleBar, options.nativeTitleBarVisible);
         this.setCheckboxState(this.$backgroundEffects, options.backgroundEffects);
     }

src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js

@@ -1,28 +0,0 @@
-import appContext from "../../../../components/app_context.js";
-import OptionsWidget from "../options_widget.js";
-import utils from "../../../../services/utils.js";
-import { t } from "../../../../services/i18n.js";
-
-const TPL = `
-<div class="options-section">
-    <h4>${t("zoom_factor.title")}</h4>
-
-    <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
-    <p>${t("zoom_factor.description")}</p>
-</div>`;
-
-export default class ZoomFactorOptions extends OptionsWidget {
-    isEnabled() {
-        return super.isEnabled() && utils.isElectron();
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$zoomFactorSelect = this.$widget.find(".zoom-factor-select");
-        this.$zoomFactorSelect.on('change', () => { appContext.triggerCommand('setZoomFactorAndSave', {zoomFactor: this.$zoomFactorSelect.val()}); });
-    }
-
-    async optionsLoaded(options) {
-        this.$zoomFactorSelect.val(options.zoomFactor);
-    }
-}

src/public/translations/en/translation.json

@@ -1581,6 +1581,7 @@
     "native-title-bar-description": "For Windows and macOS, keeping the native title bar off makes the application look more compact. On Linux, keeping the native title bar on integrates better with the rest of the system.",
     "background-effects": "Enable background effects (Windows 11 only)",
     "background-effects-description": "The Mica effect adds a blurred, stylish background to app windows, creating depth and a modern look.",
-    "restart-app-button": "Restart the application to view the changes"
+    "restart-app-button": "Restart the application to view the changes",
+    "zoom-factor": "Zoom factor"
   }
 }