From 88d76ad06e86d564c2128f9b096da7dbb6047084 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 29 Aug 2024 18:28:47 +0200
Subject: [PATCH 1/5] [C-4799] Add mobile web comments

---
 packages/common/src/utils/route.ts            |   1 +
 .../components/comments/CommentSection.tsx    |   9 +-
 packages/web/src/app/web-player/WebPlayer.jsx |  10 ++
 .../src/components/comments/CommentBlock.tsx  |  19 +--
 .../src/components/comments/CommentList.tsx   |  24 ++++
 .../components/comments/CommentSection.tsx    |   3 +-
 .../comments/CommentSectionMobile.tsx         | 118 ++++++++++++++++++
 .../src/components/comments/CommentThread.tsx |  49 +++++---
 .../pages/track-page/TrackCommentsPage.tsx    |  47 +++++++
 .../components/desktop/TrackPage.tsx          |   2 +-
 .../components/mobile/TrackPage.module.css    |  27 ----
 .../components/mobile/TrackPage.tsx           |  52 ++++----
 12 files changed, 283 insertions(+), 78 deletions(-)
 create mode 100644 packages/web/src/components/comments/CommentList.tsx
 create mode 100644 packages/web/src/components/comments/CommentSectionMobile.tsx
 create mode 100644 packages/web/src/pages/track-page/TrackCommentsPage.tsx
 delete mode 100644 packages/web/src/pages/track-page/components/mobile/TrackPage.module.css

diff --git a/packages/common/src/utils/route.ts b/packages/common/src/utils/route.ts
index 037ab0f6c83..1e282cbcf78 100644
--- a/packages/common/src/utils/route.ts
+++ b/packages/common/src/utils/route.ts
@@ -125,6 +125,7 @@ export const EDIT_ALBUM_PAGE = '/:handle/album/:slug/edit'
 export const TRACK_PAGE = '/:handle/:slug'
 export const TRACK_EDIT_PAGE = '/:handle/:slug/edit'
 export const TRACK_REMIXES_PAGE = '/:handle/:slug/remixes'
+export const TRACK_COMMENTS_PAGE = '/:handle/:slug/comments'
 export const PROFILE_PAGE = '/:handle'
 export const PROFILE_PAGE_TRACKS = '/:handle/tracks'
 export const PROFILE_PAGE_ALBUMS = '/:handle/albums'
