Visual pass: one icon set, type hierarchy, readable section headings (v2026.09.07.001)

[cdburgess75]

Owner asked for "easier to use, easier to see, like a high-end app". Four changes, no behaviour change — the sheet renderer is byte-identical.

One icon language

The header mixed an OS emoji (the dice — rendered differently on every device and could not follow the theme), text glyphs (≡ ☾ ✕ ⊕ › ✎ ▲▼ ↺ ⚙ ◀ ▶), and one lone SVG that matched nothing in weight or optical size. All of it now comes from a single #isprite <symbol> sheet at one stroke weight.

The trap, worth reading before touching this: the paint must live in CSS on .ico, never as attributes on the sprite root. A <use> clone inherits from the use site, so fill="none" stroke="currentColor" on #isprite never reaches it — every stroked icon rendered as a solid black fill. The share glyph came out a blob and the hamburger was invisible against black. Solid glyphs (play/pause/prev/next, dots) carry their own fill, which beats the inherited CSS. setIcon() replaces the textContent assignments that would otherwise delete the <svg> child.

Type hierarchy

--display moves from JetBrains Mono to Fraunces, which was already self-hosted and precached but unused since .07.04.003 — so it costs no extra download and stays offline-safe. Titles and headings get the display serif; mono is now data only (chords, keys, counts, version). .brand is pinned to --mono so the wordmark is untouched.

Section headings

Were .7em grey italic — the smallest text on screen, and the one thing a player scans for mid-song. Now tracked accent small caps with a hairline rule, ≈5.3:1 on black and ≈5.6:1 on the light ground.

Decluttered rows

Rows carry title, subtitle and key. The reorder arrows, pencil, delete, add and chevron move into the context menu, reached by long-press or a new ⋯ button, since pointer devices have no long-press. New openSetlistContext() gives setlists the same menu (settings / move / delete), which they never had, and the long-press installer now takes the opener as an argument.

"Played" is encoded once — a ✓ in the row-number slot — instead of dim + strikethrough + pill. That pill was eating the width that truncated titles to "House of t…".

The version tag moves into the ≡ sheet. .brand small stays in the DOM but hidden: CI greps it for the version and APP_VERSION reads it at boot. The 5-tap gesture-debug trigger moved onto the new line with it.

Verification

• Sheet renderer byte-identical across all six seed songs, compared pill-by-pill against the pre-change build. This pass touches chrome only.
• Every icon reference resolves at runtime, across both themes and every menu and sheet.
• Existing suites green: song links 24, showcase 11, wake lock 11.
• CI equivalents run locally: both syntax checks, duplicate ids, brand == CACHE == README badge, manifest parse, PRECACHE existence.
• Screenshots regenerated.

Deliberately not in this pass: single primary action on the set screen (two red ▶ still mean different things), song header trimmed to four items, calmer chord-pill palette, motion.

🤖 Generated with Claude Code

https://claude.ai/code/session_01RFni8j63y7ynwzmNLMPMTB

---

Generated by Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.