Fix mobile track artist centering (#14488)

## Summary
- Keep the mobile track-page artist names visually centered under the
title while still showing user badges in a separate centered badge row.
- Show accepted collaborators in mobile feed track rows as
comma-separated artist names, with one-line ellipsis behavior when the
row is too long.
- Preserve badges in feed rows for both the owner and accepted
collaborators.
- Add focused unit tests for centered artist badge rendering plus
artist-name composition.

## Test Plan
- `/usr/local/bin/node ../../node_modules/.bin/jest
src/components/user-link/TrackArtists.test.tsx
src/components/lineup-tile/artistNames.test.ts
--moduleNameMapper='{"^react-native$":"<rootDir>/../../node_modules/react-native","^@testing-library/react-native$":"<rootDir>/node_modules/@testing-library/react-native"}'`
- `/usr/local/bin/node ../../node_modules/.bin/eslint --cache
--ext=js,jsx,ts,tsx src/components/user-link/UserLink.tsx
src/components/user-link/TrackArtists.tsx
src/components/user-link/TrackArtists.test.tsx
src/screens/track-screen/TrackScreenDetailsTile.tsx
src/components/track/TrackCard.tsx
src/components/lineup-tile/TrackTile.tsx
src/components/lineup-tile/LineupTileMetadata.tsx
src/components/lineup-tile/styles.ts
src/components/lineup-tile/artistNames.ts
src/components/lineup-tile/artistNames.test.ts`
- `/usr/local/bin/node ../../node_modules/.bin/tsc --noEmit`

Author: raymondjacobson

packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx

@@ -5,14 +5,16 @@ import { useSelector } from 'react-redux'
 
 import { IconVolumeLevel2 } from '@audius/harmony-native'
 import { Text, FadeInView } from 'app/components/core'
-import { UserLink } from 'app/components/user-link'
+import { UserBadges } from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
 import { useThemeColors } from 'app/utils/theme'
 
 import { LineupTileArt } from './LineupTileArt'
 import { LineupTileTopRight } from './LineupTileTopRight'
+import type { ArtistNameCollaborator } from './artistNames'
+import { getTrackArtistNames } from './artistNames'
 import { useStyles as useTileStyles } from './styles'
 import type { RenderImage } from './types'
 
@@ -27,6 +29,16 @@ const useStyles = makeStyles(({ palette }) => ({
   playingIndicator: {
     marginLeft: 8
   },
+  artistText: {
+    flexShrink: 1,
+    minWidth: 0
+  },
+  artistBadges: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+    gap: 4
+  },
   coSignLabel: {
     position: 'absolute',
     bottom: -3,
@@ -45,6 +57,8 @@ type Props = {
   renderImage: RenderImage
   title: string
   userId: ID
+  userName: string
+  collaborators?: ArtistNameCollaborator[] | null
   isPlayingUid: boolean
   type: 'track' | 'playlist' | 'album'
   trackId: ID
@@ -59,6 +73,8 @@ export const LineupTileMetadata = ({
   renderImage,
   title,
   userId,
+  userName,
+  collaborators,
   isPlayingUid,
   type,
   trackId,
@@ -72,6 +88,7 @@ export const LineupTileMetadata = ({
   const navigation = useNavigation()
 
   const isActive = isPlayingUid
+  const artistNames = getTrackArtistNames(userName, collaborators)
 
   const isPlaying = useSelector((state) => {
     return getPlaying(state) && isActive
@@ -139,14 +156,24 @@ export const LineupTileMetadata = ({
           onPressIn={onPressWithPropagationBlock}
           onPress={handlePressArtist}
           activeOpacity={0.7}
-          style={{ alignSelf: 'flex-start' }}
+          style={tileStyles.artist}
         >
-          <View pointerEvents='none'>
-            <UserLink
-              variant={isActive ? 'active' : 'default'}
-              textVariant='body'
-              userId={userId}
-            />
+          <Text
+            color={isActive ? 'primary' : 'neutral'}
+            numberOfLines={1}
+            ellipsizeMode='tail'
+            style={styles.artistText}
+          >
+            {artistNames}
+          </Text>
+          <View style={styles.artistBadges}>
+            <UserBadges userId={userId} />
+            {collaborators?.map((collaborator) => (
+              <UserBadges
+                key={collaborator.user_id}
+                userId={collaborator.user_id}
+              />
+            ))}
           </View>
         </TouchableOpacity>
       </FadeInView>

packages/mobile/src/components/lineup-tile/TrackTile.tsx

@@ -85,6 +85,7 @@ const TrackTileComponent = (props: TrackTileProps) => {
       title: track.title,
       track_id: track.track_id,
       genre: track.genre,
+      collaborators: track.collaborators,
       stream_conditions: track.stream_conditions,
 
       ddex_app: track.ddex_app,
@@ -100,6 +101,7 @@ const TrackTileComponent = (props: TrackTileProps) => {
   const { data: user } = useUser(track?.owner_id, {
     select: (user) => ({
       artist_pick_track_id: user.artist_pick_track_id,
+      name: user.name,
       user_id: user.user_id,
       is_deactivated: user.is_deactivated
     })
@@ -309,6 +311,8 @@ const TrackTileComponent = (props: TrackTileProps) => {
           onPressWithPropagationBlock={handlePressWithPropagationBlock}
           title={track.title}
           userId={user.user_id}
+          userName={user.name}
+          collaborators={track.collaborators}
           isPlayingUid={isPlayingUid}
           type='track'
           trackId={track.track_id}

packages/mobile/src/components/lineup-tile/artistNames.test.ts

@@ -0,0 +1,22 @@
+import { getTrackArtistNames } from './artistNames'
+
+describe('getTrackArtistNames', () => {
+  it('combines owner and collaborator names', () => {
+    expect(
+      getTrackArtistNames('ray61626b', [
+        { user_id: 2, name: 'dj g8r' },
+        { user_id: 3, name: 'tim' }
+      ])
+    ).toBe('ray61626b, dj g8r, tim')
+  })
+
+  it('omits missing collaborator names', () => {
+    expect(
+      getTrackArtistNames('ray61626b', [
+        { user_id: 2, name: null },
+        { user_id: 3, name: undefined },
+        { user_id: 4, name: 'dj g8r' }
+      ])
+    ).toBe('ray61626b, dj g8r')
+  })
+})

packages/mobile/src/components/lineup-tile/artistNames.ts

@@ -0,0 +1,17 @@
+import type { ID } from '@audius/common/models'
+
+export type ArtistNameCollaborator = {
+  user_id: ID
+  name?: string | null
+}
+
+export const getTrackArtistNames = (
+  userName: string,
+  collaborators?: ArtistNameCollaborator[] | null
+) => {
+  const collaboratorNames =
+    collaborators?.map((collaborator) => collaborator.name).filter(Boolean) ??
+    []
+
+  return [userName, ...collaboratorNames].join(', ')
+}

packages/mobile/src/components/lineup-tile/styles.ts

@@ -56,6 +56,9 @@ export const useStyles = makeStyles(({ palette }) => ({
   },
   artist: {
     ...flexRowCentered(),
+    justifyContent: 'flex-start',
+    gap: spacing(1),
+    width: '100%',
     marginBottom: 'auto',
     paddingRight: spacing(10),
     minHeight: 20

packages/mobile/src/components/user-link/TrackArtists.test.tsx

@@ -0,0 +1,80 @@
+import { render, screen, within } from '@testing-library/react-native'
+
+import { TrackArtists } from './TrackArtists'
+
+const mockUseUsers = jest.fn()
+
+jest.mock('@audius/common/api', () => ({
+  useUsers: (...args: unknown[]) => mockUseUsers(...args)
+}))
+
+jest.mock(
+  '@audius/harmony-native',
+  () => {
+    const React = require('react')
+    const { Text, View } = require('react-native')
+
+    return {
+      Flex: ({ children, style, testID }: any) =>
+        React.createElement(View, { style, testID }, children),
+      Text: ({ children }: any) => React.createElement(Text, null, children),
+      TextLink: ({ children, to }: any) =>
+        React.createElement(Text, null, `${to.params.id}:${children}`)
+    }
+  },
+  { virtual: true }
+)
+
+jest.mock('./UserLink', () => {
+  const React = require('react')
+  const { Text } = require('react-native')
+
+  return {
+    UserLink: ({
+      hideBadges,
+      userId
+    }: {
+      hideBadges?: boolean
+      userId: number
+    }) =>
+      React.createElement(
+        Text,
+        null,
+        `${userId}:${hideBadges ? 'badges-hidden' : 'badges-visible'}`
+      )
+  }
+})
+
+jest.mock('../user-badges', () => {
+  const React = require('react')
+  const { Text } = require('react-native')
+
+  return {
+    UserBadges: ({ userId }: { userId: number }) =>
+      React.createElement(Text, null, `badges:${userId}`)
+  }
+})
+
+describe('TrackArtists', () => {
+  beforeEach(() => {
+    mockUseUsers.mockReturnValue({
+      byId: {
+        1: { name: 'ray61626b' },
+        2: { name: 'dj g8r' }
+      }
+    })
+  })
+
+  it('centers artist groups with each artist badge beside its name', () => {
+    render(<TrackArtists userId={1} collaborators={[{ user_id: 2 }]} />)
+
+    const ownerGroup = screen.getByTestId('track-artist-1')
+    const collaboratorGroup = screen.getByTestId('track-artist-2')
+
+    expect(mockUseUsers).toHaveBeenCalledWith([1, 2])
+    expect(within(ownerGroup).getByText('1:ray61626b')).toBeOnTheScreen()
+    expect(within(ownerGroup).getByText('badges:1')).toBeOnTheScreen()
+    expect(within(collaboratorGroup).getByText('2:dj g8r')).toBeOnTheScreen()
+    expect(within(collaboratorGroup).getByText('badges:2')).toBeOnTheScreen()
+  })
+})