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 87c5c2ab6a
commit 2fa5a5c080
9 changed files with 325 additions and 12 deletions

View file

@ -6,6 +6,8 @@
"confirm": "Confirm",
"confirmTitle": "Are you sure?",
"save": "Save",
"undo": "Undo",
"redo": "Redo",
"loading": "Loading…",
"language": "Language",
"somethingWrong": "Something went wrong.",

View file

@ -34,5 +34,12 @@
"deleteOnYoutubeMsg": "Also delete “{{name}}” from your YouTube account? Choose “Here only” to keep it on YouTube.",
"deleteOnYoutubeConfirm": "Delete on YouTube",
"deleteHereOnly": "Here only",
"deleteYtFailed": "Couldn't delete on YouTube; removed here only."
"deleteYtFailed": "Couldn't delete on YouTube; removed here only.",
"sortLabel": "Sort",
"sortManual": "Custom order",
"sortTitleAsc": "Title AZ",
"sortTitleDesc": "Title ZA",
"sortDurAsc": "Shortest first",
"sortDurDesc": "Longest first",
"groupByChannel": "Group by channel"
}