From efae109e35215c731ced2da3442506489f2e2e9a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 9 Dec 2024 22:51:27 +0200
Subject: [PATCH] feat(settings): merge zoom factor with desktop app settings

---
 .../widgets/type_widgets/content_widget.js    |  6 ++--
 .../appearance/electron_integration.js        | 14 ++++++++++
 .../options/appearance/zoom_factor.js         | 28 -------------------
 src/public/translations/en/translation.json   |  3 +-
 4 files changed, 18 insertions(+), 33 deletions(-)
 delete mode 100644 src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js

diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js
index 37aaa700b..e8c5e4829 100644
--- a/src/public/app/widgets/type_widgets/content_widget.js
+++ b/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 NativeTitleBarOptions from "./options/appearance/electron_integration.js";
+import ElectronIntegrationOptions 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,
-        NativeTitleBarOptions,
+        ElectronIntegrationOptions,
         MaxContentWidthOptions,
         RibbonOptions
     ],
diff --git a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js b/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
index d44e438b9..82accce0c 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/electron_integration.js
+++ b/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);
     }
diff --git a/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js b/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
deleted file mode 100644
index 742b5c041..000000000
--- a/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
+++ /dev/null
@@ -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);
-    }
-}
diff --git a/src/public/translations/en/translation.json b/src/public/translations/en/translation.json
index f94c83d34..23dbf00f6 100644
--- a/src/public/translations/en/translation.json
+++ b/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"
   }
 }