fix: move traffic lights based on zoom level (#6201)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/f75d1f6f-18f4-4dff-8174-67223f5f9807.mp4">Kapture 2024-03-19 at 18.05.20.mp4</video>

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

@@ -4,6 +4,7 @@ import './edgeless-template';
 import { apis, events } from '@affine/electron-api';
 import { setupGlobal } from '@affine/env/global';
 import * as Sentry from '@sentry/react';
+import { debounce } from 'lodash-es';
 import { useEffect } from 'react';
 import {
   createRoutesFromChildren,
@@ -61,6 +62,11 @@ export function setup() {
     };
     apis?.ui.isMaximized().then(handleMaximized).catch(console.error);
     events?.ui.onMaximized(handleMaximized);
+
+    const handleResize = debounce(() => {
+      apis?.ui.handleWindowResize().catch(console.error);
+    }, 50);
+    window.addEventListener('resize', handleResize);
   }
 
   performanceSetupLogger.info('done');

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

@@ -53,7 +53,6 @@ async function createWindow(additionalArguments: string[]) {
       : isWindows()
         ? 'hidden'
         : 'default',
-    trafficLightPosition: { x: 20, y: 16 },
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
@@ -100,6 +99,8 @@ async function createWindow(additionalArguments: string[]) {
     if (browserWindow.isMaximized() || browserWindow.isFullScreen()) {
       uiSubjects.onMaximized.next(true);
     }
+
+    handleWebContentsResize().catch(logger.error);
   });
 
   browserWindow.on('close', e => {
@@ -135,18 +136,15 @@ async function createWindow(additionalArguments: string[]) {
 
   browserWindow.on('maximize', () => {
     uiSubjects.onMaximized.next(true);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   // full-screen == maximized in UI on windows
   browserWindow.on('enter-full-screen', () => {
     uiSubjects.onMaximized.next(true);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   browserWindow.on('unmaximize', () => {
     uiSubjects.onMaximized.next(false);
-    browserWindow.setBackgroundMaterial('none');
   });
 
   /**
@@ -274,3 +272,14 @@ export async function getCookie(url?: string, name?: string) {
   });
   return cookies;
 }
+
+// there is no proper way to listen to webContents resize event
+// we will rely on window.resize event in renderer instead
+export async function handleWebContentsResize() {
+  // right now when window is resized, we will relocate the traffic light positions
+  if (isMacOS()) {
+    const window = await getMainWindow();
+    const factor = window?.webContents.getZoomFactor() || 1;
+    window?.setWindowButtonPosition({ x: 20 * factor, y: 24 * factor - 6 });
+  }
+}

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

@@ -4,7 +4,11 @@ import { getLinkPreview } from 'link-preview-js';
 import { isMacOS } from '../../shared/utils';
 import { persistentConfig } from '../config-storage/persist';
 import { logger } from '../logger';
-import { getMainWindow, initAndShowMainWindow } from '../main-window';
+import {
+  getMainWindow,
+  handleWebContentsResize,
+  initAndShowMainWindow,
+} from '../main-window';
 import { getOnboardingWindow } from '../onboarding';
 import type { NamespaceHandlers } from '../type';
 import { launchStage } from '../windows-manager/stage';
@@ -44,6 +48,9 @@ export const uiHandlers = {
       window.maximize();
     }
   },
+  handleWindowResize: async () => {
+    await handleWebContentsResize();
+  },
   handleCloseApp: async () => {
     app.quit();
   },