feat(web): dense tables on Library and artist dashboard behind track_rows

packages/harmony/src/components/track-row/TrackRow.tsx

@@ -84,6 +84,7 @@ export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
       onTogglePlay,
       onToggleFavorite,
       menu,
+      context,
       playLabel = isPlaying ? 'Pause' : 'Play',
       favoriteLabel = isFavorited ? 'Unfavorite' : 'Favorite',
       className,
@@ -123,6 +124,16 @@ export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
       [onToggleFavorite]
     )
 
+    // Title column starts after the rank and artwork cells and two gaps.
+    const contextCss = css({
+      display: 'flex',
+      alignItems: 'center',
+      gap: spacing.xs,
+      height: 16,
+      marginTop: spacing.xs,
+      paddingLeft: spacing.s + RANK_SIZE + ART_SIZE + spacing.m * 2
+    })
+
     const rowCss = css({
       display: 'grid',
       gridTemplateColumns: `${RANK_SIZE}px ${ART_SIZE}px minmax(0, 1fr) auto 32px 48px 32px`,
@@ -189,14 +200,14 @@ export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
     const showEqualizer = isActive && isPlaying
     const PlayIcon = showEqualizer ? IconPause : IconPlay
 
-    return (
+    const row = (
       <div
-        ref={ref}
+        ref={context ? undefined : ref}
         css={rowCss}
-        className={className}
+        className={context ? undefined : className}
         onClick={handleRowClick}
         aria-current={isActive ? 'true' : undefined}
-        {...other}
+        {...(context ? {} : other)}
       >
         <div css={rankCss}>
           {rank != null && !showEqualizer ? (
@@ -297,5 +308,16 @@ export const TrackRow = forwardRef<HTMLDivElement, TrackRowProps>(
         </Flex>
       </div>
     )
+
+    if (!context) return row
+
+    return (
+      <div ref={ref} className={className} {...other}>
+        <Text variant='body' size='xs' color='subdued' css={contextCss}>
+          {context}
+        </Text>
+        {row}
+      </div>
+    )
   }
 )

packages/harmony/src/components/track-row/types.ts

@@ -32,6 +32,11 @@ export type TrackRowProps = {
   onToggleFavorite?: () => void
   /** Overflow menu trigger. Hidden until hover or focus. */
   menu?: ReactNode
+  /**
+   * One short line above the row, aligned with the title column, for
+   * context such as "Artist Pick". Adds 16px to the row's height.
+   */
+  context?: ReactNode
   /** Accessible name for the play button. */
   playLabel?: string
   /** Accessible name for the favorite button. */

packages/web/src/components/collections-table/CollectionsTable.tsx

@@ -56,6 +56,7 @@ type CollectionsTableProps = {
   totalRowCount?: number
   tableHeaderClassName?: string
   responsiveColumns?: TableProps['responsiveColumns']
+  isDense?: boolean
 }
 
 const defaultColumns: CollectionsTableColumn[] = [
@@ -84,7 +85,8 @@ export const CollectionsTable = ({
   showMoreLimit,
   totalRowCount,
   tableHeaderClassName,
-  responsiveColumns
+  responsiveColumns,
+  isDense
 }: CollectionsTableProps) => {
   // Cell Render Functions
   const renderNameCell = useCallback((cellInfo: CollectionCell) => {
@@ -282,6 +284,7 @@ export const CollectionsTable = ({
       totalRowCount={totalRowCount}
       tableHeaderClassName={tableHeaderClassName}
       responsiveColumns={responsiveColumns}
+      isDense={isDense}
     />
   )
 }

packages/web/src/components/lineup/Lineup.module.css

@@ -28,3 +28,8 @@
   margin: 0px !important;
   margin-bottom: 24px !important;
 }
+
+/* Collection cards mixed into a row lineup (profile Reposts) */
+.collectionAmongRows {
+  margin-top: var(--harmony-spacing-m);
+}

packages/web/src/components/lineup/TrackLineup.tsx

@@ -287,7 +287,10 @@ export const TrackLineup = ({
   } else if (variant === LineupVariant.GRID) {
     tileSize = TrackTileSize.SMALL
     statSize = 'small'
-    containerClassName = styles.searchTrackTileContainer
+    // Rows are full width; the two-column grid is for small tiles only.
+    containerClassName = isRowLayout
+      ? undefined
+      : styles.searchTrackTileContainer
   } else if (variant === LineupVariant.CONDENSED) {
     tileSize = TrackTileSize.SMALL
   }
@@ -436,7 +439,9 @@ export const TrackLineup = ({
         playTrack: handlePlayCollectionTrack,
         pauseTrack,
         size: tileSize,
-        containerClassName,
+        containerClassName: cn(containerClassName, {
+          [styles.collectionAmongRows]: isRowLayout
+        }),
         id: item.id,
         isLoading: false,
         hasLoaded: () => {},
@@ -466,7 +471,8 @@ export const TrackLineup = ({
     onClickTile,
     showArtistPick,
     TrackTile,
-    CollectionTile
+    CollectionTile,
+    isRowLayout
   ])
 
   const isInitialLoad = isPending && tiles.length === 0

packages/web/src/components/table/Table.module.css

@@ -382,3 +382,66 @@
 .cellSectionEnd.menu {
   flex: 0 0 64px;
 }
+
+/* Dense rows: the TrackRow look on a sortable table. Flat surface, 56px rows,
+   hover fill instead of card shadows, sentence-case header. */
+.dense.tableWrapper {
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding-bottom: 0;
+}
+
+.dense .table,
+.dense .tableHead,
+.dense .tableHeadRow,
+.dense .tableHeader,
+.dense .tableBody,
+.dense .tableRow,
+.dense .tableRow > .tableCell {
+  background-color: transparent;
+}
+
+.dense .tableHead {
+  padding-top: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: none;
+  color: var(--harmony-text-subdued);
+  border-bottom: 1px solid var(--harmony-border-default);
+}
+
+.dense .headerContent {
+  min-height: 36px;
+}
+
+.dense .tableRow {
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: var(--harmony-border-radius-m);
+  transition: background-color 0.12s cubic-bezier(0.44, 0, 0.56, 1);
+}
+
+.dense .tableRow.active {
+  color: var(--harmony-secondary);
+}
+
+.dense .tableCell {
+  height: 56px;
+  padding: 4px 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.dense .tableRow:hover:not(.skeletonRow),
+.dense .tableRow:focus-within:not(.skeletonRow),
+.dense .tableRow:hover:not(.skeletonRow) > .tableCell,
+.dense .tableRow:focus-within:not(.skeletonRow) > .tableCell {
+  box-shadow: none;
+  background-color: var(--harmony-bg-surface-1);
+}
+
+.dense .tableRow.disabled,
+.dense .tableRow.disabled:hover {
+  background-color: transparent;
+  opacity: 0.5;
+}

packages/web/src/components/table/Table.tsx

@@ -110,6 +110,8 @@ export type TableProps = {
   isPaginated?: boolean
   isReorderable?: boolean
   isTracksTable?: boolean
+  /** Flat, 56px rows styled like Harmony's TrackRow: no card, hover fill, sentence-case header. */
+  isDense?: boolean
   isVirtualized?: boolean
   loading?: boolean
   onClickRow?: (
@@ -149,6 +151,7 @@ export const Table = ({
   isPaginated = false,
   isReorderable = false,
   isTracksTable = false,
+  isDense = false,
   isVirtualized = false,
   loading = false,
   onClickRow,
@@ -817,7 +820,11 @@ export const Table = ({
   const renderContent = useCallback(() => {
     return (
       <div
-        className={cn(styles.tableWrapper, wrapperClassName)}
+        className={cn(
+          styles.tableWrapper,
+          { [styles.dense]: isDense },
+          wrapperClassName
+        )}
         ref={setTableWrapperNode}
       >
         <table
@@ -846,7 +853,8 @@ export const Table = ({
     setTableWrapperNode,
     tableClassName,
     tableHeaderClassName,
-    wrapperClassName
+    wrapperClassName,
+    isDense
   ])
 
   // Force the window scroller to update its position
@@ -877,7 +885,11 @@ export const Table = ({
                 scrollTop
               }) => (
                 <div
-                  className={cn(styles.tableWrapper, wrapperClassName)}
+                  className={cn(
+                    styles.tableWrapper,
+                    { [styles.dense]: isDense },
+                    wrapperClassName
+                  )}
                   ref={setTableWrapperNode}
                 >
                   <table
@@ -920,7 +932,7 @@ export const Table = ({
                                 ? totalRowCount
                                 : rows.length
                             }
-                            rowHeight={64}
+                            rowHeight={isDense ? 56 : 64}
                             rowRenderer={renderRow}
                           />
                         )}
@@ -944,6 +956,7 @@ export const Table = ({
     fetchBatchSize,
     scrollRef,
     wrapperClassName,
+    isDense,
     tableClassName,
     getTableProps,
     tableHeaderClassName,

packages/web/src/components/track/desktop/TrackRowTile.tsx

@@ -21,6 +21,7 @@ import {
   Artwork,
   IconButton,
   IconKebabHorizontal,
+  IconPin,
   Text,
   TrackRow
 } from '@audius/harmony'
@@ -62,6 +63,8 @@ export type TrackRowTileProps = {
   isFeed?: boolean
   onClick?: (trackId: ID) => void
   containerClassName?: string
+  /** Mark the owner's pinned track with an "Artist Pick" line. */
+  showArtistPick?: boolean
 }
 
 /**
@@ -79,7 +82,8 @@ export const TrackRowTile = ({
   hasLoaded,
   isFeed = false,
   onClick,
-  containerClassName
+  containerClassName,
+  showArtistPick = false
 }: TrackRowTileProps) => {
   const dispatch = useDispatch()
   const { data: currentUserId } = useCurrentUserId()
@@ -130,6 +134,8 @@ export const TrackRowTile = ({
   const trackPosition = useSelector((state: CommonState) =>
     getTrackPosition(state, { trackId, userId: currentUserId })
   )
+  const isArtistPick =
+    showArtistPick && partialUser?.artist_pick_track_id === trackId
 
   const { isFetchingNFTAccess, hasStreamAccess, isPreviewable } =
     useGatedContentAccess(trackWithFallback)
@@ -319,6 +325,14 @@ export const TrackRowTile = ({
       }
       menu={overflowMenu}
       playLabel={playLabel}
+      context={
+        isArtistPick ? (
+          <>
+            <IconPin size='xs' color='subdued' />
+            {messages.artistPick}
+          </>
+        ) : undefined
+      }
       data-testid='track-row'
     />
   )

packages/web/src/components/tracks-table/TracksTable.module.css

@@ -291,3 +291,29 @@
 .tableRow .overflowMenu {
   opacity: 0;
 }
+
+/* Dense table (isDense, see Table.module.css): 40px art, subdued artist line */
+.dense .inlineArtworkContainer {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  border: 0;
+}
+
+.dense .trackHeaderArtworkSpacer {
+  width: 48px;
+  min-width: 48px;
+}
+
+.dense .stackedArtistText {
+  color: var(--harmony-text-subdued);
+}
+
+.dense .tableRow.disabled,
+.dense .tableRow.disabled * {
+  background-color: transparent;
+}
+
+.dense .tableRow.lockedRow {
+  background-color: transparent;
+}

packages/web/src/components/tracks-table/TracksTable.tsx

@@ -1105,6 +1105,11 @@ export const TracksTable = ({
   return (
     <Table
       {...tableProps}
+      // Table's own .dense class is scoped to its module; this one lets the
+      // rules in TracksTable.module.css match.
+      wrapperClassName={cn(tableProps.wrapperClassName, {
+        [styles.dense]: tableProps.isDense
+      })}
       columns={tableColumns}
       data={data}
       activeIndex={activeIndex}

packages/web/src/pages/collection-page/components/desktop/CollectionPage.module.css

@@ -51,6 +51,10 @@
   width: 100%;
 }
 
+.tableWrapperDense {
+  background-color: transparent;
+}
+
 .tableHeaderFilterContainer {
   width: calc(100% - 8px);
   max-width: 100%;