feat(web): row-click selection on playlist tracks in edit mode#14324
Open
dylanjeffers wants to merge 3 commits into
Open
feat(web): row-click selection on playlist tracks in edit mode#14324dylanjeffers wants to merge 3 commits into
dylanjeffers wants to merge 3 commits into
Conversation
|
dylanjeffers
force-pushed
the
claude/track-multi-select
branch
from
46c2b73 to
c539a7b
Compare
While the playlist detail page is in edit mode, clicking a track row
toggles its selection in the bulk-actions context instead of playing
the track. Holding shift while clicking extends the selection over
the range between the previous click and the new one.
- New `EditAwareTracksTable` wrapper around the standard
`TracksTable`. It captures the global shift-key state with a
window listener (TracksTable's onClickRow does not pass a
MouseEvent) and rewrites `onClickRow` to call
`selection.toggle(id, index, { shift })` when edit mode is active.
- Outside of edit mode the wrapper is a transparent pass-through and
the existing play-on-click behavior is preserved.
- Desktop `CollectionPage` swaps its `TracksTable` usage for the new
edit-aware wrapper.
Combined with the bulk-actions bar from the previous PR, the user
can now: shift-click a range, Cmd/Ctrl+A to select all, Escape to
clear, Delete to remove, Cmd/Ctrl+Z/Y for undo/redo, and the bar's
Copy URLs / Remove buttons for bulk operations.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Builds on the row-click selection from this branch to give the user visible feedback for which tracks are currently selected. - `TracksTable` gains an optional `rowClassNameAddition(track, index)` prop that's composed with the table's existing per-row className (used internally for the locked/disabled states). The hook is ref-stable so external state changes don't force a full re-render of the table machinery. - `EditAwareTracksTable` passes a `rowClassNameAddition` that returns the new `selected` CSS class when the row's track id is in the selection set and the page is in edit mode. The class draws a surface-2 background fill and a 3px accent bar on the left edge so selected rows are immediately scannable. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dylanjeffers
force-pushed
the
claude/per-row-selection
branch
from
13ec3ba to
8cc78cc
Compare
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14324.audius.workers.dev Unique preview for this PR (deployed from this branch). |
Two small correctness fixes on top of the existing row-click selection in playlist edit mode. - `EditAwareTracksTable` now resets its shift-key ref on `window` blur. Previously, holding Shift while Cmd/Alt-Tabbing away would leave the ref stuck true (the keyup fires in the other window), so the next click on return was interpreted as a shift-extend. - `TrackSelectionContext.toggle` now keeps the anchor row stable across a sequence of shift-clicks. The anchor only moves on a plain click. This matches Finder / Gmail / Drive: click A, shift-click C selects A..C; a follow-up shift-click E then selects A..E (not C..E). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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
Wires up row-level selection on the playlist detail page when edit mode is active. Clicking a row toggles its selection in the bulk-actions context (added in #14323) instead of playing the track; holding shift extends the selection over the range between the anchor (last plain click) and the new row.
Stacked on #14323 → #14322 → #14321 → #14320 → #14319 → #14318.
Implementation
EditAwareTracksTablewraps the standardTracksTable:onClickRow(track, index)to callselection.toggle(track.track_id, index, { shift })instead of the original handler.TracksTable'sonClickRowdoes not receive aMouseEvent, so the wrapper tracks the shift key globally via window keydown/keyup listeners and reads it at click time. Also resets onwindowblur — without this, Cmd/Alt-Tabbing away while holding Shift would leave the modifier stuck true (the keyup fires in the other window).TrackSelectionContext.togglekeeps the anchor row stable across a shift-click sequence (matches Finder / Gmail / Drive): click A, shift-click C selects A..C; a follow-up shift-click E then selects A..E (not C..E). The anchor only moves on a plain click.CollectionPageswaps itsTracksTableinstantiation for the new wrapper and passes the collection id.TracksTablenow accepts an optionalrowClassNameAddition(track, rowIndex)that's composed with the existing internal per-row className (used for locked/disabled state).EditAwareTracksTableuses it to apply aselectedclass — surface-2 background fill plus a 3px accent bar on the left edge — to rows whose track id is in the selection set.With this PR, the full track-curation flow from the spec is wired:
Cmd/Ctrl+A→ Select allEscape→ Clear selectionDelete→ Remove selectedCmd/Ctrl+Z/Cmd/Ctrl+Y→ Undo / RedoTest plan
🤖 Generated with Claude Code