feat(taste): bold taste-card redesign + compact pill download button#383
Merged
Conversation
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>
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
…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.
Contributor
E2E Coverage (webkit)
|
Contributor
E2E Coverage (chromium)
|
Contributor
E2E Coverage (firefox)
|
Contributor
E2E Coverage (webkit - iPhone 15)
|
Contributor
E2E Coverage (webkit - iPad Pro 11)
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the taste fingerprint card, the Download Taste Card button, and the obscurity display (now a mainstream→obscure scale, shown identically on the card and the Explore taste strip).
Card —
api/taste_card.pyrender_taste_cardtakes(name, count)tuples; the router threads counts through.html.escape-d (XSS-safe).Obscurity scale — consistent in both places
explore/static/js/user-panes.js(_obscurityScale/_obscurityTier) +explore/static/css/styles.cssrender the same gradient-track-with-marker in the Explore strip, replacing the bare0.42stat.Button —
.taste-download-btnCompact, centered gradient pill with hover lift + glow and active/disabled states, replacing the flat full-width bar.
Verification
uv run pytest tests/api/test_taste_card.py tests/api/test_taste.py— pass;ruff/mypycleannpx vitest run __tests__/user-panes.test.js— 134 passNotes
The card SVG is generated server-side (downloaded file). Built on
main; independent of the implausible-years fix in #382.🤖 Generated with Claude Code