window controls overlay (windows&linux) (pingdotgg#1969)

Co-authored-by: julius <julius0216@outlook.com>

Author: 2 people

apps/desktop/src/main.ts

@@ -10,6 +10,7 @@ declare const __EMBEDDED_MARCODE_JIRA_TOKEN_PROXY_URL__: string;
 import {
   app,
   BrowserWindow,
+  type BrowserWindowConstructorOptions,
   clipboard,
   dialog,
   ipcMain,
@@ -154,6 +155,16 @@ function normalizeContextMenuItems(source: readonly ContextMenuItem[]): ContextM
   return normalizedItems;
 }
 
+const TITLEBAR_HEIGHT = 40;
+const TITLEBAR_COLOR = "#01000000"; // #00000000 does not work correctly on Linux
+const TITLEBAR_LIGHT_SYMBOL_COLOR = "#1f2937";
+const TITLEBAR_DARK_SYMBOL_COLOR = "#f8fafc";
+
+type WindowTitleBarOptions = Pick<
+  BrowserWindowConstructorOptions,
+  "titleBarOverlay" | "titleBarStyle" | "trafficLightPosition"
+>;
+
 type DesktopUpdateErrorContext = DesktopUpdateState["errorContext"];
 type LinuxDesktopNamedApp = Electron.App & {
   setDesktopName?: (desktopName: string) => void;
@@ -1716,6 +1727,46 @@ function saveWindowState(window: BrowserWindow): void {
   writeWindowState(WINDOW_STATE_PATH, lastWindowState);
 }
 
+function getWindowTitleBarOptions(): WindowTitleBarOptions {
+  if (process.platform === "darwin") {
+    return {
+      titleBarStyle: "hiddenInset",
+      trafficLightPosition: { x: 16, y: 18 },
+    };
+  }
+
+  return {
+    titleBarStyle: "hidden",
+    titleBarOverlay: {
+      color: TITLEBAR_COLOR,
+      height: TITLEBAR_HEIGHT,
+      symbolColor: nativeTheme.shouldUseDarkColors
+        ? TITLEBAR_DARK_SYMBOL_COLOR
+        : TITLEBAR_LIGHT_SYMBOL_COLOR,
+    },
+  };
+}
+
+function syncWindowAppearance(window: BrowserWindow): void {
+  if (window.isDestroyed()) {
+    return;
+  }
+
+  window.setBackgroundColor(getInitialWindowBackgroundColor());
+  const { titleBarOverlay } = getWindowTitleBarOptions();
+  if (typeof titleBarOverlay === "object") {
+    window.setTitleBarOverlay(titleBarOverlay);
+  }
+}
+
+function syncAllWindowAppearance(): void {
+  for (const window of BrowserWindow.getAllWindows()) {
+    syncWindowAppearance(window);
+  }
+}
+
+nativeTheme.on("updated", syncAllWindowAppearance);
+
 function createWindow(options?: { deferLoad?: boolean }): BrowserWindow {
   const restoredBounds = resolveWindowBounds(lastWindowState);
 
@@ -1728,8 +1779,7 @@ function createWindow(options?: { deferLoad?: boolean }): BrowserWindow {
     backgroundColor: getInitialWindowBackgroundColor(),
     ...getIconOption(),
     title: APP_DISPLAY_NAME,
-    titleBarStyle: "hiddenInset",
-    trafficLightPosition: { x: 16, y: 18 },
+    ...getWindowTitleBarOptions(),
     webPreferences: {
       preload: Path.join(__dirname, "preload.js"),
       contextIsolation: true,

apps/web/src/components/ChatView.tsx

@@ -464,6 +464,7 @@ interface SubmitComposerTurnInput {
 interface ChatViewProps {
   threadId: ThreadId;
   environmentId?: EnvironmentId;
+  reserveTitleBarControlInset?: boolean;
 }
 
 interface TerminalLaunchContext {
@@ -723,7 +724,11 @@ function PersistentThreadTerminalDrawer({
   );
 }
 
-export default function ChatView({ threadId, environmentId: environmentIdProp }: ChatViewProps) {
+export default function ChatView({
+  threadId,
+  environmentId: environmentIdProp,
+  reserveTitleBarControlInset = true,
+}: ChatViewProps) {
   const { isMobile, state: sidebarState } = useSidebar();
   const sidebarVisible = !isMobile && sidebarState === "expanded";
   const primaryEnvironmentId = usePrimaryEnvironmentId();
@@ -4845,7 +4850,13 @@ export default function ChatView({ threadId, environmentId: environmentIdProp }:
         className={cn(
           "border-b border-border",
           isElectron && !sidebarVisible ? "pr-3 sm:pr-5 pl-[90px]" : "px-3 sm:px-5",
-          isElectron ? "drag-region flex h-[52px] items-center" : "py-2 sm:py-3",
+          isElectron
+            ? cn(
+                "drag-region flex h-[52px] items-center wco:h-[env(titlebar-area-height)]",
+                reserveTitleBarControlInset &&
+                  "wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]",
+              )
+            : "py-2 sm:py-3",
         )}
       >
         <ChatHeader

apps/web/src/components/DiffPanelShell.tsx

@@ -10,8 +10,10 @@ export type DiffPanelMode = "inline" | "sheet" | "sidebar";
 function getDiffPanelHeaderRowClassName(mode: DiffPanelMode) {
   const shouldUseDragRegion = isElectron && mode !== "sheet";
   return cn(
-    "flex items-center justify-between gap-2 px-4",
-    shouldUseDragRegion ? "drag-region h-[52px] border-b border-border" : "h-12",
+    "flex items-center justify-between gap-2 px-4 wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]",
+    shouldUseDragRegion
+      ? "drag-region h-[52px] border-b border-border wco:h-[env(titlebar-area-height)]"
+      : "h-12 wco:max-h-[env(titlebar-area-height)]",
   );
 }
 

apps/web/src/components/NoActiveThreadState.tsx

@@ -10,11 +10,15 @@ export function NoActiveThreadState() {
         <header
           className={cn(
             "border-b border-border px-3 sm:px-5",
-            isElectron ? "drag-region flex h-[52px] items-center" : "py-2 sm:py-3",
+            isElectron
+              ? "drag-region flex h-[52px] items-center wco:h-[env(titlebar-area-height)]"
+              : "py-2 sm:py-3",
           )}
         >
           {isElectron ? (
-            <span className="text-xs text-muted-foreground/50">No active thread</span>
+            <span className="text-xs text-muted-foreground/50 wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]">
+              No active thread
+            </span>
           ) : (
             <div className="flex items-center gap-2">
               <SidebarTrigger className="size-7 shrink-0 md:hidden" />

apps/web/src/components/Sidebar.tsx

@@ -64,7 +64,7 @@ import { usePrimaryEnvironmentId } from "../environments/primary";
 import { isElectron } from "../env";
 import { APP_BASE_NAME, APP_STAGE_LABEL, APP_VERSION } from "../branding";
 import { isTerminalFocused } from "../lib/terminalFocus";
-import { isMacPlatform, newCommandId, newProjectId } from "../lib/utils";
+import { cn, isMacPlatform, newCommandId, newProjectId } from "../lib/utils";
 import {
   selectBootstrapCompleteForActiveEnvironment,
   selectProjectByRef,
@@ -2370,8 +2370,11 @@ const SidebarChromeHeader = memo(function SidebarChromeHeader({
 
   return isElectron ? (
     <SidebarHeader
-      className="drag-region h-[52px] flex-row items-center justify-center gap-2 py-0"
-      style={isDesktopFullscreen ? undefined : { paddingLeft: 58 }}
+      className={cn(
+        "drag-region h-[52px] flex-row items-center justify-center gap-2 py-0",
+        !isDesktopFullscreen && "pl-[58px]",
+        "wco:h-[env(titlebar-area-height)] wco:pl-[calc(env(titlebar-area-x)+1em)]",
+      )}
     >
       {wordmark}
     </SidebarHeader>

apps/web/src/index.css

@@ -25,6 +25,8 @@
 }
 
 @custom-variant dark (&:is(.dark, .dark *));
+/* Window Controls Overlay: active when Electron exposes native titlebar control geometry. */
+@custom-variant wco (&:is(.wco, .wco *));
 
 @theme inline {
   --font-heading: "Klaster Sans", sans-serif;

apps/web/src/lib/windowControlsOverlay.ts

@@ -0,0 +1,40 @@
+const WCO_CLASS_NAME = "wco";
+
+interface WindowControlsOverlayLike {
+  readonly visible: boolean;
+  addEventListener(type: "geometrychange", listener: EventListener): void;
+  removeEventListener(type: "geometrychange", listener: EventListener): void;
+}
+
+interface NavigatorWithWindowControlsOverlay extends Navigator {
+  readonly windowControlsOverlay?: WindowControlsOverlayLike;
+}
+
+function getWindowControlsOverlay(): WindowControlsOverlayLike | null {
+  if (typeof navigator === "undefined") {
+    return null;
+  }
+
+  return (navigator as NavigatorWithWindowControlsOverlay).windowControlsOverlay ?? null;
+}
+
+export function syncDocumentWindowControlsOverlayClass(): () => void {
+  if (typeof document === "undefined") {
+    return () => {};
+  }
+
+  const overlay = getWindowControlsOverlay();
+  const update = () => {
+    document.documentElement.classList.toggle(WCO_CLASS_NAME, overlay !== null && overlay.visible);
+  };
+
+  update();
+  if (!overlay) {
+    return () => {};
+  }
+
+  overlay.addEventListener("geometrychange", update);
+  return () => {
+    overlay.removeEventListener("geometrychange", update);
+  };
+}

apps/web/src/main.tsx

@@ -9,12 +9,17 @@ import "./index.css";
 import { isElectron } from "./env";
 import { getRouter } from "./router";
 import { APP_DISPLAY_NAME } from "./branding";
+import { syncDocumentWindowControlsOverlayClass } from "./lib/windowControlsOverlay";
 
 // Electron loads the app from a file-backed shell, so hash history avoids path resolution issues.
 const history = isElectron ? createHashHistory() : createBrowserHistory();
 
 const router = getRouter(history);
 
+if (isElectron) {
+  syncDocumentWindowControlsOverlayClass();
+}
+
 document.title = APP_DISPLAY_NAME;
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

apps/web/src/routes/_chat.$environmentId.$threadId.tsx

@@ -334,7 +334,11 @@ function ChatThreadRouteView() {
     return (
       <>
         <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
-          <ChatView threadId={threadRef.threadId} environmentId={threadRef.environmentId} />
+          <ChatView
+            threadId={threadRef.threadId}
+            environmentId={threadRef.environmentId}
+            reserveTitleBarControlInset={!diffOpen}
+          />
         </SidebarInset>
         <DiffPanelInlineSidebar
           diffOpen={diffOpen}

apps/web/src/routes/settings.tsx

@@ -52,7 +52,7 @@ function SettingsContentLayout() {
         )}
 
         {isElectron && (
-          <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5">
+          <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5 wco:h-[env(titlebar-area-height)] wco:pr-[calc(100vw-env(titlebar-area-width)-env(titlebar-area-x)+1em)]">
             <span className="text-xs font-medium tracking-wide text-muted-foreground/70">
               Settings
             </span>