snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1 @@
+export * from './resize-panel';

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

@@ -0,0 +1,111 @@
+import { cssVar } from '@toeverything/theme';
+import { createVar, style } from '@vanilla-extract/css';
+export const panelWidthVar = createVar('panel-width');
+export const resizeHandleOffsetVar = createVar('resize-handle-offset');
+export const resizeHandleVerticalPadding = createVar(
+  'resize-handle-vertical-padding'
+);
+export const animationTimeout = createVar();
+
+export const root = style({
+  vars: {
+    [panelWidthVar]: '256px',
+    [resizeHandleOffsetVar]: '0',
+  },
+  position: 'relative',
+  width: panelWidthVar,
+  minWidth: panelWidthVar,
+  height: '100%',
+  zIndex: 4,
+  transform: 'translateX(0)',
+  maxWidth: '50%',
+  selectors: {
+    '&[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(calc(${panelWidthVar} + 4px))`,
+      },
+    '&[data-open="true"][data-handle-position="left"][data-is-floating="true"]':
+      {
+        transform: `translateX(calc(${panelWidthVar} * -1))`,
+      },
+    '&[data-enable-animation="true"]': {
+      transition: `margin-left ${animationTimeout}, margin-right ${animationTimeout}, transform ${animationTimeout}, background ${animationTimeout}`,
+    },
+    '&[data-transition-state="exited"]': {
+      // avoid focus on hidden panel
+      visibility: 'hidden',
+    },
+  },
+});
+
+export const content = style({
+  contain: 'strict',
+  width: '100%',
+  height: '100%',
+});
+
+export const panelContent = style({
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto',
+});
+export const resizeHandleContainer = style({
+  position: 'absolute',
+  right: resizeHandleOffsetVar,
+  top: resizeHandleVerticalPadding,
+  bottom: resizeHandleVerticalPadding,
+  width: 8,
+  zIndex: '1',
+  transform: 'translateX(50%)',
+  backgroundColor: 'transparent',
+  opacity: 0,
+  display: 'flex',
+  justifyContent: 'center',
+  cursor: 'col-resize',
+  '@media': {
+    '(max-width: 600px)': {
+      // do not allow resizing on small screen
+      display: 'none',
+    },
+  },
+  transition: 'opacity 0.15s ease 0.1s',
+  selectors: {
+    '&[data-resizing="true"], &:hover': {
+      opacity: 1,
+    },
+    '&[data-open="false"]': {
+      display: 'none',
+    },
+    '&[data-open="open"]': {
+      display: 'block',
+    },
+    '&[data-handle-position="left"]': {
+      left: resizeHandleOffsetVar,
+      right: 'auto',
+      transform: 'translateX(-50%)',
+    },
+  },
+});
+export const resizerInner = style({
+  position: 'absolute',
+  height: '100%',
+  width: '2px',
+  borderRadius: '2px',
+  backgroundColor: cssVar('primaryColor'),
+  transition: 'all 0.2s ease-in-out',
+  transform: 'translateX(0.5px)',
+  selectors: {
+    [`${resizeHandleContainer}[data-resizing="true"] &`]: {
+      width: '4px',
+      borderRadius: '4px',
+    },
+  },
+});

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

