Repository navigation
feat(web): dense tracks table on collection pages behind track_rows - #14689
Merged
Merged
Conversation
|
dylanjeffers
force-pushed
the
design/track-row-search-collections
branch
from
October 20, 2026 00:14
94e8022 to
fb5fc2a
Compare
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-search-collections
branch
from
October 20, 2026 00:19
fb5fc2a to
dab0de6
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>
dylanjeffers
force-pushed
the
design/track-row-search-collections
branch
from
October 21, 2026 23:05
dab0de6 to
2fee8ee
Compare
dylanjeffers
force-pushed
the
design/track-row-table-style
branch
from
October 21, 2026 23:05
7e2e4f1 to
3bde51b
Compare
dylanjeffers
added a commit
that referenced
this pull request
Oct 21, 2026
…rows (#14690) ## What Stacked on #14689. The remaining desktop track tables take the dense style when `track_rows` is on: - **Library** (favorites, reposts, premium): `isDense` on the table, and the card border wrapper class is dropped in dense mode. - **Artist dashboard** Tracks and Albums tabs: `isDense` on `TracksTable` and `CollectionsTable`; `CollectionsTable` now forwards the prop to `Table`. - `Table`'s virtualized path uses `rowHeight` 56 in dense mode (was a fixed 64), so the Library list, which is virtualized, matches the 56px CSS rows. ## Verified - eslint and `tsc` clean for web - Dev server, flag forced on: Library tracks renders 56px rows, 11 per screen, sentence-case header, flat surface. Dashboard tables share the same `Table` code path; this account has no uploads, so they were not viewed with data. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Fable 5.1 <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
1 participant
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 #14686. Collection pages keep their sortable, reorderable tracks table, but with
track_rowson the table takes the TrackRow look.Tablegets anisDenseprop (a.densemodifier on the wrapper, applied on both the virtualized and plain render paths):surface-1instead of a box shadowTracksTable: 40px artwork without a border, subdued artist line, flat disabled and locked rowsCollectionPagereadsFeatureFlags.TRACK_ROWS, passesisDense, and makes its outer wrapper transparent so the hover fill is visible. Sorting, filter, drag reorder, remove and edit mode are untouched. Library and dashboard tables are not changed in this PR; they can opt in with the same prop.Verified
tscclean for web🤖 Generated with Claude Code