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

support multiple items in item details modal

Browse Source
This commit is contained in:
jeffvli
2025-12-02 17:23:18 -08:00
parent a35577444b
commit 7701ea0a8c
9 changed files with 88 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/context-menu/actions/get-info-action.tsx
+16 -6
View File
@@ -11,25 +11,35 @@ import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
interface GetInfoActionProps {
disabled?: boolean;
item: ItemDetailsModalProps['item'];
items: ItemDetailsModalProps['item'][];
}
export const GetInfoAction = ({ disabled, item }: GetInfoActionProps) => {
export const GetInfoAction = ({ disabled, items }: GetInfoActionProps) => {
const { t } = useTranslation();
const server = useCurrentServer();
const onSelect = useCallback(async () => {
if (!server) return;
if (!server || items.length === 0) return;
const filteredItems = items.filter(
(item): item is NonNullable<typeof item> => item !== undefined,
);
if (filteredItems.length === 0) return;
openModal({
children: <ItemDetailsModal item={item} />,
children: <ItemDetailsModal items={filteredItems} />,
size: 'lg',
styles: {
body: { paddingBottom: 'var(--theme-spacing-xl)' },
},
title: item.name || t('page.contextMenu.showDetails', { postProcess: 'sentenceCase' }),
title:
filteredItems.length === 1
? filteredItems[0]?.name ||
t('page.contextMenu.showDetails', { postProcess: 'sentenceCase' })
: t('page.contextMenu.showDetails', { postProcess: 'sentenceCase' }),
});
}, [item, server, t]);
}, [items, server, t]);
return (
<ContextMenu.Item disabled={disabled} leftIcon="info" onSelect={onSelect}>
src/renderer/features/context-menu/menus/album-artist-context-menu.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const AlbumArtistContextMenu = ({ items, type }: AlbumArtistContextMenuPr
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/context-menu/menus/album-context-menu.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const AlbumContextMenu = ({ items, type }: AlbumContextMenuProps) => {
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/context-menu/menus/artist-context-menu.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const ArtistContextMenu = ({ items, type }: ArtistContextMenuProps) => {
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/context-menu/menus/playlist-context-menu.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export const PlaylistContextMenu = ({ items, type }: PlaylistContextMenuProps) =
<ContextMenu.Divider />
<AddToPlaylistAction items={ids} itemType={LibraryItem.ALBUM} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
<ContextMenu.Divider />
<EditPlaylistAction items={items} />
<DeletePlaylistAction items={items} />
src/renderer/features/context-menu/menus/playlist-song-context-menu.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export const PlaylistSongContextMenu = ({ items, type }: PlaylistSongContextMenu
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/context-menu/menus/queue-context-menu.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const QueueContextMenu = ({ items }: QueueContextMenuProps) => {
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/context-menu/menus/song-context-menu.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ export const SongContextMenu = ({ items, type }: SongContextMenuProps) => {
<ContextMenu.Divider />
<GoToAction items={items} />
<ContextMenu.Divider />
<GetInfoAction disabled={items.length === 0} item={items[0]} />
<GetInfoAction disabled={items.length === 0} items={items} />
</ContextMenu.Content>
);
};
src/renderer/features/item-details/components/item-details-modal.tsx
+65 -29
View File
@@ -1,5 +1,5 @@
import { TFunction } from 'i18next';
import { ReactNode } from 'react';
import { ReactNode, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link } from 'react-router';
@@ -12,8 +12,10 @@ import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types
import { sanitize } from '/@/renderer/utils/sanitize';
import { SEPARATOR_STRING } from '/@/shared/api/utils';
import { Icon } from '/@/shared/components/icon/icon';
import { Select } from '/@/shared/components/select/select';
import { Separator } from '/@/shared/components/separator/separator';
import { Spoiler } from '/@/shared/components/spoiler/spoiler';
import { Stack } from '/@/shared/components/stack/stack';
import { Table } from '/@/shared/components/table/table';
import { Text } from '/@/shared/components/text/text';
import {
@@ -29,7 +31,8 @@ import {
} from '/@/shared/types/domain-types';
export type ItemDetailsModalProps = {
item: Album | AlbumArtist | Artist | Playlist | Song;
item?: Album | AlbumArtist | Artist | Playlist | Song;
items?: (Album | AlbumArtist | Artist | Playlist | Song)[];
};
type ItemDetailRow<T> = {
@@ -404,48 +407,81 @@ const handleParticipants = (item: Album | Song, t: TFunction) => {
return [];
};
export const ItemDetailsModal = ({ item }: ItemDetailsModalProps) => {
export const ItemDetailsModal = ({ item, items }: ItemDetailsModalProps) => {
const { t } = useTranslation();
const allItems = useMemo(() => items || (item ? [item] : []), [item, items]);
const [selectedIndex, setSelectedIndex] = useState(0);
const selectedItem = useMemo(() => {
return allItems[selectedIndex] || null;
}, [allItems, selectedIndex]);
const selectData = useMemo(() => {
return allItems.map((it, index) => ({
label:
it.name ||
`${t('common.item', { defaultValue: 'Item', postProcess: 'sentenceCase' })} ${index + 1}`,
value: String(index),
}));
}, [allItems, t]);
if (!selectedItem) {
return null;
}
let body: ReactNode[] = [];
switch (item._itemType) {
switch (selectedItem._itemType) {
case LibraryItem.ALBUM:
body = AlbumPropertyMapping.map((rule) => handleRow(t, item, rule));
body.push(...handleParticipants(item, t));
body.push(...handleTags(item, t));
body = AlbumPropertyMapping.map((rule) => handleRow(t, selectedItem, rule));
body.push(...handleParticipants(selectedItem, t));
body.push(...handleTags(selectedItem, t));
break;
case LibraryItem.ALBUM_ARTIST:
body = AlbumArtistPropertyMapping.map((rule) => handleRow(t, item, rule));
body = AlbumArtistPropertyMapping.map((rule) => handleRow(t, selectedItem, rule));
break;
case LibraryItem.PLAYLIST:
body = PlaylistPropertyMapping.map((rule) => handleRow(t, item, rule));
body = PlaylistPropertyMapping.map((rule) => handleRow(t, selectedItem, rule));
break;
case LibraryItem.SONG:
body = SongPropertyMapping.map((rule) => handleRow(t, item, rule));
body.push(...handleParticipants(item, t));
body.push(...handleTags(item, t));
body = SongPropertyMapping.map((rule) => handleRow(t, selectedItem, rule));
body.push(...handleParticipants(selectedItem, t));
body.push(...handleTags(selectedItem, t));
break;
default:
body = [];
}
return (
<Table
highlightOnHover={false}
styles={{
th: {
color: 'var(--theme-colors-foreground-muted)',
fontWeight: 500,
padding: 'var(--theme-spacing-sm)',
},
tr: {
color: 'var(--theme-colors-foreground-muted)',
padding: 'var(--theme-spacing-xl)',
},
}}
withRowBorders={true}
>
<Table.Tbody>{body}</Table.Tbody>
</Table>
<Stack gap="md">
{allItems.length > 1 && (
<Select
data={selectData}
onChange={(value) => {
if (value) {
setSelectedIndex(Number(value));
}
}}
value={String(selectedIndex)}
/>
)}
<Table
highlightOnHover={false}
styles={{
th: {
color: 'var(--theme-colors-foreground-muted)',
fontWeight: 500,
padding: 'var(--theme-spacing-sm)',
},
tr: {
color: 'var(--theme-colors-foreground-muted)',
padding: 'var(--theme-spacing-xl)',
},
}}
withRowBorders={true}
>
<Table.Tbody>{body}</Table.Tbody>
</Table>
</Stack>
);
};