xRangerDEandClaude Opus 4.7
9afff4b8b0
renderEventsList was painting every timeline row with ~7 inline style props per element (padding, border-bottom, font-size on the row; margin-right, color on each span; padding-top on detail) AND keeping a JS-side colour map per event type. For a chatty recording with 100+ events the inline-style noise added up, and adding a new event type meant editing the renderer to extend the map. Extracted: - .event-viewer-row picks up the padding + bottom border + font-size - .event-viewer-time gets the secondary colour + monospace stack - .event-viewer-tag becomes an actual pill (uppercase, letter- spacing, rounded background tint, bordered) — visually consistent with the chat viewer's [type] chip tag - .event-viewer-detail handles the row-detail line spacing Per-type colour is now driven by CSS [data-type="..."] attribute selectors (recording_start = green, recording_end = purple, recording_resume = blue, title_change = amber, game_change = red). Each variant overrides background + border + text colour to give each tag a contained "pill" look. The renderer just stamps ev.type onto data-type and the CSS handles the rest. Adding a new event type now means one new selector here, not a JS map edit. Lint, focus, future polish all stay near the styling. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>