Adjust base page headers

src/renderer/components/page-header/index.tsx

@@ -1,22 +1,26 @@
+import { Flex, FlexProps } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useShouldPadTitlebar } from '/@/renderer/hooks';
 
-const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string; position?: string }>`
-  position: ${(props) => props.position};
-  z-index: 100;
+const Container = styled(motion(Flex))<{ $isHidden?: boolean; height?: string; position?: string }>`
+  position: ${(props) => props.position || 'relative'};
+  z-index: 2000;
   width: 100%;
   height: ${(props) => props.height || '60px'};
-  opacity: ${(props) => props.$useOpacity && 'var(--header-opacity)'};
+  opacity: ${(props) => (props.$isHidden ? 0 : 1)};
   transition: opacity 0.3s ease-in-out;
+  user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
 `;
 
 const Header = styled(motion.div)<{ $padRight?: boolean }>`
+  position: relative;
   z-index: 15;
+  width: 100%;
   height: 100%;
   margin-right: ${(props) => props.$padRight && '170px'};
-  padding: 1rem;
   -webkit-app-region: drag;
 
   button {
@@ -28,40 +32,41 @@ const Header = styled(motion.div)<{ $padRight?: boolean }>`
   }
 `;
 
-// const BackgroundImage = styled.div<{ background: string }>`
-//   position: absolute;
-//   top: 0;
-//   z-index: -1;
-//   width: 100%;
-//   height: 100%;
-//   background: ${(props) => props.background};
-// `;
+const BackgroundImage = styled.div<{ background: string }>`
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  background: ${(props) => props.background || 'var(--titlebar-bg)'};
+`;
 
-// const BackgroundImageOverlay = styled.div`
-//   position: absolute;
-//   top: 0;
-//   left: 0;
-//   z-index: -1;
-//   width: 100%;
-//   height: 100%;
-//   /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */
-//   /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */
-// `;
+const BackgroundImageOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 30%), var(--background-noise);
+`;
 
-interface PageHeaderProps {
+interface PageHeaderProps
+  extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
   backgroundColor?: string;
   children?: React.ReactNode;
   height?: string;
+  isHidden?: boolean;
   position?: string;
-  useOpacity?: boolean;
 }
 
 export const PageHeader = ({
   position,
   height,
   backgroundColor,
-  useOpacity,
+  isHidden,
   children,
+  ...props
 }: PageHeaderProps) => {
   const ref = useRef(null);
   const padRight = useShouldPadTitlebar();
@@ -74,17 +79,18 @@ export const PageHeader = ({
   return (
     <Container
       ref={ref}
-      $useOpacity={useOpacity}
-      animate={{
-        backgroundColor,
-        transition: { duration: 1.5 },
-      }}
+      $isHidden={isHidden}
       height={height}
       position={position}
+      {...props}
     >
-      <Header $padRight={padRight}>{children}</Header>
-      {/* <BackgroundImage background={backgroundColor} /> */}
-      {/* <BackgroundImageOverlay /> */}
+      <Header $padRight={padRight}>{!isHidden && <>{children}</>}</Header>
+      {backgroundColor && (
+        <>
+          <BackgroundImage background={'var(--titlebar-bg)' || ''} />
+          <BackgroundImageOverlay />
+        </>
+      )}
     </Container>
   );
 };

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,5 +1,6 @@
 import { Center, Group } from '@mantine/core';
-import { Fragment } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { forwardRef, Fragment, Ref } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -64,17 +65,19 @@ const BackgroundImageOverlay = styled.div`
   z-index: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg));