diff --git a/packages/mobile/src/components/comments/CommentSection.tsx b/packages/mobile/src/components/comments/CommentSection.tsx
index 67d3edf756c..51118ef9fb3 100644
--- a/packages/mobile/src/components/comments/CommentSection.tsx
+++ b/packages/mobile/src/components/comments/CommentSection.tsx
@@ -23,22 +23,19 @@ import { CommentForm } from './CommentForm'
 
 const messages = {
   noComments: 'Nothing here yet',
-  viewAll: 'View all'
+  viewAll: 'View All'
 }
 
 const CommentSectionHeader = () => {
   const {
-    artistId,
-    currentUserId,
     entityId,
     commentSectionLoading: isLoading,
-    comments,
-    isEntityOwner
+    comments
   } = useCurrentCommentSection()
   const { onOpen: openDrawer } = useDrawer('Comment')
 
   const handlePressViewAll = () => {
-    openDrawer({ userId: currentUserId, entityId, isEntityOwner, artistId })
+    openDrawer({ entityId })
   }
 
   const isShowingComments = !isLoading && comments?.length
diff --git a/packages/web/src/app/web-player/WebPlayer.jsx b/packages/web/src/app/web-player/WebPlayer.jsx
index af6f86aad0c..0b1f75fad01 100644
--- a/packages/web/src/app/web-player/WebPlayer.jsx
+++ b/packages/web/src/app/web-player/WebPlayer.jsx
@@ -105,6 +105,8 @@ import { getPathname } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
 
+import { TrackCommentsPage } from 'pages/track-page/TrackCommentsPage'
+
 const {
   FEED_PAGE,
   TRENDING_PAGE,
@@ -135,6 +137,7 @@ const {
   PLAYLIST_PAGE,
   ALBUM_PAGE,
   TRACK_PAGE,
+  TRACK_COMMENTS_PAGE,
   TRACK_REMIXES_PAGE,
   PROFILE_PAGE,
   authenticatedRoutes,
@@ -911,6 +914,13 @@ class WebPlayer extends Component {
                   component={AiAttributedTracksPage}
                 />
                 <Route exact path={TRACK_PAGE} component={TrackPage} />
+                <MobileRoute
+                  exact
+                  path={TRACK_COMMENTS_PAGE}
+                  isMobile={isMobile}
+                  component={TrackCommentsPage}
+                />
+                <Route exact path={TRACK_PAGE} component={TrackPage} />
                 <DesktopRoute
                   path={TRACK_EDIT_PAGE}
                   isMobile={isMobile}
diff --git a/packages/web/src/components/comments/CommentBlock.tsx b/packages/web/src/components/comments/CommentBlock.tsx
index 0f228c7754f..1e094e6a263 100644
--- a/packages/web/src/components/comments/CommentBlock.tsx
+++ b/packages/web/src/components/comments/CommentBlock.tsx
@@ -26,10 +26,11 @@ const { getUser } = cacheUsersSelectors
 export type CommentBlockProps = {
   comment: Comment
   parentCommentId?: string
+  hideActions?: boolean
 }
 
 export const CommentBlock = (props: CommentBlockProps) => {
-  const { comment, parentCommentId } = props
+  const { comment, parentCommentId, hideActions } = props
   const {
     isPinned,
     message,
@@ -120,13 +121,15 @@ export const CommentBlock = (props: CommentBlockProps) => {
         ) : (
           <Text color='default'>{message}</Text>
         )}
-        <CommentActionBar
-          comment={comment}
-          onClickReply={() => setShowReplyInput((prev) => !prev)}
-          onClickEdit={() => setShowEditInput((prev) => !prev)}
-          onClickDelete={() => deleteComment(commentId)}
-          isDisabled={isDeleting}
-        />
+        {hideActions ? null : (
+          <CommentActionBar
+            comment={comment}
+            onClickReply={() => setShowReplyInput((prev) => !prev)}
+            onClickEdit={() => setShowEditInput((prev) => !prev)}
+            onClickDelete={() => deleteComment(commentId)}
+            isDisabled={isDeleting}
+          />
+        )}
 
         {showReplyInput ? (
           <CommentForm
diff --git a/packages/web/src/components/comments/CommentList.tsx b/packages/web/src/components/comments/CommentList.tsx
new file mode 100644
index 00000000000..e0eb5275459
--- /dev/null
+++ b/packages/web/src/components/comments/CommentList.tsx
@@ -0,0 +1,24 @@
+import { useCurrentCommentSection } from '@audius/common/context'
+import { Flex } from '@audius/harmony'
+
+import { CommentSkeletons } from './CommentSkeletons'
+import { CommentThread } from './CommentThread'
+import { NoComments } from './NoComments'
+
+export const CommentList = () => {
+  const { comments, commentSectionLoading } = useCurrentCommentSection()
+
+  // TODO: break out list skeleton from reply skeleton
+  if (commentSectionLoading) {
+    return <CommentSkeletons />
+  }
+
+  return (
+    <Flex p='l' as='ul' column gap='xl' w='100%' backgroundColor='white'>
+      {comments.length === 0 ? <NoComments /> : null}
+      {comments.map(({ id }) => (
+        <CommentThread commentId={id} key={id} />
+      ))}
+    </Flex>
+  )
+}
diff --git a/packages/web/src/components/comments/CommentSection.tsx b/packages/web/src/components/comments/CommentSection.tsx
index 604bc7b0069..683d90a38c8 100644
--- a/packages/web/src/components/comments/CommentSection.tsx
+++ b/packages/web/src/components/comments/CommentSection.tsx
@@ -5,6 +5,7 @@ import { EntityType } from '@audius/sdk'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 import { CommentSectionDesktop } from './CommentSectionDesktop'
+import { CommentSectionMobile } from './CommentSectionMobile'
 
 type CommentSectionProps = {
   entityId: ID
@@ -17,7 +18,7 @@ export const CommentSection = (props: CommentSectionProps) => {
 
   return (
     <CommentSectionProvider entityId={entityId} entityType={entityType}>
-      {isMobile ? null : <CommentSectionDesktop />}
+      {isMobile ? <CommentSectionMobile /> : <CommentSectionDesktop />}
     </CommentSectionProvider>
   )
 }
diff --git a/packages/web/src/components/comments/CommentSectionMobile.tsx b/packages/web/src/components/comments/CommentSectionMobile.tsx
new file mode 100644
index 00000000000..cfc8e439b73
--- /dev/null
+++ b/packages/web/src/components/comments/CommentSectionMobile.tsx
@@ -0,0 +1,118 @@
+import { useGetTrackById } from '@audius/common/api'
+import {
+  useCurrentCommentSection,
+  usePostComment
+} from '@audius/common/context'
+import { Status } from '@audius/common/models'
+import { COMMENTS_PAGE } from '@audius/common/src/utils/route'
+import {
+  Flex,
+  IconCaretRight,
+  Paper,
+  PlainButton,
+  Skeleton,
+  Text
+} from '@audius/harmony'
+import { Link } from 'react-router-dom'
+import { generatePath } from 'react-router-dom-v5-compat'
+
+import { CommentBlock } from './CommentBlock'
+import { CommentForm } from './CommentForm'
+
+const messages = {
+  noComments: 'Nothing here yet',
+  viewAll: 'View All'
+}
+
+const CommentSectionHeader = () => {
+  const {
+    entityId,
+    commentSectionLoading: isLoading,
+    comments
+  } = useCurrentCommentSection()
+
+  const { data: track } = useGetTrackById({ id: entityId })
+
+  const handleClickViewAll = () => {
+    // TODO open the page
+    // openDrawer({ userId: currentUserId, entityId, isEntityOwner, artistId })
+  }
+
+  const isShowingComments = !isLoading && comments?.length
+
+  return (
+    <Flex
+      direction='row'
+      w='100%'
+      justifyContent='space-between'
+      alignItems='center'
+    >
+      <Text variant='title' size='m'>
+        Comments
+        {isShowingComments ? (
+          <Text color='subdued'>&nbsp;({comments.length})</Text>
+        ) : null}
+      </Text>
+      {isShowingComments ? (
+        <PlainButton
+          onClick={handleClickViewAll}
+          iconRight={IconCaretRight}
+          variant='subdued'
+          asChild
+        >
+          <Link to={`${track?.permalink}/comments`}>{messages.viewAll}</Link>
+        </PlainButton>
+      ) : null}
+    </Flex>
+  )
+}
+
+const CommentSectionContent = () => {
+  const { commentSectionLoading: isLoading, comments } =
+    useCurrentCommentSection()
+
+  const [postComment, { status: postCommentStatus }] = usePostComment()
+
+  const handlePostComment = (message: string) => {
+    postComment(message, undefined)
+  }
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Flex direction='row' gap='s' alignItems='center'>
+        <Skeleton w={40} h={40} css={{ borderRadius: 100 }} />
+        <Flex gap='s'>
+          <Skeleton h={20} w={240} />
+          <Skeleton h={20} w={160} />
+        </Flex>
+      </Flex>
+    )
+  }
+
+  // Empty state
+  if (!comments || !comments.length) {
+    return (
+      <Flex gap='m'>
+        <Text variant='body'>{messages.noComments}</Text>
+        <CommentForm
+          onSubmit={handlePostComment}
+          isLoading={postCommentStatus === Status.LOADING}
+        />
+      </Flex>
+    )
+  }
+
+  return <CommentBlock comment={comments[0]} hideActions />
+}
+
+export const CommentSectionMobile = () => {
+  return (
+    <Flex gap='s' direction='column' w='100%' alignItems='flex-start'>
+      <CommentSectionHeader />
+      <Paper w='100%' direction='column' gap='s' p='l'>
+        <CommentSectionContent />
+      </Paper>
+    </Flex>
+  )
+}
diff --git a/packages/web/src/components/comments/CommentThread.tsx b/packages/web/src/components/comments/CommentThread.tsx
index 250364684b2..754df0c139e 100644
--- a/packages/web/src/components/comments/CommentThread.tsx
+++ b/packages/web/src/components/comments/CommentThread.tsx
@@ -2,13 +2,23 @@ import { useState } from 'react'
 
 import { useGetCommentById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
-import { Flex, IconCaretDown, IconCaretUp, TextLink } from '@audius/harmony'
+import {
+  Box,
+  Flex,
+  IconCaretDown,
+  IconCaretUp,
+  PlainButton,
+  TextLink
+} from '@audius/harmony'
 import { ReplyComment } from '@audius/sdk'
 
 import { CommentBlock } from './CommentBlock'
 
 const messages = {
-  showMoreReplies: 'Show More Replies'
+  showMoreReplies: 'Show More Replies',
+  replies: 'Replies',
+  showReplies: 'Show Replies',
+  hideReplies: 'Hide Replies'
 }
 
 export const CommentThread = ({ commentId }: { commentId: string }) => {
@@ -17,7 +27,7 @@ export const CommentThread = ({ commentId }: { commentId: string }) => {
   })
   const { handleLoadMoreReplies } = useCurrentCommentSection()
   const [hiddenReplies, setHiddenReplies] = useState<{
-    [parentCommentId: number]: boolean
+    [parentCommentId: string]: boolean
   }>({})
 
   const toggleReplies = (commentId: string) => {
@@ -29,23 +39,34 @@ export const CommentThread = ({ commentId }: { commentId: string }) => {
   if (!rootComment) return null
 
   return (
-    <Flex direction='column'>
+    <Flex direction='column' as='li'>
       <CommentBlock comment={rootComment} />
       <Flex ml='56px' direction='column' mt='l' gap='l'>
         {(rootComment?.replies?.length ?? 0) > 0 ? (
-          <TextLink onClick={() => toggleReplies(rootComment.id)}>
-            {hiddenReplies[rootComment.id] ? (
-              <IconCaretUp color='subdued' size='m' />
-            ) : (
-              <IconCaretDown color='subdued' size='m' />
-            )}
-            {hiddenReplies[rootComment.id] ? 'Show' : 'Hide'} Replies
-          </TextLink>
+          <Box alignSelf='flex-start'>
+            <PlainButton
+              onClick={() => toggleReplies(rootComment.id)}
+              variant='subdued'
+              iconLeft={
+                hiddenReplies[rootComment.id] ? IconCaretDown : IconCaretUp
+              }
+              fullWidth={false}
+            >
+              {hiddenReplies[rootComment.id]
+                ? messages.showReplies
+                : messages.hideReplies}
+            </PlainButton>
+          </Box>
         ) : null}
         {hiddenReplies[rootComment.id] ? null : (
-          <Flex direction='column' gap='l'>
+          <Flex
+            direction='column'
+            gap='l'
+            as='ul'
+            aria-label={messages.replies}
+          >
             {rootComment?.replies?.map((reply: ReplyComment) => (
-              <Flex w='100%' key={reply.id}>
+              <Flex w='100%' key={reply.id} as='li'>
                 <CommentBlock
                   comment={reply}
                   parentCommentId={rootComment.id}
diff --git a/packages/web/src/pages/track-page/TrackCommentsPage.tsx b/packages/web/src/pages/track-page/TrackCommentsPage.tsx
new file mode 100644
index 00000000000..722a365d3da
--- /dev/null
+++ b/packages/web/src/pages/track-page/TrackCommentsPage.tsx
@@ -0,0 +1,47 @@
+import { useContext, useEffect } from 'react'
+
+import { useGetCurrentUserId, useGetTrackByPermalink } from '@audius/common/api'
+import { CommentSectionProvider } from '@audius/common/context'
+import { useParams } from 'react-router-dom'
+
+import { CommentList } from 'components/comments/CommentList'
+import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
+import NavContext from 'components/nav/mobile/NavContext'
+
+const messages = {
+  title: 'Comments'
+}
+
+type TrackCommentsParams = {
+  slug: string
+  handle: string
+}
+
+export const TrackCommentsPage = () => {
+  const { slug, handle } = useParams<TrackCommentsParams>()
+  const { data: currentUserId } = useGetCurrentUserId({})
+  const { data: track } = useGetTrackByPermalink({
+    permalink: `/${handle}/${slug}`,
+    currentUserId
+  })
+
+  const { setLeft, setCenter, setRight } = useContext(NavContext)
+
+  useEffect(() => {
+    setCenter(messages.title)
+    setRight(null)
+  }, [setCenter, setLeft, setRight])
+
+  if (!track) return null
+
+  return (
+    <MobilePageContainer
+      title={messages.title}
+      css={(theme) => ({ backgroundColor: theme.color.background.white })}
+    >
+      <CommentSectionProvider entityId={track?.track_id}>
+        <CommentList />
+      </CommentSectionProvider>
+    </MobilePageContainer>
+  )
+}
diff --git a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx
index e32cc842735..9bd2e007224 100644
--- a/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx
+++ b/packages/web/src/pages/track-page/components/desktop/TrackPage.tsx
@@ -249,7 +249,7 @@ const TrackPage = ({
           css={{ maxWidth: 1080 }}
           justifyContent='center'
         >
-          {isCommentingEnabled && heroTrack?.owner_id ? (
+          {isCommentingEnabled ? (
             <Flex flex='3'>
               <CommentSection entityId={defaults.trackId} />
             </Flex>
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackPage.module.css b/packages/web/src/pages/track-page/components/mobile/TrackPage.module.css
deleted file mode 100644
index dfa95e37571..00000000000
--- a/packages/web/src/pages/track-page/components/mobile/TrackPage.module.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.trackContent {
-  padding: 14px 12px 0px;
-  width: 100%;
-}
-
-.tracksContainer {
-  padding-top: 41px;
-}
-
-.remixes {
-  width: 100%;
-  margin-top: 32px;
-}
-
-.lineupHeader {
-  color: var(--harmony-n-500);
-  font-size: var(--harmony-font-s);
-  font-weight: var(--harmony-font-bold);
-  letter-spacing: 1px;
-  margin-bottom: 12px;
-  margin-top: 24px;
-  text-transform: uppercase;
-}
-
-.originalTrack {
-  margin-bottom: 16px !important;
-}
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
index dbb371075c4..3ce734c7ccc 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
@@ -1,13 +1,16 @@
 import { useEffect, useContext } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import { useFeatureFlag, useGatedContentAccess } from '@audius/common/hooks'
 import { ID, LineupState, Track, User } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import {
   trackPageLineupActions,
   OverflowAction,
   QueueItem
 } from '@audius/common/store'
+import { Flex, Text } from '@audius/harmony'
 
+import { CommentSection } from 'components/comments/CommentSection'
 import { HeaderContext } from 'components/header/mobile/HeaderContextProvider'
 import Lineup from 'components/lineup/Lineup'
 import { LineupVariant } from 'components/lineup/types'
@@ -22,7 +25,6 @@ import { getTrackDefaults } from 'pages/track-page/utils'
 
 import Remixes from './Remixes'
 import TrackPageHeader from './TrackHeader'
-import styles from './TrackPage.module.css'
 const { tracksActions } = trackPageLineupActions
 
 const messages = {
@@ -121,6 +123,11 @@ const TrackPage = ({
 
   const { isFetchingNFTAccess, hasStreamAccess, hasDownloadAccess } =
     useGatedContentAccess(heroTrack)
+
+  const { isEnabled: isCommentingEnabled } = useFeatureFlag(
+    FeatureFlags.COMMENTS_ENABLED
+  )
+
   const loading = !heroTrack || isFetchingNFTAccess
 
   const onPlay = () => onHeroPlay({ isPlaying: heroPlaying })
@@ -139,15 +146,17 @@ const TrackPage = ({
   const defaults = getTrackDefaults(heroTrack)
 
   const renderOriginalTrackTitle = () => (
-    <div className={styles.lineupHeader}>{messages.originalTrack}</div>
+    <Text textAlign='left' variant='title'>
+      {messages.originalTrack}
+    </Text>
   )
 
   const renderMoreByTitle = () =>
     (defaults.remixParentTrackId && entries.length > 2) ||
     (!defaults.remixParentTrackId && entries.length > 1) ? (
-      <div
-        className={styles.lineupHeader}
-      >{`${messages.moreBy} ${user?.name}`}</div>
+      <Text variant='title' textAlign='left'>
+        {messages.moreBy} {user?.name}
+      </Text>
     ) : null
 
   return (
@@ -159,7 +168,7 @@ const TrackPage = ({
       structuredData={structuredData}
       noIndex={defaults.isUnlisted}
     >
-      <div className={styles.trackContent}>
+      <Flex column p='l' gap='2xl' w='100%'>
         <TrackPageHeader
           isLoading={loading}
           isPlaying={heroPlaying}
@@ -204,23 +213,25 @@ const TrackPage = ({
         {defaults.fieldVisibility.remixes &&
           defaults.remixTrackIds &&
           defaults.remixTrackIds.length > 0 && (
-            <div className={styles.remixes}>
-              <Remixes
-                trackIds={defaults.remixTrackIds}
-                goToAllRemixes={goToAllRemixesPage}
-                count={defaults.remixesCount}
-              />
-            </div>
+            <Remixes
+              trackIds={defaults.remixTrackIds}
+              goToAllRemixes={goToAllRemixesPage}
+              count={defaults.remixesCount}
+            />
           )}
-        <div className={styles.tracksContainer}>
-          {!hasValidRemixParent && renderMoreByTitle()}
-          {hasValidRemixParent && renderOriginalTrackTitle()}
+        {isCommentingEnabled ? (
+          <CommentSection entityId={defaults.trackId} />
+        ) : null}
+        <Flex column gap='l'>
+          {hasValidRemixParent
+            ? renderOriginalTrackTitle()
+            : renderMoreByTitle()}
           <Lineup
             lineup={tracks}
             // Styles for leading element (original track if remix).
             leadingElementId={defaults.remixParentTrackId}
             leadingElementDelineator={
-              <div className={styles.originalTrackDelineator}>
+              <div>
                 <SectionButton
                   isMobile
                   text={messages.viewOtherRemixes}
@@ -229,7 +240,6 @@ const TrackPage = ({
                 {renderMoreByTitle()}
               </div>
             }
-            leadingElementClassName={styles.originalTrack}
             showLeadingElementArtistPick={false}
             // Don't render the first tile in the lineup.
             start={1}
@@ -249,8 +259,8 @@ const TrackPage = ({
             pauseTrack={pause}
             actions={tracksActions}
           />
-        </div>
-      </div>
+        </Flex>
+      </Flex>
     </MobilePageContainer>
   )
 }

From dd468e07852cb0b0b68307f0f282155e89925469 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Thu, 29 Aug 2024 18:30:26 +0200
Subject: [PATCH 2/5] Fixes

---
 packages/web/src/app/web-player/WebPlayer.jsx                 | 3 +--
 packages/web/src/components/comments/CommentSectionMobile.tsx | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/web/src/app/web-player/WebPlayer.jsx b/packages/web/src/app/web-player/WebPlayer.jsx
index 0b1f75fad01..13eb0aef2b3 100644
--- a/packages/web/src/app/web-player/WebPlayer.jsx
+++ b/packages/web/src/app/web-player/WebPlayer.jsx
@@ -84,6 +84,7 @@ import { SubPage } from 'pages/settings-page/components/mobile/SettingsPage'
 import SmartCollectionPage from 'pages/smart-collection/SmartCollectionPage'
 import SupportingPage from 'pages/supporting-page/SupportingPage'
 import TopSupportersPage from 'pages/top-supporters-page/TopSupportersPage'
+import { TrackCommentsPage } from 'pages/track-page/TrackCommentsPage'
 import TrackPage from 'pages/track-page/TrackPage'
 import TrendingPage from 'pages/trending-page/TrendingPage'
 import TrendingPlaylistsPage from 'pages/trending-playlists/TrendingPlaylistPage'
@@ -105,8 +106,6 @@ import { getPathname } from 'utils/route'
 
 import styles from './WebPlayer.module.css'
 
-import { TrackCommentsPage } from 'pages/track-page/TrackCommentsPage'
-
 const {
   FEED_PAGE,
   TRENDING_PAGE,
diff --git a/packages/web/src/components/comments/CommentSectionMobile.tsx b/packages/web/src/components/comments/CommentSectionMobile.tsx
index cfc8e439b73..47fa4e85973 100644
--- a/packages/web/src/components/comments/CommentSectionMobile.tsx
+++ b/packages/web/src/components/comments/CommentSectionMobile.tsx
@@ -4,7 +4,6 @@ import {
   usePostComment
 } from '@audius/common/context'
 import { Status } from '@audius/common/models'
-import { COMMENTS_PAGE } from '@audius/common/src/utils/route'
 import {
   Flex,
   IconCaretRight,
@@ -14,7 +13,6 @@ import {
   Text
 } from '@audius/harmony'
 import { Link } from 'react-router-dom'
-import { generatePath } from 'react-router-dom-v5-compat'
 
 import { CommentBlock } from './CommentBlock'
 import { CommentForm } from './CommentForm'

From bf736be311d2581040832303d75e815f03c9a071 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Fri, 30 Aug 2024 12:13:15 +0200
Subject: [PATCH 3/5] Add mobile and sign-out states

---
 .../components/comments/CommentActionBar.tsx  | 26 ++++++++++++-
 .../src/components/comments/CommentForm.tsx   | 36 ++++++++++++++++--
 .../comments/CommentSectionMobile.tsx         | 38 +++++--------------
 3 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/packages/web/src/components/comments/CommentActionBar.tsx b/packages/web/src/components/comments/CommentActionBar.tsx
index 524f3fd0bca..f4bf2379b85 100644
--- a/packages/web/src/components/comments/CommentActionBar.tsx
+++ b/packages/web/src/components/comments/CommentActionBar.tsx
@@ -22,6 +22,10 @@ import {
   TextLink
 } from '@audius/harmony'
 import { Comment } from '@audius/sdk'
+import { useToggle } from 'react-use'
+
+import { DownloadMobileAppDrawer } from 'components/download-mobile-app-drawer/DownloadMobileAppDrawer'
+import { useIsMobile } from 'hooks/useIsMobile'
 
 const messages = {
   pin: (isPinned: boolean) => (isPinned ? 'Unpin Comment' : 'Pin Comment'),
@@ -55,6 +59,8 @@ export const CommentActionBar = ({
 
   const [reactToComment] = useReactToComment()
   const [pinComment] = usePinComment()
+  const [isMobileAppDrawerOpen, toggleIsMobileAppDrawer] = useToggle(false)
+  const isMobile = useIsMobile()
 
   // component state
   const [reactionState, setReactionState] = useState(false) // TODO: temporary - eventually this will live in metadata
@@ -76,6 +82,14 @@ export const CommentActionBar = ({
     pinComment(commentId, !isPinned)
   }, [commentId, isPinned, pinComment])
 
+  const handleClickReply = useCallback(() => {
+    if (isMobile) {
+      toggleIsMobileAppDrawer()
+    } else {
+      onClickReply()
+    }
+  }, [isMobile, onClickReply, toggleIsMobileAppDrawer])
+
   const popupMenuItems = useMemo(() => {
     let items: PopupMenuItem[] = []
     const entityOwnerMenuItems: PopupMenuItem[] = [
@@ -148,7 +162,7 @@ export const CommentActionBar = ({
       </Flex>
       <TextLink
         variant='subdued'
-        onClick={onClickReply}
+        onClick={handleClickReply}
         size='m'
         disabled={isDisabled}
       >
@@ -165,11 +179,19 @@ export const CommentActionBar = ({
             ref={anchorRef}
             disabled={isDisabled}
             onClick={() => {
-              triggerPopup()
+              if (isMobile) {
+                toggleIsMobileAppDrawer()
+              } else {
+                triggerPopup()
+              }
             }}
           />
         )}
       />
+      <DownloadMobileAppDrawer
+        isOpen={isMobileAppDrawerOpen}
+        onClose={toggleIsMobileAppDrawer}
+      />
     </Flex>
   )
 }
diff --git a/packages/web/src/components/comments/CommentForm.tsx b/packages/web/src/components/comments/CommentForm.tsx
index d69903e793a..7cbc37b1507 100644
--- a/packages/web/src/components/comments/CommentForm.tsx
+++ b/packages/web/src/components/comments/CommentForm.tsx
@@ -16,12 +16,21 @@ import {
 } from '@audius/harmony'
 import { Form, Formik, useFormikContext } from 'formik'
 import { useSelector } from 'react-redux'
-import { usePrevious } from 'react-use'
+import { usePrevious, useToggle } from 'react-use'
 
+import { DownloadMobileAppDrawer } from 'components/download-mobile-app-drawer/DownloadMobileAppDrawer'
 import { TextField } from 'components/form-fields'
+import { useAuthenticatedCallback } from 'hooks/useAuthenticatedCallback'
+import { useIsMobile } from 'hooks/useIsMobile'
 import { useProfilePicture } from 'hooks/useUserProfilePicture'
 import { audioPlayer } from 'services/audio-player'
 
+const messages = {
+  postComment: 'Post Comment',
+  addComment: 'Add a comment',
+  firstComment: 'Be the first to comment!'
+}
+
 type CommentFormValues = {
   commentMessage: string
 }
@@ -59,7 +68,10 @@ export const CommentForm = ({
   isEdit,
   hideAvatar = false
 }: CommentFormProps) => {
-  const { currentUserId, entityId } = useCurrentCommentSection()
+  const { currentUserId, entityId, comments } = useCurrentCommentSection()
+  const isMobile = useIsMobile()
+  const isFirstComment = comments.length === 0
+  const [isMobileAppDrawerOpen, toggleIsMobileAppDrawer] = useToggle(false)
 
   const [editComment] = useEditComment()
   const currentlyPlayingTrackId = useSelector(getTrackId)
@@ -81,6 +93,12 @@ export const CommentForm = ({
     }
   }
 
+  const handleClickInput = useAuthenticatedCallback(() => {
+    if (isMobile) {
+      toggleIsMobileAppDrawer()
+    }
+  }, [isMobile, toggleIsMobileAppDrawer])
+
   const profileImage = useProfilePicture(
     currentUserId ?? null,
     SquareSizes.SIZE_150_BY_150
@@ -112,20 +130,30 @@ export const CommentForm = ({
           ) : null}
           <TextField
             name='commentMessage'
-            label='Add a comment'
+            label={
+              isFirstComment && isMobile
+                ? messages.firstComment
+                : messages.addComment
+            }
+            readOnly={isMobile}
+            onClick={handleClickInput}
             disabled={isLoading}
           />
           {isLoading ? (
             <LoadingSpinner />
           ) : (
             <IconButton
-              aria-label='Post comment'
+              aria-label={messages.postComment}
               icon={IconSend}
               color='accent'
               type='submit'
             />
           )}
         </Flex>
+        <DownloadMobileAppDrawer
+          isOpen={isMobileAppDrawerOpen}
+          onClose={toggleIsMobileAppDrawer}
+        />
       </Form>
     </Formik>
   )
diff --git a/packages/web/src/components/comments/CommentSectionMobile.tsx b/packages/web/src/components/comments/CommentSectionMobile.tsx
index 47fa4e85973..93b02a84b55 100644
--- a/packages/web/src/components/comments/CommentSectionMobile.tsx
+++ b/packages/web/src/components/comments/CommentSectionMobile.tsx
@@ -1,9 +1,5 @@
 import { useGetTrackById } from '@audius/common/api'
-import {
-  useCurrentCommentSection,
-  usePostComment
-} from '@audius/common/context'
-import { Status } from '@audius/common/models'
+import { useCurrentCommentSection } from '@audius/common/context'
 import {
   Flex,
   IconCaretRight,
@@ -31,11 +27,6 @@ const CommentSectionHeader = () => {
 
   const { data: track } = useGetTrackById({ id: entityId })
 
-  const handleClickViewAll = () => {
-    // TODO open the page
-    // openDrawer({ userId: currentUserId, entityId, isEntityOwner, artistId })
-  }
-
   const isShowingComments = !isLoading && comments?.length
 
   return (
@@ -52,12 +43,7 @@ const CommentSectionHeader = () => {
         ) : null}
       </Text>
       {isShowingComments ? (
-        <PlainButton
-          onClick={handleClickViewAll}
-          iconRight={IconCaretRight}
-          variant='subdued'
-          asChild
-        >
+        <PlainButton iconRight={IconCaretRight} variant='subdued' asChild>
           <Link to={`${track?.permalink}/comments`}>{messages.viewAll}</Link>
         </PlainButton>
       ) : null}
@@ -66,14 +52,11 @@ const CommentSectionHeader = () => {
 }
 
 const CommentSectionContent = () => {
-  const { commentSectionLoading: isLoading, comments } =
-    useCurrentCommentSection()
-
-  const [postComment, { status: postCommentStatus }] = usePostComment()
-
-  const handlePostComment = (message: string) => {
-    postComment(message, undefined)
-  }
+  const {
+    currentUserId,
+    commentSectionLoading: isLoading,
+    comments
+  } = useCurrentCommentSection()
 
   // Loading state
   if (isLoading) {
@@ -91,12 +74,9 @@ const CommentSectionContent = () => {
   // Empty state
   if (!comments || !comments.length) {
     return (
-      <Flex gap='m'>
+      <Flex gap='m' column alignItems='flex-start'>
         <Text variant='body'>{messages.noComments}</Text>
-        <CommentForm
-          onSubmit={handlePostComment}
-          isLoading={postCommentStatus === Status.LOADING}
-        />
+        <CommentForm hideAvatar={!currentUserId} />
       </Flex>
     )
   }

From 9faedf235c0c7639b464afc407069425dfce2b73 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Fri, 30 Aug 2024 23:14:21 +0200
Subject: [PATCH 4/5] Add comments

---
 packages/common/src/messages/comments.ts              | 11 +++++++++++
 packages/common/src/messages/index.ts                 |  1 +
 .../mobile/src/components/comments/CommentForm.tsx    | 10 ++--------
 .../mobile/src/components/comments/CommentSection.tsx |  6 +-----
 .../mobile/src/components/comments/CommentThread.tsx  |  5 +----
 packages/web/src/components/comments/CommentForm.tsx  |  7 +------
 .../src/components/comments/CommentSectionMobile.tsx  |  6 +-----
 .../web/src/components/comments/CommentThread.tsx     |  9 +--------
 8 files changed, 19 insertions(+), 36 deletions(-)
 create mode 100644 packages/common/src/messages/comments.ts

diff --git a/packages/common/src/messages/comments.ts b/packages/common/src/messages/comments.ts
new file mode 100644
index 00000000000..306aca62fd9
--- /dev/null
+++ b/packages/common/src/messages/comments.ts
@@ -0,0 +1,11 @@
+export const commentsMessages = {
+  postComment: 'Post Comment',
+  addComment: 'Add a comment',
+  firstComment: 'Be the first to comment!',
+  noComments: 'Nothing here yet',
+  viewAll: 'View All',
+  showMoreReplies: 'Show More Replies',
+  replies: 'Replies',
+  showReplies: 'Show Replies',
+  hideReplies: 'Hide Replies'
+}
diff --git a/packages/common/src/messages/index.ts b/packages/common/src/messages/index.ts
index c16e351f5a5..a42952ed55d 100644
--- a/packages/common/src/messages/index.ts
+++ b/packages/common/src/messages/index.ts
@@ -3,3 +3,4 @@ export * from './sign-on/signUpPolicyMessages'
 export * from './sign-on/pages'
 export * from './search'
 export * from './edit'
+export * from './comments'
diff --git a/packages/mobile/src/components/comments/CommentForm.tsx b/packages/mobile/src/components/comments/CommentForm.tsx
index 4711d2e87a3..57482dfc8d9 100644
--- a/packages/mobile/src/components/comments/CommentForm.tsx
+++ b/packages/mobile/src/components/comments/CommentForm.tsx
@@ -1,4 +1,5 @@
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { FormikHelpers } from 'formik'
 import { Formik, useFormikContext } from 'formik'
 import type { TextInput as RNTextInput } from 'react-native'
@@ -20,11 +21,6 @@ type CommentFormProps = {
   TextInputComponent?: typeof RNTextInput
 }
 
-const messages = {
-  beFirstComment: 'Be the first to comment',
-  addComment: 'Add a comment'
-}
-
 type CommentFormContentProps = Omit<
   CommentFormProps,
   'onSubmit' | 'initialValue'
@@ -35,9 +31,7 @@ const CommentFormContent = (props: CommentFormContentProps) => {
   const { currentUserId, comments } = useCurrentCommentSection()
   const { submitForm } = useFormikContext()
 
-  const message = comments?.length
-    ? messages.addComment
-    : messages.beFirstComment
+  const message = comments?.length ? messages.addComment : messages.firstComment
 
   return (
     <Flex direction='row' gap='m' alignItems='center'>
diff --git a/packages/mobile/src/components/comments/CommentSection.tsx b/packages/mobile/src/components/comments/CommentSection.tsx
index 51118ef9fb3..218537bb8c4 100644
--- a/packages/mobile/src/components/comments/CommentSection.tsx
+++ b/packages/mobile/src/components/comments/CommentSection.tsx
@@ -3,6 +3,7 @@ import {
   useCurrentCommentSection,
   usePostComment
 } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { ID } from '@audius/common/models'
 import { Status } from '@audius/common/models'
 import { TouchableOpacity } from 'react-native'
@@ -21,11 +22,6 @@ import Skeleton from '../skeleton'
 import { CommentBlock } from './CommentBlock'
 import { CommentForm } from './CommentForm'
 
-const messages = {
-  noComments: 'Nothing here yet',
-  viewAll: 'View All'
-}
-
 const CommentSectionHeader = () => {
   const {
     entityId,
diff --git a/packages/mobile/src/components/comments/CommentThread.tsx b/packages/mobile/src/components/comments/CommentThread.tsx
index 7fd66e0b3b9..f07a3fd241f 100644
--- a/packages/mobile/src/components/comments/CommentThread.tsx
+++ b/packages/mobile/src/components/comments/CommentThread.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import { useGetCommentById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import type { ReplyComment } from '@audius/sdk'
 
 import {
@@ -14,10 +15,6 @@ import {
 
 import { CommentBlock } from './CommentBlock'
 
-const messages = {
-  showMoreReplies: 'Show More Replies'
-}
-
 export const CommentThread = ({ commentId }: { commentId: string }) => {
   const { data: rootComment } = useGetCommentById({
     id: commentId
diff --git a/packages/web/src/components/comments/CommentForm.tsx b/packages/web/src/components/comments/CommentForm.tsx
index 7cbc37b1507..da21654e780 100644
--- a/packages/web/src/components/comments/CommentForm.tsx
+++ b/packages/web/src/components/comments/CommentForm.tsx
@@ -5,6 +5,7 @@ import {
   useEditComment,
   usePostComment
 } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import { SquareSizes, Status } from '@audius/common/models'
 import { getTrackId } from '@audius/common/src/store/player/selectors'
 import {
@@ -25,12 +26,6 @@ import { useIsMobile } from 'hooks/useIsMobile'
 import { useProfilePicture } from 'hooks/useUserProfilePicture'
 import { audioPlayer } from 'services/audio-player'
 
-const messages = {
-  postComment: 'Post Comment',
-  addComment: 'Add a comment',
-  firstComment: 'Be the first to comment!'
-}
-
 type CommentFormValues = {
   commentMessage: string
 }
diff --git a/packages/web/src/components/comments/CommentSectionMobile.tsx b/packages/web/src/components/comments/CommentSectionMobile.tsx
index 93b02a84b55..8e369d5cbb5 100644
--- a/packages/web/src/components/comments/CommentSectionMobile.tsx
+++ b/packages/web/src/components/comments/CommentSectionMobile.tsx
@@ -1,5 +1,6 @@
 import { useGetTrackById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import {
   Flex,
   IconCaretRight,
@@ -13,11 +14,6 @@ import { Link } from 'react-router-dom'
 import { CommentBlock } from './CommentBlock'
 import { CommentForm } from './CommentForm'
 
-const messages = {
-  noComments: 'Nothing here yet',
-  viewAll: 'View All'
-}
-
 const CommentSectionHeader = () => {
   const {
     entityId,
diff --git a/packages/web/src/components/comments/CommentThread.tsx b/packages/web/src/components/comments/CommentThread.tsx
index 754df0c139e..e0d990617e5 100644
--- a/packages/web/src/components/comments/CommentThread.tsx
+++ b/packages/web/src/components/comments/CommentThread.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 
 import { useGetCommentById } from '@audius/common/api'
 import { useCurrentCommentSection } from '@audius/common/context'
+import { commentsMessages as messages } from '@audius/common/messages'
 import {
   Box,
   Flex,
@@ -14,13 +15,6 @@ import { ReplyComment } from '@audius/sdk'
 
 import { CommentBlock } from './CommentBlock'
 
-const messages = {
-  showMoreReplies: 'Show More Replies',
-  replies: 'Replies',
-  showReplies: 'Show Replies',
-  hideReplies: 'Hide Replies'
-}
-
 export const CommentThread = ({ commentId }: { commentId: string }) => {
   const { data: rootComment } = useGetCommentById({
     id: commentId
@@ -50,7 +44,6 @@ export const CommentThread = ({ commentId }: { commentId: string }) => {
               iconLeft={
                 hiddenReplies[rootComment.id] ? IconCaretDown : IconCaretUp
               }
-              fullWidth={false}
             >
               {hiddenReplies[rootComment.id]
                 ? messages.showReplies

From 4fec14d69c620fe45e61709bda4b7a0d3b9bef40 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Fri, 30 Aug 2024 23:23:38 +0200
Subject: [PATCH 5/5] Address comments

---
 packages/common/src/messages/comments.ts              |  1 +
 .../mobile/src/components/comments/NoComments.tsx     | 11 ++++-------
 packages/web/src/components/comments/NoComments.tsx   | 10 +++-------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/common/src/messages/comments.ts b/packages/common/src/messages/comments.ts
index 306aca62fd9..9705e1d9805 100644
--- a/packages/common/src/messages/comments.ts
+++ b/packages/common/src/messages/comments.ts
@@ -3,6 +3,7 @@ export const commentsMessages = {
   addComment: 'Add a comment',
   firstComment: 'Be the first to comment!',
   noComments: 'Nothing here yet',
+  noCommentsDescription: 'Be the first to comment on this track',
   viewAll: 'View All',
   showMoreReplies: 'Show More Replies',
   replies: 'Replies',
diff --git a/packages/mobile/src/components/comments/NoComments.tsx b/packages/mobile/src/components/comments/NoComments.tsx
index c0d65741ca2..70282fac0e9 100644
--- a/packages/mobile/src/components/comments/NoComments.tsx
+++ b/packages/mobile/src/components/comments/NoComments.tsx
@@ -1,9 +1,6 @@
-import { Flex, Text } from '@audius/harmony-native'
+import { commentsMessages as messages } from '@audius/common/messages'
 
-const messages = {
-  title: 'Nothing here yet',
-  subtitle: 'Be the first to comment on this track' // TODO: make this derive from entity type
-}
+import { Flex, Text } from '@audius/harmony-native'
 
 export const NoComments = () => (
   <Flex
@@ -12,7 +9,7 @@ export const NoComments = () => (
     direction='column'
     style={{ paddingTop: 80, paddingBottom: 80 }}
   >
-    <Text>{messages.title}</Text>
-    <Text color='subdued'>{messages.subtitle}</Text>
+    <Text>{messages.noComments}</Text>
+    <Text color='subdued'>{messages.noCommentsDescription}</Text>
   </Flex>
 )
diff --git a/packages/web/src/components/comments/NoComments.tsx b/packages/web/src/components/comments/NoComments.tsx
index 9e125ef65cf..8025edd2cc7 100644
--- a/packages/web/src/components/comments/NoComments.tsx
+++ b/packages/web/src/components/comments/NoComments.tsx
@@ -1,10 +1,6 @@
+import { commentsMessages as messages } from '@audius/common/messages'
 import { Flex, Text } from '@audius/harmony'
 
-const messages = {
-  title: 'Nothing here yet',
-  subtitle: 'Be the first to comment on this track' // TODO: make this derive from entity type
-}
-
 export const NoComments = () => (
   <Flex
     alignItems='center'
@@ -12,7 +8,7 @@ export const NoComments = () => (
     direction='column'
     css={{ paddingTop: 80, paddingBottom: 80 }}
   >
-    <Text>{messages.title}</Text>
-    <Text color='subdued'>{messages.subtitle}</Text>
+    <Text>{messages.noComments}</Text>
+    <Text color='subdued'>{messages.noCommentsDescription}</Text>
   </Flex>
 )