reimplement artist discog / tracks routes

src/renderer/features/songs/components/song-list-content.tsx

@@ -1,5 +1,6 @@
 import { lazy, Suspense, useMemo } from 'react';
 
+import { useListContext } from '/@/renderer/context/list-context';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
 import { ItemListSettings, useCurrentServer, useListSettings } from '/@/renderer/store';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -30,12 +31,15 @@ const SongListPaginatedTable = lazy(() =>
 export const SongListContent = () => {
     const { display, grid, itemsPerPage, pagination, table } = useListSettings(ItemListKey.SONG);
 
+    const { customFilters } = useListContext();
+
     return (
         <Suspense fallback={<Spinner container />}>
             <SongListView
                 display={display}
                 grid={grid}
                 itemsPerPage={itemsPerPage}
+                overrideQuery={customFilters}
                 pagination={pagination}
                 table={table}
             />

src/renderer/features/songs/components/song-list-header.tsx

@@ -1,16 +1,22 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+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 { 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 { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
 import { useSongListFilters } from '/@/renderer/features/songs/hooks/use-song-list-filters';
+import { useCurrentServerId } from '/@/renderer/store';
 import { Flex } from '/@/shared/components/flex/flex';
 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 SongListHeaderProps {
     genreId?: string;
@@ -18,10 +24,7 @@ interface SongListHeaderProps {
 }
 
 export const SongListHeader = ({ title }: SongListHeaderProps) => {
-    const { t } = useTranslation();
-
     const { itemCount } = useListContext();
-    const pageTitle = title || t('page.trackList.title', { postProcess: 'titleCase' });
 
     return (
         <Stack gap={0}>
@@ -29,7 +32,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
                 <Flex justify="space-between" w="100%">
                     <LibraryHeaderBar>
                         <PlayButton />
-                        <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
+                        <PageTitle title={title} />
                         <LibraryHeaderBar.Badge
                             isLoading={itemCount === null || itemCount === undefined}
                         >
@@ -49,7 +52,56 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
 };
 
 const PlayButton = () => {
+    const { customFilters } = useListContext();
     const { query } = useSongListFilters();
 
-    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} listQuery={query} />;
+    const mergedQuery = useMemo(() => {
+        return {
+            ...query,
+            ...(customFilters ?? {}),
+        };
+    }, [query, customFilters]);
+
+    return <LibraryHeaderBar.PlayButton itemType={LibraryItem.SONG} listQuery={mergedQuery} />;
+};
+
+const PageTitle = ({ title }: { title?: string }) => {
+    const { t } = useTranslation();
+    const { pageKey } = useListContext();
+    const pageTitle = title || t('page.trackList.title', { postProcess: 'titleCase' });
+
+    switch (pageKey) {
+        case ItemListKey.ALBUM_ARTIST_SONG:
+            return <AlbumArtistTitle />;
+        case ItemListKey.GENRE_SONG:
+            return <GenreTitle />;
+    }
+
+    return <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>;
+};
+
+const AlbumArtistTitle = () => {
+    const { id } = useListContext();
+    const serverId = useCurrentServerId();
+
+    const { data: albumArtist } = useSuspenseQuery(
+        artistsQueries.albumArtistDetail({
+            query: { id: id! },
+            serverId: serverId,
+        }),
+    );
+
+    return <LibraryHeaderBar.Title>{albumArtist?.name || '—'}</LibraryHeaderBar.Title>;
+};
+
+const GenreTitle = () => {
+    const { id } = useListContext();
+
+    const { data: genre } = useGenreList();
+
+    const name = useMemo(() => {
+        return genre?.items.find((g) => g.id === id)?.name || '—';
+    }, [id, genre]);
+
+    return <LibraryHeaderBar.Title>{name || '—'}</LibraryHeaderBar.Title>;
 };