[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
2024-04-20 06:14:31 +00:00 · 2024-04-20 06:14:31 +00:00 · ba531505af
commit ba531505af
parent 595eba152a
20 changed files with 336 additions and 158 deletions
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -282,6 +282,8 @@
            "moreFromGeneric": "more from {{item}}"
        },
        "albumList": {
+            "artistAlbums": "Albums by {{artist}}",
+            "genreAlbums": "\"{{genre}}\" $t(entity.album_other)",
            "title": "$t(entity.album_other)"
        },
        "appMenu": {
@ -336,6 +338,8 @@
            "upNext": "up next"
        },
        "genreList": {
+            "showAlbums": "show $t(entity.genre_one) $t(entity.album_other)",
+            "showTracks": "show $t(entity.genre_one) $t(entity.track_other)",
            "title": "$t(entity.genre_other)"
        },
        "globalSearch": {
@ -474,6 +478,8 @@
        "gaplessAudio": "gapless audio",
        "gaplessAudio_description": "sets the gapless audio setting for mpv",
        "gaplessAudio_optionWeak": "weak (recommended)",
+        "genreBehavior": "genre page default behavior",
+        "genreBehavior_description": "determines whether clicking on a genre opens by default in track or album list",
        "globalMediaHotkeys": "global media hotkeys",
        "globalMediaHotkeys_description": "enable or disable the usage of your system media hotkeys to control playback",
        "homeConfiguration": "home page configuration",
--- a/src/renderer/components/virtual-table/cells/genre-cell.tsx
+++ b/src/renderer/components/virtual-table/cells/genre-cell.tsx
@ -4,10 +4,11 @@ import { generatePath, Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
-import { AppRoute } from '/@/renderer/router/routes';
 import { Separator } from '/@/renderer/components/separator';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';

 export const GenreCell = ({ value, data }: ICellRendererParams) => {
+    const genrePath = useGenreRoute();
    return (
        <CellContainer $position="left">
            <Text
@ -24,9 +25,7 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
                            component={Link}
                            overflow="hidden"
                            size="md"
-                            to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
-                                genreId: item.id,
-                            })}
+                            to={generatePath(genrePath, { genreId: item.id })}
                        >
                            {item.name || '—'}
                        </Text>
--- a/src/renderer/features/albums/components/album-detail-content.tsx
+++ b/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"
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/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}
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/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}
--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/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"
--- a/src/renderer/features/artists/components/album-artist-list-header.tsx
+++ b/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 (
--- a/src/renderer/features/genres/components/genre-list-grid-view.tsx
+++ b/src/renderer/features/genres/components/genre-list-grid-view.tsx
@ -13,9 +13,9 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';

 export const GenreListGridView = ({ gridRef, itemCount }: any) => {
    const queryClient = useQueryClient();
@ -24,6 +24,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
    const { pageKey, id } = useListContext();
    const { grid, display, filter } = useListStoreByKey({ key: pageKey });
    const { setGrid } = useListStoreActions();
+    const genrePath = useGenreRoute();

    const [searchParams, setSearchParams] = useSearchParams();
    const scrollOffset = searchParams.get('scrollOffset');
@ -137,7 +138,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
                        loading={itemCount === undefined || itemCount === null}
                        minimumBatchSize={40}
                        route={{
-                            route: AppRoute.LIBRARY_GENRES_SONGS,
+                            route: genrePath,
                            slugs: [{ idProperty: 'id', slugProperty: 'genreId' }],
                        }}
                        width={width}
--- a/src/renderer/features/genres/components/genre-list-header-filters.tsx
+++ b/src/renderer/features/genres/components/genre-list-header-filters.tsx
@ -3,7 +3,14 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { RiFolder2Fill, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+import {
+    RiAlbumLine,
+    RiFolder2Fill,
+    RiMoreFill,
+    RiMusic2Line,
+    RiRefreshLine,
+    RiSettings3Fill,
+} from 'react-icons/ri';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { GenreListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
 import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
@ -15,9 +22,12 @@ import { useContainerQuery } from '/@/renderer/hooks';
 import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
 import {
    GenreListFilter,
+    GenreTarget,
    useCurrentServer,
+    useGeneralSettings,
    useListStoreActions,
    useListStoreByKey,
+    useSettingsStoreActions,
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
 import i18n from '/@/i18n/i18n';
@ -52,6 +62,8 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
    const { setFilter, setTable, setGrid, setDisplayType } = useListStoreActions();
    const { display, filter, table, grid } = useListStoreByKey({ key: pageKey });
    const cq = useContainerQuery();
+    const { genreTarget } = useGeneralSettings();
+    const { setGenreBehavior } = useSettingsStoreActions();

    const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
        itemType: LibraryItem.GENRE,
@ -208,6 +220,11 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
        return filter.musicFolderId !== undefined;
    }, [filter.musicFolderId]);

+    const handleGenreToggle = useCallback(() => {
+        const newState = genreTarget === GenreTarget.ALBUM ? GenreTarget.TRACK : GenreTarget.ALBUM;
+        setGenreBehavior(newState);
+    }, [genreTarget, setGenreBehavior]);
+
    return (
        <Flex justify="space-between">
            <Group
@ -309,6 +326,23 @@ export const GenreListHeaderFilters = ({ gridRef, tableRef }: GenreListHeaderFil
                            {t('common.refresh', { postProcess: 'titleCase' })}
                        </DropdownMenu.Item>
                    </DropdownMenu.Dropdown>
+                    <Divider orientation="vertical" />
+                    <Button
+                        compact
+                        size="md"
+                        tooltip={{
+                            label: t(
+                                genreTarget === GenreTarget.ALBUM
+                                    ? 'page.genreList.showAlbums'
+                                    : 'page.genreList.showTracks',
+                                { postProcess: 'sentenceCase' },
+                            ),
+                        }}
+                        variant="subtle"
+                        onClick={handleGenreToggle}
+                    >
+                        {genreTarget === GenreTarget.ALBUM ? <RiAlbumLine /> : <RiMusic2Line />}
+                    </Button>
                </DropdownMenu>
            </Group>
            <Group
--- a/src/renderer/features/genres/components/genre-list-header.tsx
+++ b/src/renderer/features/genres/components/genre-list-header.tsx
@ -5,19 +5,12 @@ import debounce from 'lodash/debounce';
 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 { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
-import {
-    GenreListFilter,
-    useCurrentServer,
-    useListStoreActions,
-    useListStoreByKey,
-} from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { GenreListFilter, useCurrentServer } from '/@/renderer/store';
 import { useTranslation } from 'react-i18next';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';

 interface GenreListHeaderProps {
    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -29,34 +22,18 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
    const { t } = useTranslation();
    const cq = useContainerQuery();
    const server = useCurrentServer();
-    const { pageKey } = useListContext();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
-    const { setFilter, setTablePagination } = useListStoreActions();
-
-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const { filter, refresh, search } = useDisplayRefresh({
+        gridRef,
        itemType: LibraryItem.GENRE,
        server,
+        tableRef,
    });

    const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.GENRE,
-            key: pageKey,
-        }) as GenreListFilter;
-
-        const filterWithCustom = {
-            ...updatedFilters,
-        };
-
-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, filterWithCustom);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, filterWithCustom);
-        }
+        const updatedFilters = search(e) as GenreListFilter;
+        refresh(updatedFilters);
    }, 500);
