From d300afea6a884f835ad16ed608c984031686311d Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 21 Jun 2023 22:59:10 -0700
Subject: [PATCH 1/2] [C-2763] Fix desktop playlist qa issues

---
 .../src/store/playlist-library/helpers.ts     |  2 +-
 .../stems/src/assets/styles/animations.css    |  3 ++-
 .../src/components/Button/Button.module.css   |  4 +--
 .../components/collection/desktop/Artwork.tsx | 13 +++++++++-
 .../desktop/CollectionHeader.module.css       | 25 +++++++++----------
 .../collection/desktop/FavoriteButton.tsx     |  2 --
 .../collection/desktop/OwnerActionButtons.tsx | 11 ++++++--
 .../collection/desktop/PublishButton.tsx      |  2 --
 .../desktop/PublishConfirmationModal.tsx      |  3 ++-
 .../collection/desktop/RepostButton.tsx       |  2 --
 .../collection/desktop/ShareButton.tsx        |  3 ---
 .../desktop/SmartCollectionActionButtons.tsx  |  9 +++++--
 .../image-selection/ImageSelectionButton.js   |  8 +++---
 .../image-selection/ImageSelectionPopup.js    |  2 ++
 .../PlaylistLibrary/CollectionNavItem.tsx     | 23 ++++++-----------
 .../PlaylistLibrary/NavItemKebabButton.tsx    |  1 -
 .../src/components/upload/UploadArtwork.js    |  5 +++-
 packages/web/src/pages/App.js                 | 10 ++++++--
 .../components/ChatMessageListItem.module.css |  2 +-
 19 files changed, 75 insertions(+), 55 deletions(-)

diff --git a/packages/common/src/store/playlist-library/helpers.ts b/packages/common/src/store/playlist-library/helpers.ts
index 5e819312eb..02e7fb6021 100644
--- a/packages/common/src/store/playlist-library/helpers.ts
+++ b/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 || [])]
   }
 }
 
diff --git a/packages/stems/src/assets/styles/animations.css b/packages/stems/src/assets/styles/animations.css
index b20e41efcf..55313b50d3 100644
--- a/packages/stems/src/assets/styles/animations.css
+++ b/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;
 }
diff --git a/packages/stems/src/components/Button/Button.module.css b/packages/stems/src/components/Button/Button.module.css
index 046613706a..4b4f319ce5 100644
--- a/packages/stems/src/components/Button/Button.module.css
+++ b/packages/stems/src/components/Button/Button.module.css
@@ -59,7 +59,7 @@
 }
 
 .button .icon.left.noText {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .button .icon.right {
@@ -67,7 +67,7 @@
 }
 
 .button .icon.right.noText {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .button .icon {
diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx
index 4851089c66..849dc19cd6 100644
--- a/packages/web/src/components/collection/desktop/Artwork.tsx
+++ b/packages/web/src/components/collection/desktop/Artwork.tsx
@@ -1,6 +1,10 @@
 import { ComponentType, SVGProps, useCallback, useEffect } from 'react'
 
-import { CoverArtSizes, SquareSizes } from '@audius/common'
+import {
+  imageBlank as placeholderArt,
+  CoverArtSizes,
+  SquareSizes
+} from '@audius/common'
 import { Button, ButtonType, IconPencil } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
@@ -54,6 +58,13 @@ export const Artwork = (props: ArtworkProps) => {
     )
   }, [dispatch, collectionId])
 
+  console.log({
+    gradient,
+    imageOverride,
+    image,
+    placeholderArt
+  })
+
   return (
     <DynamicImage
       wrapperClassName={styles.coverArtWrapper}
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.module.css b/packages/web/src/components/collection/desktop/CollectionHeader.module.css
index dace2234ca..795bf0e295 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.module.css
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.module.css
@@ -1,3 +1,12 @@
+.hide {
+  opacity: 0;
+}
+
+.show {
+  opacity: 1;
+  transition: opacity ease-in-out 0.5s;
+}
+
 .collectionHeader {
   padding: 16px 16px 24px 16px;
   margin: 0 auto;
@@ -22,6 +31,7 @@
 }
 
 .coverArt {
+  background-color: var(--neutral-light-6) !important;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -29,7 +39,6 @@
 
 .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);
 }
diff --git a/packages/web/src/components/collection/desktop/FavoriteButton.tsx b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
index b4b9ec1053..fd3be2428f 100644
--- a/packages/web/src/components/collection/desktop/FavoriteButton.tsx
+++ b/packages/web/src/components/collection/desktop/FavoriteButton.tsx
@@ -16,7 +16,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Tooltip } from 'components/tooltip'
 
 import { EntityActionButton } from '../../entity-page/EntityActionButton'
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { getCollection } = collectionPageSelectors
 const { getAccountCollections } = accountSelectors
@@ -86,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>
diff --git a/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx b/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx
index b0a9112f2c..f1373e4f0b 100644
--- a/packages/web/src/components/collection/desktop/OwnerActionButtons.tsx
+++ b/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 ? (
diff --git a/packages/web/src/components/collection/desktop/PublishButton.tsx b/packages/web/src/components/collection/desktop/PublishButton.tsx
index 8c62ca707a..d93926eb3d 100644
--- a/packages/web/src/components/collection/desktop/PublishButton.tsx
+++ b/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}
     />
