add sort to artist favorite songs page (#1691)

2026-06-18 01:14:22 +02:00 · 2026-03-11 01:48:39 -07:00
parent 16ac536f93
commit 8699b1ffea
2 changed files with 79 additions and 4 deletions
@@ -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>
+    );
+};