From edfe711eda58965e4fe1cc7c43dfcdd651b0d230 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 16 Aug 2024 23:45:22 -0700
Subject: [PATCH] Use Window Controls Overlay API for native-like experience on
 Windows and Linux (#240)

This PR implements the [Window Controls Overlay
API](https://web.dev/articles/window-controls-overlay) to let us hide
the menu bar on Windows and Linux and directly embed the window controls
in our tab bar. With #239 merged, we no longer need the menu bar on
these platforms.

The overlaid window controls are transparent so they will take on the
background from the app. I've updated the tab bar to flow properly using
the API's CSS environment variables.

At some point, we may want to update the logic around the symbolColor so
that it can ensure a proper contrast between the background and the
symbols in the window controls. For now, setting them to white works for
all the backgrounds we currently support.

![image
(2)](https://github.com/user-attachments/assets/7610f10b-9696-435c-9a2d-a435bee9fadb)


https://github.com/user-attachments/assets/8d19b512-5281-42b9-8abb-ccb9b850061f
---
 emain/emain.ts               | 9 ++++++++-
 frontend/app/tab/tabbar.less | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/emain/emain.ts b/emain/emain.ts
index 3bd5cc3e7..27d1db865 100644
--- a/emain/emain.ts
+++ b/emain/emain.ts
@@ -332,7 +332,14 @@ function createBrowserWindow(
     };
     winBounds = ensureBoundsAreVisible(winBounds);
     const winOpts: Electron.BrowserWindowConstructorOptions = {
-        titleBarStyle: "hiddenInset",
+        titleBarStyle: unamePlatform === "darwin" ? "hiddenInset" : "hidden",
+        titleBarOverlay:
+            unamePlatform !== "darwin"
+                ? {
+                      symbolColor: "white",
+                      color: "#00000000",
+                  }
+                : false,
         x: winBounds.x,
         y: winBounds.y,
         width: winBounds.width,
diff --git a/frontend/app/tab/tabbar.less b/frontend/app/tab/tabbar.less
index 72ed5ccd9..b431b5ca5 100644
--- a/frontend/app/tab/tabbar.less
+++ b/frontend/app/tab/tabbar.less
@@ -17,6 +17,7 @@
     user-select: none;
     display: flex;
     flex-direction: row;
+    width: env(titlebar-area-width);
 
     .tabs-wrapper {
         transition: var(--tabs-wrapper-transition);