diff --git a/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts b/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts index 1508db7d951bc..2da8066e96855 100644 --- a/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts +++ b/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts @@ -36,6 +36,11 @@ export class AppSidebar extends Entity { */ hovering$ = new LiveData(false); + /** + * prevent it from setting hovering once when the sidebar is closed + */ + preventHovering$ = new LiveData(false); + /** * small screen mode, will disable hover effect */ @@ -63,6 +68,10 @@ export class AppSidebar extends Entity { this.hovering$.next(hoverFloating); }; + setPreventHovering = (preventHovering: boolean) => { + this.preventHovering$.next(preventHovering); + }; + setResizing = (resizing: boolean) => { this.resizing$.next(resizing); }; diff --git a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx index 685a257c1de00..36bca5822ef60 100644 --- a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx +++ b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx @@ -16,15 +16,30 @@ export const SidebarSwitch = ({ }) => { const appSidebarService = useService(AppSidebarService).sidebar; const open = useLiveData(appSidebarService.open$); + const preventHovering = useLiveData(appSidebarService.preventHovering$); + const timeoutRef = useRef(null); const switchRef = useRef(null); const handleMouseEnter = useCallback(() => { + if (open || preventHovering) { + return; + } appSidebarService.setHovering(true); - }, [appSidebarService]); + }, [appSidebarService, open, preventHovering]); const handleClickSwitch = useCallback(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + if (open) { + timeoutRef.current = setTimeout(() => { + appSidebarService.setPreventHovering(false); + }, 500); + } + + appSidebarService.setPreventHovering(true); appSidebarService.toggleSidebar(); - }, [appSidebarService]); + }, [appSidebarService, open]); const t = useI18n(); const tooltipContent = open diff --git a/tests/affine-desktop/e2e/tabs.spec.ts b/tests/affine-desktop/e2e/tabs.spec.ts index 510262ab4525b..9b7a2b58f2215 100644 --- a/tests/affine-desktop/e2e/tabs.spec.ts +++ b/tests/affine-desktop/e2e/tabs.spec.ts @@ -93,9 +93,6 @@ test('Collapse Sidebar', async ({ page }) => { .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]') .click(); const sliderBarArea = page.getByTestId('app-sidebar'); - await sliderBarArea.hover(); - await page.mouse.move(600, 500); - await page.waitForTimeout(5000); await expect(sliderBarArea).not.toBeInViewport(); }); @@ -104,9 +101,6 @@ test('Expand Sidebar', async ({ page }) => { .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]') .click(); const sliderBarArea = page.getByTestId('app-sidebar'); - await sliderBarArea.hover(); - await page.mouse.move(600, 500); - await page.waitForTimeout(5000); await expect(sliderBarArea).not.toBeInViewport(); await page diff --git a/tests/affine-local/e2e/layout.spec.ts b/tests/affine-local/e2e/layout.spec.ts index b5bb2aed34173..308c5c95f912d 100644 --- a/tests/affine-local/e2e/layout.spec.ts +++ b/tests/affine-local/e2e/layout.spec.ts @@ -10,9 +10,6 @@ test('Collapse Sidebar', async ({ page }) => { .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]') .click(); const sliderBarArea = page.getByTestId('app-sidebar'); - await sliderBarArea.hover(); - await page.mouse.move(300, 300); - await page.waitForTimeout(5000); await expect(sliderBarArea).not.toBeInViewport(); }); @@ -23,9 +20,6 @@ test('Expand Sidebar', async ({ page }) => { .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]') .click(); const sliderBarArea = page.getByTestId('sliderBar-inner'); - await sliderBarArea.hover(); - await page.mouse.move(300, 300); - await page.waitForTimeout(5000); await expect(sliderBarArea).not.toBeInViewport(); await page