fix(electron): always show traffic light for mac (#7773)

fix AF-1209, fix PD-1550

packages/frontend/component/src/components/auth-components/onboarding-page.tsx

@@ -1,7 +1,6 @@
-import { apis } from '@affine/electron-api';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import type { Location } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -123,15 +122,6 @@ export const OnboardingPage = ({
   const isMacosDesktop = environment.isDesktop && environment.isMacOs;
   const isWindowsDesktop = environment.isDesktop && environment.isWindows;
 
-  useEffect(() => {
-    if (environment.isDesktop) {
-      // to hide macOS window control buttons
-      apis?.ui.handleSidebarVisibilityChange(false).catch(err => {
-        console.error(err);
-      });
-    }
-  }, []);
-
   if (!questions) {
     return null;
   }

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -9,13 +9,13 @@ import {
 } from '@affine/core/modules/explorer';
 import { ExplorerTags } from '@affine/core/modules/explorer/views/sections/tags';
 import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/services/cmdk';
-import { apis, events } from '@affine/electron-api';
+import { events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
 import { AllDocsIcon, SettingsIcon } from '@blocksuite/icons/rc';
 import type { Doc } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai';
 import type { MouseEvent, ReactElement } from 'react';
 import { useCallback, useEffect } from 'react';
 
@@ -25,7 +25,6 @@ import {
   AddPageButton,
   AppDownloadButton,
   AppSidebar,
-  appSidebarOpenAtom,
   CategoryDivider,
   MenuItem,
   MenuLinkItem,
@@ -111,15 +110,6 @@ export const RootAppSidebar = (): ReactElement => {
     track.$.navigationPanel.$.openSettings();
   }, [setOpenSettingModalAtom]);
 
-  const sidebarOpen = useAtomValue(appSidebarOpenAtom);
-  useEffect(() => {
-    if (environment.isDesktop) {
-      apis?.ui.handleSidebarVisibilityChange(sidebarOpen).catch(err => {
-        console.error(err);
-      });
-    }
-  }, [sidebarOpen]);
-
   return (
     <AppSidebar
       clientBorder={appSettings.clientBorder}

packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx

@@ -7,7 +7,6 @@ import {
   useDropTarget,
 } from '@affine/component';
 import {
-  appSidebarFloatingAtom,
   appSidebarOpenAtom,
   appSidebarResizingAtom,
 } from '@affine/core/components/app-sidebar';
@@ -233,7 +232,6 @@ export const AppTabsHeader = ({
   const t = useI18n();
   const sidebarWidth = useAtomValue(appSidebarWidthAtom);
   const sidebarOpen = useAtomValue(appSidebarOpenAtom);
-  const sidebarFloating = useAtomValue(appSidebarFloatingAtom);
   const sidebarResizing = useAtomValue(appSidebarResizingAtom);
   const isMacosDesktop = environment.isDesktop && environment.isMacOs;
   const fullScreen = useIsFullScreen();
@@ -314,6 +312,8 @@ export const AppTabsHeader = ({
       [onDrop]
     );
 
+  const trafficLightOffset = isMacosDesktop && !fullScreen ? 70 : 0;
+
   return (
     <div
       className={clsx(styles.root, className)}
@@ -324,13 +324,10 @@ export const AppTabsHeader = ({
       <div
         style={{
           transition: sidebarResizing ? 'none' : undefined,
-          paddingLeft:
-            isMacosDesktop && sidebarOpen && !sidebarFloating && !fullScreen
-              ? 90
-              : 16,
-          width: sidebarOpen && !sidebarFloating ? sidebarWidth : 130,
+          paddingLeft: 12 + trafficLightOffset,
+          width: sidebarOpen ? sidebarWidth : 120 + trafficLightOffset,
           // minus 16 to account for the padding on the right side of the header (for box shadow)
-          marginRight: sidebarOpen && !sidebarFloating ? -16 : 0,
+          marginRight: sidebarOpen ? -16 : 0,
         }}
         className={styles.headerLeft}
       >

packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts

@@ -23,11 +23,12 @@ export const headerLeft = style({
   flexFlow: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '0 16px',
+  paddingRight: 12,
+  gap: 10,
   flexShrink: 0,
   selectors: {
     [`${root}[data-mode="app"] &`]: {
-      transition: 'width 0.3s, padding 0.3s',
+      transition: 'all 0.3s',
     },
   },
 });

packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx

@@ -75,6 +75,7 @@ export const NavigationButtons = () => {
         data-testid="app-navigation-button-back"
         disabled={!backable}
         onClick={handleBack}
+        size={24}
       >
         <ArrowLeftSmallIcon />
       </IconButton>
@@ -85,6 +86,7 @@ export const NavigationButtons = () => {
         data-testid="app-navigation-button-forward"
         disabled={!forwardable}
         onClick={handleForward}
+        size={24}
       >
         <ArrowRightSmallIcon />
       </IconButton>

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

@@ -1,7 +1,6 @@
 import { app, nativeTheme, shell } from 'electron';
 import { getLinkPreview } from 'link-preview-js';
 
-import { isMacOS } from '../../shared/utils';
 import { persistentConfig } from '../config-storage/persist';
 import { logger } from '../logger';
 import type { NamespaceHandlers } from '../type';
@@ -43,12 +42,6 @@ export const uiHandlers = {
   handleThemeChange: async (_, theme: (typeof nativeTheme)['themeSource']) => {
     nativeTheme.themeSource = theme;
   },
-  handleSidebarVisibilityChange: async (_, visible: boolean) => {
-    if (isMacOS()) {
-      const window = await getMainWindow();
-      window?.setWindowButtonVisibility(visible);
-    }
-  },
   handleMinimizeApp: async () => {
     const window = await getMainWindow();
     window?.minimize();
@@ -68,8 +61,8 @@ export const uiHandlers = {
       window.maximize();
     }
   },
-  handleWindowResize: async () => {
-    await handleWebContentsResize();
+  handleWindowResize: async e => {
+    await handleWebContentsResize(e.sender);
   },
   handleCloseApp: async () => {
     app.quit();

packages/frontend/electron/src/main/windows-manager/tab-views.ts

@@ -658,6 +658,8 @@ export class WebContentViewsManager {
       sorted.forEach(({ view }, idx) => {
         this.mainWindow?.contentView.addChildView(view, idx);
       });
+
+      handleWebContentsResize(activeView?.webContents).catch(logger.error);
     }
   };
 
@@ -894,12 +896,12 @@ export async function getCookie(url?: string, name?: string) {
 
 // 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() {
+export async function handleWebContentsResize(webContents?: WebContents) {
   // 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 });
+    const factor = webContents?.getZoomFactor() || 1;
+    window?.setWindowButtonPosition({ x: 16 * factor, y: 24 * factor - 6 });
   }
 }