diff --git a/src/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header-filters.tsx b/src/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header-filters.tsx new file mode 100644 index 000000000..f66c2e71a --- /dev/null +++ b/src/renderer/features/artists/components/album-artist-detail-favorite-songs-list-header-filters.tsx @@ -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 ( + + + + setAlbumArtistDetailFavoriteSongsSort(value as SongListSort, sortOrder) + } + sortBy={sortBy} + /> + + + setAlbumArtistDetailFavoriteSongsSort(sortBy, value as SortOrder) + } + sortOrder={sortOrder} + /> + + + + + ); +}; diff --git a/src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx index d2436c126..280f89727 100644 --- a/src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx +++ b/src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx @@ -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 = () => { @@ -109,16 +135,19 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => { + + +