diff --git a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx index 1a59e81b38c..f3210188047 100644 --- a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx +++ b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx @@ -128,6 +128,14 @@ export const CollectionTile = (props: CollectionTileProps) => { return tracks.find((track) => track.track_id === trackId) ?? null }) + // Title tints to the active/playing color whenever any track in this + // collection is the one currently playing. Mirrors TrackTile's per-tile + // highlight (LineupTileMetadata: `color={isActive ? 'primary' : 'neutral'}`) + // and the per-row highlight in CollectionTileTrackList (each TrackItem + // already runs its own `getTrackId(state) === trackId` selector and + // applies `styles.active` / `palette.primary` to its title text). + const isActive = currentTrack != null + const isCollectionMarkedForDownload = useSelector((state) => collection ? getIsCollectionMarkedForDownload(collection.playlist_id.toString())( @@ -300,7 +308,11 @@ export const CollectionTile = (props: CollectionTileProps) => { onPressIn={handlePressWithPropagationBlock} onPress={handlePressTitle} > - + {collection.playlist_name} diff --git a/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx b/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx index ff57a1a88c3..06187fba4d8 100644 --- a/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx +++ b/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx @@ -111,12 +111,25 @@ const TrackItem = (props: TrackItemProps) => { {index + 1} + {/* + Active color must be the LAST entry in the style array. + React Native's style array merge is left-to-right with later + entries winning per-property — but when a conditional active + style sits at index 2 and a falsy `deleted && styles.deleted` + sits at index 3, the result on this version of RN drops the + active override and `styles.title.color` (palette.neutral) + wins. The index Text doesn't hit this because its array is + only 2 entries ([text, active]). Putting `active` last + makes the merge unambiguous: when playing, primary wins; + when not playing, the conditional falsy entry is skipped + and styles.title/styles.deleted resolve normally. + */} @@ -127,8 +140,8 @@ const TrackItem = (props: TrackItemProps) => { style={[ styles.text, styles.artist, - isPlayingUid && styles.active, - deleted && styles.deleted + deleted && styles.deleted, + isPlayingUid && styles.active ]} numberOfLines={1} >