vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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 { 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}>
<AlbumListHeader />
<AlbumListContent />
<LibraryContainer>
<AlbumListHeader />
<AlbumListContent />
</LibraryContainer>
</ListContext.Provider>
</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 { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, useParams } from 'react-router';
import { Link } from 'react-router';
import { generatePath, Link, useParams } 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,112 +115,115 @@ const DummyAlbumDetailRoute = () => {
return (
<AnimatedPage key={`dummy-album-detail-${albumId}`}>
<Stack ref={ref}>
<LibraryHeader
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
loading={!background || colorId !== albumId}
title={detailQuery?.data?.name || ''}
>
<Stack gap="sm">
<Group gap="sm">
{metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text isNoSelect>•</Text>}
<Text isMuted={item.secondary}>{item.value}</Text>
</Fragment>
))}
</Group>
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
<LibraryContainer>
<Stack ref={ref}>
<LibraryHeader
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
loading={!background || colorId !== albumId}
title={detailQuery?.data?.name || ''}
>
<Stack gap="sm">
<Group gap="sm">
{metadataItems.map((item, index) => (
<Fragment key={`item-${item.id}-${index}`}>
{index > 0 && <Text isNoSelect>•</Text>}
<Text isMuted={item.secondary}>{item.value}</Text>
</Fragment>
))}
</Group>
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
size="md"
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
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"
>
{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"
/>
<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>
))}
/>
<ActionIcon
icon="ellipsisHorizontal"
onClick={(e) => {
if (!detailQuery?.data) return;
}}
variant="subtle"
/>
</Group>
</Group>
</section>
)}
{comment && (
{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>
</section>
)}
{comment && (
<section>
<Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
</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>
<Center>
<Group mr={5}>
<Icon fill="error" icon="error" size={30} />
</Group>
<h2>{t('error.badAlbum', { postProcess: 'sentenceCase' })}</h2>
</Center>
</section>
</div>
</div>
</LibraryContainer>
</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 { 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,15 +48,17 @@ const AlbumArtistDetailTopSongsListRoute = () => {
return (
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<AlbumArtistDetailTopSongsListHeader
data={topSongsQuery?.data?.items || []}
itemCount={itemCount}
title={detailQuery?.data?.name || 'Unknown'}
/>
{/* <AlbumArtistDetailTopSongsListContent
data={topSongsQuery?.data?.items || []}
tableRef={tableRef}
/> */}
<LibraryContainer>
<AlbumArtistDetailTopSongsListHeader
data={topSongsQuery?.data?.items || []}
itemCount={itemCount}
title={detailQuery?.data?.name || 'Unknown'}
/>
{/* <AlbumArtistDetailTopSongsListContent
data={topSongsQuery?.data?.items || []}
tableRef={tableRef}
/> */}
</LibraryContainer>
</ListContext.Provider>
</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 { 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}>
<AlbumArtistListHeader />
<AlbumArtistListContent />
<LibraryContainer>
<AlbumArtistListHeader />
<AlbumArtistListContent />
</LibraryContainer>
</ListContext.Provider>
</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 { 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}>
<ArtistListHeader />
<ArtistListContent />
<LibraryContainer>
<ArtistListHeader />
<ArtistListContent />
</LibraryContainer>
</ListContext.Provider>
</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 { 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}>
<GenreListHeader />
<GenreListContent />
<LibraryContainer>
<GenreListHeader />
<GenreListContent />
</LibraryContainer>
</ListContext.Provider>
</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 { 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,14 +14,16 @@ const NowPlayingRoute = () => {
return (
<AnimatedPage>
<NowPlayingHeader />
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
tableRef={queueRef}
type={ItemListKey.QUEUE_SONG}
/>
<PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
<LibraryContainer>
<NowPlayingHeader />
<PlayQueueListControls
handleSearch={setSearch}
searchTerm={search}
tableRef={queueRef}
type={ItemListKey.QUEUE_SONG}
/>
<PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
</LibraryContainer>
</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 { 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>
);
};
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 { 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>
);
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 { 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}`}>
<SearchHeader navigationId={navigationId} />
<SearchContent key={`page-${itemType}`} />
<LibraryContainer>
<SearchHeader navigationId={navigationId} />
<SearchContent key={`page-${itemType}`} />
</LibraryContainer>
</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 { 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}>
<Flex direction="column" h="100%" w="100%">
<SettingsHeader setSearch={setSearch} />
<SettingsContent />
</Flex>
<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
+4 -5
View File
@@ -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
+1 -5
View File
@@ -7,9 +7,5 @@ interface LibraryContainerProps {
}
export const LibraryContainer = ({ children }: LibraryContainerProps) => {
return (
<div className={styles.container}>
<div className={styles.content}>{children}</div>
</div>
);
return <div className={styles.container}>{children}</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 { 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}>
<SongListHeader title={title} />
<SongListContent />
<LibraryContainer>
<SongListHeader title={title} />
<SongListContent />
</LibraryContainer>
</ListContext.Provider>
</AnimatedPage>
);