feat(search): add quality badge to Most Popular album/track cards

- Shows compact QualityBadge (e.g. "24bit/96kHz", "CD Quality")
- Positioned at top-right corner of artwork
- Semi-transparent background with blur for readability
This commit is contained in:
vicrodh committed 2026-02-01 02:59:45 -06:00
1 parent 5e83c1df47
commit 8c9a27afbb
1 file changed
+36
@@ -882,6 +882,15 @@
<Disc3 size={32} />
</div>
{/if}
{#if album.maximum_bit_depth || album.maximum_sampling_rate}
<div class="popular-quality-badge">
<QualityBadge
compact
bitDepth={album.maximum_bit_depth}
samplingRate={album.maximum_sampling_rate}
/>
</div>
{/if}
<div class="popular-card-overlay">
<div class="popular-card-buttons">
<button
@@ -957,6 +966,15 @@
<Music size={32} />
</div>
{/if}
{#if track.maximum_bit_depth || track.maximum_sampling_rate}
<div class="popular-quality-badge">
<QualityBadge
compact
bitDepth={track.maximum_bit_depth}
samplingRate={track.maximum_sampling_rate}
/>
</div>
{/if}
<div class="popular-card-overlay">
<div class="popular-card-buttons">
<button
@@ -2144,6 +2162,24 @@
color: var(--text-muted);
}
.popular-quality-badge {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 2px 6px;
border-radius: 4px;
}
.popular-quality-badge :global(.quality-badge-compact) {
font-size: 10px;
width: auto;
color: rgba(255, 255, 255, 0.9);
}
.popular-card-overlay {
position: absolute;
inset: 0;