From 675a010dfca8fec74df0b72d79ef6a2d3216d53b Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sat, 19 Oct 2024 13:24:07 +0000
Subject: [PATCH] fix(core): prevent floating sidebar from disappearing
 unexpectedly (#8477)

close AF-1475

Fixed an issue where you couldn't create collection or use the rename function in the floating sidebar.

https://github.com/user-attachments/assets/41c2b6a8-8fc9-4f8b-ab51-bd7ce2a58738
---
 .../src/components/rename-modal/index.tsx     |  1 +
 .../src/modules/app-sidebar/views/index.tsx   | 29 ++++++++++++++-----
 .../views/sidebar-header/sidebar-switch.tsx   |  5 ----
 tests/affine-desktop/e2e/tabs.spec.ts         | 10 +++++--
 4 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
index acf06429a3..e1c668b18a 100644
--- a/packages/frontend/component/src/components/rename-modal/index.tsx
+++ b/packages/frontend/component/src/components/rename-modal/index.tsx
@@ -51,6 +51,7 @@ export const RenameModal = ({
         sideOffset: -12,
         onClick: e => e.stopPropagation(),
         style: { borderRadius: 10, padding: 8 },
+        role: 'rename-modal',
       }}
       items={
         <Input
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/index.tsx b/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
index 4bdf913429..b807811205 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
@@ -124,13 +124,28 @@ export function AppSidebar({ children }: PropsWithChildren) {
     appSidebarService.setOpen(false);
   }, [appSidebarService]);
 
-  const onMouseEnter = useCallback(() => {
-    appSidebarService.setHovering(true);
-  }, [appSidebarService]);
+  useEffect(() => {
+    if (sidebarState !== 'floating' || resizing) {
+      return;
+    }
+    const onMouseMove = (e: MouseEvent) => {
+      const menuElement = document.querySelector(
+        'body > [data-radix-popper-content-wrapper] > [data-radix-menu-content]'
+      );
 
-  const onMouseLeave = useCallback(() => {
-    appSidebarService.setHovering(false);
-  }, [appSidebarService]);
+      if (menuElement) {
+        return;
+      }
+
+      if (e.clientX > width + 20) {
+        appSidebarService.setHovering(false);
+      }
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [appSidebarService, resizing, sidebarState, width]);
 
   return (
     <>
@@ -152,8 +167,6 @@ export function AppSidebar({ children }: PropsWithChildren) {
         })}
         resizeHandleOffset={0}
         resizeHandleVerticalPadding={clientBorder ? 16 : 0}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
         data-transparent
         data-open={sidebarState !== 'close'}
         data-has-border={hasRightBorder}
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 8a99dcd522..685a257c1d 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
@@ -26,10 +26,6 @@ export const SidebarSwitch = ({
     appSidebarService.toggleSidebar();
   }, [appSidebarService]);
 
-  const handleMouseLeave = useCallback(() => {
-    appSidebarService.setHovering(false);
-  }, [appSidebarService]);
-
   const t = useI18n();
   const tooltipContent = open
     ? t['com.affine.sidebarSwitch.collapse']()
@@ -42,7 +38,6 @@ export const SidebarSwitch = ({
       className={styles.sidebarSwitchClip}
       data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
       <IconButton
         tooltip={tooltipContent}
diff --git a/tests/affine-desktop/e2e/tabs.spec.ts b/tests/affine-desktop/e2e/tabs.spec.ts
index cbc08949e2..510262ab45 100644
--- a/tests/affine-desktop/e2e/tabs.spec.ts
+++ b/tests/affine-desktop/e2e/tabs.spec.ts
@@ -92,8 +92,10 @@ test('Collapse Sidebar', async ({ page }) => {
   await page
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
-  await page.mouse.move(500, 500);
   const sliderBarArea = page.getByTestId('app-sidebar');
+  await sliderBarArea.hover();
+  await page.mouse.move(600, 500);
+  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 });
 
@@ -101,8 +103,10 @@ test('Expand Sidebar', async ({ page }) => {
   await page
     .locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
     .click();
-  await page.mouse.move(500, 500);
-  const sliderBarArea = page.getByTestId('sliderBar-inner');
+  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