+  background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), var(--background-noise);
 `;
 
 interface AlbumDetailHeaderProps {
   background: string;
 }
 
-export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
+export const AlbumDetailHeader = forwardRef(
+  ({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
     const { albumId } = useParams() as { albumId: string };
     const detailQuery = useAlbumDetail({ id: albumId });
     const cq = useContainerQuery();
+    const mergedRef = useMergedRef(ref, cq.ref);
 
     const titleSize = cq.isXl
       ? '6rem'
@@ -87,7 +90,7 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
       : '2rem';
 
     return (
-    <HeaderContainer ref={cq.ref}>
+      <HeaderContainer ref={mergedRef}>
         <BackgroundImage background={background} />
         <BackgroundImageOverlay />
         <CoverImageWrapper>
@@ -103,8 +106,8 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
               sx={{
                 background: 'var(--placeholder-bg)',
                 borderRadius: 'var(--card-default-radius)',
-              height: `${80}px`,
-              width: `${80}px`,
+                height: `${225}px`,
+                width: `${225}px`,
               }}
             >
               <RiAlbumFill
@@ -179,4 +182,5 @@ export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
         </MetadataWrapper>
       </HeaderContainer>
     );
-};
+  },
+);

src/renderer/features/albums/components/album-list-header.tsx

@@ -296,7 +296,7 @@ export const AlbumListHeader = ({ gridRef, tableRef }: AlbumListHeaderProps) =>
   };
 
   return (
-    <PageHeader>
+    <PageHeader p="1rem">
       <HeaderItems ref={cq.ref}>
         <Flex
           align="center"

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} />
           </>
         )}

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -289,7 +289,7 @@ export const AlbumArtistListHeader = ({ gridRef, tableRef }: AlbumArtistListHead
   };
 
   return (
-    <PageHeader>
+    <PageHeader p="1rem">
       <HeaderItems ref={cq.ref}>
         <Flex
           align="center"

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

@@ -204,7 +204,7 @@ const HomeRoute = () => {
     <AnimatedPage>
       <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <PageHeader
-          useOpacity
+          isHidden
           backgroundColor="var(--sidebar-bg)"
         />
         <Box

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,27 +1,49 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Box, Stack } from '@mantine/core';
+import { Flex } from '@mantine/core';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
+import styled from 'styled-components';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
 
+const BackgroundImageOverlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 30%), var(--background-noise);
+`;
+
 export const SidebarPlayQueue = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
-    <Stack
-      h="100%"
-      spacing={0}
-      sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
+    <>
+      <Flex
+        bg="var(--titlebar-bg)"
+        h="60px"
+        sx={{ position: 'relative' }}
+        w="100%"
       >
-      <Box
-        h="50px"
+        <BackgroundImageOverlay />
+        <Flex
+          h="100%"
           mr="160px"
           sx={{
             WebkitAppRegion: 'drag',
-          zIndex: -1,
+            background: 'var(--titlebar-bg)',
           }}
+          w="100%"
         />
+      </Flex>
+      <Flex
+        direction="column"
+        h="calc(100% - 60px)"
+        sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
+        w="100%"
+      >
         <PlayQueue
           ref={queueRef}
           type="sideQueue"
@@ -30,6 +52,7 @@ export const SidebarPlayQueue = () => {
           tableRef={queueRef}
           type="sideQueue"
         />
-    </Stack>
+      </Flex>
+    </>
   );
 };

src/renderer/features/playlists/components/playlist-list-header.tsx

@@ -189,7 +189,7 @@ export const PlaylistListHeader = ({ tableRef }: PlaylistListHeaderProps) => {
   };
 
   return (
-    <PageHeader>
+    <PageHeader p="1rem">
       <Flex
         ref={cq.ref}
         direction="row"

src/renderer/features/songs/components/song-list-header.tsx

@@ -242,7 +242,7 @@ export const SongListHeader = ({ tableRef }: SongListHeaderProps) => {
   };
 
   return (
-    <PageHeader>
+    <PageHeader p="1rem">
       <Flex
         ref={cq.ref}
         direction="row"

src/renderer/layouts/default-layout.tsx

@@ -63,6 +63,7 @@ const SidebarContainer = styled.div`
 const RightSidebarContainer = styled(motion.div)`
   position: relative;
   grid-area: right-sidebar;
+  height: 100%;
   background: var(--sidebar-bg);
   border-left: var(--sidebar-border);
 `;