feat: optimize electron macos header style (#1774)

Co-authored-by: himself65 <himself65@outlook.com>

apps/electron/layers/main/src/app-state/index.ts

@@ -2,7 +2,7 @@ import * as os from 'node:os';
 import path from 'node:path';
 
 import { Storage } from '@affine/octobase-node';
-import { ipcMain } from 'electron';
+import { BrowserWindow, ipcMain, nativeTheme } from 'electron';
 import fs from 'fs-extra';
 
 const AFFINE_ROOT = path.join(os.homedir(), '.affine');
@@ -15,7 +15,20 @@ export const appState = {
 };
 
 export const registerHandlers = () => {
-  ipcMain.handle('workspaceSync', async (_, id) => {
+  ipcMain.handle('octo:workspace-sync', async (_, id) => {
     return appState.storage.sync(id, '');
   });
+
+  ipcMain.handle('ui:theme-change', async (_, theme) => {
+    nativeTheme.themeSource = theme;
+  });
+
+  ipcMain.handle('ui:sidebar-visibility-change', async (_, visible) => {
+    // todo
+    const windows = BrowserWindow.getAllWindows();
+    windows.forEach(w => {
+      // hide window buttons when sidebar is not visible
+      w.setWindowButtonVisibility(visible);
+    });
+  });
 };

apps/electron/layers/main/src/main-window.ts

@@ -1,7 +1,9 @@
-import { BrowserWindow } from 'electron';
+import { BrowserWindow, nativeTheme } from 'electron';
 import electronWindowState from 'electron-window-state';
 import { join } from 'path';
 
+import { isMacOS } from '../../utils';
+
 const IS_DEV = process.env.NODE_ENV === 'development';
 
 async function createWindow() {
@@ -11,12 +13,18 @@ async function createWindow() {
   });
 
   const browserWindow = new BrowserWindow({
+    titleBarStyle: isMacOS() ? 'hiddenInset' : 'default',
+    trafficLightPosition: { x: 20, y: 18 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
+    transparent: true,
+    visualEffectState: 'active',
+    vibrancy: 'under-window',
     height: mainWindowState.height,
     show: false, // Use 'ready-to-show' event to show window
     webPreferences: {
+      webgl: true,
       contextIsolation: true,
       sandbox: false,
       webviewTag: false, // The webview tag is not recommended. Consider alternatives like iframe or Electron's BrowserView. https://www.electronjs.org/docs/latest/api/webview-tag#warning
@@ -25,6 +33,8 @@ async function createWindow() {
     },
   });
 
+  nativeTheme.themeSource = 'light';
+
   mainWindowState.manage(browserWindow);
 
   /**
@@ -60,19 +70,22 @@ async function createWindow() {
   return browserWindow;
 }
 
+// singleton
+let browserWindow: Electron.BrowserWindow | undefined;
 /**
  * Restore existing BrowserWindow or Create new BrowserWindow
  */
 export async function restoreOrCreateWindow() {
-  let window = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
+  browserWindow = BrowserWindow.getAllWindows().find(w => !w.isDestroyed());
 
-  if (window === undefined) {
-    window = await createWindow();
+  if (browserWindow === undefined) {
+    browserWindow = await createWindow();
   }
 
-  if (window.isMinimized()) {
-    window.restore();
+  if (browserWindow.isMinimized()) {
+    browserWindow.restore();
   }
 
-  window.focus();
+  browserWindow.focus();
+  return browserWindow;
 }