Three theming/density problems with the old PlayerBar:
- Emoji glyphs (⏮ ▶ ⏸ ⏭ 🔀🔁 ◌) painted at OS-default sizes inside p-1
hit areas, so each button had a 6-8px ring of dead space and the row
clashed with the Lucide stroke-icon language used elsewhere.
- No focal point on transport — play looked structurally identical to
prev/next so the eye had nothing to anchor on.
- Cover at 48x48 in a 72px bar left visible vertical breathing room
around it that read as accidental empty space.
Changes:
- All emoji replaced with Lucide icons: SkipBack, Play, Pause, Loader2,
SkipForward, Shuffle, Repeat, Repeat1, Volume2/Volume1/VolumeX.
- Play button is the brand moment: 48px circular, accent forest-teal
background, 24px parchment icon. Prev/next stay minimal at 40px
circular with hover-bg.
- Cover bumped to 80x80 in a min-h-[108px] bar (~1.5x the previous
height) so the player reads as substantial rather than a thin strip.
- Shuffle / repeat get consistent 36px circular hit areas with
bg-accent-tint + text-accent active state instead of color-only
toggling. Repeat1 icon swap on repeat-one mode replaces the old
'🔁¹' string concatenation.
- Volume slider gets a state-aware Lucide icon to its left
(VolumeX / Volume1 / Volume2 by level), giving the right column a
visual anchor.
- Right column tightens from w-56 to w-48 since icons are denser than
emoji + text.
TrackMenu gains a 'direction' prop ('up' | 'down', default 'down') so
PlayerBar can pass direction='up' — the kebab menu opens upward instead
of off the bottom of the page.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
bvandeusen
8c62f0089e