summaryrefslogtreecommitdiffstats
path: root/packages/meshbay-hub/src
diff options
context:
space:
mode:
authorChristophe Besson <cbesson@gmail.com>2026-08-24 19:04:41 +0200
committerChristophe Besson <cbesson@gmail.com>2026-08-24 19:04:41 +0200
commit251d2c587cad16e2464851b1958203c41e994fb4 (patch)
treefcc891644b36ecf34313265b89997bf9156c8f16 /packages/meshbay-hub/src
parent6a52ab1136be3395bac3b9146474d8cd05b376c1 (diff)
downloadmeshbay-251d2c587cad16e2464851b1958203c41e994fb4.tar.gz
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 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KBi7ALLGfwcjBXt57yNMcy
Diffstat (limited to 'packages/meshbay-hub/src')
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/icon.js2
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/music-app.js4
-rw-r--r--packages/meshbay-hub/src/meshbay_hub/static/style.css15
3 files changed, 19 insertions, 2 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/icon.js b/packages/meshbay-hub/src/meshbay_hub/static/icon.js
index 0ecbd70..87b56ee 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/icon.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/icon.js
@@ -74,6 +74,8 @@ const ICON_PATHS = {
music: ['M9 18V5l12-2v13',
'M4 18a2 2 0 1 0 4 0 2 2 0 1 0 -4 0',
'M16 16a2 2 0 1 0 4 0 2 2 0 1 0 -4 0'],
+ disc: ['M3 12a9 9 0 1 0 18 0 9 9 0 1 0 -18 0',
+ 'M9 12a3 3 0 1 0 6 0 3 3 0 1 0 -6 0'],
pause: ['M7 5.5v13', 'M17 5.5v13'],
'skip-next': ['M5 4l10 8-10 8z', 'M19 5v14'],
'skip-prev': ['M19 4L9 12l10 8z', 'M5 5v14'],
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
index 77023b3..b8ee657 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
@@ -123,7 +123,7 @@ function AlbumCard({ album, transportRef, gekRef, musicbrainzEnabled, onOpen })
return html`
<div class="music-card" onClick=${onOpen}>
<${MediaThumb} thumbHash=${coverHash} alt=${album.album}
- cls="music-cover" emptyIcon="music"
+ cls="music-cover" emptyIcon="disc"
transportRef=${transportRef} gekRef=${gekRef} />
<div class="music-card-info">
<div class="music-card-title">${album.album}</div>
@@ -154,7 +154,7 @@ function MusicDetailModal({ album, transportRef, gekRef, musicbrainzEnabled, onC
<div class="music-detail-body">
<div class="music-detail-header">
<${MediaThumb} thumbHash=${coverHash} alt=${album.album}
- cls="music-detail-cover" emptyIcon="music"
+ cls="music-detail-cover" emptyIcon="disc"
transportRef=${transportRef} gekRef=${gekRef} />
<div class="music-detail-meta">
<div class="music-detail-artist">${album.artist}</div>
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; }