Repository navigation
feat(web): dense tables on Library and artist dashboard behind track_rows - #14690
Merged
Merged
Conversation
|
dylanjeffers
force-pushed
the
design/track-row-table-style
branch
from
October 20, 2026 00:14
b778991 to
af171f0
Compare
dylanjeffers
force-pushed
the
design/track-row-library-tables
branch
2 times, most recently
from
October 20, 2026 00:19
475ea3e to
bdf2e94
Compare
dylanjeffers
force-pushed
the
design/track-row-table-style
branch
from
October 20, 2026 00:19
af171f0 to
7e2e4f1
Compare
The profile page passes the row variant to its Tracks and Reposts lineups when the `track_rows` flag is on. `TrackRow` gains an optional `context` line above the row, which the connected row uses to label the artist pick. In row mode the lineup drops the two-column grid it uses for small tiles so rows span the full width. Feed stays on tiles on purpose: a feed item is a post with who reposted it and inline playlists, and the tile carries that better than a row. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Reposts mixes playlists into the track lineup. With rows the cards sat flush against the row above; give them a top margin in row layout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Search's track results pass the row variant to TrackLineup when the `track_rows` flag is on, and drop the tile spacing styles in row mode. Collection pages are left on their tracks table: it is already a dense 48px row with sortable columns and drag reorder in edit mode, which the row does not replace. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Table gains an `isDense` prop that restyles rows to match Harmony's TrackRow: flat surface instead of a card, 56px rows, hover fill, accent title on the active row, sentence-case 12px header, 40px artwork and a subdued artist line. Sorting, drag reorder and edit mode are unchanged. The collection page turns it on with the `track_rows` flag and makes its outer wrapper transparent so the hover fill shows. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Table puts its CSS-module `dense` class on the wrapper, which is hashed, so `:global(.dense)` in TracksTable.module.css never matched and the 40px art, subdued artist line and flat locked/disabled rows didn't apply. TracksTable now adds its own module class when isDense is set. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…rows Library favorites and the dashboard Tracks and Albums tables pass `isDense` when `track_rows` is on. CollectionsTable forwards the prop, and the virtualized table uses a 56px row height in dense mode so the Library list matches the CSS. The Library table drops its card border in dense mode. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
dylanjeffers
force-pushed
the
design/track-row-table-style
branch
from
October 21, 2026 23:05
7e2e4f1 to
3bde51b
Compare
dylanjeffers
force-pushed
the
design/track-row-library-tables
branch
from
October 21, 2026 23:05
bdf2e94 to
f36ab7f
Compare
dylanjeffers
added a commit
that referenced
this pull request
Oct 22, 2026
…14700) Phase 1 of the redesign on mobile: tracks in catalog lineups render as 64px rows instead of bordered tiles, matching web (#14684-#14690). Gated by the existing `track_rows` flag, which is on in production, so this reaches RC users through the RC OTA on merge. Feed keeps tiles. **Where:** Trending, Underground, profile Tracks and Reposts, search track results. Collections in mixed lineups (Reposts) stay tiles. Library already uses `TrackList` rows and is unchanged. **Row:** optional rank, 48px art, title, artist with badges, duration (or "12m left" / "Played" for podcasts and audiobooks), and a price/unlock button in place of the duration on locked tracks. - Tap plays (gated tracks open the purchase modal or locked-content drawer, same as the tile). - Long-press opens the track's actions, with a haptic. No kebab: the title gets the space. VoiceOver gets the same menu as a "More options" action. - The playing track gets an accent title and an equalizer on its art. **Code:** - `harmony-native/components/TrackRow`: presentational row. - `lineup-tile/TrackRowTile`: connected row. - `lineup-tile/useOpenTrackOverflow`: overflow actions now shared by `TrackTile` and the row (tile menu unchanged). Rows add share, favorite and repost since they have no inline buttons. - `TrackLineup` gets `tileVariant: 'tile' | 'row'`. **Tested** on the iOS 26.5 simulator (1.5.190 Release build with this bundle swapped in), signed in: Trending rows and ranks, tap to play and switch tracks, equalizer, long-press menu without starting playback, pagination to 50, profile Tracks rows, loading skeletons. Not tested: Android, search results, a locked track's price button, VoiceOver. Mobile `tsc` and eslint are clean locally (mobile CI only runs security checks). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Stacked on #14689. The remaining desktop track tables take the dense style when
track_rowsis on:isDenseon the table, and the card border wrapper class is dropped in dense mode.isDenseonTracksTableandCollectionsTable;CollectionsTablenow forwards the prop toTable.Table's virtualized path usesrowHeight56 in dense mode (was a fixed 64), so the Library list, which is virtualized, matches the 56px CSS rows.Verified
tscclean for webTablecode path; this account has no uploads, so they were not viewed with data.🤖 Generated with Claude Code