feat(desktop): add a zoom setting that persists (#59277)

Co-authored-by: vimtor <36263538+vimtor@users.noreply.github.com>

Author: opencode-agent[bot]

packages/app/src/runtime/i18n/en.ts

@@ -819,6 +819,8 @@ export const dict = {
   "settings.general.row.interfaceMode.inbox.description":
     "Every session across your servers, sorted by what needs you next.",
   "settings.general.row.interfaceMode.experimental": "Experimental",
+  "settings.appearance.row.zoom.title": "Zoom",
+  "settings.appearance.row.zoom.description": "Make text and controls larger across the app",
   "settings.appearance.row.reduceMotion.title": "Reduce motion",
   "settings.appearance.row.reduceMotion.description": "Reduce animations or match your system",
   "settings.appearance.row.reduceMotion.system": "System",

packages/app/src/runtime/platform/platform.tsx

@@ -1,7 +1,7 @@
 import { createSimpleContext } from "@opencode/ui/context"
 import type { AsyncStorage, SyncStorage } from "@solid-primitives/storage"
 import type { Accessor } from "solid-js"
-import type { DesktopMenuAction } from "@/shell/commands/desktop-menu"
+import type { DesktopMenuAction, DesktopZoomLevel } from "@/shell/commands/desktop-menu"
 import type { DraftStore } from "@/runtime/persistence/drafts"
 import type { Bridge } from "@opencode/gui-extensions/sdk/bridge"
 
@@ -85,6 +85,12 @@ type PlatformBase = {
   /** Webview zoom level (desktop only) */
   webviewZoom?: Accessor<number>
 
+  /** Saved interface zoom level; a pinch can move `webviewZoom` off it (desktop only) */
+  zoomLevel?: Accessor<DesktopZoomLevel>
+
+  /** Save an interface zoom level and apply it to every window (desktop only) */
+  setZoomLevel?(level: DesktopZoomLevel): Promise<void>
+
   /** Whether the native desktop window is fullscreen */
   windowFullscreen?: Accessor<boolean>
 

packages/app/src/settings/appearance/appearance.tsx

@@ -1,4 +1,4 @@
-import { Component } from "solid-js"
+import { Component, Show } from "solid-js"
 import { Select } from "@opencode/ui/select"
 import { TextInput } from "@opencode/ui/text-input"
 import { useLanguage } from "@/runtime/i18n/language"
@@ -135,6 +135,24 @@ export const SettingsAppearance: Component = () => {
             <FontSetting kind="code" fonts={appearance.fonts} />
             <FontSetting kind="terminal" fonts={appearance.fonts} />
 
+            <Show when={appearance.zoom.available()}>
+              <SettingsRow
+                title={language.t("settings.appearance.row.zoom.title")}
+                description={language.t("settings.appearance.row.zoom.description")}
+              >
+                <Select
+                  data-action="settings-zoom"
+                  options={appearance.zoom.options}
+                  current={appearance.zoom.current()}
+                  placement="bottom-end"
+                  gutter={6}
+                  value={(level) => String(level)}
+                  label={appearance.zoom.label}
+                  onSelect={(level) => level && appearance.zoom.select(level)}
+                />
+              </SettingsRow>
+            </Show>
+
             <SettingsRow
               title={language.t("settings.appearance.row.reduceMotion.title")}
               description={language.t("settings.appearance.row.reduceMotion.description")}

packages/app/src/settings/general/controllers.ts

@@ -14,6 +14,8 @@ import {
   terminalInput,
   useSettings,
 } from "@/settings/model"
+import { usePlatform } from "@/runtime/platform/platform"
+import { desktopZoomLevels, type DesktopZoomLevel } from "@/shell/commands/desktop-menu"
 import { playSoundById, SOUND_OPTIONS } from "@/shell/notifications/sound"
 import { createSoundPreviewController } from "./behavior"
 import { ServerConnection } from "@/runtime/server/registry"
@@ -58,7 +60,7 @@ export function createServerShellController(server: Accessor<ServerConnection.An
       actions.mutate({ ...previous, shell: value || undefined })
       void serverCtx()
         .sdk.api.config.update({ shell: value || null })
-        .catch((error: unknown) => {
+        .catch((error) => {
           actions.mutate(previous)
           showToast({
             variant: "error",
@@ -72,6 +74,8 @@ export function createServerShellController(server: Accessor<ServerConnection.An
 
 export function createAppearanceSettingsController() {
   const settings = useSettings()
+  const platform = usePlatform()
+  const language = useLanguage()
   const theme = useTheme()
   const themes = createMemo(() => theme.ids().map((id) => ({ id, name: theme.name(id) })))
 
@@ -87,6 +91,13 @@ export function createAppearanceSettingsController() {
       current: createMemo(() => themes().find((option) => option.id === theme.themeId())),
       select: (option: { id: string } | null) => option && theme.setTheme(option.id),
     },
+    zoom: {
+      available: () => platform.zoomLevel !== undefined,
+      options: [...desktopZoomLevels],
+      current: () => platform.zoomLevel?.() ?? 1,
+      label: (level: DesktopZoomLevel) => new Intl.NumberFormat(language.intl(), { style: "percent" }).format(level),
+      select: (level: DesktopZoomLevel) => void platform.setZoomLevel?.(level),
+    },
     reduceMotion: {
       current: settings.appearance.reduceMotion,
       select: (value: ReduceMotion) => settings.appearance.setReduceMotion(value),

packages/app/src/settings/search-catalog.ts

@@ -136,6 +136,13 @@ export const clientSettings: Entry<SettingsRootTab>[] = [
     target: "settings-terminal-font",
     keywords: "terminal typeface",
   },
+  {
+    tab: "appearance",
+    label: "settings.appearance.row.zoom.title",
+    target: "settings-zoom",
+    keywords: "scale size text font larger bigger accessibility",
+    available: "desktop",
+  },
   {
     tab: "appearance",
     label: "settings.appearance.row.reduceMotion.title",

packages/app/src/settings/search-results.test.ts

@@ -51,10 +51,12 @@ describe("settings search index", () => {
   test("only advertises settings supported by this platform", () => {
     const targets = (input: Parameters<typeof index>[0]) => index(input).map((item) => item.view.target)
     expect(targets({})).not.toContain("settings-pinch-zoom")
+    expect(targets({})).not.toContain("settings-zoom")
     expect(targets({})).not.toContain("settings-experimental-browser")
     expect(targets({})).not.toContain("settings-show-project-icon")
     expect(targets({})).toContain("settings-tab-layout")
     expect(targets({ desktop: true })).toContain("settings-pinch-zoom")
+    expect(targets({ desktop: true })).toContain("settings-zoom")
     expect(targets({ browser: true })).not.toContain("settings-experimental-browser")
     expect(targets({})).not.toContain("settings-show-project-icon")
     expect(targets({})).not.toContain("settings-mobile-titlebar-bottom")

packages/app/src/shell/commands/desktop-menu.test.ts

@@ -5,7 +5,7 @@ import { sidebarToggleCommand } from "@/shell/shell"
 import { previousSessionCommand, nextSessionCommand } from "@/shell/titlebar/tab-strip"
 import { goBackCommand, goForwardCommand, newTabCommand } from "@/shell/titlebar/titlebar"
 import { exportLogsCommand } from "./desktop"
-import { DESKTOP_MENU } from "./desktop-menu"
+import { DESKTOP_MENU, nextDesktopZoomLevel } from "./desktop-menu"
 
 test("every desktop menu command is one its owner registers", () => {
   const registered = new Set([
@@ -27,3 +27,20 @@ test("every desktop menu command is one its owner registers", () => {
 
   expect(commands.filter((command) => !registered.has(command))).toEqual([])
 })
+
+test.each([
+  { factor: 1, direction: "in", level: 1.1 },
+  { factor: 1.25, direction: "out", level: 1.1 },
+  // A factor read back from Chromium sits a hair off the level it was set to.
+  { factor: 1.0999999, direction: "in", level: 1.25 },
+  { factor: 1.1000001, direction: "out", level: 1 },
+  // A pinch leaves the factor between levels, or outside them.
+  { factor: 1.3, direction: "in", level: 1.5 },
+  { factor: 1.3, direction: "out", level: 1.25 },
+  { factor: 0.5, direction: "out", level: 1 },
+  { factor: 3, direction: "in", level: 2 },
+  { factor: 2, direction: "in", level: 2 },
+  { factor: 1, direction: "out", level: 1 },
+] as const)("zooming $direction from $factor lands on $level", ({ factor, direction, level }) => {
+  expect(nextDesktopZoomLevel(factor, direction)).toBe(level)
+})

packages/app/src/shell/commands/desktop-menu.ts

@@ -34,15 +34,12 @@ export type DesktopMenuRole =
   | "quit"
   | "redo"
   | "reload"
-  | "resetZoom"
   | "selectAll"
   | "toggleDevTools"
   | "togglefullscreen"
   | "undo"
   | "unhide"
   | "windowMenu"
-  | "zoomIn"
-  | "zoomOut"
 
 export type DesktopMenuItem = {
   type: "item"
@@ -62,6 +59,20 @@ export type DesktopMenuSeparator = {
 
 export type DesktopMenuEntry = DesktopMenuItem | DesktopMenuSeparator
 
+// Slack's desktop zoom levels from 100% up. Zoom In, Zoom Out and the Appearance setting all pick one.
+export const desktopZoomLevels = [1, 1.1, 1.25, 1.5, 1.75, 2] as const
+
+export type DesktopZoomLevel = (typeof desktopZoomLevels)[number]
+
+/** The level after `factor` in `direction`. A pinch can leave `factor` between two levels. */
+export function nextDesktopZoomLevel(factor: number, direction: "in" | "out"): DesktopZoomLevel {
+  // Chromium stores zoom on a log scale, so a factor read back can be a hair off the level it was set to.
+  if (direction === "in")
+    return desktopZoomLevels.find((level) => level > factor + 0.01) ?? desktopZoomLevels[desktopZoomLevels.length - 1]
+
+  return desktopZoomLevels.findLast((level) => level < factor - 0.01) ?? desktopZoomLevels[0]
+}
+
 export type DesktopMenu = {
   id: string
   labelKey: DesktopNativeKey
@@ -202,22 +213,19 @@ export const DESKTOP_MENU: DesktopMenu[] = [
         type: "item",
         labelKey: "desktop.menu.actualSize",
         action: "view.resetZoom",
-        role: "resetZoom",
-        accelerator: { windows: "Ctrl+0" },
+        accelerator: { macos: "Cmd+0", windows: "Ctrl+0" },
       },
       {
         type: "item",
         labelKey: "desktop.menu.zoomIn",
         action: "view.zoomIn",
-        role: "zoomIn",
-        accelerator: { windows: "Ctrl++" },
+        accelerator: { macos: "Cmd+=", windows: "Ctrl++" },
       },
       {
         type: "item",
         labelKey: "desktop.menu.zoomOut",
         action: "view.zoomOut",
-        role: "zoomOut",
-        accelerator: { windows: "Ctrl+-" },
+        accelerator: { macos: "Cmd+-", windows: "Ctrl+-" },
       },
       { type: "separator" },
       {

packages/desktop/src/main/ipc-handlers/window.ts

@@ -8,8 +8,10 @@ import {
   setTitlebar,
   setTrafficLightsPosition,
   setWindowThemeReady,
+  setZoomLevel,
   updateTitlebar,
 } from "../windows"
+import { storedZoomLevel } from "../windows/defaults"
 import { focusWindow, showWindow } from "../windows/focus"
 import { sender } from "./context"
 
@@ -50,6 +52,8 @@ export const windowHandlers = WindowRpcs.toLayer(
 
           if (win) updateTitlebar(win)
         }),
+      WindowGetZoomLevel: () => Effect.sync(storedZoomLevel),
+      WindowSetZoomLevel: ({ level }) => Effect.sync(() => setZoomLevel(level)),
       WindowGetPinchZoomEnabled: () => Effect.sync(getPinchZoomEnabled),
       WindowSetPinchZoomEnabled: ({ enabled }) => Effect.sync(() => setPinchZoomEnabled(enabled)),
       WindowSetTitlebar: ({ theme }, context) =>

packages/desktop/src/main/native/menu-actions.ts

@@ -1,6 +1,6 @@
 import { BrowserWindow } from "electron"
-import type { DesktopMenuAction } from "@opencode/app/desktop-menu"
-import { setZoomFactor } from "../windows"
+import { nextDesktopZoomLevel, type DesktopMenuAction } from "@opencode/app/desktop-menu"
+import { setZoomLevel } from "../windows"
 
 export type DesktopMenuActionHandlers = Partial<{
   installCli: () => void
@@ -53,15 +53,15 @@ export function runDesktopMenuAction(
 
       return
     case "view.resetZoom":
-      if (win) setZoomFactor(win, 1)
+      setZoomLevel(1)
 
       return
     case "view.zoomIn":
-      if (win) setZoomFactor(win, win.webContents.getZoomFactor() + 0.2)
+      if (win) setZoomLevel(nextDesktopZoomLevel(win.webContents.getZoomFactor(), "in"))
 
       return
     case "view.zoomOut":
-      if (win) setZoomFactor(win, win.webContents.getZoomFactor() - 0.2)
+      if (win) setZoomLevel(nextDesktopZoomLevel(win.webContents.getZoomFactor(), "out"))
 
       return
     case "view.toggleFullscreen":