Loading your albums...
@@ -3298,7 +3298,7 @@Recent Releases
New music from artists you follow
+
@@ -3313,7 +3313,7 @@
- Seasonal
Seasonal music
+
diff --git a/webui/static/discover.js b/webui/static/discover.js
index 7661dbac..5440e55c 100644
--- a/webui/static/discover.js
+++ b/webui/static/discover.js
@@ -1008,15 +1008,18 @@ let _recentReleasesCtrl = null;
function _renderRecentReleaseCard(album, index) {
const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
+ // Unified Discover card — same .ya-card the Your Artists section uses (full-bleed cover,
+ // gradient, name overlaid), square so the album art isn't cropped. #discover redesign.
return `
-
-
- 
+
+
+
+
-
-
`;
@@ -1043,7 +1046,8 @@ async function loadDiscoverRecentReleases() {
showErrorToast: true,
});
}
- return _recentReleasesCtrl.load();
+ await _recentReleasesCtrl.load();
+ _clampGrid(document.getElementById('recent-releases-carousel'));
}
// ===============================
@@ -1182,22 +1186,19 @@ function _renderYourAlbumsGrid(albums) {
let html = '';
albums.forEach((album, index) => {
const coverUrl = album.image_url || '/static/placeholder-album.png';
- const year = album.release_date ? album.release_date.substring(0, 4) : '';
const badgeClass = album.in_library ? 'owned' : 'missing';
const badgeIcon = album.in_library ? '\u2713' : '\u2193';
- const trackInfo = album.total_tracks ? `${album.total_tracks} tracks` : '';
- const meta = [year, trackInfo].filter(Boolean).join(' \u00B7 ');
- const sources = (album.source_services || []).join(', ');
html += `
- ${album.album_name}
-${album.artist_name}
- + +
+
${_esc(album.album_name)}
+ ${_esc(album.artist_name)}
-
-
-
${badgeIcon}
+
+
+
+
-
-
+
`;
});
@@ -4008,14 +4009,15 @@ async function loadSeasonalContent() {
function _renderSeasonalAlbumCard(album, index) {
const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
return `
- ${escapeHtml(album.album_name)}
-${escapeHtml(album.artist_name)}
- + +${badgeIcon}
+
${_esc(album.album_name)}
+ ${_esc(album.artist_name)}
-
-
+
+
`;
_insertCacheSection('cache-genre-explorer',
- 'Genre Explorer', 'Tap a genre to explore', html, 'top');
+ 'Genre Explorer', 'Tap a genre to explore', html, 'top', false);
} catch (e) { console.debug('Cache genre explorer:', e); }
}
diff --git a/webui/static/style.css b/webui/static/style.css
index 99a1e2d6..9b290b33 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -35095,6 +35095,56 @@ div.artist-hero-badge {
.mix-modal-close:hover { color: #fff; }
.mix-modal-body { overflow-y: auto; padding: 16px 24px 24px; }
+/* ── Unified Discover card grid (#discover redesign) ─────────────────────────
+ One responsive wrapping grid (fills the section width, wraps to rows — no
+ horizontal scroll) holding the same .ya-card the Your Artists section uses, so
+ every album/artist section reads as one design. */
+.discover-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ gap: 16px;
+}
+.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; }
+/* Secondary line under the title (album → artist). */
+.ya-card-sub {
+ font-size: 11px; font-weight: 500;
+ color: rgba(255,255,255,0.72);
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.6);
+ margin-top: 2px;
+}
+/* Owned / missing indicator on album cards (corner badge). */
+.discover-album-badge {
+ width: 20px; height: 20px; border-radius: 50%;
+ display: flex; align-items: center; justify-content: center;
+ font-size: 11px; font-weight: 700;
+ box-shadow: 0 2px 6px rgba(0,0,0,0.45);
+}
+.discover-album-badge.owned { background: #1DB954; color: #000; }
+.discover-album-badge.missing {
+ background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85);
+ border: 1px solid rgba(255,255,255,0.2);
+}
+/* Show all / Show less toggle under a clamped discover-grid. */
+.discover-show-all {
+ margin: 14px auto 0;
+ display: block;
+ background: rgba(255,255,255,0.06);
+ border: 1px solid rgba(255,255,255,0.12);
+ color: rgba(255,255,255,0.85);
+ font-size: 13px; font-weight: 600;
+ padding: 8px 20px; border-radius: 20px;
+ cursor: pointer;
+ transition: background 0.2s, border-color 0.2s, color 0.2s;
+}
+.discover-show-all:hover {
+ background: rgba(var(--accent-rgb),0.15);
+ border-color: rgba(var(--accent-rgb),0.4);
+ color: #fff;
+}
+
/* ── Artist Info Modal ── */
.ya-info-modal {
background: #141420; border-radius: 18px;
+
+
-
-
`;
@@ -4050,7 +4052,8 @@ async function loadSeasonalAlbums(seasonData) {
verboseErrors: true,
showErrorToast: true,
});
- return ctrl.load();
+ await ctrl.load();
+ _clampGrid(document.getElementById('seasonal-albums-carousel'));
}
let _seasonalPlaylistCtrl = null;
@@ -8183,18 +8186,20 @@ function _cacheDiscoverCard(item, type, sectionKey, index) {
const coverUrl = item.image_url || '/static/placeholder-album.png';
const title = item.name || '';
const subtitle = item.artist_name || '';
- const meta = item.release_date ? item.release_date.substring(0, 10) : (item.label || '');
const onclick = `openCacheDiscoverAlbum('${sectionKey}',${index})`;
- const libBadge = item.in_library ? '${album.album_name}
-${album.artist_name}
- ${album.release_date ? `` : ''} + +
+
${_esc(album.album_name)}
+ ${_esc(album.artist_name)}
In Library
' : '';
- return `
-
`).join('')}
- })
- ${libBadge}
+ // Unified Discover album card (#discover redesign) — same .ya-card as Your Artists, square.
+ const libBadge = item.in_library
+ ? '' : '';
+ return `
- ✓
+
+
+
-
-
`;
}
@@ -8339,7 +8344,32 @@ async function openCacheDiscoverAlbum(sectionKey, index) {
}
}
-function _insertCacheSection(id, title, subtitle, html, position) {
+// Cap a wrapping discover-grid to `limit` cards (≈ a couple rows) with a Show all / Show less
+// toggle, so a 30-item section doesn't become a wall (#discover redesign). Idempotent.
+function _clampGrid(gridEl, limit = 12) {
+ if (!gridEl) return;
+ const cards = Array.from(gridEl.children);
+ // tidy any previous toggle so re-renders don't stack buttons
+ if (gridEl.nextElementSibling && gridEl.nextElementSibling.classList.contains('discover-show-all')) {
+ gridEl.nextElementSibling.remove();
+ }
+ if (cards.length <= limit) {
+ cards.forEach(c => { c.style.display = ''; });
+ return;
+ }
+ let expanded = false;
+ const btn = document.createElement('button');
+ btn.className = 'discover-show-all';
+ const apply = () => {
+ cards.forEach((c, i) => { c.style.display = (expanded || i < limit) ? '' : 'none'; });
+ btn.textContent = expanded ? 'Show less' : `Show all ${cards.length}`;
+ };
+ btn.onclick = () => { expanded = !expanded; apply(); };
+ gridEl.after(btn);
+ apply();
+}
+
+function _insertCacheSection(id, title, subtitle, html, position, wrapGrid = true) {
const container = document.getElementById('discover-bylt-sections') || document.querySelector('.discover-container');
if (!container) return;
let section = document.getElementById(id);
@@ -8366,8 +8396,9 @@ function _insertCacheSection(id, title, subtitle, html, position) {
${_esc(title)}
-${_esc(subtitle)}
- ${meta ? `` : ''} + + ${libBadge} +
+
${_esc(title)}
+ ${_esc(subtitle)}
${title}
${html}
+ ${wrapGrid ? `${html}
` : html}
`;
+ if (wrapGrid) _clampGrid(section.querySelector('.discover-grid'));
}
async function loadCacheUndiscoveredAlbums() {
@@ -8437,7 +8468,7 @@ async function loadCacheGenreExplorer() {