Add per-platform window chrome for the borderless window

The window ran with decorations: false on every platform but drew no
titlebar of its own, so on Windows (and stacking Linux desktops) it had
no minimize/maximize/close and could not be moved. Tiling WMs hid the
problem by moving windows themselves.

Windows/Linux: keep decorations off and supply our own chrome. The
header is a drag region (data-tauri-drag-region) and a WindowControls
component renders flush-corner minimize/maximize/close buttons, wired to
the Tauri window via the global API. The maximize glyph re-syncs from the
real window state on resize so OS-side snap/maximize stays consistent.

macOS: tauri.macos.conf.json keeps native decorations with
titleBarStyle "Overlay" + hiddenTitle, so the native traffic lights show;
we render no custom controls there and inset the topbar's left edge to
clear them.

Controls and the mac inset are gated on the Tauri window handle being
present, so they are inert in a browser and under jsdom. Adds the
window permissions the chrome needs (start-dragging, minimize,
toggle-maximize, close). Also removes the polypore version brand tag from
the topbar.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

Author: evanklem

src-tauri/tauri.conf.json

@@ -46,6 +46,10 @@
             "core:default",
             "core:event:default",
             "core:window:default",
+            "core:window:allow-start-dragging",
+            "core:window:allow-minimize",
+            "core:window:allow-toggle-maximize",
+            "core:window:allow-close",
             "core:webview:default",
             "core:webview:allow-set-webview-zoom",
             "updater:default"

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "app": {
+    "windows": [
+      {
+        "title": "Polypore",
+        "width": 1400,
+        "height": 900,
+        "minWidth": 1100,
+        "minHeight": 700,
+        "decorations": true,
+        "dragDropEnabled": false,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true
+      }
+    ]
+  }
+}

src/App.test.tsx

