fix(linux): window to have only one controls set

Author: Belar

src/base/components/titlebar.html

@@ -18,10 +18,6 @@
 			id="include-controls"
 			src="./components/controls.html"
 		></sl-include>
-		<sl-include
-			id="include-titlebar"
-			src="./components/titlebar.html"
-		></sl-include>
 		<sl-include src="./components/splash.html"></sl-include>
 		<sl-include id="include-tabs" src="./components/tabs.html"></sl-include>
 		<sl-include

src/base/index.html

@@ -38,42 +38,6 @@ body {
 	font-family: arial;
 }
 
-.titlebar {
-	position: fixed;
-	top: 0px;
-	right: 0px;
-	width: max-content;
-	text-align: right;
-	margin: 4px 4px 0px 0px;
-	cursor: default;
-	z-index: 5;
-	app-region: no-drag;
-	display: flex;
-
-	.linux-titlebar {
-		display: none;
-	}
-
-	button {
-		width: 32px;
-		height: 32px;
-		font-size: 0px;
-		border: none;
-		border-radius: 6px;
-		background: transparent;
-
-		&:hover {
-			background: #303236;
-		}
-
-		svg {
-			width: 16px;
-			height: 16px;
-			filter: invert(1);
-		}
-	}
-}
-
 sl-include.alert-modal {
 	position: fixed;
 	z-index: 50;

src/base/styles/index.css

@@ -3,5 +3,5 @@
 	"compilerOptions": {
 		"lib": ["ESNext", "DOM", "DOM.Iterable"]
 	},
-	"include": ["**/*", "../types"]
+	"include": ["**/*", "../tools", "../types"]
 }

src/base/tsconfig.json

@@ -16,20 +16,4 @@ export function applyDirectStyling() {
 			);
 		}, 1500);
 	}
-
-	if (process.platform === "linux") {
-		setTimeout(() => {
-			mainWindow.webContents.executeJavaScript(
-				`document.querySelector(".linux-titlebar").style.display = 'block'`,
-			);
-		}, 1500);
-	}
-
-	if (process.platform === "win32") {
-		setTimeout(() => {
-			mainWindow.webContents.executeJavaScript(
-				`document.querySelector(".titlebar").style.right = '145px'`,
-			);
-		}, 1500);
-	}
 }

src/process/platform.js

@@ -1,4 +1,4 @@
 {
 	"extends": "../../tsconfig.json",
-	"include": ["**/*", "../types"]
+	"include": ["**/*", "../tools", "../types"]
 }

src/process/tsconfig.json

@@ -4,9 +4,23 @@ import path from "path";
 
 import { setAppMenu, getTabMenu } from "./menu.js";
 import { applyDirectStyling } from "./platform.js";
+import { deepFreeze } from "../tools/object.js";
 
 /** @type {import("electron").BrowserWindow} */
 let mainWindow;
+const TITLEBAR_OVERLAY = deepFreeze({
+	BASE: {
+		height: 42,
+	},
+	DARK: {
+		color: "#18181a",
+		symbolColor: "#ffffff",
+	},
+	LIGHT: {
+		color: "#ffffff",
+		symbolColor: "#000000",
+	},
+});
 
 export function getMainWindow() {
 	return mainWindow;
@@ -34,12 +48,7 @@ export const MainWindow = {
 			// Titlebar
 			titleBarStyle: "hidden",
 			trafficLightPosition: { x: 16, y: 12 }, // for macOS
-			titleBarOverlay: {
-				// For Windows
-				color: "#1f1f1f",
-				symbolColor: "white",
-				height: 40,
-			},
+			titleBarOverlay: TITLEBAR_OVERLAY.BASE,
 			// Other Options
 			autoHideMenuBar: true,
 			frame: false,
@@ -81,6 +90,13 @@ export const MainWindow = {
 		});
 		ipcMain.on("set-theme", (_event, themeId) => {
 			nativeTheme.themeSource = themeId;
+
+			mainWindow.setTitleBarOverlay({
+				...TITLEBAR_OVERLAY.BASE,
+				...(nativeTheme.shouldUseDarkColors
+					? TITLEBAR_OVERLAY.DARK
+					: TITLEBAR_OVERLAY.LIGHT),
+			});
 		});
 
 		if (process.platform === "darwin") {

src/process/window.js

@@ -0,0 +1,23 @@
+/**
+ * Deep freeze an object.
+ *
+ * @template {object} T
+ *
+ * @param {T} obj
+ *
+ * @returns {Readonly<T>}
+ */
+export function deepFreeze(obj) {
+	const isObject = typeof obj === "object";
+	const isNull = obj === null;
+	const isFrozen = Object.isFrozen(obj);
+
+	if (isObject && !isNull && !isFrozen) {
+		for (const key of Object.getOwnPropertyNames(obj)) {
+			deepFreeze(obj[/** @type {keyof T}*/ (key)]);
+		}
+		Object.freeze(obj);
+	}
+
+	return obj;
+}