Repository navigation
feat(ui): sort the track list by column heading - #6
Merged
Merged
Conversation
Every heading is now a button: click sorts by that column, click again reverses. This replaces the Sort By radio group in the View menu, which offered four of the ten orders the list can be in and put them two menus deep from the columns they describe. The sort is stored per grouping rather than once for the list. Album order is the only order that makes sense under an album header and a poor one for a flat list, so sharing one value meant every switch between grouped and flat silently re-sorted the view being left. Flat view opens on artist A-Z, the grouped views on album order. Around that: - An Added column, so Recently Added has a heading that asks for it. - Album absorbs the row's slack instead of Title. Title took the whole width of a wide window for a three-word string while the album beside it truncated. - Flat rows carry their own cover art. The grouped views already show one per album header. - The heading clips and mirrors the list's scrollLeft. A heading too wide for the window used to widen the document, and a sideways gesture slid the entire UI; html/body now hide overflow too. - Library's inspector and Convert's settings column share one width constant, so the edge stops jumping when tabs are switched.
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.
Summary
Column headings in the library are now the sort control: click one to sort by it, click it again to reverse. This replaces the Sort By radio group in the View menu, which offered four of the ten orders the list can be in and buried them two menus away from the columns they describe. The sort is remembered per grouping, so switching between flat and grouped no longer re-sorts the view you were leaving.
Changes
ui/lib/sort.ts(new) — sort keys per column, next-sort-on-click, arrow direction, and per-grouping prefs with tolerant localStorage parsing (seeds grouped views from the old singletrackSortvalue).ui/lib/types.ts—TrackSortbecomesTrackSortState({ key, dir });TrackSortKeygainsgenre,trackNumber,year,time,bitrate,plays.SORT_LABELSremoved.ui/lib/grouping.ts— comparator table, one per key, each ascending with a title tie-break; descending is the comparator negated. Group headers follow the direction too.ui/lib/columns.ts— new Added column; Album is now the flexible column instead of Title, derived rather than named so moving the slack is a one-line change.ui/components/TrackList.tsx—ColumnSortButtonfills each heading cell (resize handle still wins a press on the divider); flat rows carry a 24px cover; heading clips and mirrors the list'sscrollLeft.ui/components/LibraryHeaderRow.tsx— Sort By group removed from the View menu.ui/index.css—html, bodyhide overflow and overscroll, so a wide track list can't slide the whole window sideways.ui/lib/layout.ts(new) —SIDE_PANEL_WIDTH/SIDE_PANEL_MAX_WIDTHshared by Library's inspector and Convert's settings column, so the edge doesn't jump between tabs.ui/components/StatsView.tsx—h-fullinstead offlex-1; the wrapper is a plain block, so the pane was sizing to content and the page scrolled behind it.Test plan
npm test— 151 passing across 9 files, including 18 new inui/lib/sort.test.tsand expandedgrouping.test.ts(42) /columns.test.ts(18).npx tsc --noEmit— clean.