diff --git a/packages/app/src/components/headers/screen-header.tsx b/packages/app/src/components/headers/screen-header.tsx index 6f2bcf81a..4d499fb77 100644 --- a/packages/app/src/components/headers/screen-header.tsx +++ b/packages/app/src/components/headers/screen-header.tsx @@ -6,7 +6,6 @@ import { HEADER_INNER_HEIGHT, HEADER_INNER_HEIGHT_MOBILE, HEADER_TOP_PADDING_MOBILE, - getIsDesktopMac, } from "@/constants/layout"; import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window"; import { usePanelStore } from "@/stores/panel-store"; @@ -31,8 +30,10 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeade // Only add extra padding on mobile for better touch targets; on desktop, only use safe area insets const topPadding = isMobile ? HEADER_TOP_PADDING_MOBILE : 0; const baseHorizontalPadding = theme.spacing[2]; - const collapsedSidebarTrafficLightInset = - !isMobile && !desktopAgentListOpen && getIsDesktopMac() ? trafficLightPadding.left : 0; + const collapsedSidebarInset = + !isMobile && !desktopAgentListOpen && trafficLightPadding.side + ? trafficLightPadding + : { left: 0, right: 0 }; const dragHandlers = useDesktopDragHandlers(); @@ -42,7 +43,10 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeade diff --git a/packages/app/src/components/left-sidebar.tsx b/packages/app/src/components/left-sidebar.tsx index 88d95589b..0fa73c041 100644 --- a/packages/app/src/components/left-sidebar.tsx +++ b/packages/app/src/components/left-sidebar.tsx @@ -681,7 +681,7 @@ function DesktopSidebar({ return ( - {trafficLightPadding.top > 0 ? ( + {trafficLightPadding.side === 'left' ? ( ) : null} diff --git a/packages/app/src/components/split-container.tsx b/packages/app/src/components/split-container.tsx index c2bf78bb3..88f458407 100644 --- a/packages/app/src/components/split-container.tsx +++ b/packages/app/src/components/split-container.tsx @@ -886,7 +886,10 @@ function SplitPaneView({ style={[ styles.paneTabs, isFocusModeEnabled && - trafficLightPadding.left > 0 && { paddingLeft: trafficLightPadding.left }, + trafficLightPadding.side && { + paddingLeft: trafficLightPadding.left, + paddingRight: trafficLightPadding.right, + }, ]} > { @@ -31,7 +32,7 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) { return ( - + diff --git a/packages/app/src/utils/desktop-window.ts b/packages/app/src/utils/desktop-window.ts index 9351082eb..5098ce2dd 100644 --- a/packages/app/src/utils/desktop-window.ts +++ b/packages/app/src/utils/desktop-window.ts @@ -2,8 +2,11 @@ import { useEffect, useMemo, useRef, useState } from "react"; import { Platform, type PointerEvent as RNPointerEvent, type ViewProps } from "react-native"; import { getIsDesktopMac, + getIsDesktop, DESKTOP_TRAFFIC_LIGHT_WIDTH, DESKTOP_TRAFFIC_LIGHT_HEIGHT, + DESKTOP_WINDOW_CONTROLS_WIDTH, + DESKTOP_WINDOW_CONTROLS_HEIGHT, } from "@/constants/layout"; import { getDesktopWindow } from "@/desktop/electron/window"; import { isDesktop } from "@/desktop/host"; @@ -120,11 +123,11 @@ export function useDesktopDragHandlers(): DesktopDragViewProps { }, [isActive]); } -export function useTrafficLightPadding(): { left: number; top: number } { +export function useTrafficLightPadding(): { left: number; right: number; top: number; side: 'left' | 'right' | null } { const [isFullscreen, setIsFullscreen] = useState(false); useEffect(() => { - if (Platform.OS !== "web" || !getIsDesktopMac()) return; + if (Platform.OS !== "web" || !getIsDesktop()) return; let disposed = false; let cleanup: (() => void) | undefined; @@ -175,12 +178,23 @@ export function useTrafficLightPadding(): { left: number; top: number } { }; }, []); - if (!getIsDesktopMac() || isFullscreen) { - return { left: 0, top: 0 }; + if (!getIsDesktop() || isFullscreen) { + return { left: 0, right: 0, top: 0, side: null }; + } + + if (getIsDesktopMac()) { + return { + left: DESKTOP_TRAFFIC_LIGHT_WIDTH, + right: 0, + top: DESKTOP_TRAFFIC_LIGHT_HEIGHT, + side: 'left', + }; } return { - left: DESKTOP_TRAFFIC_LIGHT_WIDTH, - top: DESKTOP_TRAFFIC_LIGHT_HEIGHT, + left: 0, + right: DESKTOP_WINDOW_CONTROLS_WIDTH, + top: DESKTOP_WINDOW_CONTROLS_HEIGHT, + side: 'right', }; } diff --git a/packages/desktop/src/main.ts b/packages/desktop/src/main.ts index 6f0b43ba5..1579045fd 100644 --- a/packages/desktop/src/main.ts +++ b/packages/desktop/src/main.ts @@ -92,8 +92,17 @@ async function createMainWindow(): Promise { height: 800, show: false, ...(iconPath ? { icon: iconPath } : {}), - titleBarStyle: isMac ? "hidden" : "default", - trafficLightPosition: isMac ? { x: 16, y: 14 } : undefined, + titleBarStyle: "hidden", + ...(isMac + ? { trafficLightPosition: { x: 16, y: 14 } } + : { + titleBarOverlay: { + color: "#18181c", + symbolColor: "#e4e4e7", + height: 48, + }, + autoHideMenuBar: true, + }), webPreferences: { preload: getPreloadPath(), contextIsolation: true,