Set background color for window controls on Linux (#247)

The Window Controls Overlay API applies a transparent overlay on
Windows, but not on Linux. This PR addresses this by capturing the area
underneath the overlay, averaging the color of the area, and setting
this as the overlay background color.

It will also detect whether to make the control symbols white or black,
depending on how dark the background color is.

On Linux, this will set both the background color and the symbol color,
on Windows it will just set the symbol color.

<img width="721" alt="image"
src="https://github.com/user-attachments/assets/e6f9f8f8-a49f-41b6-984e-09e7d52c631d">

emain/emain.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as electron from "electron";
+import { getAverageColor } from "fast-average-color-node";
 import fs from "fs";
 import * as child_process from "node:child_process";
 import os from "os";
@@ -584,6 +585,27 @@ electron.ipcMain.on("getEnv", (event, varName) => {
     event.returnValue = process.env[varName] ?? null;
 });
 
+electron.ipcMain.on("update-window-controls-overlay", async (event, rect: Dimensions) => {
+    if (unamePlatform !== "darwin") {
+        const zoomFactor = event.sender.getZoomFactor();
+        const electronRect: Electron.Rectangle = {
+            x: rect.left * zoomFactor,
+            y: rect.top * zoomFactor,
+            height: rect.height * zoomFactor,
+            width: rect.width * zoomFactor,
+        };
+        const overlay = await event.sender.capturePage(electronRect);
+        const overlayBuffer = overlay.toPNG();
+
+        const color = await getAverageColor(overlayBuffer);
+        const window = electron.BrowserWindow.fromWebContents(event.sender);
+        window.setTitleBarOverlay({
+            color: unamePlatform === "linux" ? color.rgba : "#00000000", // Windows supports a true transparent overlay, so we don't need to set a background color.
+            symbolColor: color.isDark ? "white" : "black",
+        });
+    }
+});
+
 async function createNewWaveWindow() {
     const clientData = await services.ClientService.GetClientData();
     const newWindow = await services.ClientService.MakeWindow();

emain/preload.ts

@@ -24,6 +24,7 @@ contextBridge.exposeInMainWorld("api", {
     onUpdaterStatusChange: (callback) => ipcRenderer.on("app-update-status", (_event, status) => callback(status)),
     getUpdaterStatus: () => ipcRenderer.sendSync("get-app-update-status"),
     installAppUpdate: () => ipcRenderer.send("install-app-update"),
+    updateWindowControlsOverlay: (rect) => ipcRenderer.send("update-window-controls-overlay", rect),
 });
 
 // Custom event for "new-window"