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": "Bestätigen",
"confirmTitle": "Bist du sicher?",
"save": "Speichern",
"undo": "Rückgängig",
"redo": "Wiederholen",
"loading": "Wird geladen…",
"language": "Sprache",
"somethingWrong": "Etwas ist schiefgelaufen.",

View file

@ -34,5 +34,12 @@
"deleteOnYoutubeMsg": "„{{name}}“ auch aus deinem YouTube-Konto löschen? Wähle „Nur hier“, um sie auf YouTube zu behalten.",
"deleteOnYoutubeConfirm": "Auf YouTube löschen",
"deleteHereOnly": "Nur hier",
"deleteYtFailed": "Löschen auf YouTube fehlgeschlagen; nur hier entfernt."
"deleteYtFailed": "Löschen auf YouTube fehlgeschlagen; nur hier entfernt.",
"sortLabel": "Sortierung",
"sortManual": "Eigene Reihenfolge",
"sortTitleAsc": "Titel AZ",
"sortTitleDesc": "Titel ZA",
"sortDurAsc": "Kürzeste zuerst",
"sortDurDesc": "Längste zuerst",
"groupByChannel": "Nach Kanal gruppieren"
}