wrap all page routes in LibraryContainer

This commit is contained in:
jeffvli
2025-11-22 14:38:48 -08:00
parent a5fa5727d3
commit c5c3c596a0
14 changed files with 218 additions and 185 deletions
@@ -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,44 +187,48 @@ const PlaylistDetailSongListRoute = () => {
return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<PlaylistDetailSongListHeader
handlePlay={handlePlay}
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
itemCount={itemCount}
tableRef={tableRef}
/>
<LibraryContainer>
<PlaylistDetailSongListHeader
handlePlay={handlePlay}
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
itemCount={itemCount}
tableRef={tableRef}
/>
{(isSmartPlaylist || showQueryBuilder) && (
<motion.div>
<Box h="100%" mah="35vh" p="md" w="100%">
<Group pb="md">
<ActionIcon
icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
iconProps={{
size: 'md',
}}
onClick={handleToggleExpand}
size="xs"
/>
<Text>{t('form.queryEditor.title', { postProcess: 'titleCase' })}</Text>
</Group>
{isQueryBuilderExpanded && (
<PlaylistQueryBuilder
isSaving={createPlaylistMutation?.isPending}
key={JSON.stringify(detailQuery?.data?.rules)}
limit={detailQuery?.data?.rules?.limit}
onSave={handleSave}
onSaveAs={handleSaveAs}
playlistId={playlistId}
query={detailQuery?.data?.rules}
sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
sortOrder={detailQuery?.data?.rules?.order || 'asc'}
/>
)}
</Box>
</motion.div>
)}
{/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
{(isSmartPlaylist || showQueryBuilder) && (
<motion.div>
<Box h="100%" mah="35vh" p="md" w="100%">
<Group pb="md">
<ActionIcon
icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
iconProps={{
size: 'md',
}}
onClick={handleToggleExpand}
size="xs"
/>
<Text>
{t('form.queryEditor.title', { postProcess: 'titleCase' })}
</Text>
</Group>
{isQueryBuilderExpanded && (
<PlaylistQueryBuilder
isSaving={createPlaylistMutation?.isPending}
key={JSON.stringify(detailQuery?.data?.rules)}
limit={detailQuery?.data?.rules?.limit}
onSave={handleSave}
onSaveAs={handleSaveAs}
playlistId={playlistId}
query={detailQuery?.data?.rules}
sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
sortOrder={detailQuery?.data?.rules?.order || 'asc'}
/>
)}
</Box>
</motion.div>
)}
{/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
</LibraryContainer>
</AnimatedPage>
);
};
@@ -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}>
<PlaylistListHeader />
<PlaylistListContent />
<LibraryContainer>
<PlaylistListHeader />
<PlaylistListContent />
</LibraryContainer>
</ListContext.Provider>
</AnimatedPage>
);