vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

wrap all page routes in LibraryContainer

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/routes/album-list-route.tsx
+5 -2
View File
@@ -5,6 +5,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content'; import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header'; import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
const AlbumListRoute = () => { const AlbumListRoute = () => {
const { albumArtistId, genreId } = useParams(); const { albumArtistId, genreId } = useParams();
@@ -24,8 +25,10 @@ const AlbumListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<AlbumListHeader /> <LibraryContainer>
<AlbumListContent /> <AlbumListHeader />
<AlbumListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+106 -103
View File
@@ -1,8 +1,7 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Fragment } from 'react'; import { Fragment } from 'react';
import { useTranslation } from 'react-i18next'; 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'; 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 { queryKeys } from '/@/renderer/api/query-keys';
import { usePlayer } from '/@/renderer/features/player/context/player-context'; import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; 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 { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
import { PlayButton } from '/@/renderer/features/shared/components/play-button'; import { PlayButton } from '/@/renderer/features/shared/components/play-button';
import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation'; import { useCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
@@ -115,112 +115,115 @@ const DummyAlbumDetailRoute = () => {
return ( return (
<AnimatedPage key={`dummy-album-detail-${albumId}`}> <AnimatedPage key={`dummy-album-detail-${albumId}`}>
<Stack ref={ref}> <LibraryContainer>
<LibraryHeader <Stack ref={ref}>
background={background} <LibraryHeader
imageUrl={detailQuery?.data?.imageUrl} imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }} item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
loading={!background || colorId !== albumId} loading={!background || colorId !== albumId}
title={detailQuery?.data?.name || ''} title={detailQuery?.data?.name || ''}
> >
<Stack gap="sm"> <Stack gap="sm">
<Group gap="sm"> <Group gap="sm">
{metadataItems.map((item, index) => ( {metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}> <Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text isNoSelect>•</Text>} {index > 0 && <Text isNoSelect>•</Text>}
<Text isMuted={item.secondary}>{item.value}</Text> <Text isMuted={item.secondary}>{item.value}</Text>
</Fragment> </Fragment>
))} ))}
</Group> </Group>
<Group <Group
gap="md" gap="md"
mah="4rem" mah="4rem"
style={{ style={{
overflow: 'hidden', overflow: 'hidden',
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2, WebkitLineClamp: 2,
}} }}
> >
{detailQuery?.data?.albumArtists.map((artist) => ( {detailQuery?.data?.albumArtists.map((artist) => (
<Text <Text
component={Link} component={Link}
fw={600} fw={600}
isLink isLink
key={`artist-${artist.id}`} key={`artist-${artist.id}`}
size="md" size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id, albumArtistId: artist.id,
})} })}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
</Stack>
</LibraryHeader>
</Stack>
<div className={styles.detailContainer}>
<section>
<Group gap="sm" justify="space-between">
<Group>
<PlayButton onClick={() => handlePlay()} />
<ActionIcon
icon="favorite"
iconProps={{
fill: detailQuery?.data?.userFavorite
? 'primary'
: undefined,
}}
loading={
createFavoriteMutation.isPending ||
deleteFavoriteMutation.isPending
}
onClick={handleFavorite}
variant="subtle" variant="subtle"
> />
{artist.name} <ActionIcon
</Text> icon="ellipsisHorizontal"
))} onClick={(e) => {
</Group> if (!detailQuery?.data) return;
</Stack> }}
</LibraryHeader> variant="subtle"
</Stack> />
<div className={styles.detailContainer}> </Group>
<section>
<Group gap="sm" justify="space-between">
<Group>
<PlayButton onClick={() => handlePlay()} />
<ActionIcon
icon="favorite"
iconProps={{
fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
}}
loading={
createFavoriteMutation.isPending ||
deleteFavoriteMutation.isPending
}
onClick={handleFavorite}
variant="subtle"
/>
<ActionIcon
icon="ellipsisHorizontal"
onClick={(e) => {
if (!detailQuery?.data) return;
}}
variant="subtle"
/>
</Group>
</Group>
</section>
{showGenres && (
<section>
<Group gap="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button
component={Link}
key={`genre-${genre.id}`}
radius={0}
size="compact-md"
to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
genreId: genre.id,
})}
variant="outline"
>
{genre.name}
</Button>
))}
</Group> </Group>
</section> </section>
)} {showGenres && (
{comment && ( <section>
<Group gap="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button
component={Link}
key={`genre-${genre.id}`}
radius={0}
size="compact-md"
to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
genreId: genre.id,
})}
variant="outline"
>
{genre.name}
</Button>
))}
</Group>
</section>
)}
{comment && (
<section>
<Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
</section>
)}
<section> <section>
<Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler> <Center>
<Group mr={5}>
<Icon fill="error" icon="error" size={30} />
</Group>
<h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
</Center>
</section> </section>
)} </div>
<section> </LibraryContainer>
<Center>
<Group mr={5}>
<Icon fill="error" icon="error" size={30} />
</Group>
<h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
</Center>
</section>
</div>
</AnimatedPage> </AnimatedPage>
); );
}; };
src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+12 -9
View File
@@ -7,6 +7,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api'; import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header'; import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; 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 { useCurrentServer } from '/@/renderer/store/auth.store';
import { LibraryItem } from '/@/shared/types/domain-types'; import { LibraryItem } from '/@/shared/types/domain-types';
@@ -47,15 +48,17 @@ const AlbumArtistDetailTopSongsListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<AlbumArtistDetailTopSongsListHeader <LibraryContainer>
data={topSongsQuery?.data?.items || []} <AlbumArtistDetailTopSongsListHeader
itemCount={itemCount} data={topSongsQuery?.data?.items || []}
title={detailQuery?.data?.name || 'Unknown'} itemCount={itemCount}
/> title={detailQuery?.data?.name || 'Unknown'}
{/* <AlbumArtistDetailTopSongsListContent />
data={topSongsQuery?.data?.items || []} {/* <AlbumArtistDetailTopSongsListContent
tableRef={tableRef} data={topSongsQuery?.data?.items || []}
/> */} tableRef={tableRef}
/> */}
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/artists/routes/album-artist-list-route.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content'; import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header'; import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
const AlbumArtistListRoute = () => { const AlbumArtistListRoute = () => {
@@ -23,8 +24,10 @@ const AlbumArtistListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<AlbumArtistListHeader /> <LibraryContainer>
<AlbumArtistListContent /> <AlbumArtistListHeader />
<AlbumArtistListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/artists/routes/artist-list-route.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content'; import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header'; import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
const ArtistListRoute = () => { const ArtistListRoute = () => {
@@ -23,8 +24,10 @@ const ArtistListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<ArtistListHeader /> <LibraryContainer>
<ArtistListContent /> <ArtistListHeader />
<ArtistListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/genres/routes/genre-list-route.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content'; import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header'; import { GenreListHeader } from '/@/renderer/features/genres/components/genre-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
const GenreListRoute = () => { const GenreListRoute = () => {
@@ -23,8 +24,10 @@ const GenreListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<GenreListHeader /> <LibraryContainer>
<GenreListContent /> <GenreListHeader />
<GenreListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/now-playing/routes/now-playing-route.tsx
+11 -8
View File
@@ -5,6 +5,7 @@ import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/no
import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue'; import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls'; import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
const NowPlayingRoute = () => { const NowPlayingRoute = () => {
@@ -13,14 +14,16 @@ const NowPlayingRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<NowPlayingHeader /> <LibraryContainer>
<PlayQueueListControls <NowPlayingHeader />
handleSearch={setSearch} <PlayQueueListControls
searchTerm={search} handleSearch={setSearch}
tableRef={queueRef} searchTerm={search}
type={ItemListKey.QUEUE_SONG} tableRef={queueRef}
/> type={ItemListKey.QUEUE_SONG}
<PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} /> />
<PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
</LibraryContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+42 -37
View File
@@ -13,6 +13,7 @@ import { SaveAsPlaylistForm } from '/@/renderer/features/playlists/components/sa
import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation'; import { useCreatePlaylist } from '/@/renderer/features/playlists/mutations/create-playlist-mutation';
import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation'; import { useDeletePlaylist } from '/@/renderer/features/playlists/mutations/delete-playlist-mutation';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; 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 { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store'; import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
@@ -186,44 +187,48 @@ const PlaylistDetailSongListRoute = () => {
return ( return (
<AnimatedPage key={`playlist-detail-songList-${playlistId}`}> <AnimatedPage key={`playlist-detail-songList-${playlistId}`}>
<PlaylistDetailSongListHeader <LibraryContainer>
handlePlay={handlePlay} <PlaylistDetailSongListHeader
handleToggleShowQueryBuilder={handleToggleShowQueryBuilder} handlePlay={handlePlay}
itemCount={itemCount} handleToggleShowQueryBuilder={handleToggleShowQueryBuilder}
tableRef={tableRef} itemCount={itemCount}
/> tableRef={tableRef}
/>
{(isSmartPlaylist || showQueryBuilder) && ( {(isSmartPlaylist || showQueryBuilder) && (
<motion.div> <motion.div>
<Box h="100%" mah="35vh" p="md" w="100%"> <Box h="100%" mah="35vh" p="md" w="100%">
<Group pb="md"> <Group pb="md">
<ActionIcon <ActionIcon
icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'} icon={isQueryBuilderExpanded ? 'arrowUpS' : 'arrowDownS'}
iconProps={{ iconProps={{
size: 'md', size: 'md',
}} }}
onClick={handleToggleExpand} onClick={handleToggleExpand}
size="xs" size="xs"
/> />
<Text>{t('form.queryEditor.title', { postProcess: 'titleCase' })}</Text> <Text>
</Group> {t('form.queryEditor.title', { postProcess: 'titleCase' })}
{isQueryBuilderExpanded && ( </Text>
<PlaylistQueryBuilder </Group>
isSaving={createPlaylistMutation?.isPending} {isQueryBuilderExpanded && (
key={JSON.stringify(detailQuery?.data?.rules)} <PlaylistQueryBuilder
limit={detailQuery?.data?.rules?.limit} isSaving={createPlaylistMutation?.isPending}
onSave={handleSave} key={JSON.stringify(detailQuery?.data?.rules)}
onSaveAs={handleSaveAs} limit={detailQuery?.data?.rules?.limit}
playlistId={playlistId} onSave={handleSave}
query={detailQuery?.data?.rules} onSaveAs={handleSaveAs}
sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM} playlistId={playlistId}
sortOrder={detailQuery?.data?.rules?.order || 'asc'} query={detailQuery?.data?.rules}
/> sortBy={detailQuery?.data?.rules?.sort || SongListSort.ALBUM}
)} sortOrder={detailQuery?.data?.rules?.order || 'asc'}
</Box> />
</motion.div> )}
)} </Box>
{/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */} </motion.div>
)}
{/* <PlaylistDetailSongListContent songs={filterSortedSongs} tableRef={tableRef} /> */}
</LibraryContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };
src/renderer/features/playlists/routes/playlist-list-route.tsx
+5 -2
View File
@@ -5,6 +5,7 @@ import { ListContext } from '/@/renderer/context/list-context';
import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content'; import { PlaylistListContent } from '/@/renderer/features/playlists/components/playlist-list-content';
import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header'; import { PlaylistListHeader } from '/@/renderer/features/playlists/components/playlist-list-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
const PlaylistListRoute = () => { const PlaylistListRoute = () => {
@@ -25,8 +26,10 @@ const PlaylistListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<PlaylistListHeader /> <LibraryContainer>
<PlaylistListContent /> <PlaylistListHeader />
<PlaylistListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/search/routes/search-route.tsx
+5 -2
View File
@@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router';
import { SearchContent } from '/@/renderer/features/search/components/search-content'; import { SearchContent } from '/@/renderer/features/search/components/search-content';
import { SearchHeader } from '/@/renderer/features/search/components/search-header'; import { SearchHeader } from '/@/renderer/features/search/components/search-header';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
const SearchRoute = () => { const SearchRoute = () => {
const { state: locationState } = useLocation(); const { state: locationState } = useLocation();
@@ -13,8 +14,10 @@ const SearchRoute = () => {
return ( return (
<AnimatedPage key={`search-${navigationId}`}> <AnimatedPage key={`search-${navigationId}`}>
<SearchHeader navigationId={navigationId} /> <LibraryContainer>
<SearchContent key={`page-${itemType}`} /> <SearchHeader navigationId={navigationId} />
<SearchContent key={`page-${itemType}`} />
</LibraryContainer>
</AnimatedPage> </AnimatedPage>
); );
}; };
src/renderer/features/settings/routes/settings-route.tsx
+7 -4
View File
@@ -4,6 +4,7 @@ import { SettingsContent } from '/@/renderer/features/settings/components/settin
import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header'; import { SettingsHeader } from '/@/renderer/features/settings/components/settings-header';
import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context'; import { SettingSearchContext } from '/@/renderer/features/settings/context/search-context';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; 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'; import { Flex } from '/@/shared/components/flex/flex';
const SettingsRoute = () => { const SettingsRoute = () => {
@@ -12,10 +13,12 @@ const SettingsRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<SettingSearchContext.Provider value={search}> <SettingSearchContext.Provider value={search}>
<Flex direction="column" h="100%" w="100%"> <LibraryContainer>
<SettingsHeader setSearch={setSearch} /> <Flex direction="column" h="100%" w="100%">
<SettingsContent /> <SettingsHeader setSearch={setSearch} />
</Flex> <SettingsContent />
</Flex>
</LibraryContainer>
</SettingSearchContext.Provider> </SettingSearchContext.Provider>
</AnimatedPage> </AnimatedPage>
); );
src/renderer/features/shared/components/library-container.module.css
+4 -5
View File
@@ -1,11 +1,10 @@
.container { .container {
position: relative; position: relative;
display: flex;
flex-direction: column;
width: 100%; width: 100%;
max-width: var(--theme-content-max-width); max-width: var(--theme-content-max-width);
height: 100%;
min-height: 0;
margin: 0 auto; margin: 0 auto;
} }
.content {
position: relative;
z-index: 0;
}
src/renderer/features/shared/components/library-container.tsx
+1 -5
View File
@@ -7,9 +7,5 @@ interface LibraryContainerProps {
} }
export const LibraryContainer = ({ children }: 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 -2
View File
@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from 'react-router';
import { ListContext } from '/@/renderer/context/list-context'; import { ListContext } from '/@/renderer/context/list-context';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api'; import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page'; 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 { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header'; import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
import { useCurrentServer } from '/@/renderer/store'; import { useCurrentServer } from '/@/renderer/store';
@@ -73,8 +74,10 @@ const TrackListRoute = () => {
return ( return (
<AnimatedPage> <AnimatedPage>
<ListContext.Provider value={providerValue}> <ListContext.Provider value={providerValue}>
<SongListHeader title={title} /> <LibraryContainer>
<SongListContent /> <SongListHeader title={title} />
<SongListContent />
</LibraryContainer>
</ListContext.Provider> </ListContext.Provider>
</AnimatedPage> </AnimatedPage>
); );