[C-4637] Edit Collection Page

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {

packages/common/src/schemas/upload/uploadFormSchema.ts

@@ -7,7 +7,8 @@ import {
 import { z } from 'zod'
 
 import { imageBlank } from '~/assets'
-import { NativeFile, TrackForUpload } from '~/store/upload/types'
+import { Collection } from '~/models'
+import { NativeFile, TrackForEdit, TrackForUpload } from '~/store/upload/types'
 
 const messages = {
  artworkRequiredError: 'Artwork is required.',
@@ -149,6 +150,7 @@ const hiddenMetadataSchema = z.object({
 const createSdkSchema = () =>
  z
  .object({
+ track_id: z.optional(z.number()).nullable(),
  ai_attribution_user_id: z.optional(z.number()).nullable(),
  allowed_api_keys: z.optional(z.array(z.string())).nullable(),
  description: z.optional(z.string().max(1000)).nullable(),
@@ -230,7 +232,10 @@ export const TrackMetadataFormSchema = TrackMetadataSchema.refine(
  }
 )
 
-const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({ title: true })
+const CollectionTrackMetadataSchema = TrackMetadataSchema.pick({
+ title: true,
+ track_id: true
+})
 
 /**
  * Produces a schema that validates a collection metadata for upload.
@@ -266,11 +271,13 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  description: z.optional(z.string().max(1000)),
  release_date: z.optional(z.string()).nullable(),
  is_scheduled_release: z.optional(z.boolean()),
- trackDetails: z.object({
- genre: GenreSchema,
- mood: MoodSchema,
- tags: z.optional(z.string())
- }),
+ trackDetails: z.optional(
+ z.object({
+ genre: z.optional(GenreSchema),
+ mood: MoodSchema,
+ tags: z.optional(z.string())
+ })
+ ),
  is_private: z.optional(z.boolean()),
  is_album: z.literal(collectionType === 'album'),
  tracks: z.array(z.object({ metadata: CollectionTrackMetadataSchema })),
@@ -279,7 +286,8 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  copyrightLine: z.optional(DDEXCopyright.nullable()),
  producerCopyrightLine: z.optional(DDEXCopyright.nullable()),
  parentalWarningType: z.optional(z.string().nullable()),
- is_downloadable: z.optional(z.boolean())
+ is_downloadable: z.optional(z.boolean()),
+ isUpload: z.optional(z.boolean())
  })
  .merge(
  premiumMetadataSchema.extend({
@@ -310,11 +318,15 @@ export const createCollectionSchema = (collectionType: 'playlist' | 'album') =>
  */
 type UnvalidatedCollectionMetadata = {
  playlist_id?: number
- artwork: {
- file: File | NativeFile
- source?: string
- } | null
- tracks: TrackForUpload[]
+ artwork:
+ | {
+ file: File | NativeFile
+ source?: string
+ }
+ | { url: string }
+ | null
+ tracks: (TrackForUpload | TrackForEdit)[]
+ playlist_contents?: Collection['playlist_contents']
 }
 
 export const PlaylistSchema = createCollectionSchema('playlist')

packages/common/src/store/cache/collections/types.ts

@@ -24,4 +24,5 @@ export type Image = {
 
 export type EditPlaylistValues = Collection & {
  artwork: Image
+ tracks?: { metadata: Track }[]
 }

packages/common/src/store/ui/modals/index.ts

@@ -12,7 +12,6 @@ export * from './inbox-unavailable-modal'
 export * from './usdc-purchase-details-modal'
 export * from './usdc-transaction-details-modal'
 export * from './withdraw-usdc-modal'
-export * from './edit-playlist-modal'
 export * from './edit-track-modal'
 export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -28,7 +28,6 @@ export const initialState: BasicModalsState = {
  TrendingGenreSelection: { isOpen: false },
  SocialProof: { isOpen: false },
  EditFolder: { isOpen: false },
- EditPlaylist: { isOpen: false },
  EditTrack: { isOpen: false },
  SignOutConfirmation: { isOpen: false },
  Overflow: { isOpen: false },

packages/common/src/store/ui/modals/reducers.ts

@@ -6,7 +6,6 @@ import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
-import { editPlaylistModalReducer } from './edit-playlist-modal'
 import { editTrackModalReducer } from './edit-track-modal'
 import { inboxUnavailableModalReducer } from './inbox-unavailable-modal'
 import { leavingAudiusModalReducer } from './leaving-audius-modal'
@@ -34,7 +33,6 @@ const noOpReducers = Object.keys(initialState).reduce((prev, curr) => {
  */
 const combinedReducers = combineReducers({
  ...noOpReducers,
- EditPlaylist: editPlaylistModalReducer,
  EditTrack: editTrackModalReducer,
  CreateChatModal: createChatModalReducer,
  InboxUnavailableModal: inboxUnavailableModalReducer,

packages/common/src/store/ui/modals/types.ts

@@ -7,7 +7,6 @@ import { AlbumTrackRemoveConfirmationModalState } from './album-track-remove-con
 import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
-import { EditPlaylistModalState } from './edit-playlist-modal'
 import { EditTrackModalState } from './edit-track-modal'
 import { InboxUnavailableModalState } from './inbox-unavailable-modal'
 import { LeavingAudiusModalState } from './leaving-audius-modal'
@@ -49,7 +48,6 @@ export type Modals =
  | 'TrendingGenreSelection'
  | 'SocialProof'
  | 'EditFolder'
- | 'EditPlaylist'
  | 'EditTrack'
  | 'SignOutConfirmation'
  | 'Overflow'
@@ -95,7 +93,6 @@ export type BasicModalsState = {
 export type StatefulModalsState = {
  CoinflowOnramp: CoinflowOnrampModalState
  CreateChatModal: CreateChatModalState
- EditPlaylist: EditPlaylistModalState
  EditTrack: EditTrackModalState
  InboxUnavailableModal: InboxUnavailableModalState
  LeavingAudiusModal: LeavingAudiusModalState

packages/common/src/store/upload/types.ts

@@ -35,6 +35,10 @@ export interface TrackForUpload {
  metadata: TrackMetadataForUpload
 }
 
+export interface TrackForEdit {
+ metadata: TrackMetadataForUpload
+}
+
 /**
  * Unlike normal Track metadata, TrackMetadataForUpload includes additional
  * files: artwork and a stems field with StemsForUpload.
@@ -53,7 +57,7 @@ export interface TrackMetadataForUpload extends TrackMetadata {
  */
 export interface CollectionMetadataForUpload extends CollectionMetadata {
  artwork: {
- file: Blob
+ file?: Blob
  url: string
  }
  trackDetails: {

packages/harmony/src/components/button/BaseButton/BaseButton.tsx

@@ -26,6 +26,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  fullWidth,
  styles,
  children,
+ slotted,
  'aria-label': ariaLabelProp,
  asChild,
  _isHovered,
@@ -115,7 +116,13 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
  ) : LeftIconComponent ? (
  <LeftIconComponent css={[iconCss, styles?.icon]} />
  ) : null}
- {!isTextHidden ? <Slottable>{children}</Slottable> : null}
+ {!isTextHidden ? (
+ slotted ? (
+ children
+ ) : (
+ <Slottable>{children}</Slottable>
+ )
+ ) : null}
  {RightIconComponent ? (
  <RightIconComponent css={[iconCss, styles?.icon]} />
  ) : null}

packages/harmony/src/components/button/BaseButton/types.ts

@@ -77,5 +77,6 @@ export type BaseButtonProps = {
  * merging their props and behavior.
  */
  asChild?: boolean
+ slotted?: boolean
 } & HTMLButtonProps &
  InternalProps

packages/harmony/src/components/button/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react'
 
 import { useTheme, type CSSObject } from '@emotion/react'
+import { Slottable } from '@radix-ui/react-slot'
 
 import type { IconComponent, IconProps } from '../../icon'
 import { BaseButton } from '../BaseButton/BaseButton'
@@ -12,10 +13,7 @@ export type IconButtonProps = {
  'aria-label': string
  iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
- Pick<
- BaseButtonProps,
- 'onClick' | 'disabled' | 'className' | 'type' | 'children' | 'isLoading'
- >
+ BaseButtonProps
 
 /**
  * The icon component allows you to pass in an icon and
@@ -35,7 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  children,
  ...other
  } = props
- const { disabled, isLoading } = other
+ const { disabled, isLoading, asChild } = other
  const { color, cornerRadius, spacing, motion, iconSizes } = useTheme()
 
  const buttonCss: CSSObject = {
@@ -87,10 +85,11 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  return (
  <BaseButton
  ref={ref}
- type='button'
+ type={asChild ? undefined : 'button'}
  {...other}
  css={[buttonCss, ripple && rippleCss]}
  styles={{ icon: loadingIconCss }}
+ slotted
  >
  {isLoading ? null : (
  <Icon
@@ -103,7 +102,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  css={iconCss}
  />
  )}
- {children}
+<Slottable>{children}</Slottable>
  </BaseButton>
  )
  }

packages/harmony/src/components/popup/Popup.tsx

@@ -356,7 +356,7 @@ export const Popup = forwardRef<HTMLDivElement, PopupProps>(function Popup(
  setPopupState('closing')
  anchorRef.current?.focus()
  }
- }, [isVisibleProp, popupState])
+ }, [anchorRef, isVisibleProp, popupState])
 
  const transitions = useTransition(isVisibleProp, null, {
  from: {

packages/mobile/src/screens/edit-playlist-screen/EditPlaylistModalScreen.tsx

@@ -42,8 +42,10 @@ export const EditPlaylistModalScreen = () => {
 
  if (!playlist) return null
 
+ const { tracks: tracksIgnored, ...restPlaylist } = playlist
+
  const initialValues: EditPlaylistValues = {
- ...playlist,
+ ...restPlaylist,
  artwork: {
  url:
  trackImage && isImageUriSource(trackImage.source)

packages/web/src/app/web-player/WebPlayer.jsx

@@ -60,6 +60,7 @@ import { CollectiblesPlaylistPage } from 'pages/collectibles-playlist-page'
 import CollectionPage from 'pages/collection-page/CollectionPage'
 import { DashboardPage } from 'pages/dashboard-page/DashboardPage'
 import { DeactivateAccountPage } from 'pages/deactivate-account-page/DeactivateAccountPage'
+import { EditCollectionPage } from 'pages/edit-collection-page'
 import EmptyPage from 'pages/empty-page/EmptyPage'
 import ExploreCollectionsPage from 'pages/explore-page/ExploreCollectionsPage'
 import ExplorePage from 'pages/explore-page/ExplorePage'
@@ -181,7 +182,9 @@ import {
  ACCOUNTS_YOU_MANAGE_SETTINGS_PAGE,
  TRACK_EDIT_PAGE,
  SEARCH_CATEGORY_PAGE_LEGACY,
- SEARCH_BASE_ROUTE
+ SEARCH_BASE_ROUTE,
+ EDIT_PLAYLIST_PAGE,
+ EDIT_ALBUM_PAGE
 } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
@@ -863,6 +866,13 @@ class WebPlayer extends Component {
  )
  }}
  />
+
+ <Route
+ exact
+ path={[EDIT_PLAYLIST_PAGE, EDIT_ALBUM_PAGE]}
+ component={EditCollectionPage}
+ />
+
  <Route
  exact
  path={ALBUM_PAGE}

packages/web/src/common/store/upload/sagas.ts

@@ -98,17 +98,18 @@ function* combineMetadata(
  metadata.artwork = collectionMetadata.artwork
 
  if (!metadata.genre)
- metadata.genre = collectionMetadata.trackDetails.genre ?? ''
- if (!metadata.mood) metadata.mood = collectionMetadata.trackDetails.mood ?? ''
+ metadata.genre = collectionMetadata.trackDetails?.genre ?? ''
+ if (!metadata.mood)
+ metadata.mood = collectionMetadata.trackDetails?.mood ?? ''
  if (!metadata.release_date) {
  metadata.release_date = collectionMetadata.release_date ?? null
  metadata.is_scheduled_release =
  collectionMetadata.is_scheduled_release ?? false
  }
 
- if (metadata.tags === null && collectionMetadata.trackDetails.tags) {
+ if (metadata.tags === null && collectionMetadata.trackDetails?.tags) {
  // Take collection tags
- metadata.tags = collectionMetadata.trackDetails.tags
+ metadata.tags = collectionMetadata.trackDetails?.tags
  }
 
  // Set download & hidden status
@@ -766,10 +767,10 @@ export function* uploadCollection(
  }
 
  // First upload album art
-yield* call(
- audiusBackendInstance.uploadImage,
-collectionMetadata.artwork?.file as File
-)
+const { artwork } = collectionMetadata
+if (artwork && 'file' in artwork) {
+yield* call(audiusBackendInstance.uploadImage, artwork.file as File)
+}
 
  // Propagate the collection metadata to the tracks
  for (const track of tracks) {