danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

add all recommended to watchlist.

Browse source
This commit is contained in:
Broque Thomas 2026-03-02 09:24:37 -08:00
parent 1f73ba4f94
commit b558dff138
3 changed files with 105 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
webui/static/mobile.css
View file

@ -939,8 +939,15 @@
padding: 12px 16px;
}
.recommended-search-container {
padding: 0 16px;
.recommended-actions-bar {
padding: 12px 16px 0;
flex-wrap: wrap;
}
.recommended-add-all-btn {
width: 100%;
text-align: center;
padding: 10px;
}
.recommended-card-watchlist-btn {

62
webui/static/script.js
View file

@ -33742,12 +33742,18 @@ function renderRecommendedArtistsModal(modal, artists) {
<span class="playlist-modal-close" onclick="closeRecommendedArtistsModal()">&times;</span>
</div>
<div class="playlist-modal-body">
<div class="recommended-search-container">
<input type="text"
class="recommended-search-input"
id="recommended-search-input"
placeholder="Search recommended artists..."
oninput="filterRecommendedArtists()">
<div class="recommended-actions-bar">
<div class="recommended-search-container">
<input type="text"
class="recommended-search-input"
id="recommended-search-input"
placeholder="Search recommended artists..."
oninput="filterRecommendedArtists()">
</div>
<button class="recommended-add-all-btn" id="recommended-add-all-btn"
onclick="addAllRecommendedToWatchlist(this)">
Add All to Watchlist
</button>
</div>
<div class="recommended-artists-grid" id="recommended-artists-grid">
${artists.map(artist => {
@ -33811,6 +33817,50 @@ function renderRecommendedArtistsModal(modal, artists) {
}
}
async function addAllRecommendedToWatchlist(btn) {
if (!_recommendedArtistsCache || _recommendedArtistsCache.length === 0) return;
if (btn.classList.contains('all-added')) return;
const originalText = btn.textContent;
btn.disabled = true;
btn.textContent = 'Adding...';
try {
const artists = _recommendedArtistsCache.map(a => ({
artist_id: a.artist_id,
artist_name: a.artist_name
}));
const resp = await fetch('/api/watchlist/add-batch', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ artists })
});
const data = await resp.json();
if (data.success) {
btn.textContent = `All Added (${data.added} new)`;
btn.classList.add('all-added');
btn.disabled = true;
// Update all watchlist buttons in the modal to "Watching"
document.querySelectorAll('.recommended-card-watchlist-btn').forEach(wBtn => {
wBtn.classList.add('watching');
wBtn.textContent = 'Watching';
});
if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
} else {
btn.textContent = originalText;
btn.disabled = false;
}
} catch (error) {
console.error('Error adding all recommended to watchlist:', error);
btn.textContent = originalText;
btn.disabled = false;
}
}
function closeRecommendedArtistsModal() {
const modal = document.getElementById('recommended-artists-modal');
if (modal) modal.style.display = 'none';

42
webui/static/style.css
View file

@ -20352,11 +20352,49 @@ body {
opacity: 1;
}
.recommended-search-container {
padding: 0 28px;
.recommended-actions-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 28px 0;
margin-bottom: 12px;
}
.recommended-search-container {
flex: 1;
}
.recommended-add-all-btn {
flex-shrink: 0;
padding: 10px 20px;
border-radius: 10px;
border: 1px solid rgba(var(--accent-rgb), 0.3);
background: rgba(var(--accent-rgb), 0.1);
color: rgb(var(--accent-rgb));
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease;
}
.recommended-add-all-btn:hover {
background: rgba(var(--accent-rgb), 0.2);
border-color: rgba(var(--accent-rgb), 0.5);
}
.recommended-add-all-btn:disabled {
opacity: 0.5;
cursor: default;
}
.recommended-add-all-btn.all-added {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.2);
opacity: 0.7;
cursor: default;
}
.recommended-search-input {
width: 100%;
padding: 10px 16px;