Fix mobile track artist centering

raymondjacobson · raymondjacobson · commit cb31580e4251 · 2026-06-17T09:53:14.000-07:00
diff --git a/packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx b/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>
diff --git a/packages/mobile/src/components/lineup-tile/TrackTile.tsx b/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}
diff --git a/packages/mobile/src/components/lineup-tile/artistNames.test.ts b/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')
+  })
+})
diff --git a/packages/mobile/src/components/lineup-tile/artistNames.ts b/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(', ')
+}
diff --git a/packages/mobile/src/components/lineup-tile/styles.ts b/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
diff --git a/packages/mobile/src/components/user-link/TrackArtists.test.tsx b/packages/mobile/src/components/user-link/TrackArtists.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react-native'
+
+import { TrackArtists } from './TrackArtists'
+
+jest.mock(
+  '@audius/harmony-native',
+  () => {
+    const React = require('react')
+    const { Text, View } = require('react-native')
+
+    return {
+      Flex: ({ children, style }: any) =>
+        React.createElement(View, { style }, children),
+      Text: ({ children }: any) => React.createElement(Text, null, 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', () => {
+  it('centers artist names and renders badges for each artist', () => {
+    render(<TrackArtists userId={1} collaborators={[{ user_id: 2 }]} />)
+
+    expect(screen.getByText('1:badges-hidden')).toBeOnTheScreen()
+    expect(screen.getByText('2:badges-hidden')).toBeOnTheScreen()
+    expect(screen.queryByText(/badges-visible/)).toBeNull()
+    expect(screen.getByText('badges:1')).toBeOnTheScreen()
+    expect(screen.getByText('badges:2')).toBeOnTheScreen()
+  })
+})
diff --git a/packages/mobile/src/components/user-link/TrackArtists.tsx b/packages/mobile/src/components/user-link/TrackArtists.tsx
@@ -7,6 +7,8 @@ import type { StyleProp, ViewStyle } from 'react-native'
 
 import { Flex, Text } from '@audius/harmony-native'
 
+import { UserBadges } from '../user-badges'
+
 import { UserLink } from './UserLink'
 
 type Collaborator = { user_id: ID }
@@ -45,41 +47,67 @@ export const CollaboratorLinks = ({
   )
 }
 
-type TrackArtistsProps = Omit<ComponentProps<typeof UserLink>, 'style'> & {
+type TrackArtistsProps = Omit<
+  ComponentProps<typeof UserLink>,
+  'style' | 'hideBadges'
+> & {
   /** Accepted collaborator artists embedded on the track. */
   collaborators?: Collaborator[] | null
   style?: StyleProp<ViewStyle>
 }
 
 /**
- * A track's artist line for mobile: the owner `<UserLink>` plus accepted
- * collaborators. With the flag off (or no collaborators) it renders just the
- * owner — a safe drop-in for an existing owner `<UserLink>`.
+ * A track's centered artist line for mobile: the owner `<UserLink>` plus
+ * accepted collaborators. User badges render on their own centered row so the
+ * names stay visually centered under the title.
  */
 export const TrackArtists = ({
   collaborators,
   style,
   ...userLinkProps
 }: TrackArtistsProps) => {
   return (
-    <Flex
-      row
-      alignItems='center'
-      justifyContent='center'
-      w='100%'
-      style={[styles.artistRow, style]}
-    >
-      <UserLink {...userLinkProps} style={styles.artistLink} />
-      <CollaboratorLinks collaborators={collaborators} {...userLinkProps} />
+    <Flex alignItems='center' w='100%' style={[styles.artistColumn, style]}>
+      <Flex row alignItems='center' justifyContent='center' w='100%'>
+        <UserLink {...userLinkProps} hideBadges style={styles.artistLink} />
+        <CollaboratorLinks
+          collaborators={collaborators}
+          {...userLinkProps}
+          hideBadges
+        />
+      </Flex>
+      <Flex
+        row
+        alignItems='center'
+        justifyContent='center'
+        style={styles.badges}
+      >
+        <UserBadges
+          userId={userLinkProps.userId}
+          badgeSize={userLinkProps.badgeSize}
+          hideFanClubBadge={userLinkProps.hideFanClubBadge}
+        />
+        {collaborators?.map((collaborator) => (
+          <UserBadges
+            key={collaborator.user_id}
+            userId={collaborator.user_id}
+            badgeSize={userLinkProps.badgeSize}
+            hideFanClubBadge={userLinkProps.hideFanClubBadge}
+          />
+        ))}
+      </Flex>
     </Flex>
   )
 }
 
 const styles = StyleSheet.create({
-  artistRow: {
+  artistColumn: {
     flexShrink: 1,
     overflow: 'hidden'
   },
+  badges: {
+    gap: 4
+  },
   artistLink: {
     flexShrink: 1,
     minWidth: 0
diff --git a/packages/mobile/src/components/user-link/UserLink.tsx b/packages/mobile/src/components/user-link/UserLink.tsx
@@ -24,6 +24,7 @@ type UserLinkProps = Omit<TextLinkProps<ParamList>, 'to' | 'children'> & {
   badgeSize?: IconSize
   textLinkStyle?: StyleProp<TextStyle>
   disabled?: boolean
+  hideBadges?: boolean
   hideFanClubBadge?: boolean
   mint?: string
 }
@@ -35,6 +36,7 @@ export const UserLink = (props: UserLinkProps) => {
     style,
     textLinkStyle,
     disabled,
+    hideBadges,
     hideFanClubBadge,
     mint,
     ...other
@@ -89,12 +91,14 @@ export const UserLink = (props: UserLinkProps) => {
         >
           {userName}
         </TextLink>
-        <UserBadges
-          userId={userId}
-          badgeSize={badgeSize}
-          mint={mint}
-          hideFanClubBadge={hideFanClubBadge}
-        />
+        {hideBadges ? null : (
+          <UserBadges
+            userId={userId}
+            badgeSize={badgeSize}
+            mint={mint}
+            hideFanClubBadge={hideFanClubBadge}
+          />
+        )}
       </AnimatedFlex>
     </Pressable>
   )
diff --git a/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx b/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx
@@ -630,7 +630,6 @@ export const TrackScreenDetailsTile = ({
               userId={user.user_id}
               collaborators={collaborators}
               size='l'
-              badgeSize='s'
               style={{ justifyContent: 'center' }}
             />
           ) : null}
