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 }>`
+const Container = styled(motion(Flex))<{ $isHidden?: boolean; height?: string; position?: string }>`
-  position: ${(props) => props.position};
+  position: ${(props) => props.position || 'relative'};
-  z-index: 100;
+  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 }>`
+const BackgroundImage = styled.div<{ background: string }>`
-//   position: absolute;
+  position: absolute;
-//   top: 0;
+  top: 0;
-//   z-index: -1;
+  z-index: 1;
-//   width: 100%;
+  width: 100%;
-//   height: 100%;
+  height: 100%;
-//   background: ${(props) => props.background};
+  background: ${(props) => props.background || 'var(--titlebar-bg)'};
-// `;
+`;
 
-// const BackgroundImageOverlay = styled.div`
+const BackgroundImageOverlay = styled.div`
-//   position: absolute;
+  position: absolute;
-//   top: 0;
+  top: 0;
-//   left: 0;
+  left: 0;
-//   z-index: -1;
+  z-index: 2;
-//   width: 100%;
+  width: 100%;
-//   height: 100%;
+  height: 100%;
-//   /* background: linear-gradient(180deg, rgba(25, 26, 28, 0%), var(--main-bg)); */
+  background: rgba(0, 0, 0, 30%), var(--background-noise);
-//   /* background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); */
+`;
-// `;
 
-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}
+      $isHidden={isHidden}
-      animate={{
-        backgroundColor,
-        transition: { duration: 1.5 },
-      }}
       height={height}
       position={position}
+      {...props}
     >
