40c0cbfc5a
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.
90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
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,
|
|
};
|
|
}
|