one listener bar, five surfaces: the search page's pill wins and the heat wash is retired

Kyle asked for the popularity bars to match the search page "to keep a
consistent design across the board". They were two designs, and one of them had
quietly drifted into a third.

THE SEARCH PAGE'S PILL IS NOW THE APP-WIDE DESIGN: a visible
rgba(255,255,255,0.07) track, a solid var(--accent) fill scaled by the shared
curve, the full comma-formatted count standing centred on top, 17px tall with
a 4px radius. The album page, the artist page's open-in-place album panel, the
discography's record sections and the artist page's Popular list all draw it.

WHAT WENT AWAY IS THE HEAT WASH. Those three surfaces drove the fill's COLOUR
and ALPHA from the count (--t on the row, alpha ramping 0.30-0.85 via a double
color-mix, digits ramping with it), so length and colour told one story twice
and every page read as a different design. Length is the only encoding now, and
listenerHeat is deleted from listenerBars.js — nothing computes a temperature
any more. The dark-glass CONTRACT's deliberate exclusion for these bars ("their
alpha IS the data encoding") is moot and marked so.

THE DISCOGRAPHY HAD DRIFTED FURTHEST and is the reason this mattered: it
computed peak/heat inline with a LINEAR share, a 6% floor and abbreviated
labels ("12K"), against everyone else's COUNT_GAMMA 0.42 curve, browser-measured
max-content floor and full figures. It now imports listenerBars.js like the
rest, so no two surfaces can disagree about how big a hit is — the reason the
module exists.

THE POPULAR LIST joins them: it was plain right-aligned muted text, deliberately
not accent so the row's own `.now` accent stayed distinct (the ♫ rank and title
still carry that). Its column widened 62px -> 96px, the pill's width, and its
peak is taken over the WHOLE list rather than the visible five so the bars do
not re-scale on Show more.

Kept throughout: unknown counts render an em dash with NO bar (a floor-width
pill behind a dash reads as a measured tiny value), and a column drops entirely
when Last.fm knew nothing.

Verified live against the running app — computed styles on the album and artist
pages match the search bar value-for-value. 98/98 tests.
This commit is contained in:
KeelrLeek committed 2026-08-31 05:53:01 -05:00
1 parent 385b598170
commit 73a677d35c
4 files changed
+131 -137

No files matched your search

+9 -12
View File
@@ -2,10 +2,11 @@
* The listener bar in a tracklist: how a Last.fm listener count becomes a bar
* width, and how warm that bar burns.
*
* Shared, because the album page and the artist page's open-in-place album
* panel both draw this column. A second implementation would quietly disagree
* with the other about how big a record's hit really was — the same reason
* `editions.js` was lifted out of the artist page.
* Shared, because four surfaces draw this bar — the search page's song rows,
* the album page, the artist page's open-in-place album panel and the
* discography's record sections. A second implementation would quietly
* disagree with the others about how big a record's hit really was — the
* same reason `editions.js` was lifted out of the artist page.
*/
/**
@@ -62,11 +63,7 @@ export function listenerShare(listeners, peak) {
return Math.max(2, Math.round(Math.pow(listeners / peak, COUNT_GAMMA) * 100));
}
/**
* The same curved share as a 0..1 temperature driving the fill's colour, so
* length and colour never tell two different stories about one track.
*/
export function listenerHeat(listeners, peak) {
if (!listeners || !peak) return "0.000";
return Math.pow(listeners / peak, COUNT_GAMMA).toFixed(3);
}
// listenerHeat — the share as a 0..1 temperature driving fill colour and
// alpha — lived here until 2026-08-30, when the heat-wash bars were retired
// for the search page's solid pill on every surface and colour stopped
// carrying data.