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
2026-02-25 18:26:05 +08:00 · 2024-10-09 03:48:17 +00:00
parent bfeb05ca45
commit 5213431d51
14 changed files with 173 additions and 120 deletions
--- a/packages/frontend/core/src/components/pure/header/index.tsx
+++ b/packages/frontend/core/src/components/pure/header/index.tsx
@@ -18,14 +18,8 @@ interface HeaderPros {
 export const Header = ({ left, center, right }: HeaderPros) => {
  const appSidebarService = useService(AppSidebarService).sidebar;
  const open = useLiveData(appSidebarService.open$);
-  const appSidebarFloating = useLiveData(appSidebarService.responsiveFloating$);
  return (
-    <div
-      className={clsx(style.header)}
-      data-open={open}
-      data-sidebar-floating={appSidebarFloating}
-      data-testid="header"
-    >
+    <div className={clsx(style.header)} data-open={open} data-testid="header">
      <div className={clsx(style.headerSideContainer)}>
        <div className={clsx(style.headerItem, 'left')}>
          <div>{left}</div>
--- a/packages/frontend/core/src/components/workspace/index.css.ts
+++ b/packages/frontend/core/src/components/workspace/index.css.ts
@@ -1,5 +1,7 @@
 import { cssVar, lightCssVariables } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+
+export const panelWidthVar = createVar('panel-width');

 export const appStyle = style({
  width: '100%',
@@ -48,7 +50,7 @@ export const mainContainerStyle = style({
  flex: 1,
  overflow: 'clip',
  maxWidth: '100%',
-  transition: 'margin-left 0.2s ease',
+
  selectors: {
    '&[data-client-border="true"]': {
      borderRadius: 6,
--- a/packages/frontend/core/src/components/workspace/index.tsx
+++ b/packages/frontend/core/src/components/workspace/index.tsx
@@ -49,9 +49,9 @@ export const MainContainer = forwardRef<
  HTMLDivElement,
  PropsWithChildren<MainContainerProps>
 >(function MainContainer({ className, children, ...props }, ref): ReactElement {
-  const appSidebarService = useService(AppSidebarService).sidebar;
-  const appSideBarOpen = useLiveData(appSidebarService.open$);
  const { appSettings } = useAppSettingHelper();
+  const appSidebarService = useService(AppSidebarService).sidebar;
+  const open = useLiveData(appSidebarService.open$);

  return (
    <div
@@ -60,7 +60,7 @@ export const MainContainer = forwardRef<
      data-is-desktop={BUILD_CONFIG.isElectron}
      data-transparent={false}
      data-client-border={appSettings.clientBorder}
-      data-side-bar-open={appSideBarOpen}
+      data-side-bar-open={open}
      data-testid="main-container"
      ref={ref}
    >
--- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/detail-page-header.tsx
@@ -16,7 +16,6 @@ import { useRegisterCopyLinkCommands } from '@affine/core/components/hooks/affin
 import { useDocCollectionPageTitle } from '@affine/core/components/hooks/use-block-suite-workspace-page-title';
 import { useJournalInfoHelper } from '@affine/core/components/hooks/use-journal';
 import { HeaderDivider } from '@affine/core/components/pure/header';
-import { AppSidebarService } from '@affine/core/modules/app-sidebar';
 import { EditorService } from '@affine/core/modules/editor';
 import { ViewIcon, ViewTitle } from '@affine/core/modules/workbench';
 import type { Doc } from '@blocksuite/affine/store';
@@ -34,16 +33,8 @@ const Header = forwardRef<
    style?: React.CSSProperties;
  }
 >(({ children, style, className }, ref) => {
-  const appSidebarService = useService(AppSidebarService).sidebar;
-  const appSidebarFloating = useLiveData(appSidebarService.responsiveFloating$);
  return (
-    <div
-      data-testid="header"
-      style={style}
-      className={className}
-      ref={ref}
-      data-sidebar-floating={appSidebarFloating}
-    >
+    <div data-testid="header" style={style} className={className} ref={ref}>
      {children}
    </div>
  );
--- a/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/entities/app-sidebar.ts
@@ -3,8 +3,6 @@ import { map } from 'rxjs';

 import type { AppSidebarState } from '../providers/storage';

-const isMobile = !BUILD_CONFIG.isElectron && window.innerWidth < 768;
-
 enum APP_SIDEBAR_STATE {
  OPEN = 'open',
  WIDTH = 'width',
@@ -15,11 +13,15 @@ export class AppSidebar extends Entity {
    super();
  }

+  /**
+   * whether the sidebar is open,
+   * even if the sidebar is not open, hovering can show the floating sidebar
+   */
  open$ = LiveData.from(
    this.appSidebarState
      .watch<boolean>(APP_SIDEBAR_STATE.OPEN)
-      .pipe(map(value => value ?? !isMobile)),
-    !isMobile
+      .pipe(map(value => value ?? true)),
+    true
  );

  width$ = LiveData.from(
@@ -28,8 +30,16 @@ export class AppSidebar extends Entity {
      .pipe(map(value => value ?? 248)),
    248
  );
-  responsiveFloating$ = new LiveData<boolean>(isMobile);
-  hoverFloating$ = new LiveData<boolean>(false);
+
+  /**
+   * hovering can show the floating sidebar, without open it
+   */
+  hovering$ = new LiveData<boolean>(false);
+
+  /**
+   * small screen mode, will disable hover effect
+   */
+  smallScreenMode$ = new LiveData<boolean>(false);
  resizing$ = new LiveData<boolean>(false);

  getCachedAppSidebarOpenState = () => {
@@ -42,23 +52,15 @@ export class AppSidebar extends Entity {

  setOpen = (open: boolean) => {
    this.appSidebarState.set(APP_SIDEBAR_STATE.OPEN, open);
-    if (!open && this.hoverFloating$.value) {
-      const timeout = setTimeout(() => {
-        this.setHoverFloating(false);
-      }, 500);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
    return;
  };

-  setResponsiveFloating = (floating: boolean) => {
-    this.responsiveFloating$.next(floating);
+  setSmallScreenMode = (smallScreenMode: boolean) => {
+    this.smallScreenMode$.next(smallScreenMode);
  };

-  setHoverFloating = (hoverFloating: boolean) => {
-    this.hoverFloating$.next(hoverFloating);
+  setHovering = (hoverFloating: boolean) => {
+    this.hovering$.next(hoverFloating);
  };

  setResizing = (resizing: boolean) => {
--- a/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts
+++ b/packages/frontend/core/src/modules/app-sidebar/views/index.css.ts
@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const floatingMaxWidth = 768;
 export const navWrapperStyle = style({
@@ -10,16 +11,45 @@ export const navWrapperStyle = style({
  },
  selectors: {
    '&[data-has-border=true]': {
-      borderRight: `0.5px solid ${cssVar('borderColor')}`,
+      borderRight: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
    },
    '&[data-is-floating="true"]': {
-      backgroundColor: cssVar('backgroundPrimaryColor'),
+      backgroundColor: cssVarV2('layer/background/primary'),
    },
    '&[data-client-border="true"]': {
      paddingBottom: 8,
    },
  },
 });
+export const hoverNavWrapperStyle = style({
+  selectors: {
+    '&[data-is-floating="true"]': {
+      backgroundColor: cssVarV2('layer/background/primary'),
+      height: 'calc(100% - 60px)',
+      marginTop: '52px',
+      marginLeft: '4px',
+      boxShadow: cssVar('--affine-popover-shadow'),
+      borderRadius: '6px',
+    },
+    '&[data-is-floating="true"][data-is-electron="true"]': {
+      height: '100%',
+      marginTop: '-4px',
+    },
+    '&[data-is-floating="true"][data-client-border="true"]': {
+      backgroundColor: cssVarV2('layer/background/overlayPanel'),
+    },
+    '&[data-is-floating="true"][data-client-border="true"]::before': {
+      content: '""',
+      position: 'absolute',
+      inset: 0,
+      opacity: `var(--affine-noise-opacity, 0)`,
+      backgroundRepeat: 'repeat',
+      backgroundSize: '50px',
+      // TODO(@Peng): figure out how to use vanilla-extract webpack plugin to inject img url
+      backgroundImage: `var(--noise-background)`,
+    },
+  },
+});
 export const navHeaderButton = style({
  width: '32px',
  height: '32px',
@@ -62,7 +92,7 @@ export const sidebarFloatMaskStyle = style({
  left: 0,
  right: '100%',
  bottom: 0,
-  background: cssVar('backgroundModalColor'),
+  background: cssVarV2('layer/background/modal'),
  selectors: {
    '&[data-open="true"][data-is-floating="true"]': {
      opacity: 1,
--- a/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/index.tsx
@@ -9,14 +9,16 @@ import {
  useServiceOptional,
  WorkspaceService,
 } from '@toeverything/infra';
+import clsx from 'clsx';
 import { debounce } from 'lodash-es';
 import type { PropsWithChildren, ReactElement } from 'react';
-import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';

 import { AppSidebarService } from '../services/app-sidebar';
 import * as styles from './fallback.css';
 import {
  floatingMaxWidth,
+  hoverNavWrapperStyle,
  navBodyStyle,
  navHeaderStyle,
  navStyle,
@@ -32,6 +34,7 @@ export type History = {

 const MAX_WIDTH = 480;
 const MIN_WIDTH = 248;
+const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;

 export function AppSidebar({ children }: PropsWithChildren) {
  const { appSettings } = useAppSettingHelper();
@@ -42,8 +45,35 @@ export function AppSidebar({ children }: PropsWithChildren) {

  const open = useLiveData(appSidebarService.open$);
  const width = useLiveData(appSidebarService.width$);
-  const floating = useLiveData(appSidebarService.responsiveFloating$);
+  const smallScreenMode = useLiveData(appSidebarService.smallScreenMode$);
+  const hovering = useLiveData(appSidebarService.hovering$) && open !== true;
  const resizing = useLiveData(appSidebarService.resizing$);
+  const [deferredHovering, setDeferredHovering] = useState(false);
+  useEffect(() => {
+    if (open) {
+      // if open, we don't need to show the floating sidebar
+      setDeferredHovering(false);
+      return;
+    }
+    // we make a little delay here.
+    // this allow the sidebar close animation to complete.
+    const timeout = setTimeout(() => {
+      setDeferredHovering(hovering);
+    }, 150);
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [hovering, open]);
+
+  const sidebarState = smallScreenMode
+    ? open
+      ? 'floating-with-mask'
+      : 'close'
+    : open
+      ? 'open'
+      : deferredHovering
+        ? 'floating'
+        : 'close';

  useEffect(() => {
    // do not float app sidebar on desktop
@@ -55,19 +85,8 @@ export function AppSidebar({ children }: PropsWithChildren) {
      const isFloatingMaxWidth = window.matchMedia(
        `(max-width: ${floatingMaxWidth}px)`
      ).matches;
-      const isOverflowWidth = window.matchMedia(
-        `(max-width: ${width / 0.4}px)`
-      ).matches;
-      const isFloating = isFloatingMaxWidth || isOverflowWidth;
-      if (
-        open === undefined &&
-        appSidebarService.getCachedAppSidebarOpenState() === undefined
-      ) {
-        // give the initial value,
-        // so that the sidebar can be closed on mobile by default
-        appSidebarService.setOpen(!isFloating);
-      }
-      appSidebarService.setResponsiveFloating(isFloating);
+      const isFloating = isFloatingMaxWidth;
+      appSidebarService.setSmallScreenMode(isFloating);
    }

    const dOnResize = debounce(onResize, 50);
@@ -75,10 +94,9 @@ export function AppSidebar({ children }: PropsWithChildren) {
    return () => {
      window.removeEventListener('resize', dOnResize);
    };
-  }, [appSidebarService, open, width]);
+  }, [appSidebarService]);

  const hasRightBorder = !BUILD_CONFIG.isElectron && !clientBorder;
-  const isMacosDesktop = BUILD_CONFIG.isElectron && environment.isMacOs;

  const handleOpenChange = useCallback(
    (open: boolean) => {
@@ -105,11 +123,21 @@ export function AppSidebar({ children }: PropsWithChildren) {
    appSidebarService.setOpen(false);
  }, [appSidebarService]);

+  const onMouseEnter = useCallback(() => {
+    appSidebarService.setHovering(true);
+  }, [appSidebarService]);
+
+  const onMouseLeave = useCallback(() => {
+    appSidebarService.setHovering(false);
+  }, [appSidebarService]);
+
  return (
    <>
      <ResizePanel
-        floating={floating}
-        open={open}
+        floating={
+          sidebarState === 'floating' || sidebarState === 'floating-with-mask'
+        }
+        open={sidebarState !== 'close'}
        resizing={resizing}
        maxWidth={MAX_WIDTH}
        minWidth={MIN_WIDTH}
@@ -118,18 +146,25 @@ export function AppSidebar({ children }: PropsWithChildren) {
        onOpen={handleOpenChange}
        onResizing={handleResizing}
        onWidthChange={handleWidthChange}
-        className={navWrapperStyle}
+        className={clsx(navWrapperStyle, {
+          [hoverNavWrapperStyle]: sidebarState === 'floating',
+        })}
        resizeHandleOffset={0}
        resizeHandleVerticalPadding={clientBorder ? 16 : 0}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
        data-transparent
-        data-open={open}
+        data-open={sidebarState !== 'close'}
        data-has-border={hasRightBorder}
        data-testid="app-sidebar-wrapper"
        data-is-macos-electron={isMacosDesktop}
        data-client-border={clientBorder}
+        data-is-electron={BUILD_CONFIG.isElectron}
      >
        <nav className={navStyle} data-testid="app-sidebar">
-          {!BUILD_CONFIG.isElectron && <SidebarHeader />}
+          {!BUILD_CONFIG.isElectron && sidebarState !== 'floating' && (
+            <SidebarHeader />
+          )}
          <div className={navBodyStyle} data-testid="sliderBar-inner">
            {children}
          </div>
@@ -138,7 +173,7 @@ export function AppSidebar({ children }: PropsWithChildren) {
      <div
        data-testid="app-sidebar-float-mask"
        data-open={open}
-        data-is-floating={floating}
+        data-is-floating={sidebarState === 'floating-with-mask'}
        className={sidebarFloatMaskStyle}
        onClick={handleClose}
      />
--- 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
@@ -2,7 +2,7 @@ import { IconButton } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { SidebarIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';

 import { AppSidebarService } from '../../services/app-sidebar';
 import * as styles from './sidebar-switch.css';
@@ -16,21 +16,33 @@ export const SidebarSwitch = ({
 }) => {
  const appSidebarService = useService(AppSidebarService).sidebar;
  const open = useLiveData(appSidebarService.open$);
+  const switchRef = useRef<HTMLDivElement>(null);
+
+  const handleMouseEnter = useCallback(() => {
+    appSidebarService.setHovering(true);
+  }, [appSidebarService]);
+
+  const handleClickSwitch = useCallback(() => {
+    appSidebarService.toggleSidebar();
+  }, [appSidebarService]);
+
+  const handleMouseLeave = useCallback(() => {
+    appSidebarService.setHovering(false);
+  }, [appSidebarService]);

  const t = useI18n();
  const tooltipContent = open
    ? t['com.affine.sidebarSwitch.collapse']()
    : t['com.affine.sidebarSwitch.expand']();

-  const toggleSidebar = useCallback(() => {
-    appSidebarService.toggleSidebar();
-  }, [appSidebarService]);
-
  return (
    <div
+      ref={switchRef}
      data-show={show}
      className={styles.sidebarSwitchClip}
      data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
    >
      <IconButton
        tooltip={tooltipContent}
@@ -41,7 +53,7 @@ export const SidebarSwitch = ({
        style={{
          zIndex: 1,
        }}
-        onClick={toggleSidebar}
+        onClick={handleClickSwitch}
      >
        <SidebarIcon />
      </IconButton>
--- a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-container.tsx
@@ -26,7 +26,7 @@ export const SidebarContainer = ({

  return (
    <div className={clsx(styles.sidebarContainerInner, className)} {...props}>
-      <Header floating={false} onToggle={handleToggleOpen}>
+      <Header onToggle={handleToggleOpen}>
        <SidebarHeaderSwitcher />
      </Header>
      {sidebarTabs.length > 0 ? (
--- a/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/sidebar/sidebar-header.tsx
@@ -4,7 +4,6 @@ import { RightSidebarIcon } from '@blocksuite/icons/rc';
 import * as styles from './sidebar-header.css';

 export type HeaderProps = {
-  floating: boolean;
  onToggle?: () => void;
  children?: React.ReactNode;
 };
@@ -13,20 +12,13 @@ function Container({
  children,
  style,
  className,
-  floating,
 }: {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
-  floating?: boolean;
 }) {
  return (
-    <div
-      data-testid="header"
-      style={style}
-      className={className}
-      data-sidebar-floating={floating}
-    >
+    <div data-testid="header" style={style} className={className}>
      {children}
    </div>
  );
@@ -40,9 +32,9 @@ const ToggleButton = ({ onToggle }: { onToggle?: () => void }) => {
  );
 };

-export const Header = ({ floating, children, onToggle }: HeaderProps) => {
+export const Header = ({ children, onToggle }: HeaderProps) => {
  return (
-    <Container className={styles.header} floating={floating}>
+    <Container className={styles.header}>
      {children}
      {!BUILD_CONFIG.isElectron && (
        <>