reimplement artist discog / tracks routes

src/renderer/features/albums/components/album-list-content.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense, useMemo } from 'react';
 
+import { useListContext } from '/@/renderer/context/list-context';
 import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -33,12 +34,15 @@ const AlbumListPaginatedTable = lazy(() =>
 export const AlbumListContent = () => {
     const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.ALBUM);
 
+    const { customFilters } = useListContext();
+
     return (
         <Suspense fallback={<Spinner container />}>
             <AlbumListView
                 display={display}
                 grid={grid}
                 itemsPerPage={itemsPerPage}
+                overrideQuery={customFilters}
                 pagination={pagination}
                 table={table}
             />

src/renderer/features/albums/components/album-list-header.tsx

@@ -1,32 +1,35 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { Suspense, 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 { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
+import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
 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 { useCurrentServerId } from '/@/renderer/store';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
 import { LibraryItem } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
 
 interface AlbumListHeaderProps {
     title?: string;
 }
 
 export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
-    const { t } = useTranslation();
-
     const { itemCount } = useListContext();
-    const pageTitle = title || t('page.albumList.title', { postProcess: 'titleCase' });
 
     return (
         <Stack gap={0}>
             <PageHeader>
                 <LibraryHeaderBar>
                     <PlayButton />
-                    <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
+                    <PageTitle title={title} />
                     <LibraryHeaderBar.Badge isLoading={!itemCount}>
                         {itemCount}
                     </LibraryHeaderBar.Badge>
@@ -42,13 +45,69 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
     );
 };
 
+const PageTitle = ({ title }: { title?: string }) => {
+    const { t } = useTranslation();
+    const { pageKey } = useListContext();
+    const pageTitle = title || t('page.albumList.title', { postProcess: 'titleCase' });
+
+    switch (pageKey) {
+        case ItemListKey.ALBUM_ARTIST_ALBUM:
+            return (
+                <Suspense fallback={<LibraryHeaderBar.Title>—</LibraryHeaderBar.Title>}>
+                    <AlbumArtistTitle />
+                </Suspense>
+            );
+        case ItemListKey.GENRE_ALBUM:
+            return (
+                <Suspense fallback={<LibraryHeaderBar.Title>—</LibraryHeaderBar.Title>}>
+                    <GenreTitle />
+                </Suspense>
+            );
+    }
+
+    return <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>;
+};
+
+const GenreTitle = () => {
+    const { id } = useListContext();
+    const { data: genres } = useGenreList();
+
+    const name = useMemo(() => {
+        return genres?.items.find((g) => g.id === id)?.name || '—';
+    }, [id, genres]);
+
+    return <LibraryHeaderBar.Title>{name}</LibraryHeaderBar.Title>;
+};
+
+const AlbumArtistTitle = () => {
+    const serverId = useCurrentServerId();
+    const { id } = useListContext();
+
+    const { data: albumArtist } = useSuspenseQuery(
+        artistsQueries.albumArtistDetail({
+            query: { id: id! },
+            serverId: serverId,
+        }),
+    );
+
+    return <LibraryHeaderBar.Title>{albumArtist?.name || '—'}</LibraryHeaderBar.Title>;
+};
+
 const PlayButton = () => {
     const { query } = useAlbumListFilters();
+    const { customFilters } = useListContext();
+
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            ...(customFilters ?? {}),
+        };
+    }, [query, customFilters]);
 
     return (
         <LibraryHeaderBar.PlayButton
             itemType={LibraryItem.ALBUM}
-            listQuery={query}
+            listQuery={mergedQuery}
             variant="filled"
         />
     );

src/renderer/features/albums/hooks/use-album-list-filters.ts

@@ -11,13 +11,13 @@ import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-searc
 import { useSortByFilter } from '/@/renderer/features/shared/hooks/use-sort-by-filter';
 import { useSortOrderFilter } from '/@/renderer/features/shared/hooks/use-sort-order-filter';
 import { customFiltersSchema, FILTER_KEYS } from '/@/renderer/features/shared/utils';
-import { AlbumListSort } from '/@/shared/types/domain-types';
+import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useAlbumListFilters = () => {
-    const { sortBy } = useSortByFilter<AlbumListSort>(null, ItemListKey.ALBUM);
+    const { sortBy } = useSortByFilter<AlbumListSort>(AlbumListSort.NAME, ItemListKey.ALBUM);
 
-    const { sortOrder } = useSortOrderFilter(null, ItemListKey.ALBUM);
+    const { sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.ALBUM);
 
     const { searchTerm, setSearchTerm } = useSearchTermFilter('');
 

src/renderer/features/albums/routes/album-list-route.tsx

@@ -7,21 +7,43 @@ import { AlbumListHeader } from '/@/renderer/features/albums/components/album-li
 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';
+import { AlbumListQuery } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
+
+const getPageKey = (options: { albumArtistId?: string; genreId?: string }) => {
+    if (options.albumArtistId) {
+        return ItemListKey.ALBUM_ARTIST_ALBUM;
+    }
+
+    if (options.genreId) {
+        return ItemListKey.GENRE_ALBUM;
+    }
+
+    return ItemListKey.ALBUM;
+};
 
 const AlbumListRoute = () => {
     const { albumArtistId, genreId } = useParams();
-    const pageKey = albumArtistId ? `albumArtistAlbum` : 'album';
+    const pageKey = getPageKey({ albumArtistId, genreId });
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
 
+    const customFilters: Partial<AlbumListQuery> = useMemo(() => {
+        return {
+            artistIds: albumArtistId ? [albumArtistId] : undefined,
+            genreIds: genreId ? [genreId] : undefined,
+        };
+    }, [albumArtistId, genreId]);
+
     const providerValue = useMemo(() => {
         return {
+            customFilters,
             id: albumArtistId ?? genreId,
             itemCount,
             pageKey,
             setItemCount,
         };
-    }, [albumArtistId, genreId, itemCount, pageKey, setItemCount]);
+    }, [albumArtistId, customFilters, genreId, itemCount, pageKey]);
 
     return (
         <AnimatedPage>