Web Library: continuous grid + sticky alphabet rail #68

2026-06-01T21:36:46-04:00

bvandeusen commented

2026-06-01 21:36:46 -04:00

Operator UI review: Library Artists / Albums had a full-row letter divider per first-character. A letter like "2" or "8" with one artist left 9 empty cells before the next letter started a new row — lots of dead space.

Operator chose option 2: drop the dividers entirely, add a vertical jump-bar on the right.

AlphabeticalGrid flows continuously now. First item of each letter group carries id='alpha-<letter>' so the rail can target it via scrollIntoView.
Sticky vertical alphabet rail. position: sticky; top: 50%; transform: translateY(-50%) keeps it vertically centered in the viewport while the grid scrolls underneath.
Rail only renders when there's more than one distinct letter, so small or filter-narrowed views don't get a useless rail.

Tests rewritten — letters are buttons in the rail now, not text dividers in the grid. Three new assertions: jump button per distinct letter, DOM order is items then rail, and alpha-<letter> ids appear on the first tile of each letter.

CI green on 93aa37c7 (run 166).

Operator UI review: Library Artists / Albums had a full-row letter divider per first-character. A letter like "2" or "8" with one artist left 9 empty cells before the next letter started a new row — lots of dead space. Operator chose option 2: drop the dividers entirely, add a vertical jump-bar on the right. - `AlphabeticalGrid` flows continuously now. First item of each letter group carries `id='alpha-<letter>'` so the rail can target it via `scrollIntoView`. - Sticky vertical alphabet rail. `position: sticky; top: 50%; transform: translateY(-50%)` keeps it vertically centered in the viewport while the grid scrolls underneath. - Rail only renders when there's more than one distinct letter, so small or filter-narrowed views don't get a useless rail. Tests rewritten — letters are buttons in the rail now, not text dividers in the grid. Three new assertions: jump button per distinct letter, DOM order is items then rail, and `alpha-<letter>` ids appear on the first tile of each letter. CI green on `93aa37c7` (run 166).

bvandeusen added 1 commit 2026-06-01 21:36:46 -04:00

feat(web): Library — continuous grid + sticky alphabet rail

test-web / test (push) Successful in 33s

Details

93aa37c7b6

Operator UI review: artists/albums layout had a full-row letter
divider per first-character, so a section like '2' (one artist)
left 9 empty cells before '8' (one artist) started a new row. Lots
of dead space across letters with few entries.

Operator chose option 2: drop the dividers, add a side jump-bar.

- AlphabeticalGrid no longer renders per-letter row-spanning
  dividers. Items flow continuously across the grid; first item
  of each letter gets id='alpha-<letter>' so the rail can target
  it via scrollIntoView.
- New sticky vertical alphabet rail on the right. position:sticky
  + top:50% + translateY keeps it vertically centered in the
  viewport while the grid scrolls underneath.
- Each rail entry is a focusable button with aria-label='Jump to
  <letter>'. Hover/focus tinted with accent.
- Only renders when there's more than one distinct letter so
  small libraries (or filter-narrowed views) don't get an empty
  rail.

Test rewritten — letters are buttons on the rail, not dividers in
the grid. Three assertions:
- one jump button per distinct first-letter
- DOM order is items first then rail (was rail-then-items before)
- first item of each letter carries the alpha-<letter> id

bvandeusen merged commit 883d416d26 into main

2026-06-01 21:36:55 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bvandeusen/minstrel#68