fix(explore): wrap trending genre pills and honor the genre from the URL

[dylanjeffers]

Description

Two fixes for the Trending Genres section on Explore.

1. Pills only rendered on a single line (mobile)

The mobile section wrapped its pills in a horizontal ScrollView, so only the first few genres were visible and the rest required a sideways swipe that isn't discoverable. It now uses <Flex row wrap='wrap'> and flows onto multiple lines, matching the web section (which already wrapped).

2. Picking a second genre kept showing the first

Clicking a pill navigates to /trending?genre=<genre>, but TrendingPageContent preferred the genre in redux over the one in the URL:

if (trendingGenre) {
  updateGenreUrlParam(trendingGenre, replaceRouteCallback)   // redux wins
} else if (isValidGenre(genre)) {
  dispatch(setTrendingGenre(genre as any))
}

Redux keeps trendingGenre across visits, so on the second pill click the branch above discarded the incoming ?genre= and the follow-up sync effect rewrote the URL back to the stale genre. The lineup keys off redux, so it kept showing the old genre.

The mount effect now treats the URL as the source of truth and falls back to redux only when there's no genre param — so landing on a bare /trending still remembers the last filter. A ref guards the redux→URL sync effect from clobbering the incoming param on its first run, before redux catches up.

Also switched the dispatch from genre as any to toTrendingGenreValue(genre), matching how the page's own genre filter normalizes values (it strips the Electronic - prefix and supports freeform genres).

How Has This Been Tested?

Verified against the running web app (npm run web, prod API), driving Explore → Trending in the browser.

Reproduced the bug and confirmed the fix with the same sequence — load /trending?genre=Electronic, go to Explore, then navigate to /trending?genre=Rock:

	resulting URL	redux trendingGenre
before	?genre=Electronic	Electronic ❌
after	?genre=Rock	Rock ✅

After the fix, the genre filter and lineup both show Rock.

Regressions checked in the browser:

• Bare /trending with Rock in redux → still remembers Rock and writes ?genre=Rock back to the URL.
• Clearing to All Genres → ?genre= is removed and does not come back.
• Deep link to /trending?genre=Electronic → loads Electronic.
• Web pills confirmed wrapping across 2 rows at a 976px container (10 pills).

Typecheck and lint pass for @audius/web and @audius/mobile.

Note: the mobile layout change was not run in a simulator — it's a ScrollView → Flex row wrap='wrap' swap, and wrap is an existing harmony-native Flex prop used elsewhere in the app, but it's worth a look on device.

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8b2e638

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR