wrap all page routes in LibraryContainer

src/renderer/features/albums/routes/album-list-route.tsx

@@ -5,6 +5,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 
 const AlbumListRoute = () => {
     const { albumArtistId, genreId } = useParams();
@@ -24,8 +25,10 @@ const AlbumListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <AlbumListHeader />
                     <AlbumListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { generatePath, useParams } from 'react-router';
+import { generatePath, Link, useParams } from 'react-router';
-import { Link } from 'react-router';
 
 import styles from './dummy-album-detail-route.module.css';
 
@@ -10,6 +9,7 @@ import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
@@ -115,9 +115,9 @@ const DummyAlbumDetailRoute = () => {
 
     return (
         <AnimatedPage key={`dummy-album-detail-${albumId}`}>
+            <LibraryContainer>
                 <Stack ref={ref}>
                     <LibraryHeader
-                    background={background}
                         imageUrl={detailQuery?.data?.imageUrl}
                         item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
                         loading={!background || colorId !== albumId}
@@ -168,7 +168,9 @@ const DummyAlbumDetailRoute = () => {
                                 <ActionIcon
                                     icon="favorite"
                                     iconProps={{
-                                    fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
+                                        fill: detailQuery?.data?.userFavorite
+                                            ? 'primary'
+                                            : undefined,
                                     }}
                                     loading={
                                         createFavoriteMutation.isPending ||
@@ -221,6 +223,7 @@ const DummyAlbumDetailRoute = () => {
                         </Center>
                     </section>
                 </div>
+            </LibraryContainer>
         </AnimatedPage>
     );
 };

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

@@ -7,6 +7,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { useCurrentServer } from '/@/renderer/store/auth.store';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
@@ -47,6 +48,7 @@ const AlbumArtistDetailTopSongsListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <AlbumArtistDetailTopSongsListHeader
                         data={topSongsQuery?.data?.items || []}
                         itemCount={itemCount}
@@ -56,6 +58,7 @@ const AlbumArtistDetailTopSongsListRoute = () => {
                         data={topSongsQuery?.data?.items || []}
                         tableRef={tableRef}
                     /> */}
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

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

@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
 import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const AlbumArtistListRoute = () => {
@@ -23,8 +24,10 @@ const AlbumArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <AlbumArtistListHeader />
                     <AlbumArtistListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/artists/routes/artist-list-route.tsx

@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
 import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const ArtistListRoute = () => {
@@ -23,8 +24,10 @@ const ArtistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <ArtistListHeader />
                     <ArtistListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/genres/routes/genre-list-route.tsx

@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
 import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const GenreListRoute = () => {
@@ -23,8 +24,10 @@ const GenreListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <GenreListHeader />
                     <GenreListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -5,6 +5,7 @@ import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/no
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const NowPlayingRoute = () => {
@@ -13,6 +14,7 @@ const NowPlayingRoute = () => {
 
     return (
         <AnimatedPage>
+            <LibraryContainer>
                 <NowPlayingHeader />
                 <PlayQueueListControls
                     handleSearch={setSearch}
@@ -21,6 +23,7 @@ const NowPlayingRoute = () => {
                     type={ItemListKey.QUEUE_SONG}
                 />
                 <PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
+            </LibraryContainer>
         </AnimatedPage>
     );
 };

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -13,6 +13,7 @@ import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/sa
 import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
 import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -186,6 +187,7 @@ const PlaylistDetailSongListRoute = () => {
 
     return (
         <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
+            <LibraryContainer>
                 <PlaylistDetailSongListHeader
                     handlePlay={handlePlay}
                     handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
@@ -205,7 +207,9 @@ const PlaylistDetailSongListRoute = () => {
                                     onClick={handleToggleExpand}
                                     size="xs"
                                 />
-                            <Text>{t('form.queryEditor.title', { postProcess: 'titleCase' })}</Text>
+                                <Text>
+                                    {t('form.queryEditor.title', { postProcess: 'titleCase' })}
+                                </Text>
                             </Group>
                             {isQueryBuilderExpanded && (
                                 <PlaylistQueryBuilder
@@ -224,6 +228,7 @@ const PlaylistDetailSongListRoute = () => {
                     </motion.div>
                 )}
                 {/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
+            </LibraryContainer>
         </AnimatedPage>
     );
 };

src/renderer/features/playlists/routes/playlist-list-route.tsx

@@ -5,6 +5,7 @@ import { ListContext } from '/@/renderer/context/list-context';
 import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
 import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { ItemListKey } from '/@/shared/types/types';
 
 const PlaylistListRoute = () => {
@@ -25,8 +26,10 @@ const PlaylistListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <PlaylistListHeader />
                     <PlaylistListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );

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

@@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router';
 import { SearchContent } from '/@/renderer/features/search/components/search-content';
 import { SearchHeader } from '/@/renderer/features/search/components/search-header';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 
 const SearchRoute = () => {
     const { state: locationState } = useLocation();
@@ -13,8 +14,10 @@ const SearchRoute = () => {
 
     return (
         <AnimatedPage key={`search-${navigationId}`}>
+            <LibraryContainer>
                 <SearchHeader navigationId={navigationId} />
                 <SearchContent key={`page-${itemType}`} />
+            </LibraryContainer>
         </AnimatedPage>
     );
 };

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

@@ -4,6 +4,7 @@ import { SettingsContent } from '/@/renderer/features/settings/components/settin
 import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
 import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { Flex } from '/@/shared/components/flex/flex';
 
 const SettingsRoute = () => {
@@ -12,10 +13,12 @@ const SettingsRoute = () => {
     return (
         <AnimatedPage>
             <SettingSearchContext.Provider value={search}>
+                <LibraryContainer>
                     <Flex direction="column" h="100%" w="100%">
                         <SettingsHeader setSearch={setSearch} />
                         <SettingsContent />
                     </Flex>
+                </LibraryContainer>
             </SettingSearchContext.Provider>
         </AnimatedPage>
     );

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

@@ -1,11 +1,10 @@
 .container {
     position: relative;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     max-width: var(--theme-content-max-width);
+    height: 100%;
+    min-height: 0;
     margin: 0 auto;
 }
-
-.content {
-    position: relative;
-    z-index: 0;
-}

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

@@ -7,9 +7,5 @@ interface LibraryContainerProps {
 }
 
 export const LibraryContainer = ({ children }: LibraryContainerProps) => {
-    return (
+    return <div className={styles.container}>{children}</div>;
-        <div className={styles.container}>
-            <div className={styles.content}>{children}</div>
-        </div>
-    );
 };

src/renderer/features/songs/routes/song-list-route.tsx

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router';
 import { ListContext } from '/@/renderer/context/list-context';
 import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
 import { useCurrentServer } from '/@/renderer/store';
@@ -73,8 +74,10 @@ const TrackListRoute = () => {
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
                     <SongListHeader title={title} />
                     <SongListContent />
+                </LibraryContainer>
             </ListContext.Provider>
         </AnimatedPage>
     );