fix: theme not being persisted issue (#2283)

apps/electron/layers/main/src/handlers/ui/index.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, nativeTheme } from 'electron';
+import { app, BrowserWindow, nativeTheme } from 'electron';
 
 import { isMacOS } from '../../../../utils';
 import type { NamespaceHandlers } from '../type';
@@ -17,6 +17,25 @@ export const uiHandlers = {
       });
     }
   },
+  handleMinimizeApp: async () => {
+    const windows = BrowserWindow.getAllWindows();
+    windows.forEach(w => {
+      w.minimize();
+    });
+  },
+  handleMaximizeApp: async () => {
+    const windows = BrowserWindow.getAllWindows();
+    windows.forEach(w => {
+      if (w.isMaximized()) {
+        w.unmaximize();
+      } else {
+        w.maximize();
+      }
+    });
+  },
+  handleCloseApp: async () => {
+    app.quit();
+  },
   getGoogleOauthCode: async () => {
     return getGoogleOauthCode();
   },

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

@@ -2,7 +2,7 @@ import { BrowserWindow, nativeTheme } from 'electron';
 import electronWindowState from 'electron-window-state';
 import { join } from 'path';
 
-import { isMacOS } from '../../utils';
+import { isMacOS, isWindows } from '../../utils';
 import { logger } from './logger';
 
 const IS_DEV: boolean =
@@ -18,7 +18,11 @@ async function createWindow() {
   });
 
   const browserWindow = new BrowserWindow({
-    titleBarStyle: isMacOS() ? 'hiddenInset' : 'default',
+    titleBarStyle: isMacOS()
+      ? 'hiddenInset'
+      : isWindows()
+      ? 'hidden'
+      : 'default',
     trafficLightPosition: { x: 24, y: 18 },
     x: mainWindowState.x,
     y: mainWindowState.y,

apps/electron/layers/utils.ts

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

apps/electron/scripts/generate-main-exposed-meta.mjs

@@ -6,7 +6,7 @@ const mainDistDir = path.resolve(__dirname, '../dist/layers/main');
 
 // be careful and avoid any side effects in
 const { handlers, events } = await import(
-  path.resolve(mainDistDir, 'exposed.js')
+  'file://' + path.resolve(mainDistDir, 'exposed.js')
 );
 
 const handlersMeta = Object.entries(handlers).map(

apps/electron/tests/basic.spec.ts

@@ -12,7 +12,6 @@ test('new page', async ({ page, workspace }) => {
 });
 
 test('app theme', async ({ page, electronApp }) => {
-  await page.waitForSelector('v-line');
   const root = page.locator('html');
   {
     const themeMode = await root.evaluate(element =>
@@ -20,30 +19,25 @@ test('app theme', async ({ page, electronApp }) => {
     );
     expect(themeMode).toBe('light');
 
-    // check if electron theme source is set to light
-    const themeSource = await electronApp.evaluate(({ nativeTheme }) => {
-      return nativeTheme.themeSource;
+    const theme = await electronApp.evaluate(({ nativeTheme }) => {
+      return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
     });
 
-    expect(themeSource).toBe('light');
+    expect(theme).toBe('light');
   }
 
   {
     await page.getByTestId('editor-option-menu').click();
     await page.getByTestId('change-theme-dark').click();
     await page.waitForTimeout(50);
-    {
-      const themeMode = await root.evaluate(element =>
-        element.getAttribute('data-theme')
-      );
-      expect(themeMode).toBe('dark');
-    }
-
-    const themeSource = await electronApp.evaluate(({ nativeTheme }) => {
-      return nativeTheme.themeSource;
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('dark');
+    const theme = await electronApp.evaluate(({ nativeTheme }) => {
+      return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
     });
-
-    expect(themeSource).toBe('dark');
+    expect(theme).toBe('dark');
   }
 });
 

apps/electron/tests/fixture.ts

@@ -42,6 +42,8 @@ export const test = base.extend<{
     const logFilePath = await page.evaluate(async () => {
       return window.apis?.debug.logFilePath();
     });
+    // wat for blocksuite to be loaded
+    await page.waitForSelector('v-line');
     await use(page);
     await page.close();
     if (logFilePath) {
@@ -57,11 +59,12 @@ export const test = base.extend<{
       executablePath: resolve(__dirname, '../node_modules/.bin/electron'),
       colorScheme: 'light',
     });
-    const sessionDataPath = await electronApp.evaluate(async ({ app }) => {
-      return app.getPath('sessionData');
-    });
     await use(electronApp);
-    await fs.rm(sessionDataPath, { recursive: true, force: true });
+    // FIXME: the following does not work well on CI
+    // const sessionDataPath = await electronApp.evaluate(async ({ app }) => {
+    //   return app.getPath('sessionData');
+    // });
+    // await fs.rm(sessionDataPath, { recursive: true, force: true });
   },
   appInfo: async ({ electronApp }, use) => {
     const appInfo = await electronApp.evaluate(async ({ app }) => {