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>

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>;
 };

src/renderer/features/songs/hooks/use-song-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 { SongListSort } from '/@/shared/types/domain-types';
+import { SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const useSongListFilters = () => {
-    const { sortBy } = useSortByFilter<SongListSort>(null, ItemListKey.SONG);
+    const { sortBy } = useSortByFilter<SongListSort>(SongListSort.NAME, ItemListKey.SONG);
 
-    const { sortOrder } = useSortOrderFilter(null, ItemListKey.SONG);
+    const { sortOrder } = useSortOrderFilter(SortOrder.ASC, ItemListKey.SONG);
 
     const { searchTerm, setSearchTerm } = useSearchTermFilter('');
 

src/renderer/features/songs/routes/song-list-route.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { useParams } from 'react-router';
 
 import { ListContext } from '/@/renderer/context/list-context';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
@@ -6,20 +7,43 @@ import { LibraryContainer } from '/@/renderer/features/shared/components/library
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
 import { SongListHeader } from '/@/renderer/features/songs/components/song-list-header';
+import { SongListQuery } 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_SONG;
+    }
+
+    if (options.genreId) {
+        return ItemListKey.GENRE_SONG;
+    }
+
+    return ItemListKey.SONG;
+};
 
 const SongListRoute = () => {
-    const pageKey = 'song';
+    const { albumArtistId, genreId } = useParams();
+    const pageKey = getPageKey({ albumArtistId, genreId });
 
     const [itemCount, setItemCount] = useState<number | undefined>(undefined);
 
+    const customFilters: Partial<SongListQuery> = useMemo(() => {
+        return {
+            artistIds: albumArtistId ? [albumArtistId] : undefined,
+            genreIds: genreId ? [genreId] : undefined,
+        };
+    }, [albumArtistId, genreId]);
+
     const providerValue = useMemo(() => {
         return {
-            id: undefined,
+            customFilters,
+            id: albumArtistId ?? genreId,
             itemCount,
             pageKey,
             setItemCount,
         };
-    }, [itemCount, pageKey, setItemCount]);
+    }, [albumArtistId, customFilters, genreId, itemCount, pageKey]);
 
     return (
         <AnimatedPage>

src/shared/types/types.ts

@@ -16,10 +16,14 @@ import { ServerFeatures } from '/@/shared/types/features-types';
 export enum ItemListKey {
     ALBUM = LibraryItem.ALBUM,
     ALBUM_ARTIST = LibraryItem.ALBUM_ARTIST,
+    ALBUM_ARTIST_ALBUM = 'albumArtistAlbum',
+    ALBUM_ARTIST_SONG = 'albumArtistSong',
     ALBUM_DETAIL = 'albumDetail',
     ARTIST = LibraryItem.ARTIST,
     FULL_SCREEN = 'fullScreen',
     GENRE = LibraryItem.GENRE,
+    GENRE_ALBUM = 'genreAlbum',
+    GENRE_SONG = 'genreSong',
     PLAYLIST = LibraryItem.PLAYLIST,
     PLAYLIST_SONG = LibraryItem.PLAYLIST_SONG,
     QUEUE_SONG = LibraryItem.QUEUE_SONG,