refactor(infra): directory structure (#4615)

packages/frontend/component/src/ui/scrollbar/index.css.ts

@@ -0,0 +1,91 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const scrollableContainerRoot = style({
+  width: '100%',
+  vars: {
+    '--scrollbar-width': '8px',
+  },
+  height: '100%',
+});
+
+export const scrollTopBorder = style({
+  position: 'absolute',
+  top: 0,
+  left: '16px',
+  right: '16px',
+  height: '1px',
+  transition: 'opacity .3s .2s',
+  opacity: 0,
+  background: 'var(--affine-border-color)',
+  selectors: {
+    '&[data-has-scroll-top="true"]': {
+      opacity: 1,
+    },
+  },
+});
+
+export const scrollableViewport = style({
+  height: '100%',
+  width: '100%',
+});
+
+globalStyle(`${scrollableViewport} > div`, {
+  maxWidth: '100%',
+  display: 'block !important',
+});
+
+export const scrollableContainer = style({
+  height: '100%',
+  marginBottom: '4px',
+});
+
+export const scrollbar = style({
+  display: 'flex',
+  flexDirection: 'column',
+  userSelect: 'none',
+  touchAction: 'none',
+  marginRight: '4px',
+  width: 'var(--scrollbar-width)',
+  height: '100%',
+  opacity: 1,
+  transition: 'width .15s',
+  ':hover': {
+    background: 'var(--affine-background-secondary-color)',
+    width: 'calc(var(--scrollbar-width) + 3px)',
+    borderLeft: '1px solid var(--affine-border-color)',
+  },
+  selectors: {
+    '&[data-state="hidden"]': {
+      opacity: 0,
+    },
+  },
+});
+export const TableScrollbar = style({
+  marginTop: '60px',
+  height: 'calc(100% - 120px)',
+  borderRadius: '4px',
+});
+
+export const scrollbarThumb = style({
+  position: 'relative',
+  background: 'var(--affine-divider-color)',
+  width: '50%',
+  overflow: 'hidden',
+  borderRadius: '4px',
+  ':hover': {
+    background: 'var(--affine-icon-color)',
+  },
+  selectors: {
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '100%',
+      height: '100%',
+      minWidth: '44px',
+      minHeight: '44px',
+    },
+  },
+});

packages/frontend/component/src/ui/scrollbar/index.ts

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

packages/frontend/component/src/ui/scrollbar/scrollbar.tsx

@@ -0,0 +1,52 @@
+import * as ScrollArea from '@radix-ui/react-scroll-area';
+import clsx from 'clsx';
+import { type PropsWithChildren } from 'react';
+
+import { useHasScrollTop } from '../../components/app-sidebar/sidebar-containers/use-has-scroll-top';
+import * as styles from './index.css';
+
+export type ScrollableContainerProps = {
+  showScrollTopBorder?: boolean;
+  inTableView?: boolean;
+  className?: string;
+  viewPortClassName?: string;
+  styles?: React.CSSProperties;
+  scrollBarClassName?: string;
+};
+
+export const ScrollableContainer = ({
+  children,
+  showScrollTopBorder = false,
+  inTableView = false,
+  className,
+  styles: _styles,
+  viewPortClassName,
+  scrollBarClassName,
+}: PropsWithChildren<ScrollableContainerProps>) => {
+  const [hasScrollTop, ref] = useHasScrollTop();
+  return (
+    <ScrollArea.Root
+      style={_styles}
+      className={clsx(styles.scrollableContainerRoot, className)}
+    >
+      <div
+        data-has-scroll-top={hasScrollTop}
+        className={clsx({ [styles.scrollTopBorder]: showScrollTopBorder })}
+      />
+      <ScrollArea.Viewport
+        className={clsx([styles.scrollableViewport, viewPortClassName])}
+        ref={ref}
+      >
+        <div className={styles.scrollableContainer}>{children}</div>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar
+        orientation="vertical"
+        className={clsx(styles.scrollbar, scrollBarClassName, {
+          [styles.TableScrollbar]: inTableView,
+        })}
+      >
+        <ScrollArea.Thumb className={styles.scrollbarThumb} />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+};