+
    return (
        <Stack
            ref={cq.ref}
--- a/src/renderer/features/genres/components/genre-list-table-view.tsx
+++ b/src/renderer/features/genres/components/genre-list-table-view.tsx
@ -9,7 +9,7 @@ import { useCurrentServer } from '/@/renderer/store';
 import { MutableRefObject, useCallback } from 'react';
 import { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { generatePath, useNavigate } from 'react-router';
-import { AppRoute } from '/@/renderer/router/routes';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';

 interface GenreListTableViewProps {
    itemCount?: number;
@ -20,6 +20,7 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
    const server = useCurrentServer();
    const { pageKey, customFilters } = useListContext();
    const navigate = useNavigate();
+    const genrePath = useGenreRoute();

    const tableProps = useVirtualTable({
        contextMenu: GENRE_CONTEXT_MENU_ITEMS,
@ -36,9 +37,9 @@ export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewPr
            const { data } = e;
            if (!data) return;

-            navigate(generatePath(AppRoute.LIBRARY_GENRES_SONGS, { genreId: data.id }));
+            navigate(generatePath(genrePath, { genreId: data.id }));
        },
-        [navigate],
+        [genrePath, navigate],
    );

    return (
--- a/src/renderer/features/item-details/components/item-details-modal.tsx
+++ b/src/renderer/features/item-details/components/item-details-modal.tsx
@ -14,6 +14,7 @@ import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Separator } from '/@/renderer/components/separator';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';

 export type ItemDetailsModalProps = {
    item: Album | AlbumArtist | Song;
@ -83,8 +84,10 @@ const formatComment = (item: Album | Song) =>

 const formatDate = (key: string | null) => (key ? dayjs(key).fromNow() : '');

-const formatGenre = (item: Album | AlbumArtist | Song) =>
-    item.genres?.map((genre, index) => (
+const FormatGenre = (item: Album | AlbumArtist | Song) => {
+    const genreRoute = useGenreRoute();
+
+    return item.genres?.map((genre, index) => (
        <span key={genre.id}>
            {index > 0 && <Separator />}
            <Text
@ -92,19 +95,14 @@ const formatGenre = (item: Album | AlbumArtist | Song) =>
                component={Link}
                overflow="visible"
                size="md"
-                to={
-                    genre.id
-                        ? generatePath(AppRoute.LIBRARY_GENRES_SONGS, {
-                              genreId: genre.id,
-                          })
-                        : ''
-                }
+                to={genre.id ? generatePath(genreRoute, { genreId: genre.id }) : ''}
                weight={500}
            >
                {genre.name || '—'}
            </Text>
        </span>
    ));
+};

 const formatRating = (item: Album | AlbumArtist | Song) =>
    item.userRating !== null ? (
@ -120,7 +118,7 @@ const BoolField = (key: boolean) =>
 const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
    { key: 'name', label: 'common.title' },
    { label: 'entity.albumArtist_one', render: formatArtists(true) },
-    { label: 'entity.genre_other', render: formatGenre },
+    { label: 'entity.genre_other', render: FormatGenre },
    {
        label: 'common.duration',
        render: (album) => album.duration && formatDurationString(album.duration),
@ -166,7 +164,7 @@ const AlbumPropertyMapping: ItemDetailRow<Album>[] = [

 const AlbumArtistPropertyMapping: ItemDetailRow<AlbumArtist>[] = [
    { key: 'name', label: 'common.name' },
-    { label: 'entity.genre_other', render: formatGenre },
+    { label: 'entity.genre_other', render: FormatGenre },
    {
        label: 'common.duration',
        render: (artist) => artist.duration && formatDurationString(artist.duration),
@ -240,7 +238,7 @@ const SongPropertyMapping: ItemDetailRow<Song>[] = [
    { key: 'discNumber', label: 'common.disc' },
    { key: 'trackNumber', label: 'common.trackNumber' },
    { key: 'releaseYear', label: 'filter.releaseYear' },
-    { label: 'entity.genre_other', render: formatGenre },
+    { label: 'entity.genre_other', render: FormatGenre },
    {
        label: 'common.duration',
        render: (song) => formatDurationString(song.duration),
--- a/src/renderer/features/playlists/components/playlist-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-list-header.tsx
@ -8,15 +8,12 @@ import { CreatePlaylistForm } from '/@/renderer/features/playlists/components/cr
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { PlaylistListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { PlaylistListFilter, useCurrentServer } from '/@/renderer/store';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
 import { RiFileAddFill } from 'react-icons/ri';
 import { LibraryItem, ServerType } from '/@/renderer/api/types';
-import { useListFilterRefresh } from '../../../hooks/use-list-filter-refresh';
-import { useListContext } from '/@/renderer/context/list-context';
-import { useListStoreByKey } from '../../../store/list.store';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';

 interface PlaylistListHeaderProps {
    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
@ -26,11 +23,8 @@ interface PlaylistListHeaderProps {

 export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistListHeaderProps) => {
    const { t } = useTranslation();
-    const { pageKey } = useListContext();
    const cq = useContainerQuery();
    const server = useCurrentServer();
-    const { setFilter, setTablePagination } = useListStoreActions();
-    const { display, filter } = useListStoreByKey({ key: pageKey });

    const handleCreatePlaylistModal = () => {
        openModal({
@ -43,25 +37,16 @@ export const PlaylistListHeader = ({ itemCount, tableRef, gridRef }: PlaylistLis
        });
    };

-    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+    const { filter, refresh, search } = useDisplayRefresh({
+        gridRef,
        itemType: LibraryItem.PLAYLIST,
        server,
+        tableRef,
    });

    const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.PLAYLIST,
-            key: pageKey,
-        }) as PlaylistListFilter;
-
-        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 PlaylistListFilter;
+        refresh(updatedFilters);
    }, 500);

    return (
--- a/src/renderer/features/settings/components/general/control-settings.tsx
+++ b/src/renderer/features/settings/components/general/control-settings.tsx
@ -4,6 +4,7 @@ import isElectron from 'is-electron';
 import { Select, Tooltip, NumberInput, Switch, Slider } from '/@/renderer/components';
 import { SettingsSection } from '/@/renderer/features/settings/components/settings-section';
 import {
+    GenreTarget,
    SideQueueType,
    useGeneralSettings,
    useSettingsStoreActions,
@ -341,6 +342,41 @@ export const ControlSettings = () => {
            }),
            title: t('setting.externalLinks', { postProcess: 'sentenceCase' }),
        },
+        {
+            control: (
+                <Select
+                    data={[
+                        {
+                            label: t('entity.album_other', {
+                                postProcess: 'titleCase',
+                            }),
+                            value: GenreTarget.ALBUM,
+                        },
+                        {
+                            label: t('entity.track_other', {
+                                postProcess: 'titleCase',
+                            }),
+                            value: GenreTarget.TRACK,
+                        },
+                    ]}
+                    defaultValue={settings.genreTarget}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                genreTarget: e as GenreTarget,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.genreBehavior', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.genreBehavior', { postProcess: 'sentenceCase' }),
+        },
    ];

    return <SettingsSection options={controlOptions} />;
--- a/src/renderer/features/songs/components/song-list-header.tsx
+++ b/src/renderer/features/songs/components/song-list-header.tsx
@ -1,62 +1,64 @@
+import { ChangeEvent, MutableRefObject, useEffect, useRef } 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 { ChangeEvent, MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useListStoreByKey } from '../../../store/list.store';
 import { LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
-import { useListContext } from '/@/renderer/context/list-context';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { SongListHeaderFilters } from '/@/renderer/features/songs/components/song-list-header-filters';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { useListFilterRefresh } from '/@/renderer/hooks/use-list-filter-refresh';
-import { SongListFilter, useCurrentServer, useListStoreActions } from '/@/renderer/store';
+import { SongListFilter, useCurrentServer } from '/@/renderer/store';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { ListDisplayType } from '/@/renderer/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';

 interface SongListHeaderProps {
+    genreId?: string;
    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
    itemCount?: number;
    tableRef: MutableRefObject<AgGridReactType | null>;
    title?: string;
 }

-export const SongListHeader = ({ gridRef, title, itemCount, tableRef }: SongListHeaderProps) => {
+export const SongListHeader = ({
+    genreId,
+    gridRef,
+    title,
+    itemCount,
+    tableRef,
+}: SongListHeaderProps) => {
    const { t } = useTranslation();
    const server = useCurrentServer();
-    const { pageKey, handlePlay, customFilters } = useListContext();
-    const { setFilter, setTablePagination } = useListStoreActions();
-    const { display, filter } = useListStoreByKey({ key: pageKey });
    const cq = useContainerQuery();
+    const genreRef = useRef<string>();

-    const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
+    const { customFilters, filter, handlePlay, refresh, search } = useDisplayRefresh({
+        gridRef,
        itemType: LibraryItem.SONG,
        server,
+        tableRef,
    });

    const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
-        const searchTerm = e.target.value === '' ? undefined : e.target.value;
-        const updatedFilters = setFilter({
-            data: { searchTerm },
-            itemType: LibraryItem.SONG,
-            key: pageKey,
-        }) as SongListFilter;
+        const updatedFilters = search(e) as SongListFilter;

        const filterWithCustom = {
            ...updatedFilters,
            ...customFilters,
        };

-        if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
-            handleRefreshTable(tableRef, filterWithCustom);
-            setTablePagination({ data: { currentPage: 0 }, key: pageKey });
-        } else {
-            handleRefreshGrid(gridRef, filterWithCustom);
-        }
+        refresh(filterWithCustom);
    }, 500);

+    useEffect(() => {
+        if (genreRef.current && genreRef.current !== genreId) {
+            refresh(customFilters);
+        }
+
+        genreRef.current = genreId;
+    }, [customFilters, genreId, refresh, tableRef]);
+
    const playButtonBehavior = usePlayButtonBehavior();

    return (
--- a/src/renderer/features/songs/routes/song-list-route.tsx
+++ b/src/renderer/features/songs/routes/song-list-route.tsx
@ -145,6 +145,7 @@ const TrackListRoute = () => {
        <AnimatedPage>
            <ListContext.Provider value={providerValue}>
                <SongListHeader
+                    genreId={genreId}
                    gridRef={gridRef}
                    itemCount={itemCount}
                    tableRef={tableRef}
--- a/src/renderer/hooks/use-display-refresh.ts
+++ b/src/renderer/hooks/use-display-refresh.ts
@ -0,0 +1,68 @@
+import { ChangeEvent, MutableRefObject, useCallback } from 'react';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import {
+    UseHandleListFilterChangeProps,
+    useListFilterRefresh,
+} from '/@/renderer/hooks/use-list-filter-refresh';
+import { useListContext } from '/@/renderer/context/list-context';
+import { ListDisplayType } from '/@/renderer/types';
+import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { useListStoreActions, useListStoreByKey } from '/@/renderer/store';
+
+export type UseDisplayRefreshProps = {
+    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    tableRef: MutableRefObject<AgGridReactType | null>;
+} & UseHandleListFilterChangeProps;
+
+export const useDisplayRefresh = ({
+    isClientSideSort,
+    gridRef,
+    itemType,
+    server,
+    tableRef,
+}: UseDisplayRefreshProps) => {
+    const { customFilters, pageKey, handlePlay } = useListContext();
+    const { display, filter } = useListStoreByKey({ key: pageKey });
+
+    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
+        isClientSideSort,
+        itemType,
+        server,
+    });
+    const { setFilter, setTablePagination } = useListStoreActions();
+
+    const refresh = useCallback(
+        (filter: unknown) => {
+            if (display === ListDisplayType.TABLE || display === ListDisplayType.TABLE_PAGINATED) {
+                handleRefreshTable(tableRef, filter);
+                setTablePagination({ data: { currentPage: 0 }, key: pageKey });
+            } else {
+                handleRefreshGrid(gridRef, filter);
+            }
+        },
+        [
+            display,
+            gridRef,
+            handleRefreshGrid,
+            handleRefreshTable,
+            pageKey,
+            setTablePagination,
+            tableRef,
+        ],
+    );
+
+    const search = useCallback(
+        (e: ChangeEvent<HTMLInputElement>) => {
+            const searchTerm = e.target.value === '' ? undefined : e.target.value;
+            const updatedFilters = setFilter({
+                data: { searchTerm },
+                itemType,
+                key: pageKey,
+            });
+            return updatedFilters;
+        },
+        [itemType, pageKey, setFilter],
+    );
+
+    return { customFilters, filter, handlePlay, refresh, search };
+};
--- a/src/renderer/hooks/use-genre-route.ts
+++ b/src/renderer/hooks/use-genre-route.ts
@ -0,0 +1,29 @@
+import { useLocation } from 'react-router';
+import { GenreTarget, useSettingsStore } from '/@/renderer/store';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useMemo } from 'react';
+
+const ALBUM_REGEX = /albums$/;
+const SONG_REGEX = /songs$/;
+
+export const useGenreRoute = () => {
+    const { pathname } = useLocation();
+    const matchAlbum = ALBUM_REGEX.test(pathname);
+    const matchSongs = SONG_REGEX.test(pathname);
+
+    const baseState = useSettingsStore((state) =>
+        state.general.genreTarget === GenreTarget.ALBUM
+            ? AppRoute.LIBRARY_GENRES_ALBUMS
+            : AppRoute.LIBRARY_GENRES_SONGS,
+    );
+
+    return useMemo(() => {
+        if (matchAlbum) {
+            return AppRoute.LIBRARY_GENRES_ALBUMS;
+        }
+        if (matchSongs) {
+            return AppRoute.LIBRARY_GENRES_SONGS;
+        }
+        return baseState;
+    }, [baseState, matchAlbum, matchSongs]);
+};
--- a/src/renderer/hooks/use-list-filter-refresh.ts
+++ b/src/renderer/hooks/use-list-filter-refresh.ts
@ -8,7 +8,7 @@ import { BasePaginatedResponse, LibraryItem, ServerListItem } from '/@/renderer/
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import orderBy from 'lodash/orderBy';

-interface UseHandleListFilterChangeProps {
+export interface UseHandleListFilterChangeProps {
    isClientSideSort?: boolean;
    itemType: LibraryItem;
    server: ServerListItem | null;
--- a/src/renderer/store/settings.store.ts
+++ b/src/renderer/store/settings.store.ts
@ -171,6 +171,11 @@ export enum BindingActions {
    ZOOM_OUT = 'zoomOut',
 }

+export enum GenreTarget {
+    ALBUM = 'album',
+    TRACK = 'track',
+}
+
 export interface SettingsState {
    discord: {
        clientId: string;
@ -192,6 +197,7 @@ export interface SettingsState {
        defaultFullPlaylist: boolean;
        externalLinks: boolean;
        followSystemTheme: boolean;
+        genreTarget: GenreTarget;
        homeItems: SortableItem<HomeItem>[];
        language: string;
        passwordStore?: string;
@ -311,6 +317,7 @@ const initialState: SettingsState = {
        defaultFullPlaylist: true,
        externalLinks: true,
        followSystemTheme: false,
+        genreTarget: GenreTarget.TRACK,
        homeItems,
        language: 'en',
        passwordStore: undefined,
@ -604,6 +611,11 @@ export const useSettingsStore = create<SettingsSlice>()(
                            state.playback.mpvProperties.audioSampleRateHz = 0;
                        });
                    },
+                    setGenreBehavior: (target: GenreTarget) => {
+                        set((state) => {
+                            state.general.genreTarget = target;
+                        });
+                    },
                    setHomeItems: (items: SortableItem<HomeItem>[]) => {
                        set((state) => {
                            state.general.homeItems = items;