Feature Extension Re: #1360: Option to set default overall zoom for all servers

app/common/config-schemata.ts

@@ -12,6 +12,7 @@ export const configSchemata = {
   autoHideMenubar: z.boolean(),
   autoUpdate: z.boolean(),
   badgeOption: z.boolean(),
+  useOneZoom: z.boolean(),
   betaUpdate: z.boolean(),
   // eslint-disable-next-line @typescript-eslint/naming-convention
   customCSS: z.string().or(z.literal(false)).nullable(),

app/common/typed-ipc.ts

@@ -15,6 +15,7 @@ export type MainMessage = {
   "reload-full-app": () => void;
   "save-last-tab": (index: number) => void;
   "switch-server-tab": (index: number) => void;
+  "sync-zooms": () => void;
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
   "toggle-menubar": (showMenubar: boolean) => void;
@@ -64,6 +65,7 @@ export type RendererMessage = {
   "show-keyboard-shortcuts": () => void;
   "show-notification-settings": () => void;
   "switch-server-tab": (index: number) => void;
+  "sync-zooms": () => void;
   "tab-devtools": () => void;
   "toggle-autohide-menubar": (
     autoHideMenubar: boolean,

app/main/index.ts

@@ -259,6 +259,7 @@ function createMainWindow(): BrowserWindow {
   AppMenu.setMenu({
     tabs: [],
   });
+
   mainWindow = createMainWindow();
 
   // Auto-hide menu bar on Windows + Linux

app/renderer/js/components/webview.ts

@@ -158,6 +158,14 @@ export default class WebView {
     this.show();
   }
 
+  getZoomFactor(): number {
+    return this.getWebContents().getZoomFactor();
+  }
+
+  setZoomFactor(value: number): void {
+    this.getWebContents().setZoomFactor(value);
+  }
+
   zoomIn(): void {
     this.getWebContents().zoomLevel += 0.5;
   }

app/renderer/js/main.ts

@@ -176,6 +176,7 @@ export class ServerManagerView {
     // Default settings which should be respected
     const settingOptions: Partial<Config> = {
       autoHideMenubar: false,
+      useOneZoom: true,
       trayIcon: true,
       useManualProxy: false,
       useSystemProxy: false,
@@ -886,18 +887,21 @@ export class ServerManagerView {
         "zoomIn",
         (webview) => {
           webview.zoomIn();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
         "zoomOut",
         (webview) => {
           webview.zoomOut();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
         "zoomActualSize",
         (webview) => {
           webview.zoomActualSize();
+          this.syncZooms(webview.getZoomFactor());
         },
       ],
       [
@@ -1084,6 +1088,10 @@ export class ServerManagerView {
       },
     );
 
+    ipcRenderer.on("sync-zooms", () => {
+      this.syncZooms();
+    });
+
     ipcRenderer.on("enter-fullscreen", () => {
       this.$fullscreenPopup.classList.add("show");
       this.$fullscreenPopup.classList.remove("hidden");
@@ -1176,6 +1184,23 @@ export class ServerManagerView {
       await dingSound.play();
     });
   }
+
+  private syncZooms(value = 1): void {
+    const shouldUseOneZoom = ConfigUtil.getConfigItem("useOneZoom", true);
+    if (shouldUseOneZoom) {
+      for (const tab of this.tabs) {
+        if (tab instanceof ServerTab) {
+          tab.webview
+            .then((webv) => {
+              webv.setZoomFactor(value);
+            })
+            .catch((error) => {
+              console.error("Error syncing zoom factors:", error);
+            });
+        }
+      }
+    }
+  }
 }
 
 window.addEventListener("load", async () => {

app/renderer/js/pages/preference/general-section.ts

@@ -126,6 +126,12 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
           </div>
           <div class="setting-control"></div>
         </div>
+        <div class="setting-row" id="one-zoom-option">
+          <div class="setting-description">
+            ${t.__("Use one zoom for all organization tabs")}
+          </div>
+          <div class="setting-control"></div>
+        </div>
         <div class="setting-row" id="enable-spellchecker-option">
           <div class="setting-description">
             ${t.__("Enable spellchecker (requires restart)")}
@@ -213,6 +219,7 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
   `.html;
 
   updateTrayOption();
+  useOneZoom();
   updateBadgeOption();
   updateSilentOption();
   autoUpdateOption();
@@ -263,6 +270,21 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
     });
   }
 
+  function useOneZoom(): void {
+    generateSettingOption({
+      $element: $root.querySelector("#one-zoom-option .setting-control")!,
+      value: ConfigUtil.getConfigItem("useOneZoom", false),
+      clickHandler() {
+        const newValue = !ConfigUtil.getConfigItem("useOneZoom", false);
+        ConfigUtil.setConfigItem("useOneZoom", newValue);
+        useOneZoom();
+        if (newValue) {
+          ipcRenderer.send("sync-zooms");
+        }
+      },
+    });
+  }
+
   function updateMenubarOption(): void {
     generateSettingOption({
       $element: $root.querySelector("#menubar-option .setting-control")!,