feat: sticky table head in page list (#2668)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/components/app-sidebar/index.css.ts

@@ -79,6 +79,7 @@ export const sidebarButtonStyle = style({
   width: 'auto',
   height: '32px',
   color: 'var(--affine-icon-color)',
+  zIndex: 1,
 });
 
 export const sidebarFloatMaskStyle = style({

packages/component/src/components/app-sidebar/sidebar-containers/index.tsx

@@ -1,41 +1,14 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 
 import * as styles from './index.css';
+import { useHasScrollTop } from './use-has-scroll-top';
 
 export function SidebarContainer({ children }: PropsWithChildren) {
   return <div className={clsx([styles.baseContainer])}>{children}</div>;
 }
 
-function useHasScrollTop() {
-  const ref = useRef<HTMLDivElement>(null);
-  const [hasScrollTop, setHasScrollTop] = useState(false);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const container = ref.current;
-
-    function updateScrollTop() {
-      if (container) {
-        const hasScrollTop = container.scrollTop > 0;
-        setHasScrollTop(hasScrollTop);
-      }
-    }
-
-    container.addEventListener('scroll', updateScrollTop);
-    updateScrollTop();
-    return () => {
-      container.removeEventListener('scroll', updateScrollTop);
-    };
-  }, []);
-
-  return [hasScrollTop, ref] as const;
-}
-
 export function SidebarScrollableContainer({ children }: PropsWithChildren) {
   const [hasScrollTop, ref] = useHasScrollTop();
   return (

packages/component/src/components/app-sidebar/sidebar-containers/use-has-scroll-top.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useHasScrollTop() {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hasScrollTop, setHasScrollTop] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const container = ref.current;
+
+    function updateScrollTop() {
+      if (container) {
+        const hasScrollTop = container.scrollTop > 0;
+        setHasScrollTop(hasScrollTop);
+      }
+    }
+
+    container.addEventListener('scroll', updateScrollTop);
+    updateScrollTop();
+    return () => {
+      container.removeEventListener('scroll', updateScrollTop);
+    };
+  }, []);
+
+  return [hasScrollTop, ref] as const;
+}