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 = () => {
+
+
+