Reuse song list for artist songs

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -73,6 +73,13 @@ export const AlbumArtistDetailContent = () => {
     artistName: detailQuery?.data?.name || '',
   })}`;
 
+  const artistSongsLink = `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, {
+    albumArtistId,
+  })}?${createSearchParams({
+    artistId: albumArtistId,
+    artistName: detailQuery?.data?.name || '',
+  })}`;
+
   const recentAlbumsQuery = useAlbumList({
     jfParams: server?.type === ServerType.JELLYFIN ? { artistIds: albumArtistId } : undefined,
     limit: itemsPerPage,
@@ -85,6 +92,19 @@ export const AlbumArtistDetailContent = () => {
     startIndex: 0,
   });
 
+  const compilationAlbumsQuery = useAlbumList({
+    jfParams:
+      server?.type === ServerType.JELLYFIN ? { contributingArtistIds: albumArtistId } : undefined,
+    limit: itemsPerPage,
+    ndParams:
+      server?.type === ServerType.NAVIDROME
+        ? { artist_id: albumArtistId, compilation: true }
+        : undefined,
+    sortBy: AlbumListSort.RELEASE_DATE,
+    sortOrder: SortOrder.DESC,
+    startIndex: 0,
+  });
+
   const topSongsQuery = useTopSongsList(
     { artist: detailQuery?.data?.name || '' },
     { enabled: server?.type !== ServerType.JELLYFIN && !!detailQuery?.data?.name },
@@ -136,6 +156,7 @@ export const AlbumArtistDetailContent = () => {
   const carousels = [
     {
       data: recentAlbumsQuery?.data?.items,
+      isHidden: !recentAlbumsQuery?.data?.items?.length,
       itemType: LibraryItem.ALBUM,
       loading: recentAlbumsQuery?.isLoading || recentAlbumsQuery.isFetching,
       pagination: {
@@ -147,7 +168,7 @@ export const AlbumArtistDetailContent = () => {
             fw="bold"
             order={3}
           >
-            Recent albums
+            Recent releases
           </TextTitle>
           <Button
             compact
@@ -160,7 +181,25 @@ export const AlbumArtistDetailContent = () => {
           </Button>
         </>
       ),
-      uniqueId: 'recentAlbums',
+      uniqueId: 'recentReleases',
+    },
+    {
+      data: compilationAlbumsQuery?.data?.items,
+      isHidden: !compilationAlbumsQuery?.data?.items?.length,
+      itemType: LibraryItem.ALBUM,
+      loading: compilationAlbumsQuery?.isLoading || compilationAlbumsQuery.isFetching,
+      pagination: {
+        itemsPerPage,
+      },
+      title: (
+        <TextTitle
+          fw="bold"
+          order={3}
+        >
+          Appears on
+        </TextTitle>
+      ),
+      uniqueId: 'compilationAlbums',
     },
     {
       data: detailQuery?.data?.similarArtists?.slice(0, itemsPerPage),
@@ -232,12 +271,10 @@ export const AlbumArtistDetailContent = () => {
   const showBiography =
     detailQuery?.data?.biography !== undefined && detailQuery?.data?.biography !== null;
   const showTopSongs = server?.type !== ServerType.JELLYFIN && topSongsQuery?.data?.items?.length;
-  const showGenres = detailQuery?.data?.genres?.length !== 0;
+  const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
 
   const isLoading =
-    detailQuery?.isLoading ||
+    detailQuery?.isLoading || (server?.type === ServerType.NAVIDROME && topSongsQuery?.isLoading);
-    recentAlbumsQuery?.isLoading ||
-    (server?.type === ServerType.NAVIDROME && topSongsQuery?.isLoading);
 
   if (isLoading) return <ContentContainer ref={cq.ref} />;
 
@@ -297,7 +334,7 @@ export const AlbumArtistDetailContent = () => {
               compact
               uppercase
               component={Link}
-              to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, { albumArtistId })}
+              to={artistSongsLink}
               variant="subtle"
             >
               View all songs

src/renderer/features/songs/components/jellyfin-song-filters.tsx

@@ -96,38 +96,34 @@ export const JellyfinSongFilters = ({ handleFilterChange }: JellyfinSongFiltersP
         </Group>
       ))}
       <Divider my="0.5rem" />
-      <Group position="apart">
+      <Group grow>
-        <Text>Year range</Text>
+        <NumberInput
-        <Group>
+          required
-          <NumberInput
+          label="From year"
-            required
+          max={2300}
-            max={2300}
+          min={1700}
-            min={1700}
+          value={filter.jfParams?.minYear}
-            value={filter.jfParams?.minYear}
+          onChange={handleMinYearFilter}
-            width={60}
+        />
-            onChange={handleMinYearFilter}
+        <NumberInput
-          />
+          label="To year"
-          <NumberInput
+          max={2300}
-            max={2300}
+          min={1700}
-            min={1700}
+          value={filter.jfParams?.maxYear}
-            value={filter.jfParams?.maxYear}
+          onChange={handleMaxYearFilter}
-            width={60}
+        />
-            onChange={handleMaxYearFilter}
-          />
-        </Group>
       </Group>
-      <Divider my="0.5rem" />
+      <Group grow>
-      <Stack>
-        <Text>Genres</Text>
         <MultiSelect
           clearable
           searchable
           data={genreList}
           defaultValue={selectedGenres}
+          label="Genres"
           width={250}
           onChange={handleGenresFilter}
         />
-      </Stack>
+      </Group>
     </Stack>
   );
 };

src/renderer/features/songs/components/navidrome-song-filters.tsx

@@ -59,29 +59,6 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
 
   return (
     <Stack p="0.8rem">
-      <Group position="apart">
-        <Text>Year</Text>
-        <NumberInput
-          max={5000}
-          min={0}
-          value={filter.ndParams?.year}
-          width={50}
-          onChange={handleYearFilter}
-        />
-      </Group>
-      <Divider my="0.5rem" />
-      <Group position="apart">
-        <Text>Genre</Text>
-        <Select
-          clearable
-          searchable
-          data={genreList}
-          defaultValue={filter.ndParams?.genre_id}
-          width={150}
-          onChange={handleGenresFilter}
-        />
-      </Group>
-      <Divider my="0.5rem" />
       {toggleFilters.map((filter) => (
         <Group
           key={`nd-filter-${filter.label}`}
@@ -95,6 +72,26 @@ export const NavidromeSongFilters = ({ handleFilterChange }: NavidromeSongFilter
           />
         </Group>
       ))}
+      <Divider my="0.5rem" />
+      <Group grow>
+        <NumberInput
+          label="Year"
+          max={5000}
+          min={0}
+          value={filter.ndParams?.year}
+          width={50}
+          onChange={handleYearFilter}
+        />
+        <Select
+          clearable
+          searchable
+          data={genreList}
+          defaultValue={filter.ndParams?.genre_id}
+          label="Genre"
+          width={150}
+          onChange={handleGenresFilter}
+        />
+      </Group>
     </Stack>
   );
 };

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

@@ -19,6 +19,7 @@ import {
   VirtualTable,
 } from '/@/renderer/components';
 import {
+  SongListFilter,
   useCurrentServer,
   useSetSongTable,
   useSetSongTablePagination,
@@ -31,15 +32,16 @@ import debounce from 'lodash/debounce';
 import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
 import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { LibraryItem, QueueSong } from '/@/renderer/api/types';
+import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 
 interface SongListContentProps {
+  customFilters?: Partial<SongListFilter>;
   itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) => {
+export const SongListContent = ({ customFilters, itemCount, tableRef }: SongListContentProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const page = useSongListStore();
@@ -64,21 +66,20 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
           const limit = params.endRow - params.startRow;
           const startIndex = params.startRow;
 
-          const queryKey = queryKeys.songs.list(server?.id || '', {
+          const query: SongListQuery = {
             limit,
             startIndex,
             ...page.filter,
-          });
+            ...customFilters,
+          };
+
+          const queryKey = queryKeys.songs.list(server?.id || '', query);
 
           const songsRes = await queryClient.fetchQuery(
             queryKey,
             async ({ signal }) =>
               api.controller.getSongList({
-                query: {
+                query,
-                  limit,
-                  startIndex,
-                  ...page.filter,
-                },
                 server,
                 signal,
               }),
@@ -93,7 +94,7 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) =
       params.api.setDatasource(dataSource);
       params.api.ensureIndexVisible(page.table.scrollOffset, 'top');
     },
-    [page.filter, page.table.scrollOffset, queryClient, server],
+    [customFilters, page.filter, page.table.scrollOffset, queryClient, server],
   );
 
   const onPaginationChanged = useCallback(

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

@@ -1,6 +1,7 @@
 import type { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Flex, Group, Stack } from '@mantine/core';
+import { openModal } from '@mantine/modals';
 import debounce from 'lodash/debounce';
 import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
 import {
@@ -89,11 +90,18 @@ const ORDER = [
 ];
 
 interface SongListHeaderProps {
+  customFilters?: Partial<SongListFilter>;
   itemCount?: number;
   tableRef: MutableRefObject<AgGridReactType | null>;
+  title?: string;
 }
 
-export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) => {
+export const SongListHeader = ({
+  customFilters,
+  title,
+  itemCount,
+  tableRef,
+}: SongListHeaderProps) => {
   const server = useCurrentServer();
   const page = useSongListStore();
   const setPage = useSetSongStore();
@@ -123,21 +131,20 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
 
           const pageFilters = filters || page.filter;
 
-          const queryKey = queryKeys.songs.list(server?.id || '', {
+          const query: SongListQuery = {
             limit,
             startIndex,
             ...pageFilters,
-          });
+            ...customFilters,
+          };
+
+          const queryKey = queryKeys.songs.list(server?.id || '', query);
 
           const songsRes = await queryClient.fetchQuery(
             queryKey,
             async ({ signal }) =>
               api.controller.getSongList({
-                query: {
+                query,
-                  limit,
-                  startIndex,
-                  ...pageFilters,
-                },
                 server,
                 signal,
               }),
@@ -154,7 +161,7 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
       tableRef.current?.api.ensureIndexVisible(0, 'top');
       setPagination({ currentPage: 0 });
     },
-    [page.filter, server, setPagination, tableRef],
+    [customFilters, page.filter, server, setPagination, tableRef],
   );
 
   const handleSetSortBy = useCallback(
@@ -273,6 +280,21 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
     });
   };
 
+  const handleOpenFiltersModal = () => {
+    openModal({
+      children: (
+        <>
+          {server?.type === ServerType.NAVIDROME ? (
+            <NavidromeSongFilters handleFilterChange={handleFilterChange} />
+          ) : (
+            <JellyfinSongFilters handleFilterChange={handleFilterChange} />
+          )}
+        </>
+      ),
+      title: 'Song Filters',
+    });
+  };
+
   return (
     <PageHeader p="1rem">
       <Flex
@@ -297,9 +319,11 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
                 <Group noWrap>
                   <TextTitle
                     fw="bold"
+                    maw="20vw"
                     order={3}
+                    overflow="hidden"
                   >
-                    Tracks
+                    {title || 'Tracks'}
                   </TextTitle>
                   <Badge
                     radius="xl"
@@ -428,24 +452,14 @@ export const SongListHeader = ({ itemCount, tableRef }: SongListHeaderProps) =>
               </DropdownMenu.Dropdown>
             </DropdownMenu>
           )}
-          <DropdownMenu position="bottom-start">
+          <Button
-            <DropdownMenu.Target>
+            compact
-              <Button
+            fw="600"
-                compact
+            variant="subtle"
-                fw="600"
+            onClick={handleOpenFiltersModal}
-                variant="subtle"
+          >
-              >
+            {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
-                {cq.isMd ? 'Filters' : <RiFilter3Line size={15} />}
+          </Button>
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              {server?.type === ServerType.NAVIDROME ? (
-                <NavidromeSongFilters handleFilterChange={handleFilterChange} />
-              ) : (
-                <JellyfinSongFilters handleFilterChange={handleFilterChange} />
-              )}
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
           <DropdownMenu position="bottom-start">
             <DropdownMenu.Target>
               <Button

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

@@ -1,5 +1,7 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { SongListQuery } from '/@/renderer/api/types';
 import { VirtualGridContainer } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { SongListContent } from '/@/renderer/features/songs/components/song-list-content';
@@ -9,14 +11,31 @@ import { useSongListFilters } from '/@/renderer/store';
 
 const TrackListRoute = () => {
   const tableRef = useRef<AgGridReactType | null>(null);
-
   const filters = useSongListFilters();
 
+  const [searchParams] = useSearchParams();
+
+  const customFilters: Partial<SongListQuery> | undefined = searchParams.get('artistId')
+    ? {
+        artistIds: [searchParams.get('artistId') as string],
+      }
+    : undefined;
+
   const itemCountCheck = useSongList(
     {
       limit: 1,
       startIndex: 0,
       ...filters,
+      ...customFilters,
+      jfParams: {
+        ...customFilters?.jfParams,
+        ...filters.jfParams,
+        includeItemTypes: 'Audio',
+      },
+      ndParams: {
+        ...customFilters?.ndParams,
+        ...filters.ndParams,
+      },
     },
     {
       cacheTime: 1000 * 60 * 60 * 2,
@@ -33,10 +52,13 @@ const TrackListRoute = () => {
     <AnimatedPage>
       <VirtualGridContainer>
         <SongListHeader
+          customFilters={customFilters}
           itemCount={itemCount}
           tableRef={tableRef}
+          title={searchParams.get('artistName') || undefined}
         />
         <SongListContent
+          customFilters={customFilters}
           itemCount={itemCount}
           tableRef={tableRef}
         />

src/renderer/router/app-router.tsx

@@ -50,10 +50,6 @@ const AlbumArtistDetailRoute = lazy(
   () => import('/@/renderer/features/artists/routes/album-artist-detail-route'),
 );
 
-const AlbumArtistDetailSongListRoute = lazy(
-  () => import('../features/artists/routes/album-artist-detail-song-list-route'),
-);
-
 const AlbumArtistDetailTopSongsListRoute = lazy(
   () => import('../features/artists/routes/album-artist-detail-top-songs-list-route'),
 );
@@ -141,7 +137,7 @@ export const AppRouter = () => {
                     path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_DISCOGRAPHY}
                   />
                   <Route
-                    element={<AlbumArtistDetailSongListRoute />}
+                    element={<SongListRoute />}
                     path={AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS}
                   />
                   <Route