diff --git a/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx b/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
index 343a15dbe5..e98fbe08e2 100644
--- a/packages/web/src/components/collection/desktop/PublishConfirmationModal.tsx
+++ b/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'>
diff --git a/packages/web/src/components/collection/desktop/RepostButton.tsx b/packages/web/src/components/collection/desktop/RepostButton.tsx
index 51a630ca5d..87331a7333 100644
--- a/packages/web/src/components/collection/desktop/RepostButton.tsx
+++ b/packages/web/src/components/collection/desktop/RepostButton.tsx
@@ -14,7 +14,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import { Tooltip } from 'components/tooltip'
 
 import { EntityActionButton } from '../../entity-page/EntityActionButton'
-import { BUTTON_COLLAPSE_WIDTHS } from './utils'
 
 const { getCollection } = collectionPageSelectors
 const { repostCollection, undoRepostCollection } = collectionsSocialActions
@@ -58,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>
diff --git a/packages/web/src/components/collection/desktop/ShareButton.tsx b/packages/web/src/components/collection/desktop/ShareButton.tsx
index ebbbf5ea51..a1c6679d0a 100644
--- a/packages/web/src/components/collection/desktop/ShareButton.tsx
+++ b/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}
     />
diff --git a/packages/web/src/components/collection/desktop/SmartCollectionActionButtons.tsx b/packages/web/src/components/collection/desktop/SmartCollectionActionButtons.tsx
index a9326356e7..f809756ba7 100644
--- a/packages/web/src/components/collection/desktop/SmartCollectionActionButtons.tsx
+++ b/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} />
   )
 }
diff --git a/packages/web/src/components/image-selection/ImageSelectionButton.js b/packages/web/src/components/image-selection/ImageSelectionButton.js
index 8b2f9e773c..759f36bb3d 100644
--- a/packages/web/src/components/image-selection/ImageSelectionButton.js
+++ b/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,
diff --git a/packages/web/src/components/image-selection/ImageSelectionPopup.js b/packages/web/src/components/image-selection/ImageSelectionPopup.js
index e973402330..ebc6712a2f 100644
--- a/packages/web/src/components/image-selection/ImageSelectionPopup.js
+++ b/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}
diff --git a/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx b/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx
index 90d02af632..b679bca48a 100644
--- a/packages/web/src/components/nav/desktop/PlaylistLibrary/CollectionNavItem.tsx
+++ b/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>
diff --git a/packages/web/src/components/nav/desktop/PlaylistLibrary/NavItemKebabButton.tsx b/packages/web/src/components/nav/desktop/PlaylistLibrary/NavItemKebabButton.tsx
index 899f9b28f5..b8397b1710 100644
--- a/packages/web/src/components/nav/desktop/PlaylistLibrary/NavItemKebabButton.tsx
+++ b/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()
         }
diff --git a/packages/web/src/components/upload/UploadArtwork.js b/packages/web/src/components/upload/UploadArtwork.js
index bc33eef459..b298229f75 100644
--- a/packages/web/src/components/upload/UploadArtwork.js
+++ b/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}
diff --git a/packages/web/src/pages/App.js b/packages/web/src/pages/App.js
index 8ab54d2f3d..49886132d7 100644
--- a/packages/web/src/pages/App.js
+++ b/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 */}
diff --git a/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css b/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
index dc7b4ded03..31666436e9 100644
--- a/packages/web/src/pages/chat-page/components/ChatMessageListItem.module.css
+++ b/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 {

From 4c86a89530d6d241ed604acbe71778cff5441503 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 22 Jun 2023 10:51:08 -0700
Subject: [PATCH 2/2] Address comments

---
 .../src/components/collection/desktop/Artwork.tsx   | 13 +------------
 .../collection/desktop/CollectionHeader.module.css  |  2 +-
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/components/collection/desktop/Artwork.tsx b/packages/web/src/components/collection/desktop/Artwork.tsx
index 849dc19cd6..4851089c66 100644
--- a/packages/web/src/components/collection/desktop/Artwork.tsx
+++ b/packages/web/src/components/collection/desktop/Artwork.tsx
@@ -1,10 +1,6 @@
 import { ComponentType, SVGProps, useCallback, useEffect } from 'react'
 
-import {
-  imageBlank as placeholderArt,
-  CoverArtSizes,
-  SquareSizes
-} from '@audius/common'
+import { CoverArtSizes, SquareSizes } from '@audius/common'
 import { Button, ButtonType, IconPencil } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
@@ -58,13 +54,6 @@ export const Artwork = (props: ArtworkProps) => {
     )
   }, [dispatch, collectionId])
 
-  console.log({
-    gradient,
-    imageOverride,
-    image,
-    placeholderArt
-  })
-
   return (
     <DynamicImage
       wrapperClassName={styles.coverArtWrapper}
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.module.css b/packages/web/src/components/collection/desktop/CollectionHeader.module.css
index 795bf0e295..117f39c740 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.module.css
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.module.css
@@ -4,7 +4,7 @@
 
 .show {
   opacity: 1;
-  transition: opacity ease-in-out 0.5s;
+  transition: opacity var(--calm);
 }
 
 .collectionHeader {