Adjust scrollarea to add styles and omit header

src/renderer/components/scroll-area/index.tsx

@@ -54,8 +54,11 @@ export const ScrollArea = forwardRef(({ children, ...props }: ScrollAreaProps, r
 interface NativeScrollAreaProps {
   children: React.ReactNode;
   debugScrollPosition?: boolean;
+  noHeader?: boolean;
   pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any };
   scrollBarOffset?: string;
+  scrollHideDelay?: number;
+  style: React.CSSProperties;
 }
 
 export const NativeScrollArea = forwardRef(
@@ -65,13 +68,18 @@ export const NativeScrollArea = forwardRef(
       pageHeaderProps,
       debugScrollPosition,
       scrollBarOffset,
+      scrollHideDelay,
+      noHeader,
       ...props
     }: NativeScrollAreaProps,
     ref: Ref<HTMLDivElement>,
   ) => {
     const [hideScrollbar, setHideScrollbar] = useState(false);
     const [hideHeader, setHideHeader] = useState(true);
-    const { start, clear } = useTimeout(() => setHideScrollbar(true), 1000);
+    const { start, clear } = useTimeout(
+      () => setHideScrollbar(true),
+      scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 1000,
+    );
 
     const containerRef = useRef(null);
     const mergedRef = useMergedRef(ref, containerRef);
@@ -110,12 +118,14 @@ export const NativeScrollArea = forwardRef(
 
     return (
       <>
+        {!noHeader && (
           <PageHeader
             isHidden={hideHeader}
             position="absolute"
             style={{ opacity: scrollYProgress as any }}
             {...pageHeaderProps}
           />
+        )}
         <StyledNativeScrollArea
           ref={mergedRef}
           className={hideScrollbar ? 'hide-scrollbar' : undefined}