[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/artists/components/album-artist-detail-content.tsx

@@ -40,6 +40,7 @@ import { useCurrentServer } from '/@/renderer/store';
 import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { CardRow, Play, TableColumn } from '/@/renderer/types';
 import { sanitize } from '/@/renderer/utils/sanitize';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const ContentContainer = styled.div`
     position: relative;
@@ -69,6 +70,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
     const cq = useContainerQuery();
     const handlePlayQueueAdd = usePlayQueueAdd();
     const server = useCurrentServer();
+    const genrePath = useGenreRoute();
 
     const detailQuery = useAlbumArtistDetail({
         query: { id: albumArtistId },
@@ -414,7 +416,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     component={Link}
                                     radius="md"
                                     size="md"
-                                    to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
+                                    to={generatePath(genrePath, {
                                         genreId: genre.id,
                                     })}
                                     variant="outline"

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -3,8 +3,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
-import { useListContext } from '../../../context/list-context';
-import { useListStoreByKey } from '../../../store/list.store';
 import { FilterBar } from '../../shared/components/filter-bar';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
@@ -12,9 +10,8 @@ import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
-import { AlbumArtistListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { AlbumArtistListFilter, useCurrentServer } from '/@/renderer/store';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumArtistListHeaderProps {
     gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@@ -29,30 +26,18 @@ export const AlbumArtistListHeader = ({
 }: AlbumArtistListHeaderProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
-    const { pageKey } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
-    const { setFilter, setTablePagination } = useListStoreActions();
     const cq = useContainerQuery();
 
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const { filter, refresh, search } = useDisplayRefresh({
+        gridRef,
         itemType: LibraryItem.ALBUM_ARTIST,
         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_ARTIST,
-            key: pageKey,
-        }) as AlbumArtistListFilter;
-
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, updatedFilters);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, updatedFilters);
-        }
+        const updatedFilters = search(e) as AlbumArtistListFilter;
+        refresh(updatedFilters);
     }, 500);
 
     return (