feat(desktop): add auto-zoom scaling for high-DPI displays

Auto-detect display resolution and scale the UI proportionally so the
app is usable on 4K/1440p monitors without affecting 1080p users.

- Compute zoom factor from the display's DIP short edge relative to
  1080p, snapped to 0.25 increments (max 3.0x)
- Apply zoom on window creation, display change, move/resize across
  monitors, unmaximize, and leave-fullscreen
- Clamp window bounds to the display work area after zoom changes
- Scale minimum window size with zoom, capped to the work area
- Replace built-in viewMenu with custom View menu supporting
  Ctrl+=/Ctrl+Plus (zoom in), Ctrl+- (zoom out), Ctrl+0 (reset)
- Guard against re-entrant setBounds->move loops and skip zoom
  adjustments while fullscreen or maximized

Author: SuperComboGamer

apps/desktop/src/main.ts

@@ -4,7 +4,7 @@ import * as FS from "node:fs";
 import * as OS from "node:os";
 import * as Path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain, Menu, nativeImage, protocol, shell } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu, nativeImage, protocol, screen, shell } from "electron";
 import type { MenuItemConstructorOptions } from "electron";
 import * as Effect from "effect/Effect";
 import type { DesktopUpdateActionResult, DesktopUpdateState } from "@t3tools/contracts";
@@ -60,6 +60,14 @@ const AUTO_UPDATE_STARTUP_DELAY_MS = 15_000;
 const AUTO_UPDATE_POLL_INTERVAL_MS = 4 * 60 * 60 * 1000;
 const DESKTOP_UPDATE_CHANNEL = "latest";
 const DESKTOP_UPDATE_ALLOW_PRERELEASE = false;
+const BASE_DEFAULT_WIDTH = 1100;
+const BASE_DEFAULT_HEIGHT = 780;
+const BASE_MIN_WIDTH = 840;
+const BASE_MIN_HEIGHT = 620;
+const REFERENCE_SHORT_EDGE = 1080;
+const ZOOM_STEP = 0.25;
+const MIN_ZOOM_FACTOR = 0.5;
+const MAX_ZOOM_FACTOR = 3.0;
 
 type DesktopUpdateErrorContext = DesktopUpdateState["errorContext"];
 
@@ -538,7 +546,41 @@ function configureApplicationMenu(): void {
       ],
     },
     { role: "editMenu" },
