Remove download tracking UI from track pages (#14074)

## Summary
This PR removes download count tracking and display functionality from
track pages, including the download stats button and dedicated download
section component.

## Key Changes
- **TrackStats.tsx**: Removed the download count display button that
showed formatted download statistics
- Removed `useTrackDownloadCount` hook and related download count
fetching logic
  - Removed `IconCloudDownload` import and download message
  - Removed `is_downloadable` field from track data selection
  
- **GiantTrackTile.tsx**: Removed the download section component from
the track tile
  - Removed lazy-loaded `DownloadSection` component
  - Removed `useStems` hook and download availability logic
  - Removed conditional rendering of the download section
- Removed `Suspense` and `lazy` imports that were only used for the
download section

- **useTrackMetadata.ts**: Updated downloads metadata display logic
- Changed to only show download count when both `isDownloadable` is true
AND `downloadCount > 0`
  - Prevents displaying empty download statistics

## Implementation Details
The changes maintain the metadata structure but make the downloads field
conditional on having actual download data, ensuring cleaner UI by not
showing download information when there's nothing to display.

https://claude.ai/code/session_01TFkhjQRGjeoZrtiaXsqC5j

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Dylan Jeffers <dylanjeffers@users.noreply.github.com>

Author: 3 people

packages/common/src/hooks/useTrackMetadata.ts

@@ -123,7 +123,8 @@ export const useTrackMetadata = ({
     {
       id: TrackMetadataType.DOWNLOADS,
       label: 'Downloads',
-      value: isDownloadable ? formatCount(downloadCount) : '',
+      value:
+        isDownloadable && downloadCount > 0 ? formatCount(downloadCount) : '',
       isHidden: !isDownloadable
     }
   ].filter(({ isHidden, value }) => !isHidden && !!value)

packages/web/src/components/track/GiantTrackTile.tsx

@@ -1,10 +1,9 @@
-import { Suspense, lazy, useCallback, useState, useEffect, useRef } from 'react'
+import { useCallback, useState, useEffect, useRef } from 'react'
 
 import {
   useTrackRank,
   useRemixContest,
   useToggleFavoriteTrack,
-  useStems,
   useTrack
 } from '@audius/common/api'
 import {
@@ -72,12 +71,6 @@ import { TrackDogEar } from './TrackDogEar'
 import { TrackMetadataList } from './TrackMetadataList'
 import { TrackStats } from './TrackStats'
 
-const DownloadSection = lazy(() =>
-  import('./DownloadSection').then((module) => ({
-    default: module.DownloadSection
-  }))
-)
-
 const BUTTON_COLLAPSE_WIDTHS = {
   first: 1095,
   second: 1190,
@@ -219,8 +212,6 @@ export const GiantTrackTile = ({
   const { data: track } = useTrack(trackId, {
     select: (track) => pick(track, ['is_downloadable', 'preview_cid'])
   })
-  const { data: stems = [] } = useStems(trackId)
-  const hasDownloadableAssets = track?.is_downloadable || stems.length > 0
   // Preview button is shown for USDC-gated tracks if user does not have access
   // or is the owner
   const showPreview =
@@ -692,13 +683,6 @@ export const GiantTrackTile = ({
         ) : null}
 
         {renderTags()}
-        {hasDownloadableAssets ? (
-          <Box w='100%'>
-            <Suspense>
-              <DownloadSection trackId={trackId} />
-            </Suspense>
-          </Box>
-        ) : null}
       </Flex>
     </Paper>
   )

packages/web/src/components/track/TrackStats.tsx

@@ -1,20 +1,14 @@
-import {
-  useCurrentUserId,
-  useTrack,
-  useTrackDownloadCount
-} from '@audius/common/api'
+import { useCurrentUserId, useTrack } from '@audius/common/api'
 import { ID, Name } from '@audius/common/models'
 import { formatCount, isLongFormContent, pluralize } from '@audius/common/utils'
 import {
   Flex,
-  IconCloudDownload,
   IconHeart,
   IconMessage,
   IconPlay,
   IconRepost,
   PlainButton
 } from '@audius/harmony'
-import { encodeHashId } from '@audius/sdk'
 import { pick } from 'lodash'
 import { useDispatch } from 'react-redux'
 
@@ -29,8 +23,7 @@ const messages = {
   repost: 'Repost',
   favorite: 'Favorite',
   comment: 'Comment',
-  play: 'Play',
-  download: 'Download'
+  play: 'Play'
 }
 
 type TrackStatsProps = {
@@ -51,13 +44,10 @@ export const TrackStats = (props: TrackStatsProps) => {
         'is_unlisted',
         'play_count',
         'comments_disabled',
-        'genre',
-        'is_downloadable'
+        'genre'
       ])
   })
   const { data: currentUserId } = useCurrentUserId()
-  const trackIdHash = partialTrack ? encodeHashId(trackId as number) : null
-  const { data: downloadCount = 0 } = useTrackDownloadCount(trackIdHash)
   const dispatch = useDispatch()
   const comment_count = partialTrack?.comment_count ?? 0
 
@@ -70,8 +60,7 @@ export const TrackStats = (props: TrackStatsProps) => {
     play_count,
     is_stream_gated,
     owner_id,
-    is_unlisted,
-    is_downloadable
+    is_unlisted
   } = partialTrack
 
   const isOwner = currentUserId === owner_id
@@ -151,16 +140,6 @@ export const TrackStats = (props: TrackStatsProps) => {
           {formatCount(play_count)} {pluralize(messages.play, play_count)}
         </PlainButton>
       ) : null}
-      {is_downloadable ? (
-        <PlainButton
-          iconLeft={IconCloudDownload}
-          size='large'
-          variant='subdued'
-        >
-          {formatCount(downloadCount)}{' '}
-          {pluralize(messages.download, downloadCount)}
-        </PlainButton>
-      ) : null}
     </Flex>
   )
 }