feat: Enhance ArtistInfo component with album selection and download options (#493)

frontend/src/components/ArtistInfo.tsx

@@ -14,6 +14,7 @@ import { useState, useMemo } from "react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
+
 interface ArtistInfoProps {
     artistInfo: {
         name: string;
@@ -93,12 +94,14 @@ interface ArtistInfoProps {
     onTrackClick?: (track: TrackMetadata) => void;
     onBack?: () => void;
 }
+
 export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sortBy, selectedTracks, downloadedTracks, failedTracks, skippedTracks, downloadingTrack, isDownloading, bulkDownloadType, downloadProgress, currentDownloadInfo, currentPage, itemsPerPage, downloadedLyrics, failedLyrics, skippedLyrics, downloadingLyricsTrack, checkingAvailabilityTrack, availabilityMap, downloadedCovers, failedCovers, skippedCovers, downloadingCoverTrack, isBulkDownloadingCovers, isBulkDownloadingLyrics, onSearchChange, onSortChange, onToggleTrack, onToggleSelectAll, onDownloadTrack, onDownloadLyrics, onDownloadCover, onCheckAvailability, onDownloadAllLyrics, onDownloadAllCovers, onDownloadAll, onDownloadSelected, onStopDownload, onOpenFolder, onAlbumClick, onArtistClick, onPageChange, onTrackClick, onBack, }: ArtistInfoProps) {
     const [downloadingHeader, setDownloadingHeader] = useState(false);
     const [downloadingAvatar, setDownloadingAvatar] = useState(false);
     const [downloadingGalleryIndex, setDownloadingGalleryIndex] = useState<number | null>(null);
     const [downloadingAllGallery, setDownloadingAllGallery] = useState(false);
     const [activeTab, setActiveTab] = useState<"albums" | "tracks" | "gallery">("albums");
+
     const filteredAlbumGroups = useMemo(() => {
         const albumTypeMap = new Map(albumList.map(a => [a.name, a.album_type]));
         const albumGroups = trackList.reduce((acc, track) => {
@@ -125,6 +128,7 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
             return dateB.localeCompare(dateA);
         });
     }, [trackList, albumList]);
+
     const handleDownloadHeader = async () => {
         if (!artistInfo.header)
             return;
@@ -155,6 +159,7 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
             setDownloadingHeader(false);
         }
     };
+
     const handleDownloadAvatar = async () => {
         if (!artistInfo.images)
             return;
@@ -185,6 +190,7 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
             setDownloadingAvatar(false);
         }
     };
+
     const handleDownloadGalleryImage = async (imageUrl: string, index: number) => {
         setDownloadingGalleryIndex(index);
         try {
@@ -214,6 +220,7 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
             setDownloadingGalleryIndex(null);
         }
     };
+
     const handleDownloadAllGallery = async () => {
         if (!artistInfo.gallery || artistInfo.gallery.length === 0)
             return;
@@ -270,7 +277,9 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
             setDownloadingAllGallery(false);
         }
     };
+
     const hasGallery = artistInfo.gallery && artistInfo.gallery.length > 0;
+
     return (<div className="space-y-6">
       <Card className="overflow-hidden p-0 relative">
         {artistInfo.header ? (<>
@@ -446,14 +455,49 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
         </div>)}
 
       {activeTab === "albums" && albumList.length > 0 && (<div className="space-y-4">
+          <div className="flex items-center justify-between flex-wrap gap-2">
             <h3 className="text-2xl font-bold">Discography</h3>
+            <div className="flex gap-2">
+                <Button onClick={onDownloadAll} size="sm" disabled={isDownloading}>
+                    {isDownloading && bulkDownloadType === "all" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                    Download Discography
+                </Button>
+                {selectedTracks.length > 0 && (
+                    <Button onClick={onDownloadSelected} size="sm" variant="secondary" disabled={isDownloading}>
+                        {isDownloading && bulkDownloadType === "selected" ? (<Spinner />) : (<Download className="h-4 w-4"/>)}
+                        Download Selected ({selectedTracks.length})
+                    </Button>
+                )}
+            </div>
+          </div>
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-            {albumList.map((album) => (<div key={album.id} className="group cursor-pointer" onClick={() => onAlbumClick({
+            {albumList.map((album) => {
+                // Filter tracks for this specific album to handle selection
+                const albumTracks = trackList.filter(t => t.album_name === album.name);
+                const tracksWithId = albumTracks.filter(t => t.spotify_id);
+                // Check if all tracks in this album are currently selected
+                const isSelected = tracksWithId.length > 0 && tracksWithId.every(t => selectedTracks.includes(t.spotify_id!));
+                const hasTracks = tracksWithId.length > 0;
+
+                return (<div key={album.id} className="group cursor-pointer relative" onClick={() => onAlbumClick({
                     id: album.id,
                     name: album.name,
                     external_urls: album.external_urls,
                 })}>
                 <div className="relative mb-2">
+                  {/* Checkbox for Album Selection */}
+                  {hasTracks && (
+                    <div 
+                        className={`absolute top-2 left-2 z-20 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <Checkbox 
+                            checked={isSelected} 
+                            onCheckedChange={() => onToggleSelectAll(albumTracks)}
+                            className="bg-black/50 border-white/70 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+                        />
+                    </div>
+                  )}
                   {album.images && (<img src={album.images} alt={album.name} className="w-full aspect-square object-cover rounded-md shadow-md transition-shadow group-hover:shadow-xl"/>)}
                   <div className="absolute bottom-2 right-2">
                     <span className="text-[10px] uppercase font-bold px-1.5 py-0.5 rounded bg-black/60 text-white backdrop-blur-[2px]">
@@ -469,7 +513,8 @@ export function ArtistInfo({ artistInfo, albumList, trackList, searchQuery, sort
                             <span>{album.total_tracks} {album.total_tracks === 1 ? "track" : "tracks"}</span>
                         </>)}
                 </div>
-              </div>))}
+              </div>);
+            })}
           </div>
         </div>)}