diff --git a/packages/frontend/component/src/components/auth-components/onboarding-page.tsx b/packages/frontend/component/src/components/auth-components/onboarding-page.tsx index 1ef7996bca..89aac5e611 100644 --- a/packages/frontend/component/src/components/auth-components/onboarding-page.tsx +++ b/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; } diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx index 4910df3209..1203e99c96 100644 --- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx +++ b/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 ( diff --git a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts b/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts index 01e78db932..8a5f88247c 100644 --- a/packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts +++ b/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', }, }, }); diff --git a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx b/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx index fe7f8f598a..d3da7221e0 100644 --- a/packages/frontend/core/src/modules/navigation/view/navigation-buttons.tsx +++ b/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} > @@ -85,6 +86,7 @@ export const NavigationButtons = () => { data-testid="app-navigation-button-forward" disabled={!forwardable} onClick={handleForward} + size={24} > diff --git a/packages/frontend/electron/src/main/ui/handlers.ts b/packages/frontend/electron/src/main/ui/handlers.ts index c6ec76bf63..1f5112b666 100644 --- a/packages/frontend/electron/src/main/ui/handlers.ts +++ b/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(); diff --git a/packages/frontend/electron/src/main/windows-manager/tab-views.ts b/packages/frontend/electron/src/main/windows-manager/tab-views.ts index 6a1365e913..a0ee61cad6 100644 --- a/packages/frontend/electron/src/main/windows-manager/tab-views.ts +++ b/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 }); } }