[C-2763] Fix desktop playlist qa issues

packages/common/src/store/playlist-library/helpers.ts

@@ -310,7 +310,7 @@ export const addFolderToLibrary = (
 ): PlaylistLibrary => {
   return {
     ...(library || {}),
-    contents: [...(library?.contents || []), folder]
+    contents: [folder, ...(library?.contents || [])]
   }
 }
 

packages/stems/src/assets/styles/animations.css

@@ -8,5 +8,6 @@
 :root,
 root {
   --quick: 0.07s ease-in-out;
-  --calm: 0.2s ease-in-out;
+  --expressive: 0.2s ease-in-out;
+  --calm: 0.5s ease-in-out;
 }

packages/stems/src/components/Button/Button.module.css

@@ -59,15 +59,15 @@
 }
 
 .button .icon.left.noText {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .button .icon.right {
   margin-left: var(--unit-3);
 }
 
 .button .icon.right.noText {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .button .icon {

packages/web/src/components/collection/desktop/CollectionHeader.module.css

@@ -1,3 +1,12 @@
+.hide {
+  opacity: 0;
+}
+
+.show {
+  opacity: 1;
+  transition: opacity var(--calm);
+}
+
 .collectionHeader {
   padding: 16px 16px 24px 16px;
   margin: 0 auto;
@@ -22,14 +31,14 @@
 }
 
 .coverArt {
+  background-color: var(--neutral-light-6) !important;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }
 
 .infoSection {
   margin-left: 38px;
-  flex-direction: column;
   width: 100%;
 }
 
@@ -51,7 +60,6 @@
   align-items: center;
   column-gap: var(--unit-2);
   margin-bottom: var(--unit-1);
-  width: 100%;
   position: relative;
 }
 
@@ -64,7 +72,7 @@
   font-size: var(--font-4xl);
   line-height: 40px;
   font-weight: var(--font-bold);
-  transition: color var(--quick);
+  transition: opacity var(--calm), color var(--quick);
 }
 
 .editableTitle:hover .titleHeader {
@@ -189,15 +197,6 @@
   fill: var(--neutral-light-4);
 }
 
-.hide {
-  opacity: 0;
-}
-
-.show {
-  opacity: 1;
-  transition: opacity ease-in-out 0.5s;
-}
-
 .skeleton {
   position: absolute;
   top: 0;
@@ -221,7 +220,7 @@
 
 .imageEditButtonWrapper {
   opacity: 0;
-  transition: opacity var(--calm);
+  transition: opacity var(--expressive);
   position: absolute;
   bottom: var(--unit-4);
 }

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

@@ -17,8 +17,6 @@ import { Tooltip } from 'components/tooltip'
 
 import { EntityActionButton } from '../../entity-page/EntityActionButton'
 
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
-
 const { getCollection } = collectionPageSelectors
 const { getAccountCollections } = accountSelectors
 const {
@@ -87,7 +85,6 @@ export const FavoriteButton = (props: FavoriteButtonProps) => {
         text={isSaved ? messages.favorited : messages.favorite}
         leftIcon={<IconHeart />}
         onClick={handleFavorite}
-        widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
         {...other}
       />
     </Tooltip>

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

@@ -27,11 +27,18 @@ export const OwnerActionButtons = (props: OwnerActionButtonProps) => {
     <>
       <EditButton
         collectionId={collectionId}
+        widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
+      />
+      <ShareButton
+        collectionId={collectionId}
+        disabled={track_count === 0}
         widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
       />
-      <ShareButton collectionId={collectionId} disabled={track_count === 0} />
       {is_private && !is_album ? (
-        <PublishButton collectionId={collectionId} />
+        <PublishButton
+          collectionId={collectionId}
+          widthToHideText={BUTTON_COLLAPSE_WIDTHS.fourth}
+        />
       ) : null}
 
       {!is_private ? (

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

@@ -15,7 +15,6 @@ import { EntityActionButton } from '../../entity-page/EntityActionButton'
 
 import styles from './CollectionHeader.module.css'
 import { PublishConfirmationModal } from './PublishConfirmationModal'
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { getCollection } = collectionPageSelectors
 const { getCollecitonHasHiddenTracks } = cacheCollectionsSelectors
@@ -63,7 +62,6 @@ export const PublishButton = (props: PublishButtonProps) => {
         )
       }
       onClick={_is_publishing ? undefined : toggleIsConfirming}
-      widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
       disabled={isDisabled}
       {...other}
     />

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

@@ -40,7 +40,8 @@ export const PublishConfirmationModal = (
 
   const handlePublish = useCallback(() => {
     dispatch(publishPlaylist(collectionId))
-  }, [dispatch, collectionId])
+    onClose()
+  }, [dispatch, collectionId, onClose])
 
   return (
     <Modal {...other} size='small'>

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

@@ -15,8 +15,6 @@ import { Tooltip } from 'components/tooltip'
 
 import { EntityActionButton } from '../../entity-page/EntityActionButton'
 
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
-
 const { getCollection } = collectionPageSelectors
 const { repostCollection, undoRepostCollection } = collectionsSocialActions
 
@@ -59,7 +57,6 @@ export const RepostButton = (props: RepostButtonProps) => {
         text={has_current_user_reposted ? messages.reposted : messages.repost}
         leftIcon={<IconRepost />}
         onClick={handleRepost}
-        widthToHideText={BUTTON_COLLAPSE_WIDTHS.third}
         {...other}
       />
     </Tooltip>

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

@@ -13,8 +13,6 @@ import { Tooltip } from 'components/tooltip'
 
 import { EntityActionButton } from '../../entity-page/EntityActionButton'
 
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
-
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
 
 const messages = {
@@ -61,7 +59,6 @@ export const ShareButton = (props: ShareButtonProps) => {
       type={type ?? ButtonType.COMMON}
       text={messages.share}
       leftIcon={<IconShare />}
-      widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
       onClick={handleShare}
       {...other}
     />

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

@@ -2,6 +2,7 @@ import { ID, SmartCollectionVariant } from '@audius/common'
 
 import { FavoriteButton } from './FavoriteButton'
 import { ShareButton } from './ShareButton'
+import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 type SmartCollectionActionButtonsProps = {
   collectionId: SmartCollectionVariant
@@ -14,8 +15,12 @@ export const SmartCollectionActionButtons = (
   const { collectionId, userId } = props
 
   return collectionId === SmartCollectionVariant.AUDIO_NFT_PLAYLIST ? (
-    <ShareButton collectionId={collectionId} userId={userId} />
+    <ShareButton
+      collectionId={collectionId}
+      userId={userId}
+      widthToHideText={BUTTON_COLLAPSE_WIDTHS.second}
+    />
   ) : (
-    <FavoriteButton />
+    <FavoriteButton widthToHideText={BUTTON_COLLAPSE_WIDTHS.second} />
   )
 }

packages/web/src/components/image-selection/ImageSelectionButton.js

@@ -18,6 +18,7 @@ const messages = {
 }
 
 const ImageSelectionButton = ({
+  anchorRef: anchorRefProp,
   wrapperClassName,
   buttonClassName,
   hasImage,
@@ -32,7 +33,7 @@ const ImageSelectionButton = ({
   source,
   defaultPopupOpen = false
 }) => {
-  const anchorRef = useRef()
+  const anchorRefInner = useRef()
   const [showModal, setShowModal] = useState(defaultPopupOpen)
 
   const closeModal = () => {
@@ -65,7 +66,7 @@ const ImageSelectionButton = ({
       {includePopup ? (
         <>
           <Button
-            ref={anchorRef}
+            ref={anchorRefProp ? undefined : anchorRefInner}
             className={cn(styles.button, buttonClassName, {
               [styles.hide]: showModal
             })}
@@ -75,7 +76,7 @@ const ImageSelectionButton = ({
             onClick={handleClick}
           />
           <ImageSelectionPopup
-            anchorRef={anchorRef}
+            anchorRef={anchorRefProp ?? anchorRefInner}
             className={styles.popup}
             error={error}
             isVisible={showModal}
@@ -113,6 +114,7 @@ const ImageSelectionButton = ({
 }
 
 ImageSelectionButton.propTypes = {
+  anchorRef: PropTypes.any,
   wrapperClassName: PropTypes.string,
   buttonClassName: PropTypes.string,
   hasImage: PropTypes.bool.isRequired,

packages/web/src/components/image-selection/ImageSelectionPopup.js

@@ -288,6 +288,8 @@ const ImageSelectionPopup = ({
   return (
     <Popup
       anchorRef={anchorRef}
+      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+      transformOrigin={{ vertical: 'center', horizontal: 'left' }}
       className={cn(styles.popup, className)}
       isVisible={isVisible}
       onClose={handleClose}

packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, MouseEvent } from 'react'
+import { useCallback, useState } from 'react'
 
 import {
   Name,
@@ -90,18 +90,12 @@ export const CollectionNavItem = (props: CollectionNavItemProps) => {
     setIsHovering(false)
   }, [])
 
-  const handleClickEdit = useCallback(
-    (event: MouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      // Can only edit user owned playlists
-      if (typeof id === 'number') {
-        dispatch(openEditPlaylistModal({ collectionId: id }))
-        record(make(Name.PLAYLIST_OPEN_EDIT_FROM_LIBRARY, {}))
-      }
-    },
-    [dispatch, id, record]
-  )
+  const handleEdit = useCallback(() => {
+    if (typeof id === 'number') {
+      dispatch(openEditPlaylistModal({ collectionId: id }))
+      record(make(Name.PLAYLIST_OPEN_EDIT_FROM_LIBRARY, {}))
+    }
+  }, [dispatch, id, record])
 
   const handleShare = useCallback(() => {
     if (typeof id === 'number') {
@@ -122,7 +116,7 @@ export const CollectionNavItem = (props: CollectionNavItemProps) => {
   const kebabItems: PopupMenuItem[] = [
     {
       text: messages.edit,
-      onClick: handleClickEdit
+      onClick: handleEdit
     },
     { text: messages.share, onClick: handleShare },
     { text: messages.delete, onClick: handleDelete }
@@ -201,7 +195,6 @@ export const CollectionNavItem = (props: CollectionNavItemProps) => {
               <NavItemKebabButton
                 visible={isOwned && isHovering && !isDraggingOver}
                 aria-label={messages.editPlaylistLabel}
-                onClick={handleClickEdit}
                 items={kebabItems}
               />
             </span>

packages/web/src/components/nav/desktop/PlaylistLibrary/NavItemKebabButton.tsx

@@ -42,7 +42,6 @@ export const NavItemKebabButton = (props: EditNavItemButtonProps) => {
       items={items}
       renderTrigger={(ref, onClick, triggerProps) => {
         const handleClick = (e: MouseEvent) => {
-          e.stopPropagation()
           e.preventDefault()
           onClick()
         }

packages/web/src/components/upload/UploadArtwork.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 import { imageBlank as placeholderArt } from '@audius/common'
 import cn from 'classnames'
@@ -17,6 +17,7 @@ const messages = {
 const UploadArtwork = (props) => {
   const [processing, setProcessing] = useState(false)
   const [showTip, setShowTip] = useState(false)
+  const imageSelectionAnchorRef = useRef()
 
   useEffect(() => {
     if (props.error) {
@@ -39,6 +40,7 @@ const UploadArtwork = (props) => {
       className={cn(styles.uploadArtwork, {
         [styles.error]: props.error
       })}
+      ref={imageSelectionAnchorRef}
     >
       <div
         className={styles.artworkWrapper}
@@ -60,6 +62,7 @@ const UploadArtwork = (props) => {
           open={showTip}
         >
           <ImageSelectionButton
+            anchorRef={imageSelectionAnchorRef}
             defaultPopupOpen={props.defaultPopupOpen}
             imageName={messages.imageName}
             hasImage={!!props.artworkUrl}

packages/web/src/pages/App.js

@@ -826,12 +826,18 @@ class App extends Component {
                 <Route
                   exact
                   path={PLAYLIST_PAGE}
-                  render={() => <CollectionPage type='playlist' />}
+                  render={({ location }) => {
+                    return (
+                      <CollectionPage key={location.pathname} type='playlist' />
+                    )
+                  }}
                 />
                 <Route
                   exact
                   path={ALBUM_PAGE}
-                  render={() => <CollectionPage type='album' />}
+                  render={({ location }) => (
+                    <CollectionPage key={location.pathname} type='album' />
+                  )}
                 />
 
                 {/* Hash id routes */}

packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css

@@ -21,7 +21,7 @@
   max-width: 448px;
   filter: var(--drop-shadow-near);
   color: var(--static-netural);
-  transition: background-color var(--calm), filter var(--calm);
+  transition: background-color var(--expressive), filter var(--expressive);
 }
 
 .bubbleCorners {