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.

frontend/src/lib/useUndoable.ts

@@ -0,0 +1,90 @@
+import { useCallback, useReducer, useRef } from "react";
+
+// A generic, reusable undo/redo container for a single piece of state.
+//
+// It keeps a past/present/future snapshot stack: `set` records the current value into the
+// past and clears the redo stack; `undo`/`redo` walk the stack. Every value change (set,
+// undo, redo) calls `onApply(value)` — the side effect that makes the change real (e.g.
+// persist to the server). `reset` installs a fresh value and clears history WITHOUT calling
+// onApply (use it when the underlying data is reloaded from the source of truth).
+//
+// Not playlist-specific: any component with an undoable value (sort order, a draft, a set
+// of filters…) can use it. State lives in a ref so the callbacks are stable and never read
+// a stale snapshot; a reducer-based force-render keeps the view in sync.
+export interface Undoable<T> {
+  value: T;
+  set: (next: T) => void;
+  reset: (value: T) => void;
+  undo: () => void;
+  redo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+interface History<T> {
+  past: T[];
+  present: T;
+  future: T[];
+}
+
+export function useUndoable<T>(
+  initial: T,
+  opts?: { onApply?: (value: T) => void; limit?: number }
+): Undoable<T> {
+  const [, force] = useReducer((n: number) => n + 1, 0);
+  const ref = useRef<History<T>>({ past: [], present: initial, future: [] });
+  const onApplyRef = useRef(opts?.onApply);
+  onApplyRef.current = opts?.onApply;
+  const limit = opts?.limit ?? 100;
+
+  const set = useCallback(
+    (next: T) => {
+      const s = ref.current;
+      if (Object.is(next, s.present)) return;
+      const past = [...s.past, s.present];
+      if (past.length > limit) past.shift();
+      ref.current = { past, present: next, future: [] };
+      force();
+      onApplyRef.current?.(next);
+    },
+    [limit]
+  );
+
+  const undo = useCallback(() => {
+    const s = ref.current;
+    if (!s.past.length) return;
+    const prev = s.past[s.past.length - 1];
+    ref.current = {
+      past: s.past.slice(0, -1),
+      present: prev,
+      future: [s.present, ...s.future],
+    };
+    force();
+    onApplyRef.current?.(prev);
+  }, []);
+
+  const redo = useCallback(() => {
+    const s = ref.current;
+    if (!s.future.length) return;
+    const [next, ...rest] = s.future;
+    ref.current = { past: [...s.past, s.present], present: next, future: rest };
+    force();
+    onApplyRef.current?.(next);
+  }, []);
+
+  const reset = useCallback((value: T) => {
+    ref.current = { past: [], present: value, future: [] };
+    force();
+  }, []);
+
+  const h = ref.current;
+  return {
+    value: h.present,
+    set,
+    reset,
+    undo,
+    redo,
+    canUndo: h.past.length > 0,
+    canRedo: h.future.length > 0,
+  };
+}