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

@@ -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";
     }

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);

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) {

frontend/types/gotypes.d.ts

@@ -516,6 +516,7 @@ declare global {
     // wconfig.WindowSettingsType
     type WindowSettingsType = {
         transparent: boolean;
+        blur: boolean;
         opacity: number;
         bgcolor: string;
     };

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"`
 }