feat(queue): highlight and scroll to the current track - #103
Open
Lisiadito wants to merge 1 commit into
Open
Conversation
The playing track was hard to find in both queue views: the highlight was a faint tint and neither platform ever scrolled, so on a long queue the current track was usually off-screen. Highlight: keep the tinted background, add a left accent bar and a bolder accent title. Desktop uses an inset box-shadow rather than border-left so the row does not shift and it does not collide with the drag-over border; mobile reserves the 3px border on every row and only changes its colour. Auto-scroll: on open (desktop panel unmounts when closed, so mount-time positioning suffices) / on tab focus (mobile tabs stay mounted), and again on every track change. Guarded by one rule on both platforms — skip if a drag is in progress, or if the outgoing current row was not on screen — so it follows while you watch the playing area and leaves you alone once you scroll off to browse. Known limitation: a track change landing mid-drag is dropped, not replayed. Also fixes two bugs: - Virtuoso renders initialItemCount rows starting AT initialTopMostItemIndex and never clamps that window against the data length, handing itemContent an undefined item. Reachable for any queue shorter than the count with the current track off the first row (a 12-track album on track 5). Both props are now derived together, with an !item bail as a net. - The mobile current-row tint used colors.input, which equals colors.background (#000000) in the high-contrast palette, making the highlight invisible there. Adds a dedicated highlight token to all three palettes. Row geometry on mobile is now derived from shared constants and the row height is pinned, so getItemLayout cannot drift under OS font scaling. Tests: new QueuePanel.autoscroll.test.tsx mocks react-virtuoso (the real one can never report a scroll under happy-dom, where the scroller's offsetHeight is always 0) while the existing suite keeps exercising the real component; the mobile suite gains highlight coverage including high-contrast. Each guard was mutation-tested so it is not passing vacuously.
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.
The playing track was hard to find in both queue views: the highlight was a faint tint and neither platform ever scrolled, so on a long queue the current track was usually off-screen.
Highlight: keep the tinted background, add a left accent bar and a bolder accent title. Desktop uses an inset box-shadow rather than border-left so the row does not shift and it does not collide with the drag-over border; mobile reserves the 3px border on every row and only changes its colour.
Auto-scroll: on open (desktop panel unmounts when closed, so mount-time positioning suffices) / on tab focus (mobile tabs stay mounted), and again on every track change. Guarded by one rule on both platforms — skip if a drag is in progress, or if the outgoing current row was not on screen — so it follows while you watch the playing area and leaves you alone once you scroll off to browse. Known limitation: a track change landing mid-drag is dropped, not replayed.
Also fixes two bugs:
Virtuoso renders initialItemCount rows starting AT initialTopMostItemIndex and never clamps that window against the data length, handing itemContent an undefined item. Reachable for any queue shorter than the count with the current track off the first row (a 12-track album on track 5). Both props are now derived together, with an !item bail as a net.
The mobile current-row tint used colors.input, which equals colors.background (#000000) in the high-contrast palette, making the highlight invisible there. Adds a dedicated highlight token to all three palettes.
Row geometry on mobile is now derived from shared constants and the row height is pinned, so getItemLayout cannot drift under OS font scaling.
Tests: new QueuePanel.autoscroll.test.tsx mocks react-virtuoso (the real one can never report a scroll under happy-dom, where the scroller's offsetHeight is always 0) while the existing suite keeps exercising the real component; the mobile suite gains highlight coverage including high-contrast. Each guard was mutation-tested so it is not passing vacuously.