From 2e7e345e011838a4804062c59c51db16b6302318 Mon Sep 17 00:00:00 2001
From: Gyarados4157 <924431456@qq.com>
Date: Tue, 15 Sep 2026 13:16:53 +0800
Subject: [PATCH] fix(desktop): align the tab-bar home button with the macOS
 traffic lights

`trafficLightPosition.y` does not set the buttons' top offset: tao's
`inset_traffic_lights` only rewrites the titlebar container's height (button
height + y) and each button's origin.x, and AppKit keeps the buttons at a fixed
inset from the container's bottom edge. The effective top is therefore
`y - defaultInset`: with y = 10 the lights land at y = 1 (centre 8) on macOS
27.0 while the 32pt tab bar centres the home button at y = 16, so the button
sits 8pt below the window controls and looks misplaced. y = 18 restores the
intended centre of 16pt (= where macOS puts them when no position is set).

The 68pt leading inset was derived from the old window-control geometry
(12 + 3*12 + 2*8 = 64, +4pt gap). The controls are now 14pt wide on 23pt
centres, so the group reaches 72pt and the home button's hover area overlapped
the green button. Reserve the wider geometry plus an 8pt gap.
---
 packages/app/src-tauri/tauri.conf.json        |  2 +-
 packages/app/src/components/layout/TabBar.tsx | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/app/src-tauri/tauri.conf.json b/packages/app/src-tauri/tauri.conf.json
index 06ef1c7d4..5f7163426 100644
--- a/packages/app/src-tauri/tauri.conf.json
+++ b/packages/app/src-tauri/tauri.conf.json
@@ -23,7 +23,7 @@
         "titleBarStyle": "Overlay",
         "trafficLightPosition": {
           "x": 12,
-          "y": 10
+          "y": 18
         },
         "decorations": true
       }
diff --git a/packages/app/src/components/layout/TabBar.tsx b/packages/app/src/components/layout/TabBar.tsx
index 234bbcc0d..6c9e3efad 100644
--- a/packages/app/src/components/layout/TabBar.tsx
+++ b/packages/app/src/components/layout/TabBar.tsx
@@ -22,6 +22,18 @@ const TAB_ICONS: Record<string, React.ElementType> = {
 
 const NO_DRAG_STYLE = { WebkitAppRegion: "no-drag" } as Record<string, string>;
 
+/**
+ * Leading inset that keeps the tab row clear of the macOS window controls.
+ *
+ * `trafficLightPosition` in packages/app/src-tauri/tauri.conf.json pins the left edge
+ * of the group to x = 12 and puts its vertical centre on the centre of this 32pt row.
+ * Current macOS draws three 14pt buttons on 23pt centres, so the group ends at
+ * 12 + 3 * 14 + 2 * 9 = 72pt; older releases used 12pt buttons on 20pt centres and
+ * ended at 64pt (hence the previous 68). Reserve the wider geometry plus 8pt of
+ * breathing room — the extra space on older macOS is harmless.
+ */
+const MAC_TRAFFIC_LIGHTS_INSET = 80;
+
 function usePlatformInfo() {
   const [info, setInfo] = useState({ isTauri: false, isMac: false, isWinOrLinux: false });
   useEffect(() => {
@@ -86,7 +98,10 @@ export function TabBar() {
       className="flex h-8 shrink-0 select-none items-center border-neutral-200 bg-muted"
     >
       {/* macOS: space for native traffic lights (hidden in reader mode) */}
-      <div className="flex h-full shrink-0 items-center" style={{ paddingLeft: (isMac && !isFullscreen) ? 68 : 4 }}>
+      <div
+        className="flex h-full shrink-0 items-center"
+        style={{ paddingLeft: isMac && !isFullscreen ? MAC_TRAFFIC_LIGHTS_INSET : 4 }}
+      >
         <button
           type="button"
           className="flex items-center justify-center rounded-md p-1 text-neutral-500 transition-colors hover:bg-neutral-200/60 hover:text-neutral-800"