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

discover: convert the last stragglers (bylt + genre tiles) to .ya-card

Browse source 
Because You Listen To rows now render .ya-card grids (with the Show-all clamp) instead of the old
discover-card carousels. The genre-browser tiles (_renderGenreCard) are converted too for consistency
— that loader is currently dead code (loadGenreBrowser is never called; only the tabbed Browse-by-Genre
modal runs), so this just future-proofs it. With this, no discover-card markup remains in discover.js
— the whole Discover page is one card language (.ya-card + the mix cards), leaving only the Genre
Explorer pills + Artist Map as the intentional splash elements.

64 script-integrity tests green.
This commit is contained in:
BoulderBadgeDad 2026-06-29 14:39:28 -07:00
parent bf8e8beeb7
commit 880ad74a0a
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
webui/static/discover.js
View file

@ -1942,15 +1942,14 @@ let genreTracks = [];
function _renderGenreCard(genre) {
const icon = getGenreIcon(genre.name);
const displayName = capitalizeGenre(genre.name);
// Genres have no cover art — a gradient .ya-card with the emoji, so they match the grid. #discover redesign
return `
<div class="discover-card genre-card-modern" onclick="openGenrePlaylist('${escapeForInlineJs(genre.name)}')">
<div class="discover-card-image genre-card-image">
<div class="genre-icon-large">${icon}</div>
</div>
<div class="discover-card-info">
<h4 class="discover-card-title">${displayName}</h4>
<p class="discover-card-subtitle">${genre.track_count} tracks</p>
<p class="discover-card-meta">Curated</p>
<div class="ya-card discover-genre-card" onclick="openGenrePlaylist('${escapeForInlineJs(genre.name)}')">
<div class="ya-card-img genre-card-art"><div class="genre-icon-large">${icon}</div></div>
<div class="ya-card-gradient"></div>
<div class="ya-card-info">
<div class="ya-card-name">${displayName}</div>
<div class="ya-card-sub">${genre.track_count} tracks</div>
</div>
</div>
`;
@ -8114,19 +8113,26 @@ function _renderByltSection(section, idx) {
</div>
</div>
</div>
<div class="discover-carousel" id="bylt-carousel-${idx}"></div>
<div class="discover-grid" id="bylt-carousel-${idx}"></div>
</div>
`;
}
function _renderByltTrackCard(t) {
const img = t.image_url
? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
: '';
return `
<div class="discover-card">
<div class="discover-card-image">
${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.src='/static/placeholder-album.png'">` : '<div class="discover-card-placeholder">🎵</div>'}
<div class="ya-card discover-album-card">
<div class="ya-card-img">
${img}
<div class="ya-card-placeholder" style="display:${t.image_url ? 'none' : 'flex'}">&#9835;</div>
</div>
<div class="ya-card-gradient"></div>
<div class="ya-card-info">
<div class="ya-card-name">${_esc(t.name)}</div>
<div class="ya-card-sub">${_esc(t.artist)}</div>
</div>
<div class="discover-card-title">${_esc(t.name)}</div>
<div class="discover-card-artist">${_esc(t.artist)}</div>
</div>
`;
}
@ -8169,6 +8175,7 @@ async function loadBecauseYouListenTo() {
const carousel = document.getElementById(`bylt-carousel-${idx}`);
if (!carousel) return;
carousel.innerHTML = section.tracks.map(t => _renderByltTrackCard(t)).join('');
_clampGrid(carousel);
});
},
});

7
webui/static/style.css
View file

@ -35107,6 +35107,13 @@ div.artist-hero-badge {
.discover-grid .ya-card { width: 100%; }
/* Albums are square, so don't crop the cover with the artist card's 0.85 portrait ratio. */
.discover-grid .discover-album-card.ya-card { aspect-ratio: 1; }
/* Genre cards: no cover art — square gradient tile with the genre emoji centered. */
.discover-grid .discover-genre-card.ya-card { aspect-ratio: 1; }
.discover-genre-card .genre-card-art {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.38), rgba(var(--accent-rgb),0.07));
}
.discover-genre-card .genre-icon-large { font-size: 46px; line-height: 1; }
/* Secondary line under the title (album → artist). */
.ya-card-sub {
font-size: 11px; font-weight: 500;