feat(playlists): sort + group-by-channel with reusable undo/redo

Add a sort toolbar to the Playlists page: Title A-Z/Z-A, shortest/longest first,
and a 'group by channel' toggle that groups items by channel (A-Z) and applies the
chosen sort within each group. Applying a sort reorders the items and persists via
the existing reorder API.

The item order is now an undoable value: drag, sort and grouping all go through it,
so every change is reversible via undo/redo buttons and Ctrl/Cmd+Z / Ctrl+Y
(Ctrl+Shift+Z). Built on two reusable pieces, not playlist-specific:
- useUndoable<T> — a generic past/present/future snapshot hook (set/undo/redo/reset
  + canUndo/canRedo), ref-backed so callbacks are stable and never see a stale snapshot;
  onApply runs the side effect (here: persist order).
- UndoToolbar — undo/redo buttons + keyboard shortcuts, plain props so any undo
  source can use it.

Undo history is reset only when the item set actually changes (different playlist or
add/remove), so a refetch confirming our own reorder doesn't wipe it; membership
changes (remove) clear history since they aren't reorder-undoable. Trilingual.
This commit is contained in:
npeter83 2026-06-15 21:52:28 +02:00
parent 1ddeac57cd
commit 40c0cbfc5a
9 changed files with 325 additions and 12 deletions

View file

@ -6,6 +6,8 @@
"confirm": "Megerősítés",
"confirmTitle": "Biztos vagy benne?",
"save": "Mentés",
"undo": "Visszavonás",
"redo": "Újra",
"loading": "Betöltés…",
"language": "Nyelv",
"somethingWrong": "Hiba történt.",

View file

@ -34,5 +34,12 @@
"deleteOnYoutubeMsg": "Törlöd a(z) „{{name}}” listát a YouTube-fiókodból is? A „Csak itt” megtartja a YouTube-on.",
"deleteOnYoutubeConfirm": "Törlés a YouTube-on",
"deleteHereOnly": "Csak itt",
"deleteYtFailed": "Nem sikerült törölni a YouTube-on; csak itt lett eltávolítva."
"deleteYtFailed": "Nem sikerült törölni a YouTube-on; csak itt lett eltávolítva.",
"sortLabel": "Rendezés",
"sortManual": "Egyéni sorrend",
"sortTitleAsc": "Cím AZ",
"sortTitleDesc": "Cím ZA",
"sortDurAsc": "Legrövidebb elöl",
"sortDurDesc": "Leghosszabb elöl",
"groupByChannel": "Csoportosítás csatorna szerint"
}