Implement new header on home page

src/renderer/features/home/routes/home-route.tsx

@@ -1,17 +1,17 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { Box, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
-import { TextTitle, PageHeader, FeatureCarousel, GridCarousel } from '/@/renderer/components';
+import { TextTitle, FeatureCarousel, GridCarousel, NativeScrollArea } from '/@/renderer/components';
 import { useAlbumList } from '/@/renderer/features/albums';
 import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
-import { AnimatedPage } from '/@/renderer/features/shared';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 
 const HomeRoute = () => {
-  // const rootElement = document.querySelector(':root') as HTMLElement;
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
   const server = useCurrentServer();
   const cq = useContainerQuery();
   const itemsPerPage = cq.isXl ? 9 : cq.isLg ? 7 : cq.isMd ? 5 : cq.isSm ? 4 : 3;
@@ -111,16 +111,6 @@ const HomeRoute = () => {
     [pagination, setPagination],
   );
 
-  // const handleScroll = (position: { x: number; y: number }) => {
-  //   if (position.y <= 15) {
-  //     return rootElement?.style?.setProperty('--header-opacity', '0');
-  //   }
-
-  //   return rootElement?.style?.setProperty('--header-opacity', '1');
-  // };
-
-  // const throttledScroll = throttle(handleScroll, 200);
-
   const carousels = [
     {
       data: random?.data?.items,
@@ -202,22 +192,22 @@ const HomeRoute = () => {
 
   return (
     <AnimatedPage>
-      <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <PageHeader
-          isHidden
-          backgroundColor="var(--sidebar-bg)"
-        />
-        <Box
-          mb="1rem"
-          mt="-1.5rem"
-          px="1rem"
-          sx={{
-            height: '100%',
-            overflow: 'auto',
+      <NativeScrollArea
+        ref={scrollAreaRef}
+        pageHeaderProps={{
+          backgroundColor: 'var(--titlebar-bg)',
+          children: (
+            <LibraryHeaderBar>
+              <LibraryHeaderBar.Title>Home</LibraryHeaderBar.Title>
+            </LibraryHeaderBar>
+          ),
+          offset: ['0px', '200px'],
         }}
       >
         <Box
           ref={cq.ref}
+          pt="3rem"
+          px="2rem"
           sx={{
             height: '100%',
             maxWidth: '1920px',
@@ -268,8 +258,7 @@ const HomeRoute = () => {
               ))}
           </Stack>
         </Box>
-        </Box>
-      </Box>
+      </NativeScrollArea>
     </AnimatedPage>
   );
 };