[enhancement]: Support toggling Album/Track view for gneres (#591)

* [enhancement]: Support toggling Album/Track view for gneres

The _primary_ purpose of this PR is to enable viewing tracks OR albums for genres.
This has a few requirements:
1. Ability to set default route for genres, **except** when already on song/album page
2. Ability to toggle between album and genre view
3. Fixed refresh for genre ID

Additionally, there was some refactoring:
- Since the *-list-headers had very similar functions for search, export that as a hook instead

* also use hook for album artist

* support switching albumartist tracks/albums

* remove toggle on song/album list, simplify logic

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

@@ -45,6 +45,7 @@ import {
 } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const isFullWidthRow = (node: RowNode) => {
     return node.id?.startsWith('disc-');
@@ -81,6 +82,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
     const isFocused = useAppFocus();
     const currentSong = useCurrentSong();
     const { externalLinks } = useGeneralSettings();
+    const genreRoute = useGenreRoute();
 
     const columnDefs = useMemo(
         () => getColumnDefs(tableConfig.columns, false, 'albumDetail'),
@@ -389,7 +391,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                                     component={Link}
                                     radius={0}
                                     size="md"
-                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                    to={generatePath(genreRoute, {
                                         genreId: genre.id,
                                     })}
                                     variant="outline"

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

@@ -1,63 +1,59 @@
-import type { ChangeEvent, MutableRefObject } from 'react';
+import { useEffect, useRef, type ChangeEvent, type MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
-import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { useListContext } from '/@/renderer/context/list-context';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import {
-    AlbumListFilter,
-    useCurrentServer,
-    useListStoreActions,
-    useListStoreByKey,
-    usePlayButtonBehavior,
-} from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { AlbumListFilter, useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
 import { titleCase } from '/@/renderer/utils';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumListHeaderProps {
+    genreId?: string;
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
     title?: string;
 }
 
-export const AlbumListHeader = ({ itemCount, gridRef, tableRef, title }: AlbumListHeaderProps) => {
+export const AlbumListHeader = ({
+    genreId,
+    itemCount,
+    gridRef,
+    tableRef,
+    title,
+}: AlbumListHeaderProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const { setFilter, setTablePagination } = useListStoreActions();
     const cq = useContainerQuery();
-    const { pageKey, handlePlay } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
     const playButtonBehavior = usePlayButtonBehavior();
-
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const genreRef = useRef<string>();
+    const { filter, handlePlay, refresh, search } = useDisplayRefresh({
+        gridRef,
         itemType: LibraryItem.ALBUM,
         server,
+        tableRef,
     });
 
     const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.ALBUM,
-            key: pageKey,
-        }) as AlbumListFilter;
+        const updatedFilters = search(e) as AlbumListFilter;
 
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, updatedFilters);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, updatedFilters);
-        }
+        refresh(updatedFilters);
     }, 500);
 
+    useEffect(() => {
+        if (genreRef.current && genreRef.current !== genreId) {
+            refresh(filter);
+        }
+
+        genreRef.current = genreId;
+    }, [filter, genreId, refresh, tableRef]);
+
     return (
         <Stack
             ref={cq.ref}

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

@@ -1,10 +1,11 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import { LibraryItem } from '/@/renderer/api/types';
+import { GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
@@ -15,19 +16,32 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
 import { Play } from '/@/renderer/types';
+import { useGenreList } from '/@/renderer/features/genres';
+import { titleCase } from '/@/renderer/utils';
 
 const AlbumListRoute = () => {
+    const { t } = useTranslation();
     const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const [searchParams] = useSearchParams();
-    const { albumArtistId } = useParams();
+    const { albumArtistId, genreId } = useParams();
     const pageKey = albumArtistId ? `albumArtistAlbum` : 'album';
     const handlePlayQueueAdd = usePlayQueueAdd();
 
     const customFilters = useMemo(() => {
         const value = {
             ...(albumArtistId && { artistIds: [albumArtistId] }),
+            ...(genreId && {
+                _custom: {
+                    jellyfin: {
+                        GenreIds: genreId,
+                    },
+                    navidrome: {
+                        genre_id: genreId,
+                    },
+                },
+            }),
         };
 
         if (isEmpty(value)) {
@@ -35,13 +49,35 @@ const AlbumListRoute = () => {
         }
 
         return value;
-    }, [albumArtistId]);
+    }, [albumArtistId, genreId]);
 
     const albumListFilter = useListFilterByKey({
         filter: customFilters,
         key: pageKey,
     });
 
+    const genreList = useGenreList({
+        options: {
+            cacheTime: 1000 * 60 * 60,
+            enabled: !!genreId,
+        },
+        query: {
+            sortBy: GenreListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId: server?.id,
+    });
+
+    const genreTitle = useMemo(() => {
+        if (!genreList.data) return '';
+        const genre = genreList.data.items.find((g) => g.id === genreId);
+
+        if (!genre) return 'Unknown';
+
+        return genre?.name;
+    }, [genreId, genreList.data]);
+
     const itemCountCheck = useAlbumList({
         options: {
             cacheTime: 1000 * 60,
@@ -98,19 +134,27 @@ const AlbumListRoute = () => {
         return {
             customFilters,
             handlePlay,
-            id: albumArtistId ?? undefined,
+            id: albumArtistId ?? genreId,
             pageKey,
         };
-    }, [albumArtistId, customFilters, handlePlay, pageKey]);
+    }, [albumArtistId, customFilters, genreId, handlePlay, pageKey]);
+
+    const artist = searchParams.get('artistName');
+    const title = artist
+        ? t('page.albumList.artistAlbums', { artist })
+        : genreId
+        ? t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) })
+        : undefined;
 
     return (
         <AnimatedPage>
             <ListContext.Provider value={providerValue}>
                 <AlbumListHeader
+                    genreId={genreId}
                     gridRef={gridRef}
                     itemCount={itemCount}
                     tableRef={tableRef}
-                    title={searchParams.get('artistName') || undefined}
+                    title={title}
                 />
                 <AlbumListContent
                     gridRef={gridRef}