@@ -289,7 +289,6 @@ test('new-project wizard rejects names that do not start with a letter or number
 test('renders the default glassy operator workspace shell', () => {
   render(<App />);
 
-  expect(screen.getByText('polypore v0.1.0')).toBeInTheDocument();
   expect(screen.getByText('workspace')).toBeInTheDocument();
   expect(screen.getByRole('button', { name: /git branch none/i })).toBeInTheDocument();
   expect(screen.getByRole('button', { name: /^help$/i })).toBeInTheDocument();

src/components/topbar/TopBar.tsx

@@ -1,8 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { LaunchTarget } from '../../Launcher';
 import type { PanelType, UserWorkspacePreset, WorkspaceName } from '../../core/types';
 import { GitMenu, type GitNotice } from './GitMenu';
+import { getAppWindow, IS_MAC } from './platform';
 import { ProjectMenu } from './ProjectMenu';
+import { WindowControls } from './WindowControls';
 import { WorkspaceMenu } from './WorkspaceMenu';
 import type { ProjectStatusResult, TauriInvoke } from './types';
 
@@ -46,6 +48,11 @@ export function TopBar({
   const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
   const [gitNotice, setGitNotice] = useState<GitNotice | null>(null);
   const headerRef = useRef<HTMLElement>(null);
+  /* Present only inside the Tauri desktop shell. On macOS the native traffic
+     lights handle min/max/close, so we draw our own controls only off-mac and
+     instead inset the left edge to clear the overlaid traffic lights. */
+  const appWindow = useMemo(() => getAppWindow(), []);
+  const macInset = appWindow !== null && IS_MAC;
   const [status, setStatus] = useState<ProjectStatusResult>({
     path: '',
     name: 'polypore',
@@ -114,7 +121,11 @@ export function TopBar({
   }, [openMenu]);
 
   return (
-    <header className="topbar" ref={headerRef}>
+    <header
+      className={`topbar${macInset ? ' topbar--mac' : ''}`}
+      ref={headerRef}
+      data-tauri-drag-region
+    >
       <ProjectMenu
         status={status}
         onStatusChange={setStatus}
@@ -151,7 +162,7 @@ export function TopBar({
           render elsewhere when they're real. */}
       <button className="segment settings-button" title="settings" aria-label="settings" onClick={onOpenSettings}>settings</button>
       <button className="segment help-button" title="help" aria-label="help" onClick={onOpenHelp}>help</button>
-      <div className="segment segment--brand">polypore v{__APP_VERSION__}</div>
+      {appWindow && !IS_MAC && <WindowControls appWindow={appWindow} />}
       {gitNotice && (
         <div
           className={`git-toast git-toast--${gitNotice.tone}`}

src/components/topbar/WindowControls.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { AppWindowControls } from './platform';
+
+/* Caption buttons for the borderless Windows/Linux window. The middle button's
+   glyph flips to a "restore" pair while the window is maximized; we re-query the
+   real state on every OS resize rather than trusting our own toggle, so an
+   OS-driven maximize (Win+Up, snap, double-clicking the drag region) stays in
+   sync with the glyph. Tauri calls reject if the window is gone mid-action —
+   swallow those, there is nothing to recover. */
+export function WindowControls({ appWindow }: { appWindow: AppWindowControls }) {
+  const [maximized, setMaximized] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const sync = () => {
+      appWindow
+        .isMaximized()
+        .then((value) => {
+          if (!cancelled) setMaximized(value);
+        })
+        .catch(() => {});
+    };
+    sync();
+    window.addEventListener('resize', sync);
+    return () => {
+      cancelled = true;
+      window.removeEventListener('resize', sync);
+    };
+  }, [appWindow]);
+
+  const minimize = useCallback(() => {
+    appWindow.minimize().catch(() => {});
+  }, [appWindow]);
+  const toggleMaximize = useCallback(() => {
+    appWindow.toggleMaximize().catch(() => {});
+  }, [appWindow]);
+  const close = useCallback(() => {
+    appWindow.close().catch(() => {});
+  }, [appWindow]);
+
+  return (
+    <div className="window-controls" role="group" aria-label="window controls">
+      <button
+        type="button"
+        className="window-control"
+        aria-label="minimize"
+        title="Minimize"
+        onClick={minimize}
+      >
+        <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false">
+          <path d="M1 5h8" stroke="currentColor" strokeWidth="1" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className="window-control"
+        aria-label={maximized ? 'restore' : 'maximize'}
+        title={maximized ? 'Restore' : 'Maximize'}
+        onClick={toggleMaximize}
+      >
+        {maximized ? (
+          <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1">
+            <path d="M2.5 3.5V1.5h6v6h-2" />
+            <rect x="1.5" y="3.5" width="5" height="5" />
+          </svg>
+        ) : (
+          <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" strokeWidth="1">
+            <rect x="1.5" y="1.5" width="7" height="7" />
+          </svg>
+        )}
+      </button>
+      <button
+        type="button"
+        className="window-control window-control--close"
+        aria-label="close"
+        title="Close"
+        onClick={close}
+      >
+        <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false" stroke="currentColor" strokeWidth="1">
+          <path d="M1.5 1.5l7 7M8.5 1.5l-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+}

src/components/topbar/platform.ts

@@ -0,0 +1,29 @@
+/* Window chrome differs by OS. On macOS we keep the native traffic lights
+   (tauri.macos.conf.json sets titleBarStyle: "Overlay") and render no custom
+   controls; on Windows/Linux the native title bar is off (decorations: false)
+   and we draw our own minimize / maximize / close.
+
+   Both the controls and the macOS left-inset run only inside the Tauri desktop
+   shell. In a plain browser or under jsdom there is no native window to drive,
+   so getAppWindow() returns null and callers no-op. */
+
+export interface AppWindowControls {
+  minimize(): Promise<void>;
+  toggleMaximize(): Promise<void>;
+  close(): Promise<void>;
+  isMaximized(): Promise<boolean>;
+}
+
+type GlobalTauri = {
+  window?: { getCurrentWindow?: () => AppWindowControls };
+};
+
+export const IS_MAC =
+  typeof navigator !== 'undefined' && /mac/i.test(navigator.userAgent);
+
+/* The handle exposed by Tauri's global API (withGlobalTauri). Returns null when
+   not running inside the desktop shell. */
+export function getAppWindow(): AppWindowControls | null {
+  const tauri = (window as Window & { __TAURI__?: GlobalTauri }).__TAURI__;
+  return tauri?.window?.getCurrentWindow?.() ?? null;
+}

src/components/topbar/topbar.css

@@ -227,6 +227,76 @@
 }
 
 
+/* Custom caption buttons, shown only on Windows/Linux where the native title
+   bar is off (decorations: false). They sit flush in the top-right corner —
+   the negative margins cancel the topbar's padding so the hit targets reach the
+   window edges (Fitts's law). macOS never renders these; .topbar--mac instead
+   insets the left edge to clear the native traffic lights overlaid by
+   titleBarStyle: "Overlay". */
+.window-controls {
+  display: flex;
+  align-self: stretch;
+  margin: -4px -8px -4px 2px;
+}
+
+
+.window-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--muted);
+  cursor: default;
+  transition: background 0.1s, color 0.1s;
+}
+
+
+.window-control:hover {
+  background: var(--accent-12);
+  color: var(--ink);
+}
+
+
+.window-control:active {
+  background: var(--accent-18);
+}
+
+
+.window-control:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: -3px;
+}
+
+
+.window-control svg {
+  width: 10px;
+  height: 10px;
+}
+
+
+/* Close is the one caption button with a destructive, platform-standard red
+   hover so an accidental hover reads clearly before the click. */
+.window-control--close:hover {
+  background: #e81123;
+  color: #fff;
+}
+
+
+.window-control--close:active {
+  background: #c50f1f;
+  color: #fff;
+}
+
+
+.topbar--mac {
+  padding-left: 76px;
+}
+
+
 .git-branch-menu {
   position: relative;
   flex: 0 0 auto;