feat(web): replace quick-create playlist flow with a modal#14318
Merged
Conversation
|
This was referenced May 15, 2026
The "New" button in the playlist library sidebar (and the empty-state nav link) used to immediately create a playlist named "New Playlist" and route the user into the edit page. Replace that one-shot dispatch with a Create Playlist modal that lets the user set a title, optional description, and optional artwork before the playlist is created. - New `CreatePlaylistModal` slice via `createModal` helper, wired into the modals reducer/state. - New `CreatePlaylistModal` component (Harmony Modal + TextInput + TextArea + UploadArtwork) reusing the existing `resizeImage` pipeline. - The sidebar "New" popup item and the empty-library nav link both open the modal instead of dispatching `createPlaylist` directly. - Playlists still default to private (enforced by the existing `optimisticallySavePlaylist` saga) and the saga still routes the user to the new playlist page after creation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dylanjeffers
force-pushed
the
claude/trusting-antonelli-0dc3cc
branch
from
1a3da32 to
0d699e5
Compare
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14318.audius.workers.dev Unique preview for this PR (deployed from this branch). |
1 task
dylanjeffers
added a commit
that referenced
this pull request
May 20, 2026
## Summary Adds a **Duplicate Playlist** secondary action to the sidebar's `+` (New) popup menu. Users paste any public Audius playlist URL, see a preview of the source (title, description, cover art), and toggle per-field switches to choose what to customize in the copy. The duplicated playlist is created as private by default. Stacks on top of #14318 (Create Playlist modal) — review/merge that first. **Scope:** - Metadata-only duplication for v1: title, description, artwork. Tracks are **not** copied in this PR — a follow-up will support full duplicate including track contents. The modal surfaces this with a helper line so users know to add tracks themselves. - When the user keeps the source artwork, we pass the source's `cover_art_sizes` CID through to the existing `createPlaylist` saga so it reuses the cover instead of treating it as a new upload. No content node re-upload required. ## Implementation - New `DuplicatePlaylistModal` Redux modal slice (via existing `createModal` helper) registered in modals types/reducers/parent state. - New `DuplicatePlaylistModal` component using Harmony `Modal` + `TextInput` + `Switch` + `TextArea` + `Artwork` + the existing `UploadArtwork`. - URL paste resolves through `getPathFromPlaylistUrl` → `useCollectionByPermalink` to load the source collection. - Wires "Duplicate Playlist" into `CreatePlaylistLibraryItemButton` between Create Playlist and Create Folder. ## Test plan - [ ] Sign in to the web app - [ ] Left nav → `+` → **Duplicate Playlist** - [ ] Paste a malformed URL → see inline "Enter a valid Audius playlist URL" - [ ] Paste a valid Audius playlist URL → preview card appears with the source title, description, and artwork - [ ] Submit with all three switches off → new playlist created with `<Source Title> (Copy)`, the source description, and the source cover art reused (no re-upload) - [ ] Toggle "Customize title" → enter a custom name → that name wins - [ ] Toggle "Customize description" → enter a custom description → that description wins - [ ] Toggle "Customize artwork" → upload a new image → custom image wins - [ ] Resulting playlist is private (Hidden) and the user is routed to its edit page - [ ] The "tracks not copied" note is visible in the modal ## Follow-ups - Copy tracks from source to the duplicated playlist (probably via a new `duplicatePlaylist` action + saga that chains `createPlaylist` then `addTrackToPlaylist` per track). - Paste-tracks-by-URL on the edit page (separate PR), which pairs naturally with this once track copy lands. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <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
Replaces the one-shot "quick create" playlist flow (which immediately dispatched
createPlaylist({ playlist_name: 'New Playlist' })and routed the user into the edit page) with a real Create Playlist modal that captures title, optional description, and optional artwork up front.CreatePlaylistModalRedux modal slice (using the existingcreateModalhelper), wired into the modals reducer / types / parent state.CreatePlaylistModalcomponent inpackages/web/src/components/create-playlist-modal/. Uses HarmonyModal+TextInput+TextArea+ the existingUploadArtworkcomponent, plus theresizeImagepipeline for artwork.CreatePlaylistLibraryItemButton) and the empty-library nav link (EmptyLibraryNavLink) now open the modal instead of dispatchingcreatePlaylistdirectly.optimisticallySavePlaylistsaga) and the saga still routes the user to the new playlist page after creation, so the post-create UX is unchanged.This is the first chunk of a larger playlist-editor UX initiative; follow-up PRs will add the duplicate-playlist secondary action and paste-tracks-by-URL.
Test plan
+(New) button → Create Playlist🤖 Generated with Claude Code