Use subdued color for mobile MetadataItem

packages/mobile/src/components/details-tile/DetailsTile.tsx

@@ -377,12 +377,14 @@ export const DetailsTile = ({
         ) : null}
         {!isPublished ? null : (
           <DetailsTileStats
+            playCount={playCount}
+            hidePlayCount={hidePlayCount}
             favoriteCount={saveCount}
             hideFavoriteCount={hideFavoriteCount}
+            repostCount={repostCount}
             hideRepostCount={hideRepostCount}
             onPressFavorites={onPressFavorites}
             onPressReposts={onPressReposts}
-            repostCount={repostCount}
           />
         )}
         {description ? (

packages/mobile/src/components/details-tile/DetailsTileStats.tsx

@@ -1,19 +1,20 @@
+import { pluralize } from '@audius/common/utils'
+
 import { Flex, IconHeart, IconPlay, IconRepost } from '@audius/harmony-native'
 import type { GestureResponderHandler } from 'app/types/gesture'
 
 import { DetailsTileStat } from './DetailsStat'
 
 const messages = {
-  plays: 'Plays',
-  favorites: 'Favorites',
-  reposts: 'Reposts'
+  favorites: (count: number) => `${pluralize('Favorite', count)}`,
+  reposts: (count: number) => `${pluralize('Repost', count)}`
 }
 
 type DetailsTileStatsProps = {
   playCount?: number
   repostCount?: number
   favoriteCount?: number
-  hidePlayCount?: number
+  hidePlayCount?: boolean
   hideRepostCount?: boolean
   hideFavoriteCount?: boolean
   onPressFavorites?: GestureResponderHandler
@@ -24,21 +25,15 @@ type DetailsTileStatsProps = {
  * The stats displayed on track and playlist screens
  */
 export const DetailsTileStats = ({
-  playCount,
-  repostCount,
-  favoriteCount,
+  playCount = 0,
+  repostCount = 0,
+  favoriteCount = 0,
   hidePlayCount,
   hideRepostCount,
   hideFavoriteCount,
   onPressFavorites,
   onPressReposts
 }: DetailsTileStatsProps) => {
-  if (
-    (hideFavoriteCount && hideRepostCount && hidePlayCount) ||
-    (!favoriteCount && !repostCount && !playCount)
-  ) {
-    return null
-  }
   return (
     <Flex
       w='100%'
@@ -48,22 +43,22 @@ export const DetailsTileStats = ({
       justifyContent='flex-start'
     >
       {hidePlayCount ? null : (
-        <DetailsTileStat count={playCount ?? 0} icon={IconPlay} />
+        <DetailsTileStat count={playCount} icon={IconPlay} />
       )}
       {hideRepostCount ? null : (
         <DetailsTileStat
-          count={repostCount ?? 0}
+          count={repostCount}
           onPress={onPressReposts}
           icon={IconRepost}
-          label={messages.reposts}
+          label={messages.reposts(repostCount)}
         />
       )}
       {hideFavoriteCount ? null : (
         <DetailsTileStat
-          count={favoriteCount ?? 0}
+          count={favoriteCount}
           onPress={onPressFavorites}
           icon={IconHeart}
-          label={messages.favorites}
+          label={messages.favorites(favoriteCount)}
         />
       )}
     </Flex>

packages/mobile/src/components/details-tile/MetadataItem.tsx

@@ -9,7 +9,9 @@ type MetadataItemProps = PropsWithChildren<{
 export const MetadataItem = ({ label, children }: MetadataItemProps) => {
   return (
     <Flex direction='row' alignItems='center' key={label} gap='xs'>
-      <Text variant='label'>{label}</Text>
+      <Text variant='label' color='subdued'>
+        {label}
+      </Text>
       <Text variant='body' size='s' strength='strong'>
         {children}
       </Text>

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -314,9 +314,13 @@ export const TrackScreenDetailsTile = ({
       hideRepost={hideRepost}
       hideShare={isUnlisted && !isOwner}
       hideOverflow={!isReachable || (isUnlisted && !isOwner)}
-      hideFavoriteCount={isUnlisted}
-      hidePlayCount={(!isOwner && isUnlisted) || isStreamGated}
-      hideRepostCount={isUnlisted}
+      hideFavoriteCount={isUnlisted || (!isOwner && (save_count ?? 0) <= 0)}
+      hidePlayCount={
+        (!isOwner && isUnlisted) ||
+        isStreamGated ||
+        (!isOwner && (play_count ?? 0) <= 0)
+      }
+      hideRepostCount={isUnlisted || (!isOwner && (repost_count ?? 0) <= 0)}
       isPlaying={isPlaying && isPlayingId}
       isPreviewing={isPreviewing}
       isUnlisted={isUnlisted}