fix(app): centralize window controls padding into useWindowControlsPadding hook

Replaces useTrafficLightPadding with a role-based useWindowControlsPadding
hook that absorbs all layout-conditional logic (sidebar state, focus mode,
explorer state). Consumers no longer make platform or layout decisions —
they just apply the resolved padding values.

Fixes Windows title bar overlay buttons overlapping source control icons
when the left sidebar is open, and right padding not shifting to the
explorer sidebar header when it's open.

Also fixes borderless header using borderBottomWidth:0 (layout shift)
instead of transparent, and double-click-to-maximize bounce on the
open project screen caused by nested drag handlers.

packages/app/src/components/headers/screen-header.tsx

@@ -7,8 +7,7 @@ import {
   HEADER_INNER_HEIGHT_MOBILE,
   HEADER_TOP_PADDING_MOBILE,
 } from "@/constants/layout";
-import { useDesktopDragHandlers, useTrafficLightPadding } from "@/utils/desktop-window";
-import { usePanelStore } from "@/stores/panel-store";
+import { useDesktopDragHandlers, useWindowControlsPadding } from "@/utils/desktop-window";
 
 interface ScreenHeaderProps {
   left?: ReactNode;
@@ -26,15 +25,10 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
   const { theme } = useUnistyles();
   const insets = useSafeAreaInsets();
   const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const trafficLightPadding = useTrafficLightPadding();
+  const padding = useWindowControlsPadding("header");
   // 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 collapsedSidebarInset =
-    !isMobile && !desktopAgentListOpen && trafficLightPadding.side
-      ? trafficLightPadding
-      : { left: 0, right: 0 };
 
   const dragHandlers = useDesktopDragHandlers();
 
@@ -45,8 +39,8 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }:
           style={[
             styles.row,
             {
-              paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
-              paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
+              paddingLeft: baseHorizontalPadding + padding.left,
+              paddingRight: baseHorizontalPadding + padding.right,
             },
             borderless && styles.borderless,
           ]}
@@ -90,6 +84,6 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   borderless: {
-    borderBottomWidth: 0,
+    borderBottomColor: "transparent",
   },
 }));