@@ -16,7 +16,8 @@ export enum FeatureFlags {
   LAUNCHPAD_VERIFICATION = 'launchpad_verification',
   FAN_CLUB_TEXT_POST_POSTING = 'fan_club_text_post_posting',
   QUEUE_NEW_FEATURE_BADGE = 'queue_new_feature_badge',
-  WEEKLY_ROTATION = 'weekly_rotation'
+  WEEKLY_ROTATION = 'weekly_rotation',
+  TRACK_ROWS = 'track_rows'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -51,5 +52,7 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.QUEUE_NEW_FEATURE_BADGE]: false,
   // Default on so shared links render before the Optimizely datafile loads;
   // the remote flag is the kill switch.
-  [FeatureFlags.WEEKLY_ROTATION]: true
+  [FeatureFlags.WEEKLY_ROTATION]: true,
+  // Dense track rows instead of tiles on Trending. Off until rolled out.
+  [FeatureFlags.TRACK_ROWS]: false
 }
@@ -38,3 +38,4 @@ export * from './internal/MenuItem'
 export * from './internal/Menu'
 export * from './internal/OptionKeyHandler'
 export * from './tooltip'
+export * from './track-row'
@@ -0,0 +1,293 @@
+import { forwardRef, MouseEvent, useCallback } from 'react'
+
+import { css, keyframes, useTheme } from '@emotion/react'
+
+import { IconHeart, IconPause, IconPlay } from '../../icons'
+import { IconButton } from '../button'
+import { Box } from '../layout/Box'
+import { Flex } from '../layout/Flex'
+import { Skeleton } from '../skeleton'
+import { Text } from '../text'
+
+import type { TrackRowProps } from './types'
+
+const ROW_HEIGHT = 56
+const ART_SIZE = 40
+
+const REVEAL_CLASS = 'trackRowReveal'
+const HIDE_ON_HOVER_CLASS = 'trackRowHideOnHover'
+
+const bounce = keyframes`
+  0%, 100% { height: 4px; }
+  50% { height: 14px; }
+`
+
+/** Three animated bars shown in place of the rank while the row is playing. */
+const Equalizer = () => {
+  const { color } = useTheme()
+  return (
+    <Flex
+      aria-hidden
+      gap='2xs'
+      alignItems='flex-end'
+      justifyContent='center'
+      h={14}
+      css={{
+        '& > i': {
+          display: 'block',
+          width: 3,
+          borderRadius: 1,
+          backgroundColor: color.text.accent,
+          animation: `${bounce} 1s ease-in-out infinite`
+        },
+        '& > i:nth-of-type(2)': { animationDelay: '-0.4s' },
+        '& > i:nth-of-type(3)': { animationDelay: '-0.7s' },
+        '@media (prefers-reduced-motion: reduce)': {
+          '& > i': { animation: 'none', height: 10 }
+        }
+      }}
+    >
+      <i />
+      <i />
+      <i />
+    </Flex>
+  )
+}
+
+/**
+ * A dense, single-line track row for lineups: rank · artwork · title and
+ * artist · plays · favorite · duration · menu. Fifty-six pixels tall, so a
+ * desktop viewport shows ten to twelve tracks instead of three or four tiles.
+ *
+ * The row is presentational. The app supplies the title and artist nodes
+ * (links), the artwork, the formatted numbers and the overflow menu; the row
+ * handles layout, hover and playing states, and reveals actions on hover or
+ * keyboard focus.
+ */
+export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
+  (props, ref) => {
+    const {
+      rank,
+      artwork,
+      title,
+      subtitle,
+      playCount,
+      duration,
+      isActive = false,
+      isPlaying = false,
+      isFavorited = false,
+      isLoading = false,
+      isDisabled = false,
+      onTogglePlay,
+      onToggleFavorite,
+      menu,
+      playLabel = isPlaying ? 'Pause' : 'Play',
+      favoriteLabel = isFavorited ? 'Unfavorite' : 'Favorite',
+      className,
+      ...other
+    } = props
+    const { color, cornerRadius, motion, spacing, typography } = useTheme()
+
+    const isInteractive = !isLoading && !isDisabled
+
+    // Clicks on links, buttons and the menu belong to those controls; any
+    // other click on the row toggles playback, like the tile does.
+    const handleRowClick = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        if (!isInteractive) return
+        const target = event.target as Element
+        if (target.closest('a, button, [role="menu"], [data-row-control]')) {
+          return
+        }
+        onTogglePlay?.()
+      },
+      [isInteractive, onTogglePlay]
+    )
+
+    const handlePlayClick = useCallback(
+      (event: MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation()
+        onTogglePlay?.()
+      },
+      [onTogglePlay]
+    )
+
+    const handleFavoriteClick = useCallback(
+      (event: MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation()
+        onToggleFavorite?.()
+      },
+      [onToggleFavorite]
+    )
+
+    const rowCss = css({
+      display: 'grid',
+      gridTemplateColumns: `28px ${ART_SIZE}px minmax(0, 1fr) auto 32px 48px 32px`,
+      alignItems: 'center',
+      columnGap: spacing.m,
+      height: ROW_HEIGHT,
+      paddingLeft: spacing.s,
+      paddingRight: spacing.s,
+      borderRadius: cornerRadius.m,
+      cursor: isInteractive ? 'pointer' : 'default',
+      opacity: isDisabled ? 0.5 : 1,
+      transition: `background-color ${motion.hover}`,
+      [`& .${REVEAL_CLASS}`]: {
+        opacity: 0,
+        transition: `opacity ${motion.hover}`
+      },
+      ...(isInteractive && {
+        '&:hover, &:focus-within': {
+          backgroundColor: color.background.surface1,
+          [`& .${REVEAL_CLASS}`]: { opacity: 1 },
+          [`& .${HIDE_ON_HOVER_CLASS}`]: { opacity: 0 }
+        }
+      })
+    })
+
+    // The numeral, the equalizer and the play button share one grid cell so
+    // they stack dead-center and cross-fade on hover.
+    const rankCss = css({
+      display: 'grid',
+      placeItems: 'center',
+      height: '100%',
+      '& > *': { gridArea: '1 / 1' }
+    })
+
+    const numeralCss = css({
+      fontVariantNumeric: 'tabular-nums',
+      textAlign: 'right',
+      whiteSpace: 'nowrap'
+    })
+
+    const rankFace = css({
+      fontFamily: typography.fontDisplay,
+      '--harmony-font-family': typography.fontDisplay,
+      transition: `opacity ${motion.hover}`
+    })
+
+    if (isLoading) {
+      return (
+        <div ref={ref} css={rowCss} className={className} aria-busy {...other}>
+          <Box />
+          <Skeleton w={ART_SIZE} h={ART_SIZE} borderRadius='s' />
+          <Flex direction='column' gap='xs' css={{ minWidth: 0 }}>
+            <Skeleton w='45%' h={14} />
+            <Skeleton w='28%' h={12} />
+          </Flex>
+          <Skeleton w={36} h={12} />
+          <Box />
+          <Skeleton w={32} h={12} />
+          <Box />
+        </div>
+      )
+    }
+
+    const showEqualizer = isActive && isPlaying
+    const PlayIcon = showEqualizer ? IconPause : IconPlay
+
+    return (
+      <div
+        ref={ref}
+        css={rowCss}
+        className={className}
+        onClick={handleRowClick}
+        aria-current={isActive ? 'true' : undefined}
+        {...other}
+      >
+        <div css={rankCss}>
+          {rank != null && !showEqualizer ? (
+            <Text
+              variant='title'
+              size='l'
+              strength='strong'
+              color='default'
+              className={HIDE_ON_HOVER_CLASS}
+              css={rankFace}
+            >
+              {rank}
+            </Text>
+          ) : null}
+          {showEqualizer ? (
+            <span className={HIDE_ON_HOVER_CLASS}>
+              <Equalizer />
+            </span>
+          ) : null}
+          {isInteractive && onTogglePlay ? (
+            <IconButton
+              size='s'
+              icon={PlayIcon}
+              color='default'
+              aria-label={playLabel}
+              onClick={handlePlayClick}
+              className={REVEAL_CLASS}
+              css={{ '&:focus-visible': { opacity: 1 } }}
+            />
+          ) : null}
+        </div>
+
+        <Box
+          w={ART_SIZE}
+          h={ART_SIZE}
+          borderRadius='s'
+          css={{
+            overflow: 'hidden',
+            backgroundColor: color.background.surface2
+          }}
+        >
+          {artwork}
+        </Box>
+
+        <Flex direction='column' css={{ minWidth: 0 }}>
+          <Text
+            variant='body'
+            size='m'
+            strength='strong'
+            color={isActive ? 'accent' : 'default'}
+            ellipses
+            css={{ fontWeight: typography.weight.medium }}
+          >
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text variant='body' size='s' color='subdued' ellipses>
+              {subtitle}
+            </Text>
+          ) : null}
+        </Flex>
+
+        <Text variant='body' size='xs' color='subdued' css={numeralCss}>
+          {playCount ?? ''}
+        </Text>
+
+        <Flex justifyContent='center'>
+          {onToggleFavorite ? (
+            <IconButton
+              size='s'
+              icon={IconHeart}
+              color={isFavorited ? 'active' : 'subdued'}
+              aria-label={favoriteLabel}
+              aria-pressed={isFavorited}
+              onClick={handleFavoriteClick}
+              className={isFavorited ? undefined : REVEAL_CLASS}
+              css={{ '&:focus-visible': { opacity: 1 } }}
+            />
+          ) : null}
+        </Flex>
+
+        <Text variant='body' size='xs' color='subdued' css={numeralCss}>
+          {duration ?? ''}
+        </Text>
+
+        <Flex
+          justifyContent='center'
+          className={REVEAL_CLASS}
+          data-row-control
+          css={{ '&:focus-within': { opacity: 1 } }}
+        >
+          {menu}
+        </Flex>
+      </div>
+    )
+  }
+)
@@ -0,0 +1,2 @@
+export * from './TrackRow'
+export type { TrackRowProps } from './types'
@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+export type TrackRowProps = {
+  /** 1-based position shown in the leading cell. Omit for unranked lists. */
+  rank?: number
+  /** 40px square artwork. Rendered as given, inside a fixed-size cell. */
+  artwork?: ReactNode
+  /** Track title. Usually a link; the row ellipsizes it. */
+  title: ReactNode
+  /** Artist line under the title. */
+  subtitle?: ReactNode
+  /** Pre-formatted play count, e.g. "6.6K". */
+  playCount?: string
+  /** Pre-formatted duration, e.g. "2:30". */
+  duration?: string
+  /** This track is the one loaded in the player. */
+  isActive?: boolean
+  /** This track is the one loaded in the player and audio is playing. */
+  isPlaying?: boolean
+  isFavorited?: boolean
+  /** Renders skeletons in every cell and disables interaction. */
+  isLoading?: boolean
+  isDisabled?: boolean
+  /** Fires when the row, its play button or its artwork is clicked. */
+  onTogglePlay?: () => void
+  /** When omitted, the favorite cell stays empty. */
+  onToggleFavorite?: () => void
+  /** Overflow menu trigger. Hidden until hover or focus. */
+  menu?: ReactNode
+  /** Accessible name for the play button. */
+  playLabel?: string
+  /** Accessible name for the favorite button. */
+  favoriteLabel?: string
+} & Omit<ComponentPropsWithoutRef<'div'>, 'title' | 'onClick'>
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './TrackRow'`
	`2`	`+export type { TrackRowProps } from './types'`