feat: new collections (#4530)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

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

@@ -1,6 +1,6 @@
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, useRef } from 'react';
 
 import * as styles from './index.css';
 import { useHasScrollTop } from './use-has-scroll-top';
@@ -10,7 +10,8 @@ export function SidebarContainer({ children }: PropsWithChildren) {
 }
 
 export function SidebarScrollableContainer({ children }: PropsWithChildren) {
-  const [hasScrollTop, ref] = useHasScrollTop();
+  const ref = useRef<HTMLDivElement>(null);
+  const hasScrollTop = useHasScrollTop(ref);
   return (
     <ScrollArea.Root className={styles.scrollableContainerRoot}>
       <div

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

@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 
-export function useHasScrollTop() {
-  const ref = useRef<HTMLDivElement>(null);
+export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
   const [hasScrollTop, setHasScrollTop] = useState(false);
 
   useEffect(() => {
-    if (!ref.current) {
+    if (!ref?.current) {
       return;
     }
 
@@ -13,8 +12,10 @@ export function useHasScrollTop() {
 
     function updateScrollTop() {
       if (container) {
-        const hasScrollTop = container.scrollTop > 0;
-        setHasScrollTop(hasScrollTop);
+        setTimeout(() => {
+          const hasScrollTop = container.scrollTop > 0;
+          setHasScrollTop(hasScrollTop);
+        });
       }
     }
 
@@ -23,7 +24,7 @@ export function useHasScrollTop() {
     return () => {
       container.removeEventListener('scroll', updateScrollTop);
     };
-  }, []);
+  }, [ref]);
 
-  return [hasScrollTop, ref] as const;
+  return hasScrollTop;
 }

packages/frontend/component/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -2,13 +2,14 @@ import { style } from '@vanilla-extract/css';
 
 export const sidebarSwitch = style({
   opacity: 0,
-  width: 0,
+  display: 'none !important',
   overflow: 'hidden',
   pointerEvents: 'none',
   transition: 'all .3s ease-in-out',
   selectors: {
     '&[data-show=true]': {
       opacity: 1,
+      display: 'inline-flex !important',
       width: '32px',
       flexShrink: 0,
       fontSize: '24px',