style: add scrollbar (#2826)

packages/component/src/ui/button/styles.css.ts

@@ -28,7 +28,7 @@ export const dropdownBtn = style({
 export const divider = style({
   width: '0.5px',
   height: '16px',
-  background: 'var(--affine-border-color)',
+  background: 'var(--affine-divider-color)',
   // fix dropdown button click area
   margin: '0 4px',
   marginRight: 0,

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

@@ -0,0 +1,85 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+
+
+export const scrollableContainerRoot = style({
+  width: '100%',
+  vars: {
+    '--scrollbar-width': '10px',
+  },
+  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',
+  padding: '0 2px',
+  marginRight: '4px',
+  width: 'var(--scrollbar-width)',
+  height: '100%',
+  opacity: 1,
+  transition: 'opacity .15s',
+  selectors: {
+    '&[data-state="hidden"]': {
+      opacity: 0,
+    },
+  },
+});
+export const TableScrollbar = style({
+  paddingTop: '60px',
+  paddingBottom: '60px',
+});
+
+export const scrollbarThumb = style({
+  position: 'relative',
+  background: 'var(--affine-black-30)',
+  borderRadius: '4px',
+  selectors: {
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '100%',
+      height: '100%',
+      minWidth: '44px',
+      minHeight: '44px',
+    },
+  },
+});

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

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

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

@@ -0,0 +1,43 @@
+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;
+};
+
+export const ScrollableContainer = ({
+  children,
+  showScrollTopBorder = false,
+  inTableView = false,
+}: PropsWithChildren<ScrollableContainerProps>) => {
+    const [hasScrollTop, ref] = useHasScrollTop();
+    return (
+      <ScrollArea.Root className={styles.scrollableContainerRoot}>
+        <div
+          data-has-scroll-top={hasScrollTop}
+          className={clsx({[styles.scrollTopBorder]:showScrollTopBorder})}
+        />
+        <ScrollArea.Viewport
+          className={clsx([styles.scrollableViewport])}
+          ref={ref}
+        >
+          <div className={styles.scrollableContainer}>
+          {children}
+          </div>
+         
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar
+          
+          orientation="vertical"
+          className={clsx(styles.scrollbar,{[styles.TableScrollbar]:inTableView})}
+        >
+          <ScrollArea.Thumb className={styles.scrollbarThumb} />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
+    );
+  }