-    { role: "viewMenu" },
+    {
+      label: "View",
+      submenu: [
+        { role: "reload" },
+        { role: "forceReload" },
+        { role: "toggleDevTools" },
+        { type: "separator" },
+        {
+          label: "Reset Zoom",
+          accelerator: "CmdOrCtrl+0",
+          click: () => {
+            const win = getFocusedBrowserWindow();
+            if (win) applyAutoZoom(win);
+          },
+        },
+        {
+          label: "Zoom In",
+          accelerator: "CmdOrCtrl+=",
+          click: () => adjustZoom(ZOOM_STEP),
+        },
+        {
+          label: "Zoom In",
+          accelerator: "CmdOrCtrl+Plus",
+          visible: false,
+          click: () => adjustZoom(ZOOM_STEP),
+        },
+        {
+          label: "Zoom Out",
+          accelerator: "CmdOrCtrl+-",
+          click: () => adjustZoom(-ZOOM_STEP),
+        },
+        { type: "separator" },
+        { role: "togglefullscreen" },
+      ],
+    },
     { role: "windowMenu" },
     {
       role: "help",
@@ -1094,12 +1136,68 @@ function getIconOption(): { icon: string } | Record<string, never> {
   return iconPath ? { icon: iconPath } : {};
 }
 
+function getFocusedBrowserWindow(): BrowserWindow | null {
+  return BrowserWindow.getFocusedWindow() ?? mainWindow ?? BrowserWindow.getAllWindows()[0] ?? null;
+}
+
+function adjustZoom(delta: number): void {
+  const win = getFocusedBrowserWindow();
+  if (!win || win.isDestroyed()) return;
+  const current = win.webContents.getZoomFactor();
+  win.webContents.setZoomFactor(Math.min(Math.max(current + delta, MIN_ZOOM_FACTOR), MAX_ZOOM_FACTOR));
+}
+
+function computeAutoZoomFactor(display: Electron.Display): number {
+  const shortEdge = Math.min(display.size.width, display.size.height);
+  if (shortEdge <= REFERENCE_SHORT_EDGE) return 1.0;
+  const ratio = shortEdge / REFERENCE_SHORT_EDGE;
+  return Math.min(Math.round(ratio / ZOOM_STEP) * ZOOM_STEP, MAX_ZOOM_FACTOR);
+}
+
+function applyAutoZoom(window: BrowserWindow): void {
+  if (window.isDestroyed()) return;
+  if (window.isFullScreen() || window.isMaximized()) return;
+
+  const display = screen.getDisplayMatching(window.getBounds());
+  const zoomFactor = computeAutoZoomFactor(display);
+  window.webContents.setZoomFactor(zoomFactor);
+
+  const workArea = display.workArea;
+  window.setMinimumSize(
+    Math.min(Math.round(BASE_MIN_WIDTH * zoomFactor), workArea.width),
+    Math.min(Math.round(BASE_MIN_HEIGHT * zoomFactor), workArea.height),
+  );
+
+  const bounds = window.getBounds();
+  const clamped = { ...bounds };
+  if (clamped.width > workArea.width) clamped.width = workArea.width;
+  if (clamped.height > workArea.height) clamped.height = workArea.height;
+  if (clamped.x < workArea.x) clamped.x = workArea.x;
+  if (clamped.y < workArea.y) clamped.y = workArea.y;
+  if (clamped.x + clamped.width > workArea.x + workArea.width)
+    clamped.x = workArea.x + workArea.width - clamped.width;
+  if (clamped.y + clamped.height > workArea.y + workArea.height)
+    clamped.y = workArea.y + workArea.height - clamped.height;
+
+  if (
+    clamped.x !== bounds.x ||
+    clamped.y !== bounds.y ||
+    clamped.width !== bounds.width ||
+    clamped.height !== bounds.height
+  ) {
+    window.setBounds(clamped);
+  }
+}
+
 function createWindow(): BrowserWindow {
+  const targetDisplay = screen.getDisplayNearestPoint(screen.getCursorScreenPoint());
+  const zoomFactor = computeAutoZoomFactor(targetDisplay);
+
   const window = new BrowserWindow({
-    width: 1100,
-    height: 780,
-    minWidth: 840,
-    minHeight: 620,
+    width: Math.round(BASE_DEFAULT_WIDTH * zoomFactor),
+    height: Math.round(BASE_DEFAULT_HEIGHT * zoomFactor),
+    minWidth: Math.round(BASE_MIN_WIDTH * zoomFactor),
+    minHeight: Math.round(BASE_MIN_HEIGHT * zoomFactor),
     show: false,
     autoHideMenuBar: true,
     ...getIconOption(),
@@ -1121,9 +1219,62 @@ function createWindow(): BrowserWindow {
   });
   window.webContents.on("did-finish-load", () => {
     window.setTitle(APP_DISPLAY_NAME);
+    applyAutoZoom(window);
     emitUpdateState();
   });
+
+  let lastDisplayId = screen.getDisplayMatching(window.getBounds()).id;
+  let applyingZoom = false;
+  window.on("move", () => {
+    if (window.isDestroyed() || applyingZoom) return;
+    const currentDisplay = screen.getDisplayMatching(window.getBounds());
+    if (currentDisplay.id !== lastDisplayId) {
+      lastDisplayId = currentDisplay.id;
+      applyingZoom = true;
+      try {
+        applyAutoZoom(window);
+      } finally {
+        applyingZoom = false;
+      }
+    }
+  });
+
+  window.on("unmaximize", () => {
+    if (window.isDestroyed() || applyingZoom) return;
+    applyingZoom = true;
+    try {
+      applyAutoZoom(window);
+      lastDisplayId = screen.getDisplayMatching(window.getBounds()).id;
+    } finally {
+      applyingZoom = false;
+    }
+  });
+  window.on("leave-full-screen", () => {
+    if (window.isDestroyed() || applyingZoom) return;
+    applyingZoom = true;
+    try {
+      applyAutoZoom(window);
+      lastDisplayId = screen.getDisplayMatching(window.getBounds()).id;
+    } finally {
+      applyingZoom = false;
+    }
+  });
+  window.on("resize", () => {
+    if (window.isDestroyed() || applyingZoom) return;
+    const currentDisplay = screen.getDisplayMatching(window.getBounds());
+    if (currentDisplay.id !== lastDisplayId) {
+      lastDisplayId = currentDisplay.id;
+      applyingZoom = true;
+      try {
+        applyAutoZoom(window);
+      } finally {
+        applyingZoom = false;
+      }
+    }
+  });
+
   window.once("ready-to-show", () => {
+    applyAutoZoom(window);
     window.show();
   });
 
@@ -1182,6 +1333,12 @@ app
     configureApplicationMenu();
     registerDesktopProtocol();
     configureAutoUpdater();
+
+    screen.on("display-metrics-changed", () => {
+      for (const win of BrowserWindow.getAllWindows()) {
+        applyAutoZoom(win);
+      }
+    });
     void bootstrap().catch((error) => {
       handleFatalStartupError("bootstrap", error);
     });