add configuration to revert to single-select ItemGrid behavior

This commit is contained in:
jeffvli
2026-01-28 20:14:05 -08:00
parent 9532601efe
commit 78aebd7c5d
20 changed files with 100 additions and 7 deletions
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
AlbumListQuery,
AlbumListSort,
@@ -52,12 +53,14 @@ export const AlbumListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableExpansion
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
AlbumListQuery,
AlbumListSort,
@@ -56,6 +57,7 @@ export const AlbumListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.ALBUM, ItemListKey.ALBUM, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -69,6 +71,7 @@ export const AlbumListPaginatedGrid = ({
currentPage={currentPage}
data={data || []}
enableExpansion
enableMultiSelect={enableGridMultiSelect}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
AlbumArtistListQuery,
AlbumArtistListSort,
@@ -53,11 +54,13 @@ export const AlbumArtistListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
AlbumArtistListQuery,
AlbumArtistListSort,
@@ -57,6 +58,7 @@ export const AlbumArtistListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.ALBUM_ARTIST, ItemListKey.ALBUM_ARTIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -69,6 +71,7 @@ export const AlbumArtistListPaginatedGrid = ({
<ItemGridList
currentPage={currentPage}
data={data || []}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
ArtistListQuery,
ArtistListSort,
@@ -52,11 +53,13 @@ export const ArtistListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
ArtistListQuery,
ArtistListSort,
@@ -56,6 +57,7 @@ export const ArtistListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.ARTIST, ItemListKey.ARTIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -68,6 +70,7 @@ export const ArtistListPaginatedGrid = ({
<ItemGridList
currentPage={currentPage}
data={data || []}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
GenreListQuery,
GenreListSort,
@@ -52,11 +53,13 @@ export const GenreListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
GenreListQuery,
GenreListSort,
@@ -56,6 +57,7 @@ export const GenreListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.GENRE, ItemListKey.GENRE, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -68,6 +70,7 @@ export const GenreListPaginatedGrid = ({
<ItemGridList
currentPage={currentPage}
data={data || []}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
@@ -9,7 +9,7 @@ import { useListContext } from '/@/renderer/context/list-context';
import { usePlaylistSongListFilters } from '/@/renderer/features/playlists/hooks/use-playlist-song-list-filters';
import { useSearchTermFilter } from '/@/renderer/features/shared/hooks/use-search-term-filter';
import { searchLibraryItems } from '/@/renderer/features/shared/utils';
import { useListSettings } from '/@/renderer/store';
import { useGeneralSettings, useListSettings } from '/@/renderer/store';
import { sortSongList } from '/@/shared/api/utils';
import {
LibraryItem,
@@ -56,10 +56,12 @@ export const PlaylistDetailSongListGrid = forwardRef<any, PlaylistDetailSongList
ItemListKey.PLAYLIST_SONG,
gridProps.size,
);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={songData}
enableMultiSelect={enableGridMultiSelect}
gap={gridProps.itemGap}
initialTop={{
to: scrollOffset ?? 0,
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
LibraryItem,
PlaylistListQuery,
@@ -52,11 +53,13 @@ export const PlaylistListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -9,6 +9,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
import { useGeneralSettings } from '/@/renderer/store';
import {
LibraryItem,
PlaylistListQuery,
@@ -56,6 +57,7 @@ export const PlaylistListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.PLAYLIST, ItemListKey.PLAYLIST, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -68,6 +70,7 @@ export const PlaylistListPaginatedGrid = ({
<ItemGridList
currentPage={currentPage}
data={data || []}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
initialTop={{
to: scrollOffset ?? 0,
@@ -621,6 +621,28 @@ export const ApplicationSettings = memo(() => {
isHidden: false,
title: t('setting.showRatings', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch
aria-label={t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' })}
defaultChecked={settings.enableGridMultiSelect}
onChange={(e) =>
setSettings({
general: {
...settings,
enableGridMultiSelect: e.currentTarget.checked,
},
})
}
/>
),
description: t('setting.enableGridMultiSelect', {
context: 'description',
postProcess: 'sentenceCase',
}),
isHidden: false,
title: t('setting.enableGridMultiSelect', { postProcess: 'sentenceCase' }),
},
{
control: (
<Switch
@@ -7,6 +7,7 @@ import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpe
import { ItemGridList } from '/@/renderer/components/item-list/item-grid-list/item-grid-list';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { useGeneralSettings } from '/@/renderer/store';
import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
@@ -47,11 +48,13 @@ export const SongListInfiniteGrid = ({
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemGridList
data={loadedItems}
dataVersion={dataVersion}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
@@ -8,6 +8,7 @@ import { ItemListWithPagination } from '/@/renderer/components/item-list/item-li
import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
import { ItemListGridComponentProps } from '/@/renderer/components/item-list/types';
import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
import { useGeneralSettings } from '/@/renderer/store';
import { LibraryItem, SongListQuery, SongListSort, SortOrder } from '/@/shared/types/domain-types';
import { ItemListKey } from '/@/shared/types/types';
@@ -45,6 +46,7 @@ export const SongListPaginatedGrid = ({
});
const rows = useGridRows(LibraryItem.SONG, ItemListKey.SONG, size);
const { enableGridMultiSelect } = useGeneralSettings();
return (
<ItemListWithPagination
@@ -57,6 +59,7 @@ export const SongListPaginatedGrid = ({
<ItemGridList
currentPage={currentPage}
data={data || []}
enableMultiSelect={enableGridMultiSelect}
gap={gap}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}