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

fix AF-1209, fix PD-1550

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>