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"
         />
     );