update

app/templates/index.html

@@ -34,6 +34,19 @@
         </div>
     </div>
 
+    <!-- Album Selection Modal -->
+    <div id="album-modal" class="modal">
+        <div class="modal-content">
+            <h3 id="modal-artist-name">Albums</h3>
+            <div id="album-grid" class="album-grid"></div>
+            <div class="modal-buttons">
+                <button onclick="downloadSelectedAlbums()" style="background-color: #1db954;">Download Selected</button>
+                <button onclick="downloadAllAlbums()" style="background-color: #0d7a3a;">Download All</button>
+                <button onclick="closeAlbumModal()" style="background-color: #666;">Close</button>
+            </div>
+        </div>
+    </div>
+
     <div class="container">
         <div class="card" style="margin-top: 20px; text-align: center; color: #888;">
             <small>System IP: <span id="system-ip">Loading...</span></small>
@@ -124,13 +137,19 @@
         function createResultItem(item) {
             const div = document.createElement('div');
             div.className = 'result-item';
+
+            // For artists, show album selection modal instead of direct download
+            const buttonHtml = item.type === 'artist'
+                ? `<button onclick="showArtistAlbums('${item.id}', '${item.title.replace(/'/g, "\\'")}')">View Albums</button>`
+                : `<button onclick="download('${item.type}', '${item.id}')">Download</button>`;
+
             div.innerHTML = `
                 <img src="${item.cover || '/static/placeholder.png'}" alt="Cover">
                 <div class="result-info">
                     <strong>${item.title}</strong><br>
                     ${item.artist ? item.artist + ' - ' : ''}${item.album || ''}
                 </div>
-                <button onclick="download('${item.type}', '${item.id}')">Download</button>
+                ${buttonHtml}
             `;
             return div;
         }
@@ -189,6 +208,100 @@
             updateQueue();
         }
 
+        // Album Selection Modal Functions
+        let currentAlbums = [];
+        let selectedAlbumIds = new Set();
+
+        async function showArtistAlbums(artistId, artistName) {
+            try {
+                const response = await fetch(`/search/artist/${artistId}/albums`);
+                currentAlbums = await response.json();
+
+                document.getElementById('modal-artist-name').textContent = `Albums by ${artistName}`;
+
+                const grid = document.getElementById('album-grid');
+                grid.innerHTML = '';
+                selectedAlbumIds.clear();
+
+                if (currentAlbums.length === 0) {
+                    grid.innerHTML = '<p>No albums found.</p>';
+                } else {
+                    currentAlbums.forEach(album => {
+                        const albumDiv = document.createElement('div');
+                        albumDiv.className = 'album-item';
+                        albumDiv.dataset.albumId = album.id;
+                        albumDiv.onclick = () => toggleAlbumSelection(album.id);
+
+                        albumDiv.innerHTML = `
+                            <img src="${album.cover || '/static/placeholder.png'}" alt="${album.title}">
+                            <div class="album-item-info">
+                                <strong>${album.title}</strong>
+                                <small>${album.tracks} tracks • ${album.release_date}</small>
+                            </div>
+                        `;
+
+                        grid.appendChild(albumDiv);
+                    });
+                }
+
+                document.getElementById('album-modal').style.display = 'block';
+            } catch (e) {
+                alert('Failed to load albums: ' + e.message);
+            }
+        }
+
+        function toggleAlbumSelection(albumId) {
+            const albumDiv = document.querySelector(`[data-album-id="${albumId}"]`);
+
+            if (selectedAlbumIds.has(albumId)) {
+                selectedAlbumIds.delete(albumId);
+                albumDiv.classList.remove('selected');
+            } else {
+                selectedAlbumIds.add(albumId);
+                albumDiv.classList.add('selected');
+            }
+        }
+
+        async function downloadSelectedAlbums() {
+            if (selectedAlbumIds.size === 0) {
+                alert('Please select at least one album to download.');
+                return;
+            }
+
+            for (const albumId of selectedAlbumIds) {
+                await download('album', albumId);
+            }
+
+            closeAlbumModal();
+        }
+
+        async function downloadAllAlbums() {
+            if (currentAlbums.length === 0) {
+                alert('No albums to download.');
+                return;
+            }
+
+            for (const album of currentAlbums) {
+                await download('album', album.id);
+            }
+
+            closeAlbumModal();
+        }
+
+        function closeAlbumModal() {
+            document.getElementById('album-modal').style.display = 'none';
+            selectedAlbumIds.clear();
+            currentAlbums = [];
+        }
+
+        // Close modal when clicking outside
+        window.onclick = function (event) {
+            const modal = document.getElementById('album-modal');
+            if (event.target === modal) {
+                closeAlbumModal();
+            }
+        }
+
         // Poll queue
         setInterval(updateQueue, 2000);
         updateQueue();