-      <Header $padRight={padRight}>{children}</Header>
+      <Header $padRight={padRight}>{!isHidden && <>{children}</>}</Header>
-      {/* <BackgroundImage background={backgroundColor} /> */}
+      {backgroundColor && (
-      {/* <BackgroundImageOverlay /> */}
+        <>
+          <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,119 +65,122 @@ 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(
-  const { albumId } = useParams() as { albumId: string };
+  ({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
-  const detailQuery = useAlbumDetail({ id: albumId });
+    const { albumId } = useParams() as { albumId: string };
-  const cq = useContainerQuery();
+    const detailQuery = useAlbumDetail({ id: albumId });
+    const cq = useContainerQuery();
+    const mergedRef = useMergedRef(ref, cq.ref);
 
-  const titleSize = cq.isXl
+    const titleSize = cq.isXl
-    ? '6rem'
+      ? '6rem'
-    : cq.isLg
+      : cq.isLg
-    ? '5.5rem'
+      ? '5.5rem'
-    : cq.isMd
+      : cq.isMd
-    ? '4.5rem'
+      ? '4.5rem'
-    : cq.isSm
+      : cq.isSm
-    ? '3.5rem'
+      ? '3.5rem'
-    : '2rem';
+      : '2rem';
 
-  return (
+    return (
-    <HeaderContainer ref={cq.ref}>
+      <HeaderContainer ref={mergedRef}>
-      <BackgroundImage background={background} />
+        <BackgroundImage background={background} />
-      <BackgroundImageOverlay />
+        <BackgroundImageOverlay />
-      <CoverImageWrapper>
+        <CoverImageWrapper>
-        {detailQuery?.data?.imageUrl ? (
+          {detailQuery?.data?.imageUrl ? (
-          <StyledImage
+            <StyledImage
-            alt="cover"
+              alt="cover"
-            height={225}
+              height={225}
-            src={detailQuery?.data.imageUrl}
+              src={detailQuery?.data.imageUrl}
-            width={225}
+              width={225}
-          />
+            />
-        ) : (
+          ) : (
-          <Center
+            <Center
+              sx={{
+                background: 'var(--placeholder-bg)',
+                borderRadius: 'var(--card-default-radius)',
+                height: `${225}px`,
+                width: `${225}px`,
+              }}
+            >
+              <RiAlbumFill
+                color="var(--placeholder-fg)"
+                size={35}
+              />
+            </Center>
+          )}
+        </CoverImageWrapper>
+        <MetadataWrapper>
+          <Group>
+            <Text
+              $link
+              component={Link}
+              fw="600"
+              sx={{ textTransform: 'uppercase' }}
+              to={AppRoute.LIBRARY_ALBUMS}
+            >
+              Album
+            </Text>
+            {detailQuery?.data?.releaseYear && (
+              <>
+                <Text>•</Text>
+                <Text>{detailQuery?.data?.releaseYear}</Text>
+              </>
+            )}
+          </Group>
+          <TextTitle
+            fw="900"
+            lh="1"
+            mb="0.12em"
+            mt=".08em"
+            sx={{ fontSize: titleSize }}
+          >
+            {detailQuery?.data?.name}
+          </TextTitle>
+          <Group
+            spacing="xs"
             sx={{
-              background: 'var(--placeholder-bg)',
+              WebkitBoxOrient: 'vertical',
-              borderRadius: 'var(--card-default-radius)',
+              WebkitLineClamp: 2,
-              height: `${80}px`,
+              display: '-webkit-box',
-              width: `${80}px`,
+              overflow: 'hidden',
             }}
           >
-            <RiAlbumFill
+            {detailQuery?.data?.albumArtists.map((artist, index) => (
-              color="var(--placeholder-fg)"
+              <Fragment key={`artist-${artist.id}`}>
-              size={35}
+                {index > 0 && (
-            />
+                  <Text
-          </Center>
+                    $noSelect
-        )}
+                    sx={{
-      </CoverImageWrapper>
+                      display: 'inline-block',
-      <MetadataWrapper>
+                      padding: '0 0.5rem',
-        <Group>
+                    }}
-          <Text
+                  >
-            $link
+                    •
-            component={Link}
+                  </Text>
-            fw="600"
+                )}
-            sx={{ textTransform: 'uppercase' }}
-            to={AppRoute.LIBRARY_ALBUMS}
-          >
-            Album
-          </Text>
-          {detailQuery?.data?.releaseYear && (
-            <>
-              <Text>•</Text>
-              <Text>{detailQuery?.data?.releaseYear}</Text>
-            </>
-          )}
-        </Group>
-        <TextTitle
-          fw="900"
-          lh="1"
-          mb="0.12em"
-          mt=".08em"
-          sx={{ fontSize: titleSize }}
-        >
-          {detailQuery?.data?.name}
-        </TextTitle>
-        <Group
-          spacing="xs"
-          sx={{
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: 2,
-            display: '-webkit-box',
-            overflow: 'hidden',
-          }}
-        >
-          {detailQuery?.data?.albumArtists.map((artist, index) => (
-            <Fragment key={`artist-${artist.id}`}>
-              {index > 0 && (
                 <Text
-                  $noSelect
+                  $link
-                  sx={{
+                  component={Link}
-                    display: 'inline-block',
+                  fw="600"
-                    padding: '0 0.5rem',
+                  to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
-                  }}
+                    albumArtistId: artist.id,
+                  })}
                 >
-                  •
+                  {artist.name}
                 </Text>
-              )}
+              </Fragment>
-              <Text
+            ))}
-                $link
+          </Group>
-                component={Link}
+        </MetadataWrapper>
-                fw="600"
+      </HeaderContainer>
-                to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+    );
-                  albumArtistId: artist.id,
+  },
-                })}
+);
-              >
-                {artist.name}
-              </Text>
-            </Fragment>
-          ))}
-        </Group>
-      </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 { PageHeader, ScrollArea, TextTitle } from '/@/renderer/components';
-import { AnimatedPage } from '/@/renderer/features/shared';
+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,35 +1,58 @@
 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%"
+      <Flex
-      spacing={0}
+        bg="var(--titlebar-bg)"
-      sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
+        h="60px"
-    >
+        sx={{ position: 'relative' }}
-      <Box
+        w="100%"
-        h="50px"
+      >
-        mr="160px"
+        <BackgroundImageOverlay />
-        sx={{
+        <Flex
-          WebkitAppRegion: 'drag',
+          h="100%"
-          zIndex: -1,
+          mr="160px"
-        }}
+          sx={{
-      />
+            WebkitAppRegion: 'drag',
-      <PlayQueue
+            background: 'var(--titlebar-bg)',
-        ref={queueRef}
+          }}
-        type="sideQueue"
+          w="100%"
-      />
+        />
-      <PlayQueueListControls
+      </Flex>
-        tableRef={queueRef}
+      <Flex
-        type="sideQueue"
+        direction="column"
-      />
+        h="calc(100% - 60px)"
-    </Stack>
+        sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
+        w="100%"
+      >
+        <PlayQueue
+          ref={queueRef}
+          type="sideQueue"
+        />
+        <PlayQueueListControls
+          tableRef={queueRef}
+          type="sideQueue"
+        />
+      </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);
 `;