add LibraryContainer for max-width and background overlay

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -10,7 +10,6 @@ import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistGridCarousel } from '/@/renderer/features/artists/components/album-artist-grid-carousel';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
-import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
@@ -35,11 +34,7 @@ import {
 } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
-interface AlbumArtistDetailContentProps {
-    background?: string;
-}
-
-export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailContentProps) => {
+export const AlbumArtistDetailContent = () => {
     const { t } = useTranslation();
     const { artistItems, externalLinks, lastFM, musicBrainz } = useGeneralSettings();
     const { albumArtistId, artistId } = useParams() as {
@@ -230,7 +225,6 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
 
     return (
         <div className={styles.contentContainer} ref={ref}>
-            <LibraryBackgroundOverlay backgroundColor={background} />
             <div className={styles.detailContainer}>
                 <Group gap="md">
                     <PlayButton

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

@@ -15,16 +15,8 @@ import { Stack } from '/@/shared/components/stack/stack';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
 
-interface AlbumArtistDetailHeaderProps {
-    background: {
-        background?: string;
-        blur: number;
-        loading: boolean;
-    };
-}
-
 export const AlbumArtistDetailHeader = forwardRef(
-    ({ background }: AlbumArtistDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
+    (_props, ref: Ref<HTMLDivElement>) => {
         const { albumArtistId, artistId } = useParams() as {
             albumArtistId?: string;
             artistId?: string;
@@ -95,7 +87,6 @@ export const AlbumArtistDetailHeader = forwardRef(
                 item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
                 ref={ref}
                 title={detailQuery?.data?.name || ''}
-                {...background}
             >
                 <Stack>
                     <Group>

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -7,10 +7,14 @@ import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
 import { AlbumArtistDetailHeader } from '/@/renderer/features/artists/components/album-artist-detail-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import {
+    LibraryBackgroundImage,
+    LibraryBackgroundOverlay,
+} from '/@/renderer/features/shared/components/library-background-overlay';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
 import { useFastAverageColor } from '/@/renderer/hooks';
-import { useCurrentServer } from '/@/renderer/store';
-import { useGeneralSettings } from '/@/renderer/store/settings.store';
+import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumArtistDetailRoute = () => {
@@ -37,20 +41,20 @@ const AlbumArtistDetailRoute = () => {
         staleTime: 0,
     });
 
-    const { background: backgroundColor, colorId } = useFastAverageColor({
+    const { background: backgroundColor } = useFastAverageColor({
         id: artistId,
         src: detailQuery.data?.imageUrl,
         srcLoaded: !detailQuery.isLoading,
     });
 
-    const backgroundUrl = detailQuery.data?.imageUrl || '';
-    const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor;
+    const background = backgroundColor;
+    const showBlurredImage = Boolean(detailQuery.data?.imageUrl) && artistBackground;
 
     return (
         <AnimatedPage key={`album-artist-detail-${routeId}`}>
             <NativeScrollArea
                 pageHeaderProps={{
-                    backgroundColor: background,
+                    backgroundColor: backgroundColor || undefined,
                     children: (
                         <LibraryHeaderBar>
                             <LibraryHeaderBar.PlayButton
@@ -67,15 +71,19 @@ const AlbumArtistDetailRoute = () => {
                 }}
                 ref={scrollAreaRef}
             >
-                <AlbumArtistDetailHeader
-                    background={{
-                        background,
-                        blur: (artistBackground && artistBackgroundBlur) || 0,
-                        loading: !backgroundColor || colorId !== artistId,
-                    }}
-                    ref={headerRef}
-                />
-                <AlbumArtistDetailContent background={background} />
+                {showBlurredImage && detailQuery.data?.imageUrl ? (
+                    <LibraryBackgroundImage
+                        blur={artistBackgroundBlur}
+                        headerRef={headerRef}
+                        imageUrl={detailQuery.data.imageUrl}
+                    />
+                ) : (
+                    <LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
+                )}
+                <LibraryContainer>
+                    <AlbumArtistDetailHeader ref={headerRef as React.Ref<HTMLDivElement>} />
+                    <AlbumArtistDetailContent />
+                </LibraryContainer>
             </NativeScrollArea>
         </AnimatedPage>
     );