add LibraryContainer for max-width and background overlay

src/renderer/features/shared/components/library-background-overlay.module.css

@@ -1,11 +1,30 @@
-.root {
+.overlay {
     position: absolute;
     z-index: -1;
     width: 100%;
-    height: 20vh;
     min-height: 200px;
     pointer-events: none;
     user-select: none;
     background-image: var(--theme-overlay-subheader);
-    opacity: 0.3;
+    opacity: 0.7;
+}
+
+.background-image {
+    position: absolute;
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    background-position: center !important;
+    background-size: cover !important;
+    opacity: 0.9;
+}
+
+.background-image-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    background: var(--theme-overlay-subheader);
+    opacity: 0.5;
 }

src/renderer/features/shared/components/library-background-overlay.tsx

@@ -1,9 +1,78 @@
+import { useEffect, useState } from 'react';
+
 import styles from './library-background-overlay.module.css';
 
 interface LibraryBackgroundOverlayProps {
     backgroundColor?: string;
+    headerRef: React.RefObject<HTMLDivElement | null>;
 }
 
-export const LibraryBackgroundOverlay = ({ backgroundColor }: LibraryBackgroundOverlayProps) => {
-    return <div className={styles.root} style={{ backgroundColor }} />;
+export const LibraryBackgroundOverlay = ({
+    backgroundColor,
+    headerRef,
+}: LibraryBackgroundOverlayProps) => {
+    const height = useHeaderHeight(headerRef);
+    return (
+        <div
+            className={styles.overlay}
+            style={{
+                backgroundColor,
+                height: height ? `${height + 64}px` : undefined,
+            }}
+        />
+    );
+};
+
+interface LibraryBackgroundProps {
+    blur?: number;
+    headerRef: React.RefObject<HTMLDivElement | null>;
+    imageUrl?: string;
+}
+
+export const LibraryBackgroundImage = ({ blur, headerRef, imageUrl }: LibraryBackgroundProps) => {
+    const url = `url(${imageUrl})`;
+    const height = useHeaderHeight(headerRef);
+    return (
+        <>
+            <div
+                className={styles.backgroundImage}
+                style={{
+                    background: url,
+                    filter: `blur(${blur ?? 0}rem)`,
+                    height: height ? `${height - 64}px` : undefined,
+                }}
+            />
+            <div
+                className={styles.backgroundImageOverlay}
+                style={{
+                    height: height ? `${height + 64}px` : undefined,
+                }}
+            />
+        </>
+    );
+};
+
+const useHeaderHeight = (headerRef: React.RefObject<HTMLDivElement | null>) => {
+    const [headerHeight, setHeaderHeight] = useState<number>(0);
+
+    useEffect(() => {
+        if (!headerRef?.current) return;
+
+        const updateHeight = () => {
+            if (headerRef?.current) {
+                setHeaderHeight(headerRef.current.offsetHeight);
+            }
+        };
+
+        updateHeight();
+
+        const resizeObserver = new ResizeObserver(updateHeight);
+        resizeObserver.observe(headerRef.current);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [headerRef]);
+
+    return headerHeight;
 };

src/renderer/features/shared/components/library-container.module.css

@@ -0,0 +1,11 @@
+.container {
+    position: relative;
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+.content {
+    position: relative;
+    z-index: 0;
+}

src/renderer/features/shared/components/library-container.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import styles from './library-container.module.css';
+
+interface LibraryContainerProps {
+    children: ReactNode;
+}
+
+export const LibraryContainer = ({ children }: LibraryContainerProps) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.content}>{children}</div>
+        </div>
+    );
+};

src/renderer/features/shared/components/library-header.module.css

@@ -96,31 +96,6 @@
     border-radius: 5px;
 }
 
-.background {
-    position: absolute;
-    top: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    background-position: center !important;
-    background-size: cover !important;
-    opacity: 0.9;
-}
-
-.background-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--theme-overlay-header);
-}
-
-.opaque-overlay {
-    opacity: 0.5;
-}
-
 .title {
     display: flex;
     align-items: center !important;

src/renderer/features/shared/components/library-header.tsx

@@ -1,6 +1,5 @@
 import { closeAllModals, openModal } from '@mantine/modals';
 import { AutoTextSize } from 'auto-text-size';
-import clsx from 'clsx';
 import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
@@ -11,7 +10,6 @@ import {
     WidePlayButton,
     WideShuffleButton,
 } from '/@/renderer/features/shared/components/play-button';
-import { useGeneralSettings } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Center } from '/@/shared/components/center/center';
 import { Group } from '/@/shared/components/group/group';
@@ -21,8 +19,6 @@ import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface LibraryHeaderProps {
-    background?: string;
-    blur?: number;
     children?: ReactNode;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
@@ -32,13 +28,9 @@ interface LibraryHeaderProps {
 }
 
 export const LibraryHeader = forwardRef(
-    (
-        { background, blur, children, imageUrl, item, title }: LibraryHeaderProps,
-        ref: Ref<HTMLDivElement>,
-    ) => {
+    ({ children, imageUrl, item, title }: LibraryHeaderProps, ref: Ref<HTMLDivElement>) => {
         const { t } = useTranslation();
         const [isImageError, setIsImageError] = useState<boolean | null>(false);
-        const { albumBackground } = useGeneralSettings();
 
         const onImageError = () => {
             setIsImageError(true);
@@ -92,15 +84,6 @@ export const LibraryHeader = forwardRef(
 
         return (
             <div className={styles.libraryHeader} ref={ref}>
-                <div
-                    className={styles.background}
-                    style={{ background, filter: `blur(${blur ?? 0}rem)` }}
-                />
-                <div
-                    className={clsx(styles.backgroundOverlay, {
-                        [styles.opaqueOverlay]: albumBackground,
-                    })}
-                />
                 <div
                     className={styles.imageSection}
                     onClick={() => openImage()}