From 72fc42a050347e13556e92efde4fccd4d01ab26e Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 26 Jul 2024 16:18:53 -0700
Subject: [PATCH] Support window blur in addition to transparency (#161)

Adds support for window blur via the Vibrancy feature on macOS and the
BackgroundMaterial feature on Windows. The setting has no effect on
Linux. If both transparency and blur are set, transparency will take
precedence.
---
 emain/emain.ts                | 12 ++++++++++++
 frontend/app/app.less         |  1 +
 frontend/app/app.tsx          |  6 +++---
 frontend/types/gotypes.d.ts   |  1 +
 pkg/wconfig/settingsconfig.go |  1 +
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/emain/emain.ts b/emain/emain.ts
index ff66dc6b1..67ce4455f 100644
--- a/emain/emain.ts
+++ b/emain/emain.ts
@@ -324,8 +324,20 @@ function createBrowserWindow(
         autoHideMenuBar: true,
     };
     const isTransparent = settings?.window?.transparent ?? false;
+    const isBlur = !isTransparent && (settings?.window?.blur ?? false);
     if (isTransparent) {
         winOpts.transparent = true;
+    } else if (isBlur) {
+        switch (unamePlatform) {
+            case "win32": {
+                winOpts.backgroundMaterial = "acrylic";
+                break;
+            }
+            case "darwin": {
+                winOpts.vibrancy = "fullscreen-ui";
+                break;
+            }
+        }
     } else {
         winOpts.backgroundColor = "#222222";
     }
diff --git a/frontend/app/app.less b/frontend/app/app.less
index eee11170a..b0b4f9545 100644
--- a/frontend/app/app.less
+++ b/frontend/app/app.less
@@ -7,6 +7,7 @@
 body {
     display: flex;
     flex-direction: row;
+    // backdrop-filter: blur(8px);
     width: 100vw;
     height: 100vh;
     background-color: var(--main-bg-color);
diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
index 1d9a9afb3..aaf5962c5 100644
--- a/frontend/app/app.tsx
+++ b/frontend/app/app.tsx
@@ -204,12 +204,12 @@ function switchBlock(tabId: string, offsetX: number, offsetY: number) {
 function AppSettingsUpdater() {
     const settings = jotai.useAtomValue(atoms.settingsConfigAtom);
     React.useEffect(() => {
-        let isTransparent = settings?.window?.transparent ?? false;
-        let opacity = util.boundNumber(settings?.window?.opacity ?? 0.8, 0, 1);
+        const isTransparentOrBlur = (settings?.window?.transparent || settings?.window?.blur) ?? false;
+        const opacity = util.boundNumber(settings?.window?.opacity ?? 0.8, 0, 1);
         let baseBgColor = settings?.window?.bgcolor;
         console.log("window settings", settings.window);
 
-        if (isTransparent) {
+        if (isTransparentOrBlur) {
             document.body.classList.add("is-transparent");
             const rootStyles = getComputedStyle(document.documentElement);
             if (baseBgColor == null) {
diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts
index 6d0702d3a..6abd40fd1 100644
--- a/frontend/types/gotypes.d.ts
+++ b/frontend/types/gotypes.d.ts
@@ -516,6 +516,7 @@ declare global {
     // wconfig.WindowSettingsType
     type WindowSettingsType = {
         transparent: boolean;
+        blur: boolean;
         opacity: number;
         bgcolor: string;
     };
diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go
index 28a5ef9de..5d7c4c9d3 100644
--- a/pkg/wconfig/settingsconfig.go
+++ b/pkg/wconfig/settingsconfig.go
@@ -75,6 +75,7 @@ type TermThemesConfigType map[string]TermThemeType
 // note we pointers so we preserve nulls
 type WindowSettingsType struct {
 	Transparent *bool    `json:"transparent"`
+	Blur        *bool    `json:"blur"`
 	Opacity     *float64 `json:"opacity"`
 	BgColor     *string  `json:"bgcolor"`
 }