Auto-follow contest when user downloads a stem (#14295)

## Summary

Downloading a stem is a strong engagement signal that the user wants to
participate in the contest, so this PR wires `ContestStemsCard` (mobile
+ web) to fire `useFollowEvent` for the parent contest the first time a
signed-in user kicks off a download.

## Implementation

Both surfaces use the same shape:

- Resolve the contest event from the card's existing `trackId` prop via
`useRemixContest` (same pattern `ContestScreen` / desktop `ContestPage`
already use).
- Pair with `useCurrentUserId` + `useEventFollowState`, then guard a
`followContestIfNeeded` helper on (signed-in + not already following).
- Call the helper inside both download handlers:
- **Mobile**
(`packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx`):
inside `handleDownloadOne` and `handleDownloadAll` (both open
`WaitForDownloadModal`).
- **Web**
(`packages/web/src/pages/contest-page/components/ContestStemsCard.tsx`):
inside the two `useRequiresAccountCallback`-wrapped handlers —
`handleDownloadAll` (archive modal) and `handleDownloadOne`
(wait-for-download modal). Sitting inside the
`useRequiresAccountCallback` means the follow only fires after the
sign-in gate has resolved, so we never call `followEvent({ userId: null,
... })`.

The follow mutation is optimistic (see
`packages/common/src/api/tan-query/events/useFollowEvent.ts`), so the
contest's Follow button flips to \"Following\" instantly with automatic
rollback on error.

## ⚠️ Timing note — please weigh in

The brief said \"after a **successful** stem download completes,\" but I
fire the follow on **download tap**, not on completion. The reason:
there's no completion signal exposed to callers today.

- `DOWNLOAD_FINISHED` is defined in
`packages/common/src/store/social/tracks/actions.ts` but never
dispatched anywhere.
- `WaitForDownloadModalState` doesn't accept an `onSuccess` callback —
the modal dispatches `tracksSocialActions.downloadTrack` to a saga, and
the saga silently completes (then waits for `CANCEL_DOWNLOAD`).
- Hooking true completion would need: (a) the saga to dispatch a success
action after `downloadTracks` returns, plus (b) plumbing that signal
back to the modal/caller. Doable but a bigger change than the brief
implied.

In practice, firing on tap should be fine because:
1. Tapping the download button is itself the engagement signal — the
user has expressed intent.
2. The follow mutation is optimistic; users see instant feedback and can
unfollow with one tap.
3. The guard on `followState?.isFollowed` means tapping a second time
doesn't double-fire.

**If you'd rather have it fire only on true download success, say the
word and I'll do the saga + modal-state refactor in a follow-up.**

## Test plan

Couldn't auto-verify — this needs a signed-in user on a live contest
with stems, which the preview environment can't reproduce. The existing
`ContestPage.test.tsx` already mocks every hook the new code uses
(`useRemixContest`, `useCurrentUserId`, `useEventFollowState`,
`useFollowEvent`) so CI should be green.

Manual QA checklist:
- [ ] Signed-in user, not already following → tap any per-stem download
icon → Follow button on contest page flips to Following; download
starts.
- [ ] Signed-in user, not already following → tap Download All → same.
- [ ] Signed-in user, **already following** → tap download → no spurious
mutation fires (Network tab clean), download still starts.
- [ ] Signed-out user on web → tap download → sign-in flow triggers
(`useRequiresAccountCallback`); after sign-in the original handler runs
and the follow fires.
- [ ] Signed-out user on mobile → tap download → follow stays no-op
(`currentUserId` is null), download flow behaves as today.
- [ ] iOS + Android.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx

@@ -1,6 +1,15 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
-import { useFileSizes, useStems, useTrack, useUser } from '@audius/common/api'
+import {
+  useCurrentUserId,
+  useEventFollowState,
+  useFileSizes,
+  useFollowEvent,
+  useRemixContest,
+  useStems,
+  useTrack,
+  useUser
+} from '@audius/common/api'
 import type { ID } from '@audius/common/models'
 import {
   DownloadQuality,
@@ -105,7 +114,26 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => {
 
   const { onOpen: openWaitForDownloadModal } = useWaitForDownloadModal()
 
+  // Auto-follow the contest when a signed-in user kicks off a stem
+  // download — downloading a stem is a strong engagement signal that
+  // the user wants to participate. Fires on tap (rather than on
+  // download completion) because the download saga doesn't expose a
+  // success hook to the caller; the follow mutation is optimistic so
+  // the UI updates instantly, and the user can unfollow at any time.
+  const { data: contest } = useRemixContest(trackId)
+  const contestEventId = contest?.eventId
+  const { data: currentUserId } = useCurrentUserId()
+  const { data: followState } = useEventFollowState(contestEventId)
+  const { mutate: followEvent } = useFollowEvent()
+
+  const followContestIfNeeded = useCallback(() => {
+    if (!contestEventId || !currentUserId) return
+    if (followState?.isFollowed) return
+    followEvent({ userId: currentUserId, eventId: contestEventId })
+  }, [contestEventId, currentUserId, followState?.isFollowed, followEvent])
+
   const handleDownloadOne = (downloadTrackId: ID) => {
+    followContestIfNeeded()
     openWaitForDownloadModal({
       parentTrackId: trackId,
       trackIds: [downloadTrackId],
@@ -115,6 +143,7 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => {
 
   const handleDownloadAll = () => {
     if (!track) return
+    followContestIfNeeded()
     // All stems + (optionally) the parent track.
     const ids = [
       ...(track.is_downloadable ? [trackId] : []),

packages/web/src/pages/contest-page/components/ContestStemsCard.tsx

@@ -1,7 +1,11 @@
 import { MouseEvent, useCallback, useState } from 'react'
 
 import {
+  useCurrentUserId,
+  useEventFollowState,
   useFileSizes,
+  useFollowEvent,
+  useRemixContest,
   useStems,
   useTrack,
   useTrackByPermalink,
@@ -95,6 +99,24 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => {
     useDownloadTrackArchiveModal()
   const { onOpen: openWaitForDownloadModal } = useWaitForDownloadModal()
 
+  // Auto-follow the contest when a signed-in user kicks off a stem
+  // download — downloading a stem is a strong engagement signal that
+  // the user wants to participate. Fires on tap (rather than on
+  // download completion) because the download saga doesn't expose a
+  // success hook to the caller; the follow mutation is optimistic so
+  // the UI updates instantly, and the user can unfollow at any time.
+  const { data: contest } = useRemixContest(trackId)
+  const contestEventId = contest?.eventId
+  const { data: currentUserId } = useCurrentUserId()
+  const { data: followState } = useEventFollowState(contestEventId)
+  const { mutate: followEvent } = useFollowEvent()
+
+  const followContestIfNeeded = useCallback(() => {
+    if (!contestEventId || !currentUserId) return
+    if (followState?.isFollowed) return
+    followEvent({ userId: currentUserId, eventId: contestEventId })
+  }, [contestEventId, currentUserId, followState?.isFollowed, followEvent])
+
   const stemsCount = stems.length
   // Default to expanded for short lists so users can see the stems
   // without an extra click; collapse when there are more than
@@ -129,12 +151,19 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => {
     (e: MouseEvent) => {
       e.stopPropagation()
       if (!track) return
+      followContestIfNeeded()
       openDownloadTrackArchiveModal({
         trackId,
         fileCount: stemsCount + (track.is_downloadable ? 1 : 0)
       })
     },
-    [openDownloadTrackArchiveModal, trackId, stemsCount, track]
+    [
+      followContestIfNeeded,
+      openDownloadTrackArchiveModal,
+      trackId,
+      stemsCount,
+      track
+    ]
   )
 
   const handleUnlockAll = useRequiresAccountCallback(
@@ -153,13 +182,14 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => {
   // specific trackId the user clicked.
   const handleDownloadOne = useRequiresAccountCallback(
     (downloadTrackId: ID, parentTrackId?: ID) => {
+      followContestIfNeeded()
       openWaitForDownloadModal({
         parentTrackId,
         trackIds: [downloadTrackId],
         quality: DownloadQuality.ORIGINAL
       })
     },
-    [openWaitForDownloadModal]
+    [followContestIfNeeded, openWaitForDownloadModal]
   )
 
   // Click-through to the track page. Guarded: action buttons inside