support multiple items in item details modal

src/renderer/features/context-menu/actions/get-info-action.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>
     );
 };