reimplement genre detail route

src/renderer/features/genres/api/genres-api.ts

@@ -1,9 +1,15 @@
-import { queryOptions } from '@tanstack/react-query';
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
 
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { GenreListQuery, ListCountQuery } from '/@/shared/types/domain-types';
+import { useCurrentServerId } from '/@/renderer/store';
+import {
+    GenreListQuery,
+    GenreListSort,
+    ListCountQuery,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 export const genresQueries = {
     list: (args: QueryHookArgs<GenreListQuery>) => {
@@ -37,3 +43,21 @@ export const genresQueries = {
         });
     },
 };
+
+export const useGenreList = () => {
+    const serverId = useCurrentServerId();
+
+    return useSuspenseQuery({
+        ...genresQueries.list({
+            query: {
+                limit: -1,
+                sortBy: GenreListSort.NAME,
+                sortOrder: SortOrder.ASC,
+                startIndex: 0,
+            },
+            serverId,
+        }),
+        gcTime: Infinity,
+        staleTime: Infinity,
+    });
+};

src/renderer/features/genres/components/genre-detail-content.tsx

@@ -0,0 +1,69 @@
+import { Suspense, useMemo } from 'react';
+import { useParams } from 'react-router';
+
+import { AlbumListView } from '/@/renderer/features/albums/components/album-list-content';
+import { SongListView } from '/@/renderer/features/songs/components/song-list-content';
+import { GenreTarget, useGenreTarget, useListSettings } from '/@/renderer/store';
+import { Spinner } from '/@/shared/components/spinner/spinner';
+import { ItemListKey } from '/@/shared/types/types';
+
+export const GenreDetailContent = () => {
+    const genreTarget = useGenreTarget();
+
+    switch (genreTarget) {
+        case GenreTarget.ALBUM:
+            return <GenreDetailContentAlbums />;
+        case GenreTarget.TRACK:
+            return <GenreDetailContentSongs />;
+        default:
+            return null;
+    }
+};
+
+function GenreDetailContentAlbums() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <AlbumListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}
+
+function GenreDetailContentSongs() {
+    const { genreId } = useParams() as { genreId: string };
+    const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
+
+    const overrideQuery = useMemo(() => {
+        return {
+            genreIds: [genreId],
+        };
+    }, [genreId]);
+
+    return (
+        <Suspense fallback={<Spinner container />}>
+            <SongListView
+                display={display}
+                grid={grid}
+                itemsPerPage={itemsPerPage}
+                overrideQuery={overrideQuery}
+                pagination={pagination}
+                table={table}
+            />
+        </Suspense>
+    );
+}

src/renderer/features/genres/components/genre-detail-header.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { PageHeader } from '/@/renderer/components/page-header/page-header';
+import { useListContext } from '/@/renderer/context/list-context';
+import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
+import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
+import { FilterBar } from '/@/renderer/features/shared/components/filter-bar';
+import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
+import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
+import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
+import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
+import { GenreTarget, useGenreTarget } from '/@/renderer/store';
+import { Group } from '/@/shared/components/group/group';
+import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+interface GenreDetailHeaderProps {
+    title?: string;
+}
+
+export const GenreDetailHeader = ({ title }: GenreDetailHeaderProps) => {
+    const { t } = useTranslation();
+
+    const { itemCount } = useListContext();
+    const pageTitle = title || t('page.genreList.title', { postProcess: 'titleCase' });
+
+    const genreTarget = useGenreTarget();
+
+    return (
+        <Stack gap={0}>
+            <PageHeader>
+                <LibraryHeaderBar>
+                    <PlayButton />
+                    <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
+                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                        {itemCount}
+                    </LibraryHeaderBar.Badge>
+                </LibraryHeaderBar>
+                <Group>
+                    <ListSearchInput />
+                </Group>
+            </PageHeader>
+            <FilterBar>
+                {genreTarget === GenreTarget.ALBUM ? (
+                    <AlbumListHeaderFilters toggleGenreTarget />
+                ) : (
+                    <SongListHeaderFilters toggleGenreTarget />
+                )}
+            </FilterBar>
+        </Stack>
+    );
+};
+
+const PlayButton = () => {
+    const genreTarget = useGenreTarget();
+
+    switch (genreTarget) {
+        case GenreTarget.ALBUM:
+            return <AlbumPlayButton />;
+        case GenreTarget.TRACK:
+            return <SongPlayButton />;
+        default:
+            return null;
+    }
+};
+
+const AlbumPlayButton = () => {
+    const { query } = useAlbumListFilters();
+    const { id } = useListContext();
+
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            genreIds: [id],
+        };
+    }, [query, id]);
+
+    return (
+        <LibraryHeaderBar.PlayButton
+            itemType={LibraryItem.ALBUM}
+            listQuery={mergedQuery}
+            variant="filled"
+        />
+    );
+};
+
+const SongPlayButton = () => {
+    const { query } = useSongListFilters();
+    const { id } = useListContext();
+
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            genreIds: [id],
+        };
+    }, [query, id]);
+
+    return (
+        <LibraryHeaderBar.PlayButton
+            itemType={LibraryItem.SONG}
+            listQuery={mergedQuery}
+            variant="filled"
+        />
+    );
+};

src/renderer/features/genres/routes/genre-detail-route.tsx

@@ -0,0 +1,56 @@
+import { useMemo, useState } from 'react';
+import { useLocation, useParams } from 'react-router';
+
+import { ListContext } from '/@/renderer/context/list-context';
+import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
+import { GenreDetailContent } from '/@/renderer/features/genres/components/genre-detail-content';
+import { GenreDetailHeader } from '/@/renderer/features/genres/components/genre-detail-header';
+import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { LibraryContainer } from '/@/renderer/features/shared/components/library-container';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
+
+const GenreDetailRoute = () => {
+    const { genreId } = useParams() as { genreId: string };
+    const pageKey = 'genre';
+
+    const [itemCount, setItemCount] = useState<number | undefined>(undefined);
+
+    const providerValue = useMemo(() => {
+        return {
+            id: genreId,
+            itemCount,
+            pageKey,
+            setItemCount,
+        };
+    }, [genreId, itemCount, pageKey, setItemCount]);
+
+    const { data: genres } = useGenreList();
+
+    const name = useMemo(() => {
+        return genres?.items.find((g) => g.id === genreId)?.name || '—';
+    }, [genreId, genres]);
+
+    const location = useLocation();
+    console.log('location', location.pathname);
+
+    return (
+        <AnimatedPage>
+            <ListContext.Provider value={providerValue}>
+                <LibraryContainer>
+                    <GenreDetailHeader title={name} />
+                    <GenreDetailContent />
+                </LibraryContainer>
+            </ListContext.Provider>
+        </AnimatedPage>
+    );
+};
+
+const GenreDetailRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <GenreDetailRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default GenreDetailRouteWithBoundary;