@@ -0,0 +1,247 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
+import { useTransitionState } from 'react-transition-state';
+
+import { useDropTarget } from '../../ui/dnd';
+import { Tooltip, type TooltipProps } from '../../ui/tooltip';
+import * as styles from './resize-panel.css';
+
+export interface ResizeHandleProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+  resizing: boolean;
+  open: boolean;
+  minWidth: number;
+  maxWidth: number;
+  resizeHandlePos: 'left' | 'right';
+  resizeHandleOffset?: number;
+  resizeHandleVerticalPadding?: number;
+  onOpen: (open: boolean) => void;
+  onResizing: (resizing: boolean) => void;
+  onWidthChange: (width: number) => void;
+  onWidthChanged?: (width: number) => void;
+  tooltip?: TooltipProps['content'];
+  tooltipShortcut?: TooltipProps['shortcut'];
+  tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
+  tooltipShortcutClassName?: string;
+  dropTargetOptions?: Parameters<typeof useDropTarget>[0];
+}
+
+export interface ResizePanelProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+  resizing: boolean;
+  open: boolean;
+  floating?: boolean;
+  minWidth: number;
+  maxWidth: number;
+  resizeHandlePos: 'left' | 'right';
+  resizeHandleOffset?: number;
+  resizeHandleVerticalPadding?: number;
+  resizeHandleTooltip?: TooltipProps['content'];
+  resizeHandleTooltipShortcut?: TooltipProps['shortcut'];
+  resizeHandleTooltipShortcutClassName?: string;
+  resizeHandleTooltipOptions?: Partial<
+    Omit<TooltipProps, 'content' | 'shortcut'>
+  >;
+  resizeHandleDropTargetOptions?: Parameters<typeof useDropTarget>[0];
+  enableAnimation?: boolean;
+  width: number;
+  unmountOnExit?: boolean;
+  onOpen: (open: boolean) => void;
+  onResizing: (resizing: boolean) => void;
+  onWidthChange: (width: number) => void;
+  onWidthChanged?: (width: number) => void;
+}
+
+const ResizeHandle = ({
+  className,
+  resizing,
+  minWidth,
+  maxWidth,
+  resizeHandlePos,
+  resizeHandleOffset,
+  resizeHandleVerticalPadding,
+  dropTargetOptions,
+  open,
+  onOpen,
+  onResizing,
+  onWidthChange,
+  onWidthChanged,
+  tooltip,
+  tooltipShortcut,
+  tooltipOptions,
+  tooltipShortcutClassName,
+  ...rest
+}: ResizeHandleProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const onResizeStart = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      let resized = false;
+      const panelContainer = ref.current?.parentElement;
+      if (!panelContainer) return;
+
+      // add cursor style to body
+      document.body.style.cursor = 'col-resize';
+
+      const { left: anchorLeft, right: anchorRight } =
+        panelContainer.getBoundingClientRect();
+
+      let lastWidth: number;
+      function onMouseMove(e: MouseEvent) {
+        e.preventDefault();
+        if (!panelContainer) return;
+        const newWidth = Math.min(
+          maxWidth,
+          Math.max(
+            resizeHandlePos === 'right'
+              ? e.clientX - anchorLeft
+              : anchorRight - e.clientX,
+            minWidth
+          )
+        );
+        lastWidth = newWidth;
+        onWidthChange(newWidth);
+        onResizing(true);
+        resized = true;
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener(
+        'mouseup',
+        () => {
+          // if not resized, toggle sidebar
+          if (!resized) {
+            onOpen(false);
+          }
+          onResizing(false);
+          lastWidth && onWidthChanged?.(lastWidth);
+          document.removeEventListener('mousemove', onMouseMove);
+          document.body.style.cursor = '';
+        },
+        { once: true }
+      );
+    },
+    [
+      maxWidth,
+      resizeHandlePos,
+      minWidth,
+      onWidthChange,
+      onResizing,
+      onWidthChanged,
+      onOpen,
+    ]
+  );
+
+  const { dropTargetRef } = useDropTarget(dropTargetOptions, [
+    dropTargetOptions,
+  ]);
+
+  return (
+    <Tooltip
+      content={tooltip}
+      shortcut={tooltipShortcut}
+      shortcutClassName={tooltipShortcutClassName}
+      {...tooltipOptions}
+    >
+      <div
+        {...rest}
+        data-testid="resize-handle"
+        ref={node => {
+          ref.current = node;
+          dropTargetRef.current = node;
+        }}
+        style={assignInlineVars({
+          [styles.resizeHandleOffsetVar]: `${resizeHandleOffset ?? 0}px`,
+          [styles.resizeHandleVerticalPadding]: `${
+            resizeHandleVerticalPadding ?? 0
+          }px`,
+        })}
+        className={clsx(styles.resizeHandleContainer, className)}
+        data-handle-position={resizeHandlePos}
+        data-resizing={resizing}
+        data-open={open}
+        onMouseDown={onResizeStart}
+      >
+        <div className={styles.resizerInner} />
+      </div>
+    </Tooltip>
+  );
+};
+
+const animationTimeout = 300;
+
+export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
+  function ResizePanel(
+    {
+      children,
+      className,
+      resizing,
+      minWidth,
+      maxWidth,
+      width,
+      floating,
+      enableAnimation = true,
+      open,
+      unmountOnExit,
+      onOpen,
+      onResizing,
+      onWidthChange,
+      onWidthChanged,
+      resizeHandlePos,
+      resizeHandleOffset,
+      resizeHandleVerticalPadding,
+      resizeHandleTooltip,
+      resizeHandleTooltipShortcut,
+      resizeHandleTooltipShortcutClassName,
+      resizeHandleTooltipOptions,
+      resizeHandleDropTargetOptions,
+      ...rest
+    },
+    ref
+  ) {
+    const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
+    const [{ status }, toggle] = useTransitionState({
+      timeout: animationTimeout,
+    });
+    useLayoutEffect(() => {
+      toggle(open);
+    }, [open, toggle]);
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        style={assignInlineVars({
+          [styles.panelWidthVar]: `${safeWidth}px`,
+          [styles.animationTimeout]: `${animationTimeout}ms`,
+        })}
+        className={clsx(className, styles.root)}
+        data-open={open}
+        data-transition-state={status}
+        data-is-floating={floating}
+        data-handle-position={resizeHandlePos}
+        data-enable-animation={enableAnimation && !resizing}
+      >
+        <div className={styles.content}>
+          {!(status === 'exited' && unmountOnExit !== false) && children}
+        </div>
+        <ResizeHandle
+          resizeHandlePos={resizeHandlePos}
+          resizeHandleOffset={resizeHandleOffset}
+          resizeHandleVerticalPadding={resizeHandleVerticalPadding}
+          tooltip={resizeHandleTooltip}
+          tooltipOptions={resizeHandleTooltipOptions}
+          tooltipShortcut={resizeHandleTooltipShortcut}
+          tooltipShortcutClassName={resizeHandleTooltipShortcutClassName}
+          maxWidth={maxWidth}
+          minWidth={minWidth}
+          onOpen={onOpen}
+          onResizing={onResizing}
+          onWidthChange={onWidthChange}
+          onWidthChanged={onWidthChanged}
+          open={open}
+          resizing={resizing}
+          dropTargetOptions={resizeHandleDropTargetOptions}
+        />
+      </div>
+    );
+  }
+);