feat(taste): bold taste-card redesign + compact pill download button (#383)

* feat(taste): bold taste-card redesign + compact pill download button

Redesign the shareable taste fingerprint card (api/taste_card.py) and the
"Download Taste Card" button.

Card (api/taste_card.py):
- Larger, social-share aspect (1200x630).
- Gradient header band with the title and an obscurity ring/gauge.
- Ranked accent bars for top genres and top labels (length proportional to
  count; count shown). render_taste_card now takes (name, count) tuples.
- Taste drift rendered as a sparkline with year labels and per-point genre
  tooltips, plus a "Now: <genre>" caption.
- discogsography wordmark.
- Graceful empty states; all user strings escaped (XSS-safe).

Router (api/routers/taste.py): pass genre/label counts through to the card.

Button (.taste-download-btn): compact centered gradient pill with hover lift +
glow and an active/disabled state, replacing the flat full-width bar.

Tests updated for the new signature, ring, sparkline, branding, and drift XSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(taste): obscurity as a mainstream→obscure scale (card + Explore strip)

Replace the bare obscurity percentage with a labeled gradient scale and a
glowing marker, shown identically on the taste card and the Explore taste
strip. Tiers (inclusive upper bound): Mainstream / Eclectic / Obscure /
Deep Cuts at 0 / 0.25 / 0.5 / 0.75, with the percentage shown.

- api/taste_card.py: swap the obscurity ring for a full-width gradient track
  (sky→indigo→purple→rose) with a glowing marker at the score, tier+% caption,
  and Mainstream/Obscure endpoint labels; reflow the card around it.
- explore/static/js/user-panes.js: new _obscurityScale / _obscurityTier render
  the same component in the strip (replacing the plain 0.00 stat).
- explore/static/css/styles.css: .taste-obscurity{,-track,-marker,-ends} styles.
- Tests: updated card + strip tests for the tier/percentage/marker output.

Tier thresholds are duplicated in Python and JS and annotated to stay in sync.

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: SimplicityGuy

api/routers/taste.py

@@ -172,12 +172,12 @@ async def taste_card(
     for c in cells:
         g = c["genre"]
         genre_counts[g] = genre_counts.get(g, 0) + c.get("count", 1)
-    top_genres = sorted(genre_counts, key=genre_counts.get, reverse=True)[:5]  # type: ignore[arg-type]
+    top_genres = sorted(genre_counts.items(), key=lambda kv: kv[1], reverse=True)[:5]
     svg = render_taste_card(
         peak_decade=_peak_decade(cells),
         obscurity_score=obscurity_result["score"],
         top_genres=top_genres,
-        top_labels=[lb["label"] for lb in labels_result],
+        top_labels=[(lb["label"], lb["count"]) for lb in labels_result],
         drift=[TasteDriftYear(**d) for d in drift_result],
     )
     return Response(content=svg, media_type="image/svg+xml", headers={"Cache-Control": "no-store"})

api/taste_card.py

@@ -1,6 +1,7 @@
 """SVG taste card generator.
 
-Produces a 600x400 SVG summarising a user's taste fingerprint.
+Produces a 1200x630 (social-share aspect) SVG summarising a user's taste
+fingerprint: an obscurity scale, ranked genre/label bars, and a drift sparkline.
 All user-supplied strings are escaped via ``html.escape`` to prevent XSS.
 """
 
@@ -9,56 +10,175 @@
 from api.models import TasteDriftYear
 
 
+# Card geometry
+_W = 1200
+_H = 630
+
+# Palette (purple/violet on deep navy)
+_BG_TOP = "#1c1c2e"
+_BG_BOTTOM = "#101019"
+_HDR_FROM = "#7c3aed"
+_HDR_TO = "#a855f7"
+_ACCENT_FROM = "#6c5ce7"
+_ACCENT_TO = "#a855f7"
+_TEXT = "#f5f5fa"
+_MUTED = "#8b8ba7"
+_FAINT = "#6b6b85"
+
+# Obscurity tiers (mainstream -> obscure). Boundary is inclusive on the upper
+# tier (``score >= threshold``), matching the project's tier convention.
+# Keep in sync with the Explore strip (explore/static/js/user-panes.js).
+_OBSCURITY_TIERS = [
+    (0.75, "Deep Cuts", "#f43f5e"),
+    (0.50, "Obscure", "#a855f7"),
+    (0.25, "Eclectic", "#818cf8"),
+    (0.0, "Mainstream", "#38bdf8"),
+]
+
+
+def _esc(value: str) -> str:
+    return html.escape(value)
+
+
+def _obscurity_tier(score: float) -> tuple[str, str]:
+    """Return the (name, color) tier for an obscurity score in [0, 1]."""
+    for threshold, name, color in _OBSCURITY_TIERS:
+        if score >= threshold:
+            return name, color
+    return _OBSCURITY_TIERS[-1][1], _OBSCURITY_TIERS[-1][2]
+
+
+def _obscurity_scale(score: float, x: int, y: int, w: int) -> str:
+    """A mainstream->obscure gradient track with a glowing marker at ``score``."""
+    s = max(0.0, min(1.0, score))
+    name, color = _obscurity_tier(s)
+    pct = f"{score:.0%}"
+    mx = x + s * w
+    track_y = y + 15
+    h = 12
+    dot_cy = track_y + h / 2
+    return "\n  ".join(
+        [
+            f'<text x="{x}" y="{y}" font-size="16" font-weight="bold" fill="{_MUTED}" letter-spacing="2">OBSCURITY</text>',
+            f'<text x="{x + w}" y="{y}" font-size="18" font-weight="bold" fill="{color}" text-anchor="end">{_esc(name)} · {pct}</text>',
+            f'<rect x="{x}" y="{track_y}" width="{w}" height="{h}" rx="6" fill="url(#obscGrad)"/>',
+            f'<circle cx="{mx:.1f}" cy="{dot_cy:.1f}" r="16" fill="{color}" opacity="0.35"/>',
+            f'<circle cx="{mx:.1f}" cy="{dot_cy:.1f}" r="9" fill="#fff" stroke="{color}" stroke-width="3"/>',
+            f'<text x="{x}" y="{track_y + h + 22}" font-size="13" fill="{_FAINT}">Mainstream</text>',
+            f'<text x="{x + w}" y="{track_y + h + 22}" font-size="13" fill="{_FAINT}" text-anchor="end">Obscure</text>',
+        ]
+    )
+
+
+def _ranked_bars(items: list[tuple[str, int]], x0: int, y_start: int, col_w: int, row_h: int) -> str:
+    """A vertical list of ranked horizontal bars (length proportional to count)."""
+    if not items:
+        return f'<text x="{x0}" y="{y_start + 4}" font-size="17" fill="{_FAINT}">No data yet</text>'
+    max_count = max((c for _, c in items), default=0) or 1
+    parts: list[str] = []
+    for i, (name, count) in enumerate(items[:5]):
+        y = y_start + i * row_h
+        bar_w = max(6, round(col_w * (count / max_count)))
+        parts.append(f'<text x="{x0}" y="{y}" font-size="21" fill="{_TEXT}">{_esc(name)}</text>')
+        parts.append(f'<text x="{x0 + col_w}" y="{y}" font-size="15" fill="{_MUTED}" text-anchor="end">{count:,}</text>')
+        parts.append(f'<rect x="{x0}" y="{y + 11}" width="{col_w}" height="9" rx="4.5" fill="#ffffff14"/>')
+        parts.append(f'<rect x="{x0}" y="{y + 11}" width="{bar_w}" height="9" rx="4.5" fill="url(#barGrad)"/>')
+    return "\n  ".join(parts)
+
+
+def _drift_sparkline(drift: list[TasteDriftYear], x: int, y: int, w: int, h: int) -> str:
+    """A small line chart of additions-per-year, with year labels and genre tooltips."""
+    pts = drift[-8:]
+    if not pts:
+        return f'<text x="{x}" y="{y + h // 2}" font-size="17" fill="{_FAINT}">No drift data yet</text>'
+    max_count = max((d.count for d in pts), default=0) or 1
+    n = len(pts)
+    step = w / (n - 1) if n > 1 else 0.0
+    coords: list[tuple[float, float, TasteDriftYear]] = []
+    for i, d in enumerate(pts):
+        px = x + i * step if n > 1 else x + w / 2
+        py = y + h - (d.count / max_count) * h
+        coords.append((px, py, d))
+
+    parts: list[str] = []
+    if n > 1:
+        line = " ".join(f"{px:.1f},{py:.1f}" for px, py, _ in coords)
+        parts.append(f'<polyline points="{line}" fill="none" stroke="url(#barGrad)" stroke-width="3" stroke-linejoin="round"/>')
+    for idx, (px, py, d) in enumerate(coords):
+        last = idx == n - 1
+        parts.append(
+            f'<circle cx="{px:.1f}" cy="{py:.1f}" r="{5 if last else 4}" fill="{_ACCENT_TO if last else _ACCENT_FROM}">'
+            f"<title>{_esc(d.year)}: {_esc(d.top_genre)} ({d.count:,})</title></circle>"
+        )
+        parts.append(f'<text x="{px:.1f}" y="{y + h + 20}" font-size="13" fill="{_MUTED}" text-anchor="middle">{_esc(d.year)}</text>')
+    # Caption: the most recent year's top genre.
+    parts.append(f'<text x="{x}" y="{y - 14}" font-size="15" fill="{_FAINT}">Now: {_esc(coords[-1][2].top_genre)}</text>')
+    return "\n  ".join(parts)
+
+
 def render_taste_card(
     *,
     peak_decade: int | None,
     obscurity_score: float,
-    top_genres: list[str],
-    top_labels: list[str],
+    top_genres: list[tuple[str, int]],
+    top_labels: list[tuple[str, int]],
     drift: list[TasteDriftYear],
 ) -> str:
-    """Return a 600x400 SVG string summarising the user's taste fingerprint."""
-    decade_text = f"{html.escape(str(peak_decade))}s" if peak_decade is not None else "N/A"
-    bar_width = max(4, min(200, int(obscurity_score * 200)))
-
-    genre_lines = ""
-    for i, genre in enumerate(top_genres[:5]):
-        y = 155 + i * 20
-        genre_lines += f'    <text x="30" y="{y}" font-size="13" fill="#ccc">{html.escape(genre)}</text>\n'
-
-    label_lines = ""
-    for i, label in enumerate(top_labels[:5]):
-        y = 155 + i * 20
-        label_lines += f'    <text x="320" y="{y}" font-size="13" fill="#ccc">{html.escape(label)}</text>\n'
-
-    drift_lines = ""
-    for i, d in enumerate(drift[-5:]):
-        y = 320 + i * 18
-        drift_lines += f'    <text x="30" y="{y}" font-size="12" fill="#aaa">{html.escape(d.year)}: {html.escape(d.top_genre)}</text>\n'
-
-    svg = f"""\
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
-  <rect width="600" height="400" rx="12" fill="#1a1a2e"/>
-  <text x="300" y="35" font-size="18" font-weight="bold" fill="#e0e0e0" text-anchor="middle">Taste Fingerprint</text>
-
-  <!-- Peak Decade -->
-  <text x="30" y="70" font-size="14" fill="#888">Peak Decade</text>
-  <text x="30" y="92" font-size="22" font-weight="bold" fill="#fff">{decade_text}</text>
-
-  <!-- Obscurity -->
-  <text x="320" y="70" font-size="14" fill="#888">Obscurity</text>
-  <rect x="320" y="78" width="200" height="16" rx="4" fill="#333"/>
-  <rect x="320" y="78" width="{bar_width}" height="16" rx="4" fill="#6c5ce7"/>
-  <text x="530" y="91" font-size="12" fill="#ccc">{obscurity_score:.0%}</text>
-
-  <!-- Top Genres -->
-  <text x="30" y="130" font-size="14" fill="#888">Top Genres</text>
-{genre_lines}
-  <!-- Top Labels -->
-  <text x="320" y="130" font-size="14" fill="#888">Top Labels</text>
-{label_lines}
-  <!-- Drift -->
-  <text x="30" y="300" font-size="14" fill="#888">Taste Drift</text>
-{drift_lines}</svg>"""
-
-    return svg
+    """Return a 1200x630 SVG string summarising the user's taste fingerprint."""
+    decade_text = f"{_esc(str(peak_decade))}s" if peak_decade is not None else "N/A"
+
+    obscurity = _obscurity_scale(obscurity_score, x=50, y=190, w=1100)
+    genre_bars = _ranked_bars(top_genres, x0=50, y_start=330, col_w=480, row_h=48)
+    label_bars = _ranked_bars(top_labels, x0=640, y_start=330, col_w=480, row_h=48)
+    sparkline = _drift_sparkline(drift, x=360, y=584, w=560, h=26)
+
+    return f"""\
+<svg xmlns="http://www.w3.org/2000/svg" width="{_W}" height="{_H}" viewBox="0 0 {_W} {_H}">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="{_BG_TOP}"/>
+      <stop offset="1" stop-color="{_BG_BOTTOM}"/>
+    </linearGradient>
+    <linearGradient id="hdrGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="{_HDR_FROM}"/>
+      <stop offset="1" stop-color="{_HDR_TO}"/>
+    </linearGradient>
+    <linearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="{_ACCENT_FROM}"/>
+      <stop offset="1" stop-color="{_ACCENT_TO}"/>
+    </linearGradient>
+    <linearGradient id="obscGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="#38bdf8"/>
+      <stop offset="0.33" stop-color="#818cf8"/>
+      <stop offset="0.66" stop-color="#a855f7"/>
+      <stop offset="1" stop-color="#f43f5e"/>
+    </linearGradient>
+    <clipPath id="card"><rect x="0" y="0" width="{_W}" height="{_H}" rx="28"/></clipPath>
+  </defs>
+
+  <g clip-path="url(#card)">
+    <rect x="0" y="0" width="{_W}" height="{_H}" fill="url(#bgGrad)"/>
+    <rect x="0" y="0" width="{_W}" height="150" fill="url(#hdrGrad)"/>
+  </g>
+
+  <!-- Header -->
+  <text x="50" y="70" font-size="40" font-weight="bold" fill="#ffffff" letter-spacing="1">TASTE FINGERPRINT</text>
+  <text x="50" y="108" font-size="20" fill="#ffffffcc">Peak decade <tspan font-weight="bold" fill="#ffffff">{decade_text}</tspan></text>
+
+  <!-- Obscurity scale -->
+  {obscurity}
+
+  <!-- Section headers -->
+  <text x="50" y="300" font-size="18" font-weight="bold" fill="{_MUTED}" letter-spacing="2">TOP GENRES</text>
+  <text x="640" y="300" font-size="18" font-weight="bold" fill="{_MUTED}" letter-spacing="2">TOP LABELS</text>
+
+  <!-- Ranked bars -->
+  {genre_bars}
+  {label_bars}
+
+  <!-- Footer band: drift sparkline + branding -->
+  <line x1="50" y1="556" x2="1150" y2="556" stroke="#ffffff14" stroke-width="1"/>
+  <text x="50" y="586" font-size="14" font-weight="bold" fill="{_MUTED}" letter-spacing="2">TASTE DRIFT</text>
+  {sparkline}
+  <text x="1150" y="604" font-size="20" font-weight="bold" fill="url(#barGrad)" text-anchor="end">discogsography</text>
+</svg>"""

explore/__tests__/user-panes.test.js

@@ -1371,7 +1371,7 @@ describe('UserPanes', () => {
             expect(cols).toHaveLength(3);
         });
 
-        it('should render obscurity score', () => {
+        it('should render obscurity score as a tier + percentage scale', () => {
             const strip = document.getElementById('tasteStrip');
             userPanes._renderTasteStrip({
                 obscurity: { score: 0.42 },
@@ -1381,7 +1381,13 @@ describe('UserPanes', () => {
                 blind_spots: [],
             });
 
-            expect(strip.textContent).toContain('0.42');
+            // 0.42 → "Eclectic" tier (0.25–0.5), shown with the percentage.
+            expect(strip.textContent).toContain('Eclectic');
+            expect(strip.textContent).toContain('42%');
+            expect(strip.querySelector('.taste-obscurity-track')).not.toBeNull();
+            const marker = strip.querySelector('.taste-obscurity-marker');
+            expect(marker).not.toBeNull();
+            expect(marker.style.left).toBe('42%');
         });
 
         it('should render dash for null obscurity', () => {

explore/static/css/styles.css

@@ -1843,6 +1843,55 @@ select option {
 .taste-stat-value.blue { color: var(--blue-accent); }
 .taste-stat-value.green { color: var(--accent-green); }
 
+/* Obscurity scale: mainstream → obscure gradient with a marker. */
+.taste-obscurity {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    margin-bottom: 10px;
+}
+
+.taste-obscurity-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.taste-obscurity-label {
+    font-size: 12px;
+    color: var(--text-mid);
+}
+
+.taste-obscurity-value {
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.taste-obscurity-track {
+    position: relative;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #38bdf8 0%, #818cf8 33%, #a855f7 66%, #f43f5e 100%);
+}
+
+.taste-obscurity-marker {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    background: #fff;
+    transform: translate(-50%, -50%);
+}
+
+.taste-obscurity-ends {
+    display: flex;
+    justify-content: space-between;
+    font-size: 9px;
+    color: var(--text-dim);
+}
+
 .taste-heatmap-grid {
     display: grid;
     gap: 2px;
@@ -1892,24 +1941,41 @@ select option {
 
 .taste-download-btn {
     margin-top: auto;
-    padding: 6px 12px;
-    background: var(--purple-accent);
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 9px 20px;
+    background: linear-gradient(135deg, #6c5ce7, #a855f7);
     color: #fff;
     border: none;
-    border-radius: 4px;
-    font-size: 11px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
     cursor: pointer;
-    text-align: center;
-    transition: opacity 0.15s;
+    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.35);
+    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
 }
 
 .taste-download-btn:hover {
-    opacity: 0.85;
+    transform: translateY(-1px);
+    filter: brightness(1.08);
+    box-shadow: 0 6px 18px rgba(108, 92, 231, 0.55);
+}
+
+.taste-download-btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
 }
 
 .taste-download-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
+    transform: none;
+    filter: none;
+    box-shadow: none;
 }
 
 .taste-empty {