Fix focus mode tab padding

packages/app/src/utils/desktop-window.test.ts

@@ -1,5 +1,8 @@
 import { describe, expect, it } from "vitest";
-import { resolveWindowControlsPadding } from "@/utils/desktop-window";
+import {
+  resolveRawWindowControlsPadding,
+  resolveWindowControlsPadding,
+} from "@/utils/desktop-window";
 
 const rawPadding = {
   left: 80,
@@ -8,6 +11,36 @@ const rawPadding = {
 };
 
 describe("resolveWindowControlsPadding", () => {
+  it("keeps mac traffic-light padding available when the app window is not fullscreen", () => {
+    expect(
+      resolveRawWindowControlsPadding({ isElectron: true, isMac: true, isFullscreen: false }),
+    ).toEqual({
+      left: 78,
+      right: 0,
+      top: 45,
+    });
+  });
+
+  it("keeps Windows and Linux window-control padding available when the app window is not fullscreen", () => {
+    expect(
+      resolveRawWindowControlsPadding({ isElectron: true, isMac: false, isFullscreen: false }),
+    ).toEqual({
+      left: 0,
+      right: 140,
+      top: 48,
+    });
+  });
+
+  it("does not reserve window-control padding when the app window is fullscreen", () => {
+    expect(
+      resolveRawWindowControlsPadding({ isElectron: true, isMac: true, isFullscreen: true }),
+    ).toEqual({
+      left: 0,
+      right: 0,
+      top: 0,
+    });
+  });
+
   it("pads the main header for window controls when the app sidebar is closed", () => {
     expect(
       resolveWindowControlsPadding({
@@ -39,4 +72,36 @@ describe("resolveWindowControlsPadding", () => {
       top: 0,
     });
   });
+
+  it("pads a focus-mode tab row away from mac traffic lights even when the sidebar is logically open", () => {
+    expect(
+      resolveWindowControlsPadding({
+        role: "tabRow",
+        rawPadding,
+        sidebarClosed: false,
+        explorerOpen: false,
+        focusModeEnabled: true,
+      }),
+    ).toEqual({
+      left: 80,
+      right: 48,
+      top: 0,
+    });
+  });
+
+  it("pads a focus-mode tab row away from right-side window controls even when the explorer is logically open", () => {
+    expect(
+      resolveWindowControlsPadding({
+        role: "tabRow",
+        rawPadding: { left: 0, right: 140, top: 48 },
+        sidebarClosed: true,
+        explorerOpen: true,
+        focusModeEnabled: true,
+      }),
+    ).toEqual({
+      left: 0,
+      right: 140,
+      top: 0,
+    });
+  });
 });

packages/app/src/utils/desktop-window.ts

@@ -87,25 +87,35 @@ function useRawWindowControlsPadding(): RawWindowControlsPadding {
     };
   }, []);
 
-  return useMemo((): RawWindowControlsPadding => {
-    if (!getIsElectronRuntime() || isFullscreen) {
-      return { left: 0, right: 0, top: 0 };
-    }
+  return resolveRawWindowControlsPadding({
+    isElectron: getIsElectronRuntime(),
+    isMac: getIsElectronRuntimeMac(),
+    isFullscreen,
+  });
+}
 
-    if (getIsElectronRuntimeMac()) {
-      return {
-        left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
-        right: 0,
-        top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
-      };
-    }
+export function resolveRawWindowControlsPadding(input: {
+  isElectron: boolean;
+  isMac: boolean;
+  isFullscreen: boolean;
+}): RawWindowControlsPadding {
+  if (!input.isElectron || input.isFullscreen) {
+    return { left: 0, right: 0, top: 0 };
+  }
 
+  if (input.isMac) {
     return {
-      left: 0,
-      right: DESKTOP_WINDOW_CONTROLS_WIDTH,
-      top: DESKTOP_WINDOW_CONTROLS_HEIGHT,
+      left: DESKTOP_TRAFFIC_LIGHT_WIDTH,
+      right: 0,
+      top: DESKTOP_TRAFFIC_LIGHT_HEIGHT,
     };
-  }, [isFullscreen]);
+  }
+
+  return {
+    left: 0,
+    right: DESKTOP_WINDOW_CONTROLS_WIDTH,
+    top: DESKTOP_WINDOW_CONTROLS_HEIGHT,
+  };
 }
 
 export function useWindowControlsPadding(role: WindowControlsPaddingRole): {
@@ -163,8 +173,8 @@ export function resolveWindowControlsPadding(input: {
 
   if (input.role === "tabRow") {
     return {
-      left: input.sidebarClosed && input.focusModeEnabled ? input.rawPadding.left : 0,
-      right: input.focusModeEnabled && !input.explorerOpen ? input.rawPadding.right : 0,
+      left: input.focusModeEnabled ? input.rawPadding.left : 0,
+      right: input.focusModeEnabled ? input.rawPadding.right : 0,
       top: 0,
     };
   }