From 13e9fcbfba04258e665553967190d5e2bd15f01c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 22 Sep 2025 20:19:00 +0300
Subject: [PATCH] chore(global_menu): indicate external changes to zoom

---
 .../client/src/widgets/buttons/global_menu.tsx | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/buttons/global_menu.tsx b/apps/client/src/widgets/buttons/global_menu.tsx
index 0e0076725..5c442cb76 100644
--- a/apps/client/src/widgets/buttons/global_menu.tsx
+++ b/apps/client/src/widgets/buttons/global_menu.tsx
@@ -1,6 +1,6 @@
 import Dropdown from "../react/Dropdown";
 import "./global_menu.css";
-import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool } from "../react/hooks";
+import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
 import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
@@ -142,18 +142,7 @@ function VerticalLayoutIcon() {
 }
 
 function ZoomControls({ parentComponent }: { parentComponent?: Component | null }) {
-    const [ zoomLevel, setZoomLevel ] = useState(100);
-
-    function updateZoomState() {
-        if (!isElectron()) {
-            return;
-        }
-
-        const zoomFactor = dynamicRequire("electron").webFrame.getZoomFactor();
-        setZoomLevel(Math.round(zoomFactor * 100));
-    }
-
-    useEffect(updateZoomState, []);
+    const [ zoomLevel ] = useTriliumOption("zoomFactor");
 
     function ZoomControlButton({ command, title, icon, children, dismiss }: { command: KeyboardActionNames, title: string, icon?: string, children?: ComponentChildren, dismiss?: boolean }) {
         const linkRef = useRef<HTMLAnchorElement>(null);
@@ -167,7 +156,6 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
                 tabIndex={0}
                 onClick={(e) => {
                     parentComponent?.triggerCommand(command);
-                    setTimeout(() => updateZoomState(), 300);
                     if (!dismiss) {
                         e.stopPropagation();
                     }
@@ -190,7 +178,7 @@ function ZoomControls({ parentComponent }: { parentComponent?: Component | null
                     <ZoomControlButton command="toggleFullscreen" title={t("global_menu.toggle_fullscreen")} icon="bx bx-expand-alt" dismiss />
                     &nbsp;
                     <ZoomControlButton command="zoomOut" title={t("global_menu.zoom_out")} icon="bx bx-minus" />
-                    <ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{zoomLevel}{t("units.percentage")}</ZoomControlButton>
+                    <ZoomControlButton command="zoomReset" title={t("global_menu.reset_zoom_level")}>{(parseFloat(zoomLevel) * 100).toFixed(0)}{t("units.percentage")}</ZoomControlButton>
                     <ZoomControlButton command="zoomIn" title={t("global_menu.zoom_in")} icon="bx bx-plus" />
                 </div>
             </>