feat(core): show floating sidebar when hovering sidebar swtich (#8393)

web:

https://github.com/user-attachments/assets/3cafe094-7938-4241-8d57-cfd5ccaadf25

client:

https://github.com/user-attachments/assets/ca218a45-de92-4e0a-ad83-c0f47aee2962

packages/frontend/component/src/components/resize-panel/resize-panel.css.ts

@@ -6,6 +6,7 @@ export const resizeHandleVerticalPadding = createVar(
   'resize-handle-vertical-padding'
 );
 export const animationTimeout = createVar();
+
 export const root = style({
   vars: {
     [panelWidthVar]: '256px',
@@ -15,23 +16,28 @@ export const root = style({
   width: panelWidthVar,
   minWidth: panelWidthVar,
   height: '100%',
+  zIndex: 4,
+  transform: 'translateX(0)',
+  maxWidth: '50%',
   selectors: {
-    '&[data-is-floating="true"]': {
-      position: 'absolute',
-      width: `calc(${panelWidthVar})`,
-      zIndex: 4,
-    },
-    '&[data-open="true"]': {
-      maxWidth: '50%',
-    },
-    '&[data-open="false"][data-handle-position="right"]': {
-      marginLeft: `calc(${panelWidthVar} * -1)`,
-    },
-    '&[data-open="false"][data-handle-position="left"]': {
-      marginRight: `calc(${panelWidthVar} * -1)`,
-    },
+    '&[data-open="false"][data-handle-position="right"],&[data-is-floating="true"][data-handle-position="right"]':
+      {
+        marginLeft: `calc(${panelWidthVar} * -1)`,
+      },
+    '&[data-open="false"][data-handle-position="left"],&[data-is-floating="true"][data-handle-position="left"]':
+      {
+        marginRight: `calc(${panelWidthVar} * -1)`,
+      },
+    '&[data-open="true"][data-handle-position="right"][data-is-floating="true"]':
+      {
+        transform: `translateX(${panelWidthVar})`,
+      },
+    '&[data-open="true"][data-handle-position="left"][data-is-floating="true"]':
+      {
+        transform: `translateX(-${panelWidthVar})`,
+      },
     '&[data-enable-animation="true"]': {
-      transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s`,
+      transition: `margin-left ${animationTimeout}, margin-right ${animationTimeout}, transform ${animationTimeout}, background ${animationTimeout}`,
     },
     '&[data-transition-state="exited"]': {
       // avoid focus on hidden panel

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -1,13 +1,6 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 import { useTransition } from 'react-transition-state';
 
 import * as styles from './resize-panel.css';
@@ -129,17 +122,6 @@ const ResizeHandle = ({
   );
 };
 
-// delay initial animation to avoid flickering
-function useEnableAnimation() {
-  const [enable, setEnable] = useState(false);
-  useEffect(() => {
-    window.setTimeout(() => {
-      setEnable(true);
-    }, 500);
-  }, []);
-  return enable;
-}
-
 const animationTimeout = 300;
 
 export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
@@ -152,7 +134,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
       maxWidth,
       width,
       floating,
-      enableAnimation: _enableAnimation = true,
+      enableAnimation = true,
       open,
       unmountOnExit,
       onOpen,
@@ -165,7 +147,6 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
     },
     ref
   ) {
-    const enableAnimation = useEnableAnimation() && _enableAnimation;
     const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
     const [{ status }, toggle] = useTransition({
       timeout: animationTimeout,