Add headers using custom component

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

@@ -1,22 +1,15 @@
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { Group, Slider } from '@mantine/core';
-import { motion } from 'framer-motion';
 import throttle from 'lodash/throttle';
 import { RiArrowDownSLine } from 'react-icons/ri';
 import { JFAlbumListSort } from '/@/api/jellyfin.types';
 import { NDAlbumListSort } from '/@/api/navidrome.types';
 import type { AlbumListSort } from '/@/api/types';
 import { SortOrder } from '/@/api/types';
-import { Button, DropdownMenu } from '/@/components';
-import {
-  useCurrentServer,
-  useAppStoreActions,
-  useAlbumRouteStore,
-  useSidebarRightExpanded,
-} from '/@/store';
+import { Button, DropdownMenu, PageHeader } from '/@/components';
+import { useCurrentServer, useAppStoreActions, useAlbumRouteStore } from '/@/store';
 import { CardDisplayType } from '/@/types';
-import styled from 'styled-components';
 
 const FILTERS = {
   jellyfin: [
@@ -48,29 +41,18 @@ const ORDER = [
   { name: 'Descending', value: SortOrder.DESC },
 ];
 
-const AlbumListHeaderContainer = styled(motion.div)<{ $padRight?: boolean }>`
-  padding: 0.8rem 1rem;
-
-  padding: ${(props) => (props.$padRight ? '0.8rem 1rem' : '0.8rem 170px 0.8rem 1rem')};
-
-  button {
-    -webkit-app-region: no-drag;
-  }
-`;
-
 export const AlbumListHeader = () => {
   const server = useCurrentServer();
   const { setPage } = useAppStoreActions();
   const page = useAlbumRouteStore();
   const filters = page.list.filter;
+
   const sortByLabel = server?.type
     ? (FILTERS[server.type as keyof typeof FILTERS] as { name: string; value: string }[]).find(
         (f) => f.value === filters.sortBy,
       )?.name
     : 'Unknown';
 
-  const isRightSidebarExpanded = useSidebarRightExpanded();
-
   const sortOrderLabel = ORDER.find((s) => s.value === filters.sortOrder)?.name;
 
   const setSize = throttle(
@@ -150,7 +132,7 @@ export const AlbumListHeader = () => {
   );
 
   return (
-    <AlbumListHeaderContainer $padRight={isRightSidebarExpanded}>
+    <PageHeader>
       <Group>
         <DropdownMenu
           position="bottom-end"
@@ -271,6 +253,6 @@ export const AlbumListHeader = () => {
         </DropdownMenu.Dropdown> */}
         </DropdownMenu>
       </Group>
-    </AlbumListHeaderContainer>
+    </PageHeader>
   );
 };

packages/renderer/src/features/now-playing/components/now-playing-header.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Group } from '@mantine/core';
+import { FastAverageColor } from 'fast-average-color';
+import { PageHeader, Text } from '/@/components';
+import { useCurrentSong } from '/@/store';
+import { getHeaderColor } from '/@/utils';
+import { useTheme } from '/@/hooks';
+
+export const NowPlayingHeader = () => {
+  const [headerColor, setHeaderColor] = useState({ isDark: false, value: 'transparent' });
+  const currentSong = useCurrentSong();
+  const theme = useTheme();
+
+  useEffect(() => {
+    const fac = new FastAverageColor();
+    const url = currentSong?.imageUrl;
+
+    if (url) {
+      fac
+        .getColorAsync(currentSong?.imageUrl, {
+          algorithm: 'simple',
+          ignoredColor: [
+            [255, 255, 255, 255], // White
+            [0, 0, 0, 255], // Black
+          ],
+          mode: 'precision',
+        })
+        .then((color) => {
+          const isDark = color.isDark;
+          setHeaderColor({ isDark, value: getHeaderColor(color.rgb, theme === 'dark' ? 0.3 : 1) });
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+
+    return () => {
+      fac.destroy();
+    };
+  }, [currentSong?.imageUrl, theme]);
+
+  return (
+    <PageHeader backgroundColor={headerColor.value}>
+      <Group>
+        <Text size="xl">Queue</Text>
+      </Group>
+    </PageHeader>
+  );
+};