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

Fix LB Sync tab card data shape + tone down styling

Browse source 
Two bugs from the initial LB tab commit (a7053a60):

1. **All cards showed identical "ListenBrainz Playlist / 0 tracks"
   defaults.** The /api/discover/listenbrainz/* endpoints wrap each
   entry in JSPF shape — ``{playlist: {identifier, title, creator,
   annotation, track}}`` — but renderListenBrainzSyncPlaylists was
   reading ``p.title`` / ``p.creator`` / ``p.track_count`` directly,
   so every field hit its fallback. Now unwraps the inner playlist
   object, extracts the MBID from the identifier URL via
   ``.split('/').pop()`` (matches buildListenBrainzPlaylistsHtml on
   the Discover page), and reads track_count from
   ``annotation.track_count`` with a fallback to ``track.length``.

2. **The tab looked too orange.** The initial commit gave the
   sub-tabs a saturated orange surface that clashed with the rest
   of the app, and the new ``.listenbrainz-playlist-card`` class
   wasn't in the unified ``.youtube-playlist-card,
   .tidal-playlist-card, ...`` selector group — so the card lost
   its dark glass base and inherited only my override CSS. Two
   fixes:

   - Added ``.listenbrainz-playlist-card`` to the unified card
     selector group (base + ::before + hover + hover::before + icon)
     so it picks up the dark glass background. The brand accent
     stripe + hover glow use ``rgba(235, 116, 59, ...)`` matching
     the other source cards' subtle accent pattern.
   - Sub-tabs reverted to a neutral dark surface (``rgba(255,
     255, 255, 0.04)``) with the orange used only as a thin
     accent on the active state's border + inset shadow.
   - Dropped the ``.refresh-button.listenbrainz`` override so the
     refresh button falls back to the user's chosen accent like
     the Spotify / Qobuz refresh buttons do.
This commit is contained in:
Broque Thomas 2026-05-26 14:25:01 -07:00
parent a7053a6061
commit df31d42b94
2 changed files with 33 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
webui/static/style.css
View file

@ -13272,7 +13272,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1 13.5v-9l6 4.5-6 4.5z"/></svg>');
}
/* ListenBrainz Sync tab sub-tabs (For You / My Playlists / Collaborative) */
/* ListenBrainz Sync tab sub-tabs (For You / My Playlists / Collaborative).
* Neutral dark surface; orange used only as a subtle accent on the
* active state — matches the rest of the app's tone. */
.listenbrainz-sub-tabs {
display: inline-flex;
gap: 6px;
@ -13280,9 +13282,9 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.listenbrainz-sub-tab-btn {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
@ -13291,24 +13293,15 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.listenbrainz-sub-tab-btn:hover {
background: rgba(235, 116, 59, 0.15);
background: rgba(255, 255, 255, 0.07);
color: #fff;
border-color: rgba(235, 116, 59, 0.4);
}
.listenbrainz-sub-tab-btn.active {
background: rgba(235, 116, 59, 0.25);
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: rgba(235, 116, 59, 0.6);
}
.refresh-button.listenbrainz {
background: rgba(235, 116, 59, 0.15);
border: 1px solid rgba(235, 116, 59, 0.4);
color: #fff;
}
.refresh-button.listenbrainz:hover {
background: rgba(235, 116, 59, 0.3);
border-color: rgba(235, 116, 59, 0.45);
box-shadow: 0 0 0 1px rgba(235, 116, 59, 0.15) inset;
}
.itunes-icon {
@ -17542,7 +17535,8 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.youtube-playlist-card,
.tidal-playlist-card,
.deezer-playlist-card,
.spotify-public-card {
.spotify-public-card,
.listenbrainz-playlist-card {
background: rgba(18, 18, 22, 0.9);
backdrop-filter: blur(12px);
border-radius: 16px;
@ -17563,7 +17557,8 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.youtube-playlist-card::before,
.tidal-playlist-card::before,
.deezer-playlist-card::before,
.spotify-public-card::before {
.spotify-public-card::before,
.listenbrainz-playlist-card::before {
content: '';
position: absolute;
top: 0;
@ -17578,23 +17573,27 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.tidal-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.4), transparent); }
.deezer-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.4), transparent); }
.spotify-public-card::before { background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.4), transparent); }
.listenbrainz-playlist-card::before { background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.4), transparent); }
/* Hover — brand glow */
.youtube-playlist-card:hover { border-color: rgba(255, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 0, 0, 0.06); transform: translateY(-2px); }
.tidal-playlist-card:hover { border-color: rgba(255, 102, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 102, 0, 0.06); transform: translateY(-2px); }
.deezer-playlist-card:hover { border-color: rgba(162, 56, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(162, 56, 255, 0.06); transform: translateY(-2px); }
.spotify-public-card:hover { border-color: rgba(29, 185, 84, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(29, 185, 84, 0.06); transform: translateY(-2px); }
.listenbrainz-playlist-card:hover { border-color: rgba(235, 116, 59, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 16px rgba(235, 116, 59, 0.06); transform: translateY(-2px); }
.youtube-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 0, 0, 0.7), transparent); }
.tidal-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(255, 102, 0, 0.7), transparent); }
.deezer-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(162, 56, 255, 0.7), transparent); }
.spotify-public-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(29, 185, 84, 0.7), transparent); }
.listenbrainz-playlist-card:hover::before { left: 10%; right: 10%; background: linear-gradient(90deg, transparent, rgba(235, 116, 59, 0.7), transparent); }
/* Source icons */
.youtube-playlist-card .playlist-card-icon,
.tidal-playlist-card .playlist-card-icon,
.deezer-playlist-card .playlist-card-icon,
.spotify-public-card .playlist-card-icon {
.spotify-public-card .playlist-card-icon,
.listenbrainz-playlist-card .playlist-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;

18
webui/static/sync-listenbrainz.js
View file

@ -87,10 +87,20 @@ function renderListenBrainzSyncPlaylists() {
}
container.innerHTML = playlists.map(p => {
const mbid = p.playlist_mbid || p.id;
const title = p.title || p.name || 'ListenBrainz Playlist';
const creator = p.creator || 'ListenBrainz';
const count = p.track_count || 0;
// The Discover-page endpoints wrap each entry in JSPF shape:
// { playlist: { identifier: 'https://.../<mbid>', title, creator,
// annotation: {track_count}, track: [...] } }
// Pull out the inner playlist object + extract the mbid from the URL.
const inner = p.playlist || p;
const mbid = (inner.identifier || '').split('/').pop() || inner.id || '';
const title = inner.title || inner.name || 'ListenBrainz Playlist';
const creator = inner.creator || 'ListenBrainz';
let count = 0;
if (inner.annotation && inner.annotation.track_count) {
count = inner.annotation.track_count;
} else if (Array.isArray(inner.track) && inner.track.length > 0) {
count = inner.track.length;
}
// Reuse listenbrainzPlaylistStates so the modal state survives
// tab switches (matches Discover-page behavior).
const state = (typeof listenbrainzPlaylistStates !== 'undefined'