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

add sort to artist favorite songs page (#1691)

Browse Source
This commit is contained in:
jeffvli
2026-03-11 01:48:39 -07:00
parent 16ac536f93
commit 8699b1ffea
2 changed files with 79 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header-filters.tsx
+46
View File
@@ -0,0 +1,46 @@
import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
import {
CLIENT_SIDE_SONG_FILTERS,
ListSortByDropdownControlled,
} from '/@/renderer/features/shared/components/list-sort-by-dropdown';
import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
import { useAppStore } from '/@/renderer/store/app.store';
import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group';
import { LibraryItem, SongListSort, SortOrder } from '/@/shared/types/domain-types';
export const AlbumArtistDetailFavoriteSongsListHeaderFilters = () => {
const albumArtistDetailFavoriteSongsSort = useAppStore(
(state) => state.albumArtistDetailFavoriteSongsSort,
);
const setAlbumArtistDetailFavoriteSongsSort = useAppStore(
(state) => state.actions.setAlbumArtistDetailFavoriteSongsSort,
);
const sortBy = albumArtistDetailFavoriteSongsSort.sortBy;
const sortOrder = albumArtistDetailFavoriteSongsSort.sortOrder;
return (
<Flex justify="space-between">
<Group gap="sm" w="100%">
<ListSortByDropdownControlled
filters={CLIENT_SIDE_SONG_FILTERS}
itemType={LibraryItem.SONG}
setSortBy={(value) =>
setAlbumArtistDetailFavoriteSongsSort(value as SongListSort, sortOrder)
}
sortBy={sortBy}
/>
<Divider orientation="vertical" />
<ListSortOrderToggleButtonControlled
setSortOrder={(value) =>
setAlbumArtistDetailFavoriteSongsSort(sortBy, value as SortOrder)
}
sortOrder={sortOrder}
/>
<Divider orientation="vertical" />
<ListSearchInput />
</Group>
</Flex>
);
};
src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx
+33 -4
View File
@@ -10,12 +10,19 @@ import { ItemControls } from '/@/renderer/components/item-list/types';
import { ListContext } from '/@/renderer/context/list-context';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { AlbumArtistDetailFavoriteSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header';
import { AlbumArtistDetailFavoriteSongsListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header-filters';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { applyClientSideSongFilters } from '/@/renderer/features/playlists/hooks/use-playlist-track-list';
import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
import { FILTER_KEYS, searchLibraryItems } from '/@/renderer/features/shared/utils';
import { usePlayerSong } from '/@/renderer/store';
import { useAppStore } from '/@/renderer/store/app.store';
import { useCurrentServer } from '/@/renderer/store/auth.store';
import { useSettingsStore } from '/@/renderer/store/settings.store';
import { sortSongList } from '/@/shared/api/utils';
import { LibraryItem, Song } from '/@/shared/types/domain-types';
import { ItemListKey, Play } from '/@/shared/types/types';
@@ -43,12 +50,31 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
}),
);
const itemCount = favoriteSongsQuery?.data?.items?.length || 0;
const songs = useMemo(
() => favoriteSongsQuery?.data?.items || [],
[favoriteSongsQuery?.data?.items],
);
const albumArtistDetailFavoriteSongsSort = useAppStore(
(state) => state.albumArtistDetailFavoriteSongsSort,
);
const sortBy = albumArtistDetailFavoriteSongsSort.sortBy;
const sortOrder = albumArtistDetailFavoriteSongsSort.sortOrder;
const { searchTerm } = useSearchTermFilter();
const sortedSongs = useMemo(() => {
const filtered = applyClientSideSongFilters(songs, {
[FILTER_KEYS.SHARED.SEARCH_TERM]: searchTerm,
});
const searched = searchTerm
? searchLibraryItems(filtered, searchTerm, LibraryItem.SONG)
: filtered;
return sortSongList(searched, sortBy, sortOrder);
}, [songs, sortBy, sortOrder, searchTerm]);
const itemCount = sortedSongs.length;
const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
const currentSong = usePlayerSong();
const player = usePlayer();
@@ -96,7 +122,7 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<AlbumArtistDetailFavoriteSongsListHeader
data={songs}
data={sortedSongs}
itemCount={itemCount}
title={detailQuery?.data?.name || 'Unknown'}
/>
@@ -109,16 +135,19 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
<AnimatedPage>
<ListContext.Provider value={providerValue}>
<AlbumArtistDetailFavoriteSongsListHeader
data={songs}
data={sortedSongs}
itemCount={itemCount}
title={detailQuery?.data?.name || 'Unknown'}
/>
<FilterBar>
<AlbumArtistDetailFavoriteSongsListHeaderFilters />
</FilterBar>
<ItemTableList
activeRowId={currentSongId}
autoFitColumns={tableConfig.autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={songs}
data={sortedSongs}
enableAlternateRowColors={tableConfig.enableAlternateRowColors}
enableDrag
enableExpansion={false}