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

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

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(() => {
+  useEffect(() => {
-    appSidebarService.setHovering(true);
+    if (sidebarState !== 'floating' || resizing) {
-  }, [appSidebarService]);
+      return;
+    }
+    const onMouseMove = (e: MouseEvent) => {
+      const menuElement = document.querySelector(
+        'body > [data-radix-popper-content-wrapper] > [data-radix-menu-content]'
+      );
 
-  const onMouseLeave = useCallback(() => {
+      if (menuElement) {
-    appSidebarService.setHovering(false);
+        return;
-  }, [appSidebarService]);
+      }
+
+      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}

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}

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('app-sidebar');
-  const sliderBarArea = page.getByTestId('sliderBar-inner');
+  await sliderBarArea.hover();
+  await page.mouse.move(600, 500);
+  await page.waitForTimeout(5000);
   await expect(sliderBarArea).not.toBeInViewport();
 
   await page