Replace the system's title bar with the editor's own on Linux

[olehwebdev]

What and why

On Linux (Ubuntu), the editor's window had two bars on top: the system's light title bar naming the app, and the editor's own dark title bar below it. The system's bar is now gone. The editor's title bar is the top of the window:

• Moving the window: drag the bar. Its controls (the site chip, the command-palette button, the layout toggles) still click as before.
• Window buttons: minimize, maximize and close sit at the bar's right end, drawn by Electron in the bar's colours (the canvas behind, --fg-muted symbols). The bar's bottom border runs on under them.
• Other systems: macOS and Windows keep their system title bars and don't change.

How:

• Main (src/main/launch/createEditorWindow.ts): on Linux, titleBarStyle: 'hidden' with a titleBarOverlay (Window Controls Overlay).
  • Its colours come from CANVAS_COLOR and the new TITLE_BAR_SYMBOL_COLOR (--fg-muted as hex).
  • Its height is TITLE_BAR_HEIGHT: 43 px, the bar's 44 px less its border.
• Renderer (widgets/title-bar): the <header> is app-region: drag, and its interactive parts are no-drag.
  • Its right padding grows by the new --titlebar-controls-w token (tokens.css): the width the overlay leaves out of the title bar area, from env(titlebar-area-x/width).
  • Without an overlay that width is 0.
• Not in this PR: the website's own window and the Actions panel's window keep the system bar. The website window's toolbar is shared with the docked preview inside the editor, so making it a drag area needs its own change.

How it was tested

• E2E (test/e2e/app.e2e.test.ts, Linux only): in the built app,
  • navigator.windowControlsOverlay is visible;
  • the layout toggles end before the title bar area the window buttons leave;
  • the bar computes to app-region: drag, and the toggles and the palette button to no-drag.
• By hand, under Xvfb:
  • The unprefixed app-region is supported by this Electron's Chromium.
  • The window buttons take 113 px, the bar's right padding is 125 px, and the toggles end at 1475 of 1487 px.
  • A capture of the screen (Electron's desktopCapturer) shows the bar with the buttons at its right end.
• Not checked: Xvfb has no window manager. Resizing from the edges, snapping and double-click to maximize on GNOME (X11 or Wayland) still need a try on a real desktop.

Checklist

• Comes from a git flow branch (feature/…, bugfix/…) into main, and does one thing
• npm run typecheck, npm run lint:fsd, npm run lint:structure, npm run lint, npm run lint:unused, npm run lint:duplicates, npm run lint:secrets, npm test and npm run test:e2e pass (1207 unit, 112 e2e)
• docs/SPEC.md describes any behaviour this changes (§7 Layout, §9 End-to-end), and so does docs/DESIGN_SYSTEM.md (Spacing)
• User-visible changes are noted under [Unreleased] in CHANGELOG.md (Changed)