Adjust base page headers

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -1,34 +1,61 @@
-import { PageHeader, ScrollArea } from '/@/renderer/components';
-import { AnimatedPage } from '/@/renderer/features/shared';
+import { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components';
+import { AnimatedPage, PlayButton } from '/@/renderer/features/shared';
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { useParams } from 'react-router';
-import { useFastAverageColor } from '/@/renderer/hooks';
+import { useFastAverageColor, useShouldPadTitlebar } from '/@/renderer/hooks';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
+import { useIntersection } from '@mantine/hooks';
+import { Group } from '@mantine/core';
 
 const AlbumDetailRoute = () => {
   const tableRef = useRef<AgGridReactType | null>(null);
   const { albumId } = useParams() as { albumId: string };
   const detailQuery = useAlbumDetail({ id: albumId });
   const background = useFastAverageColor(detailQuery.data?.imageUrl);
+  const padTop = useShouldPadTitlebar();
+
+  const containerRef = useRef();
+  const { ref, entry } = useIntersection({
+    root: containerRef.current,
+    threshold: 0,
+  });
 
   return (
     <AnimatedPage key={`album-detail-${albumId}`}>
       <PageHeader
-        useOpacity
+        backgroundColor="black"
+        isHidden={entry?.isIntersecting}
         position="absolute"
-      />
+      >
+        <Group p="1rem">
+          <PlayButton
+            h={40}
+            w={40}
+          />
+          <TextTitle
+            fw="bold"
+            order={2}
+          >
+            {detailQuery?.data?.name}
+          </TextTitle>
+        </Group>
+      </PageHeader>
 
       <ScrollArea
+        ref={containerRef}
         h="100%"
         offsetScrollbars={false}
-        styles={{ scrollbar: { marginTop: '35px' } }}
+        styles={{ scrollbar: { marginTop: padTop ? '35px' : 0 } }}
       >
         {background && (
           <>
-            <AlbumDetailHeader background={background} />
+            <AlbumDetailHeader
+              ref={ref}
+              background={background}
+            />
             <AlbumDetailContent tableRef={tableRef} />
           </>
         )}