fix(suggested-tracks): row hover + full-row play click target#14426
Merged
Conversation
The "Add some tracks" rows had no visible affordance that the row is playable — only the artwork showed a play overlay on its own hover, and only the artwork accepted clicks. Move the click target to the full row (except the Add button) and surface the play overlay on row hover so the playability is obvious. - Row gets cursor:pointer, neutral hover background, and a focus-visible outline. Clicking or pressing Enter/Space anywhere on the row toggles playback (via the existing useToggleTrack hook). - Play/Pause overlay on the artwork now fades in on row hover and row focus-visible, not just artwork hover. - Add button stops propagation so it only adds, never plays. - UserLink stops propagation so clicking the artist still navigates to the profile without also triggering playback. - Skeleton row keeps a default cursor and no hover background. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14426.audius.workers.dev Unique preview for this PR (deployed from this branch). |
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
Make the "Add some tracks" panel rows visibly playable:
useToggleTrack. Keyboard activation with Enter/Space works because the row isrole='button' tabIndex={0}.Before: only the 40×40 artwork was clickable; nothing told the user the row was playable. After: hovering anywhere on the row dims the artwork and surfaces the play/pause icon, and clicking anywhere starts playback.
Test plan
harmony-n-50), play icon appears centered on the artwork. Hover again with playback active → pause icon shown.🤖 Generated with Claude Code