Gate the titlebar inset on a windowChrome capability instead of osType (#570)

packages/platform/src/tauri/index.ts

@@ -58,6 +58,7 @@ const ALL_CAPABILITIES: PlatformCapabilities = {
   localFiles: true,
   timeline: true,
   multiWindow: true,
+  windowChrome: true,
   plugins: true,
   encryption: true,
   updater: true,

packages/platform/src/types.ts

@@ -255,6 +255,13 @@ export interface PlatformCapabilities {
   timeline: boolean;
   /** More than one window or tab on the same data. */
   multiWindow: boolean;
+  /**
+   * The page is the window's titlebar: it draws the drag region and window
+   * controls, and leaves room for macOS traffic lights. False when something
+   * else owns the frame around the page (a browser tab), so none of that
+   * chrome should be reserved or drawn.
+   */
+  windowChrome: boolean;
   /** The plugin runtime. */
   plugins: boolean;
   /** Workspace encryption backed by a key the host keeps. */

packages/platform/src/web/README.md

@@ -129,13 +129,16 @@ Reported honestly, so callers gate on the question rather than on the host:
 
 | True | False |
 | --- | --- |
-| `cookieJar` (the jar stores and edits here; only filling it needs the sender) | `grpc`, `websocket`, `git`, `sync`, `tlsOptions`, `localFiles`, `timeline`, `multiWindow`, `plugins`, `encryption`, `updater`, `clipboardRead`, `systemFonts`, `license` |
+| `cookieJar` (the jar stores and edits here; only filling it needs the sender) | `grpc`, `websocket`, `git`, `sync`, `tlsOptions`, `localFiles`, `timeline`, `multiWindow`, `windowChrome`, `plugins`, `encryption`, `updater`, `clipboardRead`, `systemFonts`, `license` |
 
 `multiWindow: false` means the host cannot open a *second window* on demand —
 what `cmd_new_child_window` does for Settings and workspace switching. It is not
 a claim that nothing else is looking: other tabs may well be open on the same
 worker, and it pushes every write to all of them regardless.
 
+`windowChrome: false` means the browser owns the frame around the page, so the
+header draws no window controls and reserves no room for macOS traffic lights.
+
 ## Multiple tabs
 
 Each tab mints a label at load (`tab_xxxxxxxx`) and sends it with every command;

packages/platform/src/web/index.ts

@@ -49,6 +49,9 @@ function capabilitiesFor(): PlatformCapabilities {
     // else is looking: other tabs may well be open on the same worker, and it
     // pushes every write to all of them regardless of this flag.
     multiWindow: false,
+    // The browser draws the frame around the page. There are no traffic lights
+    // to leave room for and no window controls to draw.
+    windowChrome: false,
     plugins: false,
     encryption: false,
     updater: false,

packages/ui/src/components/HeaderSize.tsx

@@ -1,3 +1,4 @@
+import { useCapability } from "@yaakapp-internal/platform";
 import classNames from "classnames";
 import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
 import { useMemo } from "react";
@@ -31,6 +32,10 @@ export function HeaderSize({
   interfaceScale,
 }: HeaderSizeProps) {
   const isFullscreen = useIsFullscreen();
+  // The header only doubles as the titlebar when the host hands the page the
+  // window frame (Tauri) and the user hasn't opted for the native one. In a
+  // browser tab the frame is the browser's: no controls, no traffic lights.
+  const drawsWindowChrome = useCapability("windowChrome") && !useNativeTitlebar;
   const finalStyle = useMemo<CSSProperties>(() => {
     const s = { ...style };
 
@@ -38,8 +43,8 @@ export function HeaderSize({
     if (size === "md") s.minHeight = HEADER_SIZE_MD;
     if (size === "lg") s.minHeight = HEADER_SIZE_LG;
 
-    if (useNativeTitlebar) {
+    if (!drawsWindowChrome) {
-      // No style updates when using native titlebar
+      // No style updates when something else draws the titlebar
     } else if (osType === "macos") {
       if (!isFullscreen) {
         // Add large padding for window controls
@@ -57,7 +62,7 @@ export function HeaderSize({
     interfaceScale,
     size,
     style,
-    useNativeTitlebar,
+    drawsWindowChrome,
     osType,
   ]);
 
@@ -82,7 +87,7 @@ export function HeaderSize({
       >
         {children}
       </div>
-      {!hideControls && !useNativeTitlebar && (
+      {!hideControls && drawsWindowChrome && (
         <WindowControls
           onlyX={onlyXWindowControl}
           osType={osType}