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

Add watchlist settings gear button to artist detail and artist card pages

Browse source
This commit is contained in:
Broque Thomas 2026-03-13 22:07:54 -07:00
parent e5a6ac7821
commit 0e89155c15
3 changed files with 129 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
webui/index.html
View file

@ -2177,10 +2177,15 @@
</div>
</div>
<button class="artist-detail-watchlist-btn" id="artist-detail-watchlist-btn">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
<div class="artist-detail-watchlist-group">
<button class="artist-detail-watchlist-btn" id="artist-detail-watchlist-btn">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
<button class="artist-detail-watchlist-settings-btn hidden" id="artist-detail-watchlist-settings-btn" title="Watchlist Settings">
&#9881;
</button>
</div>
</div>
<div class="artist-detail-content">

54
webui/static/script.js
View file

@ -27925,10 +27925,13 @@ function createArtistCardHTML(artist) {
<span>${popularityText}</span>
</div>
<div class="artist-card-actions">
<button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
<div class="watchlist-btn-group">
<button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
<span class="watchlist-icon">👁️</span>
<span class="watchlist-text">Add to Watchlist</span>
</button>
<button class="watchlist-settings-btn hidden" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="event.stopPropagation(); openWatchlistArtistConfigModal('${artist.id}', '${escapeForInlineJs(artist.name)}')" title="Watchlist Settings">&#9881;</button>
</div>
</div>
</div>
</div>
@ -29079,6 +29082,10 @@ async function initializeArtistDetailWatchlistButton(artist) {
console.log(`🔧 Initializing watchlist button for artist: ${artist.name} (${artist.id})`);
// Store artist info on the button for settings gear access
button.dataset.artistId = artist.id;
button.dataset.artistName = artist.name;
// Reset button state completely
button.disabled = false;
button.classList.remove('watching');
@ -29092,7 +29099,7 @@ async function initializeArtistDetailWatchlistButton(artist) {
button.onclick = (event) => toggleArtistDetailWatchlist(event, artist.id, artist.name);
// Check and update current status
await updateArtistDetailWatchlistButton(artist.id);
await updateArtistDetailWatchlistButton(artist.id, artist.name);
}
/**
@ -29157,6 +29164,20 @@ async function toggleArtistDetailWatchlist(event, artistId, artistName) {
console.log(`✅ Added ${artistName} to watchlist`);
}
// Show/hide watchlist settings gear
const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
if (settingsBtn) {
if (!isWatching) {
// Just added to watchlist — show gear
settingsBtn.classList.remove('hidden');
settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, artistName);
} else {
// Just removed from watchlist — hide gear
settingsBtn.classList.add('hidden');
settingsBtn.onclick = null;
}
}
// Update dashboard watchlist count
updateWatchlistButtonCount();
@ -29181,13 +29202,16 @@ async function toggleArtistDetailWatchlist(event, artistId, artistName) {
/**
* Update artist detail watchlist button status
*/
async function updateArtistDetailWatchlistButton(artistId) {
async function updateArtistDetailWatchlistButton(artistId, artistName) {
const button = document.getElementById('artist-detail-watchlist-btn');
if (!button) {
console.warn('⚠️ Artist detail watchlist button not found');
return;
}
// Use passed name or fall back to stored data attribute
const name = artistName || button.dataset.artistName || '';
try {
console.log(`🔍 Checking watchlist status for artist: ${artistId}`);
@ -29207,6 +29231,18 @@ async function updateArtistDetailWatchlistButton(artistId) {
// Ensure button is enabled
button.disabled = false;
// Show/hide watchlist settings gear
const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
if (settingsBtn) {
if (data.is_watching) {
settingsBtn.classList.remove('hidden');
settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, name);
} else {
settingsBtn.classList.add('hidden');
settingsBtn.onclick = null;
}
}
if (data.is_watching) {
icon.textContent = '👁️';
text.textContent = 'Remove from Watchlist';
@ -31591,17 +31627,20 @@ async function toggleWatchlist(event, artistId, artistName) {
}
// Update button appearance
const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
if (isWatching) {
// Was watching, now removed
icon.textContent = '👁️';
text.textContent = 'Add to Watchlist';
button.classList.remove('watching');
if (gearBtn) gearBtn.classList.add('hidden');
console.log(`❌ Removed ${artistName} from watchlist`);
} else {
// Was not watching, now added
icon.textContent = '👁️';
text.textContent = 'Watching...';
button.classList.add('watching');
if (gearBtn) gearBtn.classList.remove('hidden');
console.log(`✅ Added ${artistName} to watchlist`);
}
@ -31679,14 +31718,17 @@ async function updateArtistCardWatchlistStatus() {
const icon = button.querySelector('.watchlist-icon');
const text = button.querySelector('.watchlist-text');
const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
if (data.results[artistId]) {
if (icon) icon.textContent = '👁️';
if (text) text.textContent = 'Watching...';
button.classList.add('watching');
if (gearBtn) gearBtn.classList.remove('hidden');
} else {
if (icon) icon.textContent = '👁️';
if (text) text.textContent = 'Add to Watchlist';
button.classList.remove('watching');
if (gearBtn) gearBtn.classList.add('hidden');
}
}
}

72
webui/static/style.css
View file

@ -4311,6 +4311,11 @@ body {
}
/* Confirm Dialog Modal */
/* Confirm dialog must sit above all other modals (playlist, download, etc.) */
#confirm-modal-overlay {
z-index: 11000;
}
.confirm-modal {
background: linear-gradient(135deg, #1a1a1a 0%, #121212 100%);
border-radius: 20px;
@ -15386,6 +15391,73 @@ body {
transform: none;
}
/* Artist Detail Watchlist Button Group (with settings gear) */
.artist-detail-watchlist-group {
display: flex;
align-items: center;
gap: 6px;
}
.artist-detail-watchlist-settings-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
font-size: 18px;
color: #aaa;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
}
.artist-detail-watchlist-settings-btn:hover {
background: rgba(255, 193, 7, 0.15);
color: #ffc107;
border-color: rgba(255, 193, 7, 0.3);
transform: translateY(-1px);
}
/* Artist Card Watchlist Button Group (artists/discover page) */
.watchlist-btn-group {
display: flex;
align-items: center;
gap: 6px;
}
.watchlist-btn-group .watchlist-toggle-btn {
flex: 1;
}
.watchlist-settings-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
font-size: 16px;
color: #aaa;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
outline: none;
flex-shrink: 0;
}
.watchlist-settings-btn:hover {
background: rgba(255, 193, 7, 0.15);
color: #ffc107;
border-color: rgba(255, 193, 7, 0.3);
transform: translateY(-1px);
}
/* Library Artist Watchlist Button */
.library-artist-watchlist-btn {