support filter pinning on the genre detail list

This commit is contained in:
jeffvli
2026-01-30 21:42:17 -08:00
parent 4d60f5b8d9
commit 131e1ec11d
3 changed files with 69 additions and 13 deletions
@@ -2,22 +2,65 @@ import { Suspense, useMemo } from 'react';
import { useParams } from 'react-router';
import { AlbumListView } from '/@/renderer/features/albums/components/album-list-content';
import { ListFilters, ListFiltersTitle } from '/@/renderer/features/shared/components/list-filters';
import { ListWithSidebarContainer } from '/@/renderer/features/shared/components/list-with-sidebar-container';
import { SaveAsCollectionButton } from '/@/renderer/features/shared/components/save-as-collection-button';
import { SongListView } from '/@/renderer/features/songs/components/song-list-content';
import { GenreTarget, useGenreTarget, useListSettings } from '/@/renderer/store';
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { Stack } from '/@/shared/components/stack/stack';
import { LibraryItem } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
const GenreDetailFilters = () => {
const genreTarget = useGenreTarget();
if (genreTarget === GenreTarget.ALBUM) {
return (
<ListWithSidebarContainer.SidebarPortal>
<Stack h="100%" style={{ minHeight: 0 }}>
<ListFiltersTitle itemType={LibraryItem.ALBUM} />
<ScrollArea style={{ flex: 1, minHeight: 0 }}>
<ListFilters itemType={LibraryItem.ALBUM} />
</ScrollArea>
<Stack p="sm">
<SaveAsCollectionButton fullWidth itemType={LibraryItem.ALBUM} />
</Stack>
</Stack>
</ListWithSidebarContainer.SidebarPortal>
);
}
if (genreTarget === GenreTarget.TRACK) {
return (
<ListWithSidebarContainer.SidebarPortal>
<Stack h="100%" style={{ minHeight: 0 }}>
<ListFiltersTitle itemType={LibraryItem.SONG} />
<ScrollArea style={{ flex: 1, minHeight: 0 }}>
<ListFilters itemType={LibraryItem.SONG} />
</ScrollArea>
<Stack p="sm">
<SaveAsCollectionButton fullWidth itemType={LibraryItem.SONG} />
</Stack>
</Stack>
</ListWithSidebarContainer.SidebarPortal>
);
}
return null;
};
export const GenreDetailContent = () => {
const genreTarget = useGenreTarget();
switch (genreTarget) {
case GenreTarget.ALBUM:
return <GenreDetailContentAlbums />;
case GenreTarget.TRACK:
return <GenreDetailContentSongs />;
default:
return null;
}
return (
<>
<GenreDetailFilters />
{genreTarget === GenreTarget.ALBUM && <GenreDetailContentAlbums />}
{genreTarget === GenreTarget.TRACK && <GenreDetailContentSongs />}
</>
);
};
function GenreDetailContentAlbums() {