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(() => {
-  return new Observable<boolean>(subscriber => {
-    subscriber.next(false);
-    return events?.ui.onMaximized(maximized => {
-      return subscriber.next(maximized);
+const maximized$ = new Observable<boolean>(subscriber => {
+  subscriber.next(false);
+  if (events) {
+    return events.ui.onMaximized(res => {
+      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 = (