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

apps/electron/layers/main/tsconfig.json

@@ -11,5 +11,5 @@
 
     "types": ["node"]
   },
-  "include": ["src/**/*.ts", "../../types/**/*.d.ts", "index.ts"]
+  "include": ["src/**/*.ts", "../../types/**/*.d.ts", "index.ts", "../utils.ts"]
 }

apps/electron/layers/preload/preload.d.ts

@@ -0,0 +1,16 @@
+interface Window {
+  /**
+   * After analyzing the `exposeInMainWorld` calls,
+   * `packages/preload/exposedInMainWorld.d.ts` file will be generated.
+   * It contains all interfaces.
+   * `packages/preload/exposedInMainWorld.d.ts` file is required for TS is `renderer`
+   *
+   * @see https://github.com/cawa-93/dts-for-context-bridge
+   */
+  readonly apis: {
+    workspaceSync: (id: string) => Promise<any>;
+    onThemeChange: (theme: string) => Promise<any>;
+    onSidebarVisibilityChange: (visible: boolean) => Promise<any>;
+  };
+  readonly appInfo: { electron: boolean; isMacOS: boolean };
+}

apps/electron/layers/preload/src/index.ts

@@ -4,10 +4,7 @@
 
 import { contextBridge, ipcRenderer } from 'electron';
 
-import { sha256sum } from './sha256sum';
-
-// Expose version number to renderer
-contextBridge.exposeInMainWorld('yerba', { version: 0.1 });
+import { isMacOS } from '../../utils';
 
 /**
  * The "Main World" is the JavaScript context that your main renderer code runs in.
@@ -25,17 +22,17 @@ contextBridge.exposeInMainWorld('yerba', { version: 0.1 });
  * @see https://github.com/cawa-93/dts-for-context-bridge
  */
 
-/**
- * Safe expose node.js API
- * @example
- * window.nodeCrypto('data')
- */
-contextBridge.exposeInMainWorld('nodeCrypto', { sha256sum });
-
 contextBridge.exposeInMainWorld('apis', {
-  workspaceSync: (id: string) => ipcRenderer.invoke('workspaceSync', id),
+  workspaceSync: (id: string) => ipcRenderer.invoke('octo:workspace-sync', id),
+  // ui
+  onThemeChange: (theme: string) =>
+    ipcRenderer.invoke('ui:theme-change', theme),
+
+  onSidebarVisibilityChange: (visible: boolean) =>
+    ipcRenderer.invoke('ui:sidebar-visibility-change', visible),
 });
 
 contextBridge.exposeInMainWorld('appInfo', {
-  electron: 1,
+  electron: true,
+  isMacOS: isMacOS(),
 });

apps/electron/layers/preload/src/sha256sum.ts

@@ -1,6 +0,0 @@
-import type { BinaryLike } from 'crypto';
-import { createHash } from 'crypto';
-
-export function sha256sum(data: BinaryLike) {
-  return createHash('sha256').update(data).digest('hex');
-}

apps/electron/layers/utils.ts

@@ -0,0 +1,3 @@
+export const isMacOS = () => {
+  return process.platform === 'darwin';
+};