Add Mica Effects on Windows

bun.lock

@@ -12,6 +12,7 @@
         "electron-context-menu": "^4.0.5",
         "electron-updater": "^6.6.2",
         "knex": "^3.1.0",
+        "mica-electron": "^1.5.16",
         "mime-types": "^3.0.1",
         "posthog-node": "^4.17.1",
         "sharp": "^0.34.1",
@@ -1382,6 +1383,8 @@
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
 
+    "mica-electron": ["mica-electron@1.5.16", "", {}, "sha512-08/o9vv4cr4ozltO2U4/37R70Y6hqAjH2nr7GzpDLAdqCWkeAAge5ZPrzl+ndUDhO6IsoL2gFmpbU17Jj406Zg=="],
+
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
     "mime": ["mime@2.6.0", "", { "bin": { "mime": "cli.js" } }, "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg=="],

package.json

@@ -38,6 +38,7 @@
     "electron-context-menu": "^4.0.5",
     "electron-updater": "^6.6.2",
     "knex": "^3.1.0",
+    "mica-electron": "^1.5.16",
     "mime-types": "^3.0.1",
     "posthog-node": "^4.17.1",
     "sharp": "^0.34.1",

src/main/browser/window.ts

@@ -5,13 +5,14 @@ import { PageBounds } from "@/ipc/browser/page";
 import { FLAGS } from "@/modules/flags";
 import { TypedEventEmitter } from "@/modules/typed-event-emitter";
 import { getLastUsedSpace } from "@/sessions/spaces";
-import { BrowserWindow, nativeTheme, WebContents } from "electron";
+import { nativeTheme, WebContents } from "electron";
 import "./close-preventer";
 import { WindowEventType } from "@/modules/windows";
 import { windowEvents } from "@/modules/windows";
 import { initializePortalComponentWindows } from "@/browser/components/portal-component-windows";
 import { defaultSessionReady } from "@/browser/sessions";
 import { fireWindowStateChanged } from "@/ipc/browser/interface";
+import { IS_WINDOWS_11, MicaBrowserWindow } from "mica-electron";
 import { debugPrint } from "@/modules/output";
 
 type BrowserWindowType = "normal" | "popup";
@@ -28,9 +29,25 @@ type BrowserWindowEvents = {
   destroy: [];
 };
 
+function applyMicaEffect(window: MicaBrowserWindow) {
+  if (window.isMaximized()) {
+    window.setSquareCorner();
+  } else {
+    window.setRoundedCorner();
+  }
+
+  if (IS_WINDOWS_11) {
+    // Window 11
+    window.setMicaAcrylicEffect();
+  } else {
+    // Window 7+
+    window.setAcrylic();
+  }
+}
+
 export class TabbedBrowserWindow extends TypedEventEmitter<BrowserWindowEvents> {
   id: number;
-  window: BrowserWindow;
+  window: MicaBrowserWindow;
   public viewManager: ViewManager;
   public coreWebContents: WebContents[];
 
@@ -47,7 +64,7 @@ export class TabbedBrowserWindow extends TypedEventEmitter<BrowserWindowEvents>
   constructor(browser: Browser, type: BrowserWindowType, options: BrowserWindowCreationOptions = {}) {
     super();
 
-    this.window = new BrowserWindow({
+    this.window = new MicaBrowserWindow({
       minWidth: type === "normal" ? 800 : 250,
       minHeight: type === "normal" ? 400 : 200,
       width: 1280,
@@ -76,6 +93,17 @@ export class TabbedBrowserWindow extends TypedEventEmitter<BrowserWindowEvents>
       ...(options.window || {})
     });
 
+    // Apply Mica effect on Windows
+    const useMicaElectron = process.platform === "win32" && FLAGS.USE_MICA_ELECTRON;
+    const updateMicaEffect = () => {
+      if (useMicaElectron) {
+        applyMicaEffect(this.window);
+        return true;
+      }
+      return false;
+    };
+    updateMicaEffect();
+
     // Hide the window buttons before the component is mounted
     if (type === "normal") {
       this.setWindowButtonVisibility(false);
@@ -106,9 +134,11 @@ export class TabbedBrowserWindow extends TypedEventEmitter<BrowserWindowEvents>
 
     this.window.on("maximize", () => {
       fireWindowStateChanged(this);
+      updateMicaEffect();
     });
     this.window.on("unmaximize", () => {
       fireWindowStateChanged(this);
+      updateMicaEffect();
     });
 
     // Focus on the focused tab

src/main/modules/flags.ts

@@ -3,6 +3,7 @@ import { DEBUG_AREA } from "./output";
 
 type Flags = {
   SCRUBBED_USER_AGENT: boolean;
+  USE_MICA_ELECTRON: boolean;
   ERROR_PAGE_LOAD_MODE: "replace" | "load";
   SHOW_DEBUG_PRINTS: boolean;
   SHOW_DEBUG_ERRORS: boolean | DEBUG_AREA[];
@@ -17,6 +18,9 @@ export const FLAGS: Flags = {
   // Transform the user agent
   SCRUBBED_USER_AGENT: true,
 
+  // Use Mica Electron
+  USE_MICA_ELECTRON: true,
+
   // Replace - Use window.location.replace to load the error page.
   // Load - Add the page to the history stack by loading it normally.
   ERROR_PAGE_LOAD_MODE: "replace",