feat(playlists): drag rows onto a list in the rail

A row's grip carries it, or every selected row with a selected one, onto another
list, under a sort or a filter too, and the toast undoes. The rail and the page
are separate React trees, so the page reads the rail by what lies under the
pointer. An unpinned rail peeks by the drag's own hover and scrolls at its edges.
Many rows dropped inside the list stay; a key still moves its own row.
This commit is contained in:
2026-11-02 00:38:39 +01:00
parent 9b76d2f96c
commit d79cb528fd
12 changed files with 1228 additions and 13 deletions
+6
View File
@@ -547,6 +547,11 @@ of a full-width panel and nothing on the right.
Below `xl` the band's buttons are glyphs named in their tooltips, and a filter's hidden count is "+N" with
its sentence in the tooltip. The row the band replaces keeps its height, invisible, so a tick moves no row.
On a phone the count is its number (the words read out, and in the tooltip) and the undo pair stays out.
A row's grip also carries it onto a list in the rail, under a sort or a filter too (the grip then says
so, and no key lifts it); a selected row carries every selected one, named on the drag image below the
pointer. The target row lights up (`ring-accent`); the open list is none; an unpinned rail peeks by the
drag's own hover and scrolls at its edges. Dropped inside the list, one row takes its new place and many
stay. A key never leaves the list and moves its own row: the band and the row's menu are the other way.
- **Motion:** 150–300ms micro-interactions, transform/opacity only; `prefers-reduced-motion` is respected.
[WCAG 2.3.3]
@@ -850,3 +855,4 @@ of a full-width panel and nothing on the right.
| 2026-11-01 | Grip on a phone (owner A) | Below a 24rem table a playlist row has no grip: the title keeps its width, and the row menu keeps the moves. |
| 2026-11-01 | Selection band on a tablet (owner A) | Below `xl` the band is glyphs on one row, the names in tooltip and aria-label, as on the channel header; the replaced row stays in the same grid cell, invisible, so the first tick moves no row under the second tap. |
| 2026-11-01 | Playlist heading on a narrow window (owner A) | The list's name had no width left: below `xl` Unsynced is its dot (the word read out, the hint in the tooltip); on a phone the cover is gone and Play all is its glyph, named in the tooltip. |
| 2026-11-02 | Dragging onto a list (owner D5 a, D6 a) | The grip carries a row, or every selected row with a selected one, onto a list in the rail; the toast undoes. Many dropped inside the list stay; a coarse pointer's drawer never peeks, so its rail is a target only when pinned. |