fix(window): align macOS traffic lights with IDE zoom (#574)

IDE zoom changed the toolbar height while the macOS window buttons stayed at a fixed vertical position. The buttons are now centred in the title bar using its measured height and the zoom, and repositioned after AppKit layout updates. Zooming out keeps enough room for them so they do not cover the project icon, and compact mode follows the same alignment.

Windows align from the saved zoom and compact setting when they are built, so the buttons do not move once the page loads. The height uses the zoom the webview applies, so an out-of-range setting cannot misplace them.

Cargo.lock

@@ -6144,6 +6144,7 @@ name = "openidea"
 version = "0.1.31"
 dependencies = [
  "blake3",
+ "block2 0.6.2",
  "dirs 6.0.0",
  "dunce",
  "ide-agent",
@@ -6180,6 +6181,9 @@ dependencies = [
  "ide-vfs",
  "ide-web",
  "ide-workspace",
+ "objc2 0.6.5",
+ "objc2-app-kit 0.3.2",
+ "objc2-foundation 0.3.2",
  "parking_lot",
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -69,3 +69,9 @@ ide-tools = { path = "../crates/ide-tools" }
 ide-plugin = { path = "../crates/ide-plugin" }
 ide-docker = { path = "../crates/ide-docker" }
 ide-github = { path = "../crates/ide-github" }
+
+[target.'cfg(target_os = "macos")'.dependencies]
+block2 = "0.6"
+objc2 = "0.6"
+objc2-app-kit = { version = "0.3", default-features = false, features = ["std", "NSButton", "NSResponder", "NSView", "NSWindow"] }
+objc2-foundation = { version = "0.3", default-features = false, features = ["std", "block2", "NSNotification", "NSOperation", "NSString"] }

src-tauri/src/commands/mod.rs

@@ -356,6 +356,7 @@ pub fn builder() -> tauri_specta::Builder<tauri::Wry> {
         window::window_open_settings,
         window::window_cycle,
         window::window_toggle_fullscreen,
+        window::window_set_titlebar_height,
         window::window_take_launch,
         window::window_close_context,
         window::window_open_projects,

src-tauri/src/commands/window.rs

@@ -102,6 +102,20 @@ pub fn window_toggle_fullscreen(window: WebviewWindow) -> IdeResult<bool> {
     Ok(on)
 }
 
+/// Height of the web title bar in native logical pixels (CSS height × IDE zoom).
+#[tauri::command]
+#[specta::specta]
+pub fn window_set_titlebar_height(window: WebviewWindow, height: f64) -> IdeResult<()> {
+    if !height.is_finite() || !(1.0..=1000.0).contains(&height) {
+        return Err(IdeError::invalid("invalid title bar height"));
+    }
+    #[cfg(target_os = "macos")]
+    crate::titlebar::set_height(&window, height).map_err(|e| IdeError::internal(e.to_string()))?;
+    #[cfg(not(target_os = "macos"))]
+    let _ = window;
+    Ok(())
+}
+
 /// What this window was opened for (taken once).
 #[tauri::command]
 #[specta::specta]

src-tauri/src/lib.rs

@@ -13,6 +13,8 @@ mod remote_dev;
 
 mod state;
 mod theme_frame;
+#[cfg(target_os = "macos")]
+mod titlebar;
 mod window_groups;
 mod windows;
 
@@ -138,6 +140,8 @@ pub fn run() {
             }
         }
         tauri::WindowEvent::Destroyed => {
+            #[cfg(target_os = "macos")]
+            titlebar::forget(window);
             window_groups::destroyed(window.app_handle(), window.label());
             if let Some(settings) = window.app_handle().get_webview_window(&windows::settings_label(window.label())) {
                 let _ = settings.destroy();

src-tauri/src/titlebar.rs

@@ -0,0 +1,93 @@
+//! Keep the native window buttons aligned with the web toolbar, in AppKit points.
+
+use std::cell::{Cell, RefCell};
+use std::collections::HashMap;
+use std::rc::Rc;
+
+use block2::RcBlock;
+use objc2::rc::Retained;
+use objc2::runtime::ProtocolObject;
+use objc2_app_kit::{NSWindow, NSWindowButton, NSWindowDidUpdateNotification, NSWindowStyleMask};
+use objc2_foundation::{NSNotificationCenter, NSObjectProtocol, NSPoint};
+
+struct Titlebar {
+    height: Rc<Cell<f64>>,
+    observer: Retained<ProtocolObject<dyn NSObjectProtocol>>,
+}
+
+impl Drop for Titlebar {
+    fn drop(&mut self) {
+        unsafe { NSNotificationCenter::defaultCenter().removeObserver((*self.observer).as_ref()) };
+    }
+}
+
+thread_local! {
+    static TITLEBARS: RefCell<HashMap<String, Titlebar>> = RefCell::default();
+}
+
+pub fn set_height(window: &tauri::WebviewWindow, height: f64) -> tauri::Result<()> {
+    let label = window.label().to_owned();
+    // with_webview runs on the AppKit thread; the observer is also delivered there.
+    window.with_webview(move |webview| unsafe {
+        let native = &*webview.ns_window().cast::<NSWindow>();
+        TITLEBARS.with_borrow_mut(|bars| {
+            let bar = bars.entry(label).or_insert_with(|| {
+                let height = Rc::new(Cell::new(height));
+                let current = height.clone();
+                let pointer = native as *const NSWindow;
+                let block = RcBlock::new(move |_| center_buttons(&*pointer, current.get()));
+                let observer = NSNotificationCenter::defaultCenter().addObserverForName_object_queue_usingBlock(
+                    Some(NSWindowDidUpdateNotification),
+                    Some(native),
+                    None,
+                    &block,
+                );
+                Titlebar { height, observer }
+            });
+            bar.height.set(height);
+            center_buttons(native, height);
+        });
+    })
+}
+
+pub fn forget(window: &tauri::Window) {
+    let label = window.label().to_owned();
+    let _ = window.run_on_main_thread(move || {
+        TITLEBARS.with_borrow_mut(|bars| bars.remove(&label));
+    });
+}
+
+unsafe fn center_buttons(window: &NSWindow, height: f64) {
+    // Fullscreen uses AppKit's own revealable title bar.
+    if window.styleMask().contains(NSWindowStyleMask::FullScreen) {
+        return;
+    }
+    let Some(close) = window.standardWindowButton(NSWindowButton::CloseButton) else { return };
+    let Some(minimize) = window.standardWindowButton(NSWindowButton::MiniaturizeButton) else { return };
+    let spacing = minimize.frame().origin.x - close.frame().origin.x;
+    let Some(container) = (unsafe { close.superview().and_then(|view| view.superview()) }) else { return };
+    let Some(content) = window.contentView() else { return };
+    let mut frame = container.frame();
+    let top = frame.origin.y + frame.size.height;
+    if (frame.size.height - height).abs() > 0.01 {
+        frame.size.height = height;
+        frame.origin.y = top - height;
+        container.setFrame(frame);
+    }
+    let bounds = content.bounds();
+    let y = bounds.origin.y + if content.isFlipped() { height / 2.0 } else { bounds.size.height - height / 2.0 };
+    for (index, kind) in [NSWindowButton::CloseButton, NSWindowButton::MiniaturizeButton, NSWindowButton::ZoomButton]
+        .into_iter()
+        .enumerate()
+    {
+        let Some(button) = window.standardWindowButton(kind) else { continue };
+        let Some(parent) = (unsafe { button.superview() }) else { continue };
+        let center = parent.convertPoint_fromView(NSPoint::new(0.0, y), Some(&content));
+        let frame = button.frame();
+        let x = 14.0 + index as f64 * spacing;
+        let target = center.y - frame.size.height / 2.0;
+        if (frame.origin.x - x).abs() > 0.01 || (frame.origin.y - target).abs() > 0.01 {
+            button.setFrameOrigin(NSPoint::new(x, target));
+        }
+    }
+}

src-tauri/src/windows.rs

@@ -297,6 +297,8 @@ fn build_project_window(app: &AppHandle, mut config: WindowConfig) -> IdeResult<
         .and_then(|b| b.build())
         .map_err(|e| IdeError::internal(format!("cannot create window: {e}")))?;
     apply_zoom(app, &window);
+    #[cfg(target_os = "macos")]
+    align_titlebar(app, &window);
     // "Sync with OS" needs the OS mode, known once the window exists.
     if let Some(a) = appearance.filter(|a| plugin_frame.is_none() && (a.sync_with_os || a.theme == "system"))
         && window.theme().is_ok_and(|t| t == Theme::Dark)
@@ -317,6 +319,20 @@ fn apply_zoom(app: &AppHandle, window: &WebviewWindow) {
     }
 }
 
+/// Aligns the native window buttons before the page reports its title bar height,
+/// so they don't visibly move once it loads.
+#[cfg(target_os = "macos")]
+fn align_titlebar(app: &AppHandle, window: &WebviewWindow) {
+    // `--h-titlebar` in tokens.css.
+    const HEIGHT: f64 = 40.0;
+    const COMPACT_HEIGHT: f64 = 32.0;
+    let Some(a) = app.try_state::<AppState>().map(|s| s.global_settings.effective().appearance) else {
+        return;
+    };
+    let height = if a.compact_mode { COMPACT_HEIGHT } else { HEIGHT };
+    let _ = crate::titlebar::set_height(window, height * f64::from(a.zoom.clamp(50, 300)) / 100.0);
+}
+
 /// The first window (`create: false` in tauri.conf.json so it can take the theme's colour).
 pub fn create_main_window(app: &AppHandle) -> IdeResult<WebviewWindow> {
     build_project_window(app, window_config(app)?)
@@ -747,6 +763,8 @@ pub fn open_settings_window(
         .and_then(|b| b.build())
         .map_err(|e| IdeError::internal(format!("cannot create settings window: {e}")))?;
     apply_zoom(app, &window);
+    #[cfg(target_os = "macos")]
+    align_titlebar(app, &window);
     // Restore runs during build; fit its size to the parent's current display before showing.
     #[cfg(target_os = "macos")]
     if let Err(e) = fit_settings_window(&window, &parent) {

src-tauri/tauri.conf.json

@@ -21,10 +21,6 @@
         "minHeight": 500,
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
-        "trafficLightPosition": {
-          "x": 14,
-          "y": 22
-        },
         "backgroundColor": "#E9EAEE",
         "dragDropEnabled": true
       }

src/bindings.ts

@@ -720,6 +720,8 @@ export const commands = {
 	/**  Focuses the next / previous window (⌘` / ⇧⌘`). */
 	windowCycle: (forward: boolean) => __TAURI_INVOKE<void>("window_cycle", { forward }),
 	windowToggleFullscreen: () => typedError<boolean, IdeError>(__TAURI_INVOKE("window_toggle_fullscreen")),
+	/**  Height of the web title bar in native logical pixels (CSS height × IDE zoom). */
+	windowSetTitlebarHeight: (height: number | null) => typedError<null, IdeError>(__TAURI_INVOKE("window_set_titlebar_height", { height })),
 	/**  What this window was opened for (taken once). */
 	windowTakeLaunch: () => __TAURI_INVOKE<{
 	/**  Project folder to open. */

src/features/settings/appearanceRuntime.ts

@@ -10,7 +10,7 @@ import { uiFontFamily } from "@/platform/fonts";
 import { call, commands, isTauri } from "@/platform/ipc";
 import { useProject } from "@/platform/project";
 import { setDragRequiresAlt } from "@/ui";
-import { ZOOM_LIMITS } from "./model/behaviorSchema";
+import { ZOOM_LIMITS } from "@/platform/zoom";
 import { DEFAULT_SETTINGS, validateSettings, type ValidSettings } from "./model/schema";
 
 const FONT_VARS = [

src/features/settings/model/behaviorSchema.ts

@@ -5,6 +5,7 @@
  */
 
 import { BUILTIN_THEME_IDS, type BuiltinThemeId } from "@/platform/themes";
+import { ZOOM_LIMITS } from "@/platform/zoom";
 
 export type Antialiasing = "subpixel" | "greyscale" | "none";
 export type OpenProjectIn = "ask" | "new" | "same" | "attach";
@@ -61,7 +62,6 @@ export interface NotificationsValid {
   groups: Record<string, NotificationGroupValid>;
 }
 
-export const ZOOM_LIMITS = { min: 50, max: 300 } as const;
 export const IDLE_LIMITS = { min: 1, max: 3600 } as const;
 
 export const DEFAULT_APPEARANCE_EXTRAS: AppearanceExtras = {

src/features/settings/pages/behavior.tsx

@@ -11,6 +11,7 @@ import clsx from "clsx";
 import { shortcutLabel } from "@/platform/keymap";
 import { usePlatform } from "@/platform/platformInfo";
 import { isTauri } from "@/platform/ipc";
+import { ZOOM_LIMITS } from "@/platform/zoom";
 import { SCHEMES as EDITOR_SCHEMES, listSchemes, customSchemes } from "@/platform/colorScheme";
 import { formatTimestamp } from "@/platform/dateFormat";
 import { Checkbox, IconButton, Input, Popup, type SelectOption, T } from "@/ui";
@@ -18,7 +19,6 @@ import { NOTIFICATION_GROUPS } from "@/workbench/notificationStore";
 import { ColorSwatches, NumberInput, Row, SearchLabel, Select, Toggle } from "../components/Form";
 import { useLabelMatch, useSetting } from "../components/context";
 import {
-  ZOOM_LIMITS,
   IDLE_LIMITS,
   type Antialiasing,
   type ConcreteTheme,

src/platform/zoom.ts

@@ -0,0 +1,7 @@
+export const ZOOM_LIMITS = { min: 50, max: 300 } as const;
+
+/** The IDE zoom in percent that a settings value applies as. */
+export function clampZoom(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 100;
+  return Math.min(ZOOM_LIMITS.max, Math.max(ZOOM_LIMITS.min, Math.round(value)));
+}

src/workbench/TitleBar.module.css

@@ -12,7 +12,7 @@
 }
 /* Room for the native macOS traffic lights (Overlay title bar). */
 .overlay {
-  padding-left: 82px;
+  padding-left: max(82px, calc(82px / var(--titlebar-zoom, 1)));
 }
 /* Welcome window: plain title on the frame colour with a hairline, like IntelliJ's welcome frame. */
 .minimal {

src/workbench/TitleBar.tsx

@@ -26,6 +26,7 @@ import { projectInitials } from "./projectColor";
 import { keymapItems, themeItems, VIEW_MODE_ITEMS } from "./quickSwitch";
 import { currentThemeId, useThemeOverride } from "./theme";
 import styles from "./TitleBar.module.css";
+import { useNativeTitlebar } from "./nativeTitlebar";
 
 export function orderTitleItems(items: Iterable<TitleItemContribution>) {
   const all = [...items];
@@ -277,12 +278,14 @@ export function TitleBar({
   const frameless = usePlatform((s) => s.framelessTitleBar);
   const { map, shown, menu } = useToolbar();
   const [menuExpanded, setMenuExpanded] = useState(false);
+  const [bar, setBar] = useState<HTMLElement | null>(null);
+  useNativeTitlebar(bar);
   const className = clsx(styles.bar, overlay && styles.overlay, frameless && styles.frameless);
   // Distraction Free Mode: the window frame only. Where the title bar carries the
   // main menu (Windows, Linux) it stays, or nothing would lead back out of the mode.
   if (bare)
     return (
-      <header className={className} data-tauri-drag-region data-titlebar="bare">
+      <header ref={setBar} className={className} data-tauri-drag-region data-titlebar="bare">
         {frameless && (
           <>
             <MainMenu />
@@ -296,6 +299,7 @@ export function TitleBar({
   const toolbar = !minimal && !lightEdit;
   return (
     <header
+      ref={setBar}
       className={clsx(className, minimal && styles.minimal, dialog && styles.dialogBar)}
       data-tauri-drag-region
       onContextMenu={(e) => {

src/workbench/nativeTitlebar.test.tsx

@@ -0,0 +1,85 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { usePlatform } from "@/platform/platformInfo";
+import { useProject } from "@/platform/project";
+import type { Settings } from "@/platform/ipc";
+import { useNativeTitlebar } from "./nativeTitlebar";
+
+const { setHeight } = vi.hoisted(() => ({ setHeight: vi.fn().mockResolvedValue({ status: "ok" }) }));
+vi.mock("@/platform/ipc", async (original) => {
+  const ipc = await original<typeof import("@/platform/ipc")>();
+  return { ...ipc, commands: { ...ipc.commands, windowSetTitlebarHeight: setHeight } };
+});
+
+const platform = usePlatform.getState();
+const project = useProject.getState();
+let resize: () => void;
+const disconnect = vi.fn();
+
+beforeEach(() => {
+  setHeight.mockClear();
+  disconnect.mockClear();
+  usePlatform.setState({ overlayTitleBar: true });
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(callback: () => void) {
+        resize = callback;
+      }
+      observe() {}
+      disconnect = disconnect;
+    },
+  );
+});
+
+afterEach(() => {
+  usePlatform.setState(platform);
+  useProject.setState(project);
+  vi.unstubAllGlobals();
+});
+
+function zoom(percent: number) {
+  useProject.setState({ settings: { appearance: { zoom: percent } } as Settings });
+}
+
+function titlebar(height: number) {
+  const bar = document.createElement("header");
+  const rect = vi.spyOn(bar, "getBoundingClientRect").mockReturnValue(new DOMRect(0, 0, 800, height));
+  return { bar, rect };
+}
+
+describe("native title bar alignment", () => {
+  it.each([50, 100, 125, 150, 200, 300])("converts CSS height to AppKit points at %s%%", (percent) => {
+    zoom(percent);
+    const { bar } = titlebar(40);
+    renderHook(() => useNativeTitlebar(bar));
+    expect(setHeight).toHaveBeenLastCalledWith((40 * percent) / 100);
+  });
+
+  it("uses the zoom the webview applies when the setting is out of range", () => {
+    zoom(500);
+    const { bar } = titlebar(40);
+    renderHook(() => useNativeTitlebar(bar));
+    expect(setHeight).toHaveBeenLastCalledWith(120);
+  });
+
+  it("updates when zoom or compact mode changes, and disconnects on unmount", () => {
+    zoom(100);
+    const { bar, rect } = titlebar(40);
+    const { unmount } = renderHook(() => useNativeTitlebar(bar));
+    act(() => zoom(150));
+    expect(setHeight).toHaveBeenLastCalledWith(60);
+    rect.mockReturnValue(new DOMRect(0, 0, 800, 32));
+    act(() => resize());
+    expect(setHeight).toHaveBeenLastCalledWith(48);
+    unmount();
+    expect(disconnect).toHaveBeenCalledTimes(2);
+  });
+
+  it("leaves windows without native overlay buttons alone", () => {
+    usePlatform.setState({ overlayTitleBar: false });
+    const { bar } = titlebar(40);
+    renderHook(() => useNativeTitlebar(bar));
+    expect(setHeight).not.toHaveBeenCalled();
+  });
+});

src/workbench/nativeTitlebar.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import { call, commands } from "@/platform/ipc";
+import { usePlatform } from "@/platform/platformInfo";
+import { useProject } from "@/platform/project";
+import { clampZoom } from "@/platform/zoom";
+
+export function useNativeTitlebar(bar: HTMLElement | null) {
+  const overlay = usePlatform((s) => s.overlayTitleBar);
+  const zoom = useProject((s) => clampZoom(s.settings?.appearance?.zoom));
+  useEffect(() => {
+    if (!overlay || !bar) return;
+    bar.style.setProperty("--titlebar-zoom", String(zoom / 100));
+    const update = () => {
+      // Webview zoom scales CSS pixels; Retina scale is already handled by AppKit.
+      const height = (bar.getBoundingClientRect().height * zoom) / 100;
+      if (height > 0)
+        void call(commands.windowSetTitlebarHeight(height)).catch((e) =>
+          console.warn("cannot align window buttons", e),
+        );
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(bar);
+    return () => {
+      observer.disconnect();
+      bar.style.removeProperty("--titlebar-zoom");
+    };
+  }, [bar, overlay, zoom]);
+}