From 251d2c587cad16e2464851b1958203c41e994fb4 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Mon, 24 Aug 2026 19:04:41 +0200 Subject: feat(hub): big monochrome disc placeholder for covers with no art Album tiles/detail covers with no embedded art, no sibling image file, and no MusicBrainz match (or MusicBrainz off) used the same small music-note icon list rows use elsewhere - fine as a rare fallback, but most tiles in a real library land here, so it read as broken rather than as the default look of the grid. - icon.js: a "disc" icon (two concentric circles, same stroked style as the rest of the set) - a plain CD/vinyl glyph. - music-app.js: AlbumCard and MusicDetailModal's cover now pass emptyIcon="disc" instead of "music". - style.css: sized at 55% of the tile via CSS rather than a fixed px value, so it scales with .music-grid's auto-fill columns; color stays var(--text-dim), the same neutral tone every other empty state already uses - monochrome, not a new accent. Client-side only. npm run sync-ui re-run. Full suite: 1129 passed, no regressions. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy --- packages/meshbay-hub/src/meshbay_hub/static/style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index b4e4089..6c3c0f6 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -2727,6 +2727,16 @@ a.transfer-name { background: var(--bg-surface); } .music-cover.video-thumb-empty { aspect-ratio: 1 / 1; } +/* A big, plain disc rather than the small note icon shared with list rows — + most tiles land here (few files carry embedded/sibling art), so this is + the default look of the grid, not a rare fallback; it needs to read as + deliberate, not broken. Sized relative to the tile so it scales with + .music-grid's auto-fill columns instead of one fixed px value. */ +.music-cover.video-thumb-empty .icon { + width: 55%; + height: 55%; + color: var(--text-dim); +} .music-card-info { padding: 8px 10px; } .music-card-title { @@ -2782,6 +2792,11 @@ a.transfer-name { flex-shrink: 0; background: var(--bg-raised); } +.music-detail-cover.video-thumb-empty .icon { + width: 55%; + height: 55%; + color: var(--text-dim); +} .music-detail-meta { min-width: 0; } .music-detail-artist { font-weight: 600; font-size: 0.95em; } .music-detail-date { font-size: 0.8em; color: var(--text-dim); margin: 2px 0 8px; } -- cgit v1.2.3