fix: should use fullscreen to control where to place macos window controls (#6351)

packages/frontend/core/src/bootstrap/setup.ts

@@ -60,8 +60,13 @@ export function setup() {
     const handleMaximized = (maximized: boolean | undefined) => {
       document.documentElement.dataset.maximized = String(maximized);
     };
+    const handleFullscreen = (fullscreen: boolean | undefined) => {
+      document.documentElement.dataset.fullscreen = String(fullscreen);
+    };
     apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
+    apis?.ui.isFullScreen().then(handleFullscreen).catch(console.error);
     events?.ui.onMaximized(handleMaximized);
+    events?.ui.onFullScreen(handleFullscreen);
 
     const handleResize = debounce(() => {
       apis?.ui.handleWindowResize().catch(console.error);

packages/frontend/core/src/components/app-sidebar/index.css.ts

@@ -45,7 +45,7 @@ export const navHeaderStyle = style({
 });
 
 globalStyle(
-  `html[data-maximized="false"]
+  `html[data-fullscreen="false"]
   ${navHeaderStyle}[data-is-macos-electron="true"]`,
   {
     paddingLeft: '90px',

packages/frontend/core/src/components/pure/header/windows-app-controls.tsx

@@ -2,17 +2,34 @@ import { apis, events } from '@affine/electron-api';
 import { useAtomValue } from 'jotai';
 import { atomWithObservable } from 'jotai/utils';
 import { useCallback } from 'react';
-import { Observable } from 'rxjs';
+import { combineLatest, map, Observable } from 'rxjs';
 
 import * as style from './style.css';
 
-const maximizedAtom = atomWithObservable(() => {
+const maximized$ = new Observable<boolean>(subscriber => {
-  return new Observable<boolean>(subscriber => {
+  subscriber.next(false);
-    subscriber.next(false);
+  if (events) {
-    return events?.ui.onMaximized(maximized => {
+    return events.ui.onMaximized(res => {
-      return subscriber.next(maximized);
+      subscriber.next(res);
     });
-  });
+  }
+  return () => {};
+});
+
+const fullscreen$ = new Observable<boolean>(subscriber => {
+  subscriber.next(false);
+  if (events) {
+    return events.ui.onFullScreen(res => {
+      subscriber.next(res);
+    });
+  }
+  return () => {};
+});
+
+const maximizedAtom = atomWithObservable(() => {
+  return combineLatest([maximized$, fullscreen$]).pipe(
+    map(([maximized, fullscreen]) => maximized || fullscreen)
+  );
 });
 
 const minimizeSVG = (

packages/frontend/electron/src/main/main-window.ts

@@ -104,9 +104,8 @@ async function createWindow(additionalArguments: string[]) {
 
     logger.info('main window is ready to show');
 
-    if (browserWindow.isMaximized() || browserWindow.isFullScreen()) {
+    uiSubjects.onMaximized$.next(browserWindow.isMaximized());
-      uiSubjects.onMaximized$.next(true);
+    uiSubjects.onFullScreen$.next(browserWindow.isFullScreen());
-    }
 
     handleWebContentsResize().catch(logger.error);
   });
@@ -143,21 +142,26 @@ async function createWindow(additionalArguments: string[]) {
       browserWindow.setSize(size[0], size[1]);
     });
     uiSubjects.onMaximized$.next(false);
+    uiSubjects.onFullScreen$.next(false);
   });
 
   browserWindow.on('maximize', () => {
     uiSubjects.onMaximized$.next(true);
   });
 
-  // full-screen == maximized in UI on windows
-  browserWindow.on('enter-full-screen', () => {
-    uiSubjects.onMaximized$.next(true);
-  });
-
   browserWindow.on('unmaximize', () => {
     uiSubjects.onMaximized$.next(false);
   });
 
+  // full-screen == maximized in UI on windows
+  browserWindow.on('enter-full-screen', () => {
+    uiSubjects.onFullScreen$.next(true);
+  });
+
+  browserWindow.on('leave-full-screen', () => {
+    uiSubjects.onFullScreen$.next(false);
+  });
+
   /**
    * URL for main window.
    */

packages/frontend/electron/src/main/ui/events.ts

@@ -11,4 +11,10 @@ export const uiEvents = {
       sub.unsubscribe();
     };
   },
+  onFullScreen: (fn: (fullScreen: boolean) => void) => {
+    const sub = uiSubjects.onFullScreen$.subscribe(fn);
+    return () => {
+      sub.unsubscribe();
+    };
+  },
 } satisfies Record<string, MainEventRegister>;

packages/frontend/electron/src/main/ui/handlers.ts

@@ -20,6 +20,10 @@ export const uiHandlers = {
     const window = await getMainWindow();
     return window?.isMaximized();
   },
+  isFullScreen: async () => {
+    const window = await getMainWindow();
+    return window?.isFullScreen();
+  },
   handleThemeChange: async (_, theme: (typeof nativeTheme)['themeSource']) => {
     nativeTheme.themeSource = theme;
   },

packages/frontend/electron/src/main/ui/subject.ts

@@ -2,4 +2,5 @@ import { Subject } from 'rxjs';
 
 export const uiSubjects = {
   onMaximized$: new Subject<boolean>(),
+  onFullScreen$: new Subject<boolean>(),
 };