vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-06 20:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

add configuration to revert to single-select ItemGrid behavior

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n/locales/en.json
+2
View File
@@ -922,6 +922,8 @@
"showLyricsInSidebar": "show lyrics in player sidebar",
"showRatings_description": "controls if the star ratings feature shows up in the interface",
"showRatings": "show star ratings",
"enableGridMultiSelect": "enable grid multi-select",
"enableGridMultiSelect_description": "when enabled, allows selecting multiple items in grid views. when disabled, clicking grid item images will navigate to the item page",
"showVisualizerInSidebar_description": "a panel will be added to the player sidebar that displays the visualizer",
"showVisualizerInSidebar": "show visualizer in player sidebar",
"combinedLyricsAndVisualizer_description": "combine lyrics and visualizer into the same panel",
src/renderer/components/feature-carousel/single-feature-carousel.tsx
+1 -1
View File
@@ -118,9 +118,9 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
containerClassName={styles.albumImageContainer}
enableDebounce={false}
enableViewport={false}
fetchPriority="high"
id={album.imageId}
itemType={LibraryItem.ALBUM}
fetchPriority="high"
type="itemCard"
/>
<div className={styles.playButtonOverlay}>
src/renderer/components/item-card/item-card.module.css
+1
View File
@@ -35,6 +35,7 @@
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
content: '';
background-color: rgb(0 0 0);
opacity: 0;
src/renderer/components/item-card/item-card.tsx
+12 -3
View File
@@ -57,6 +57,7 @@ export interface ItemCardProps {
enableDrag?: boolean;
enableExpansion?: boolean;
enableNavigation?: boolean;
imageAsLink?: boolean;
internalState?: ItemListStateActions;
isRound?: boolean;
itemType: LibraryItem;
@@ -71,6 +72,7 @@ export const ItemCard = ({
enableDrag,
enableExpansion,
enableNavigation = true,
imageAsLink,
internalState,
isRound,
itemType,
@@ -91,6 +93,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -108,6 +111,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -126,6 +130,7 @@ export const ItemCard = ({
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableNavigation={enableNavigation}
imageAsLink={imageAsLink}
imageUrl={imageUrl}
internalState={internalState}
isRound={isRound}
@@ -142,6 +147,7 @@ export interface ItemCardDerivativeProps extends Omit<ItemCardProps, 'type'> {
controls?: ItemControls;
enableExpansion?: boolean;
enableNavigation?: boolean;
imageAsLink?: boolean;
imageUrl: string | undefined;
internalState?: ItemListStateActions;
rows: DataRow[];
@@ -154,6 +160,7 @@ const CompactItemCard = ({
enableDrag,
enableExpansion,
enableNavigation,
imageAsLink,
internalState,
isRound,
itemType,
@@ -381,7 +388,7 @@ const CompactItemCard = ({
})}
ref={ref}
>
{enableNavigation && navigationPath && !internalState ? (
{enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
<Link
className={imageContainerClassName}
draggable={false}
@@ -442,6 +449,7 @@ const DefaultItemCard = ({
data,
enableExpansion,
enableNavigation,
imageAsLink,
internalState,
isRound,
itemType,
@@ -583,7 +591,7 @@ const DefaultItemCard = ({
[styles.selected]: isSelected,
})}
>
{enableNavigation && navigationPath && !internalState ? (
{enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
<Link
className={imageContainerClassName}
draggable={false}
@@ -660,6 +668,7 @@ const PosterItemCard = ({
enableDrag,
enableExpansion,
enableNavigation,
imageAsLink,
internalState,
isRound,
itemType,
@@ -869,7 +878,7 @@ const PosterItemCard = ({
})}
ref={ref}
>
{enableNavigation && navigationPath && !internalState ? (
{enableNavigation && navigationPath && (imageAsLink ?? !internalState) ? (
<Link
className={imageContainerClassName}
draggable={false}
src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+21 -2
View File
@@ -56,6 +56,7 @@ interface VirtualizedGridListProps {
dataVersion?: number;
enableDrag?: boolean;
enableExpansion: boolean;
enableMultiSelect: boolean;
enableSelection: boolean;
gap: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
getItem?: (index: number) => ItemCardProps['data'];
@@ -86,6 +87,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
enableMultiSelect,
enableSelection,
gap,
getItem,
@@ -116,6 +118,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
enableMultiSelect,
enableSelection,
gap,
getItem,
@@ -135,6 +138,7 @@ const VirtualizedGridList = React.memo(
dataVersion,
enableDrag,
enableExpansion,
enableMultiSelect,
enableSelection,
gap,
internalState,
@@ -313,6 +317,7 @@ export interface GridItemProps {
dataVersion?: number;
enableDrag?: boolean;
enableExpansion?: boolean;
enableMultiSelect: boolean;
enableSelection?: boolean;
gap: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
getItem?: (index: number) => ItemCardProps['data'];
@@ -335,6 +340,7 @@ export interface ItemGridListProps {
enableDrag?: boolean;
enableEntranceAnimation?: boolean;
enableExpansion?: boolean;
enableMultiSelect?: boolean;
enableSelection?: boolean;
enableSelectionDialog?: boolean;
gap?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
@@ -364,6 +370,7 @@ const BaseItemGridList = ({
enableDrag = true,
enableEntranceAnimation = true,
enableExpansion = false,
enableMultiSelect = false,
enableSelection = true,
gap = 'sm',
getItem,
@@ -798,6 +805,7 @@ const BaseItemGridList = ({
dataVersion={dataVersion}
enableDrag={enableDrag}
enableExpansion={enableExpansion}
enableMultiSelect={enableMultiSelect}
enableSelection={enableSelection}
gap={gap}
getItem={resolvedGetItem}
@@ -828,8 +836,18 @@ const BaseItemGridList = ({
const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
const { index, style } = props;
const { columns, controls, enableDrag, gap, getItem, itemCount, itemType, rows, size } =
props.data;
const {
columns,
controls,
enableDrag,
enableMultiSelect,
gap,
getItem,
itemCount,
itemType,
rows,
size,
} = props.data;
const items: ReactNode[] = [];
const startIndex = index * columns;
@@ -857,6 +875,7 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
data={item}
enableDrag={enableDrag}
enableExpansion={props.data.enableExpansion}
imageAsLink={!enableMultiSelect}
internalState={props.data.internalState}
itemType={itemType}
rows={rows}
src/renderer/features/albums/components/album-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/albums/components/album-list-paginated-grid.tsx
+3
View File
@@ -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,
src/renderer/features/artists/components/album-artist-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/artists/components/album-artist-list-paginated-grid.tsx
+3
View File
@@ -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,
src/renderer/features/artists/components/artist-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/artists/components/artist-list-paginated-grid.tsx
+3
View File
@@ -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,
src/renderer/features/genres/components/genre-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/genres/components/genre-list-paginated-grid.tsx
+3
View File
@@ -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,
src/renderer/features/playlists/components/playlist-detail-song-list-grid.tsx
+3 -1
View File
@@ -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,
src/renderer/features/playlists/components/playlist-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/playlists/components/playlist-list-paginated-grid.tsx
+3
View File
@@ -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,
src/renderer/features/settings/components/general/application-settings.tsx
+22
View File
@@ -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
src/renderer/features/songs/components/song-list-infinite-grid.tsx
+3
View File
@@ -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}
src/renderer/features/songs/components/song-list-paginated-grid.tsx
+3
View File
@@ -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}
src/renderer/store/settings.store.ts
+2
View File
@@ -409,6 +409,7 @@ export const GeneralSettingsSchema = z.object({
buttonSize: z.number(),
combinedLyricsAndVisualizer: z.boolean(),
disabledContextMenu: z.record(z.string(), z.boolean()),
enableGridMultiSelect: z.boolean(),
externalLinks: z.boolean(),
followCurrentSong: z.boolean(),
followSystemTheme: z.boolean(),
@@ -965,6 +966,7 @@ const initialState: SettingsState = {
buttonSize: 15,
combinedLyricsAndVisualizer: false,
disabledContextMenu: {},
enableGridMultiSelect: false,
externalLinks: true,
followCurrentSong: true,
followSystemTheme: false,