Added functionality to synchronize zoom across all tabs and communities.

Author: coxtrent

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

@@ -5,6 +5,7 @@ export type MainMessage = {
   "clear-app-settings": () => void;
   "configure-spell-checker": () => void;
   "fetch-user-agent": () => string;
+  'zoom-other-tabs': (zoomLevel: number) => void;
   "focus-app": () => void;
   "focus-this-webview": () => void;
   "new-clipboard-key": () => {key: Uint8Array; sig: Uint8Array};
@@ -18,6 +19,7 @@ export type MainMessage = {
   "toggle-app": () => void;
   "toggle-badge-option": (newValue: boolean) => void;
   "toggle-menubar": (showMenubar: boolean) => void;
+  "toggle-one-zoom": (newValue: boolean) => void;
   toggleAutoLauncher: (AutoLaunchValue: boolean) => void;
   "unread-count": (unreadCount: number) => void;
   "update-badge": (messageCount: number) => void;

app/main/index.ts

@@ -31,6 +31,8 @@ import {sentryInit} from "./sentry.js";
 import {setAutoLaunch} from "./startup.js";
 import {ipcMain, send} from "./typed-ipc-main.js";
 
+
+
 import "gatemaker/electron-setup"; // eslint-disable-line import/no-unassigned-import
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -154,7 +156,6 @@ function createMainWindow(): BrowserWindow {
     app.quit();
     return;
   }
-
   await app.whenReady();
 
   if (process.env.GDK_BACKEND !== GDK_BACKEND) {
@@ -259,6 +260,7 @@ function createMainWindow(): BrowserWindow {
   AppMenu.setMenu({
     tabs: [],
   });
+
   mainWindow = createMainWindow();
 
   // Auto-hide menu bar on Windows + Linux
@@ -278,6 +280,13 @@ function createMainWindow(): BrowserWindow {
     }
   });
 
+  ipcMain.on('zoom-other-tabs', (event, zoomLevel) => {
+      BrowserWindow.getAllWindows().forEach((window) => {
+          window.webContents.setZoomLevel(zoomLevel);
+      });
+  });
+
+
   ipcMain.on("fetch-user-agent", (event) => {
     event.returnValue = session
       .fromPartition("persist:webviewsession")

app/renderer/js/components/webview.ts

@@ -1,6 +1,7 @@
 import type {WebContents} from "electron/main";
 import fs from "node:fs";
 import process from "node:process";
+//import { ipcRenderer } from 'electron';
 
 import * as remote from "@electron/remote";
 import {app, dialog} from "@electron/remote";
@@ -158,16 +159,28 @@ export default class WebView {
     this.show();
   }
 
+  private syncZooms(): void {
+    // Sync zoom level with other tabs if useOneZoom is enabled
+    const useOneZoom = ConfigUtil.getConfigItem("useOneZoom", true);
+    if(useOneZoom) {
+      const zoomLevel = this.getWebContents().zoomLevel;
+      ipcRenderer.send('zoom-other-tabs', zoomLevel);
+    }
+  }
+
   zoomIn(): void {
     this.getWebContents().zoomLevel += 0.5;
+    this.syncZooms();
   }
 
   zoomOut(): void {
     this.getWebContents().zoomLevel -= 0.5;
+    this.syncZooms();
   }
 
   zoomActualSize(): void {
     this.getWebContents().zoomLevel = 0;
+    this.syncZooms();
   }
 
   logOut(): void {

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,

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

@@ -132,6 +132,11 @@ 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 server tabs")}</div>
+          <div class="setting-control"></div>
+        </div>
         <div
           class="setting-row"
           id="spellcheck-langs"
@@ -213,6 +218,7 @@ export function initGeneralSection({$root}: GeneralSectionProperties): void {
   `.html;
 
   updateTrayOption();
+  useOneZoom();
   updateBadgeOption();
   updateSilentOption();
   autoUpdateOption();
@@ -263,6 +269,19 @@ 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();
+      },
+    })
+    return;
+  }
+
   function updateMenubarOption(): void {
     generateSettingOption({
       $element: $root.querySelector("#menubar-option .setting-control")!,