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