[C-4897] Improve empty edit collection page (#9346)

Author: dylanjeffers

packages/web/src/components/collection/desktop/OwnerActionButtons.tsx

@@ -22,9 +22,11 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
 
   const isDisabled = !track_count || track_count === 0
 
-  return collection ? (
+  if (!collection) return null
+
+  return (
     <>
-      {!ddex_app && <EditButton collectionId={collectionId} />}
+      {ddex_app ? null : <EditButton collectionId={collectionId} />}
       <ShareButton
         collectionId={collectionId}
         disabled={isDisabled}
@@ -36,9 +38,7 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
       />
       {is_private ? <PublishButton collectionId={collectionId} /> : null}
 
-      {!is_private ? (
-        <OverflowMenuButton collectionId={collectionId} isOwner />
-      ) : null}
+      <OverflowMenuButton collectionId={collectionId} isOwner />
     </>
-  ) : null
+  )
 }

packages/web/src/pages/collection-page/CollectionPageProvider.tsx

@@ -746,7 +746,8 @@ class CollectionPage extends Component<
       tracks,
       userId,
       userPlaylists,
-      smartCollection
+      smartCollection,
+      trackCount
     } = this.props
     const { allowReordering } = this.state
     const { playlistId } = this.props
@@ -803,7 +804,8 @@ class CollectionPage extends Component<
       onClickReposts: this.onClickReposts,
       onFollow: this.onFollow,
       onUnfollow: this.onUnfollow,
-      refresh: this.refreshCollection
+      refresh: this.refreshCollection,
+      trackCount
     }
 
     if ((metadata?.is_delete || metadata?._marked_deleted) && user) {

packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx

@@ -19,6 +19,7 @@ import {
   PurchaseableContentType
 } from '@audius/common/store'
 import { getDogEarType, removeNullable } from '@audius/common/utils'
+import { Flex, Text } from '@audius/harmony'
 
 import {
   CollectiblesPlaylistTableColumn,
@@ -38,7 +39,8 @@ import styles from './CollectionPage.module.css'
 
 const getMessages = (collectionType: 'album' | 'playlist') => ({
   emptyPage: {
-    owner: `This ${collectionType} is empty. Start adding tracks to share it or make it public.`,
+    ownerTitle: 'Nothing here yet',
+    ownerCta: 'Start adding tracks',
     visitor: `This ${collectionType} is empty...`
   },
   type: {
@@ -48,19 +50,24 @@ const getMessages = (collectionType: 'album' | 'playlist') => ({
   remove: 'Remove from this'
 })
 
-const EmptyPage = (props: {
+type EmptyPageProps = {
   text?: string | null
   isOwner: boolean
   isAlbum: boolean
-}) => {
-  const messages = getMessages(props.isAlbum ? 'album' : 'playlist')
-  const text =
-    props.text ||
-    (props.isOwner ? messages.emptyPage.owner : messages.emptyPage.visitor)
+}
+
+const EmptyPage = (props: EmptyPageProps) => {
+  const { isAlbum, isOwner, text: textProp } = props
+  const messages = getMessages(isAlbum ? 'album' : 'playlist')
   return (
-    <div className={styles.emptyWrapper}>
-      <p className={styles.emptyText}>{text}</p>
-    </div>
+    <Flex p='2xl' alignItems='center' direction='column' gap='s'>
+      <Text variant='title' size='l'>
+        {textProp ?? isOwner
+          ? messages.emptyPage.ownerTitle
+          : messages.emptyPage.visitor}
+      </Text>
+      {isOwner ? <Text size='l'>{messages.emptyPage.ownerCta}</Text> : null}
+    </Flex>
   )
 }
 
@@ -107,6 +114,7 @@ export type CollectionPageProps = {
   ) => void
   onClickReposts?: () => void
   onClickFavorites?: () => void
+  trackCount: number
 }
 
 const CollectionPage = ({
@@ -134,7 +142,8 @@ const CollectionPage = ({
   onReorderTracks,
   onClickRemove,
   onClickReposts,
-  onClickFavorites
+  onClickFavorites,
+  trackCount
 }: CollectionPageProps) => {
   const { status, metadata, user } = collection
 
@@ -147,7 +156,8 @@ const CollectionPage = ({
   const queuedAndPlaying = playing && isQueued()
   const queuedAndPreviewing = previewing && isQueued()
   const tracksLoading =
-    tracks.status === Status.LOADING || tracks.status === Status.IDLE
+    trackCount > 0 &&
+    (tracks.status === Status.LOADING || tracks.status === Status.IDLE)
 
   const coverArtSizes =
     metadata && metadata?.variant !== Variant.SMART