From f139966554201d3703e1c3701eb8294738e243cb Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Thu, 4 Jun 2026 11:08:37 +0700 Subject: [PATCH] Fix focus mode tab padding --- packages/app/src/utils/desktop-window.test.ts | 67 ++++++++++++++++++- packages/app/src/utils/desktop-window.ts | 44 +++++++----- 2 files changed, 93 insertions(+), 18 deletions(-) diff --git a/packages/app/src/utils/desktop-window.test.ts b/packages/app/src/utils/desktop-window.test.ts index cdc0ce071..573faa917 100644 --- a/packages/app/src/utils/desktop-window.test.ts +++ b/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, + }); + }); }); diff --git a/packages/app/src/utils/desktop-window.ts b/packages/app/src/utils/desktop-window.ts index b374b5c76..c939a5745 100644 --- a/packages/app/src/utils/desktop-window.ts +++ b/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, }; }