feat(playlists): hybrid table over the drag list, and guard its destructive paths

The column sort and the filters are a VIEW; the playlist's stored order only
changes when the user presses "Save this order", which still goes through the
undoable path. Picking a sort used to write straight to the server, so merely
looking at the list by title rewrote the playlist and marked a YouTube-linked
mirror dirty.

The table:
- playlistColumns.tsx holds the column defs; the body renders them as table rows
  and fills the grip cell itself, since the handle needs the row's sortable
  listeners that a render closure can't reach.
- The # column shows the STORED position, so a view-sort never renumbers the
  playlist under the reader.
- Saving is withheld while a filter is active (it would drop the hidden items),
  and drag is disabled under any view, with the reason spelled out rather than
  silently doing nothing.
- applyView/sameOrder live in lib/playlistView.ts with tests: the sort and the
  channel grouping compose, and getting that wrong produces a plausible order
  that the save button would then persist.
- dnd-kit KeyboardSensor: the grip was focusable and called itself "reorder",
  but only a pointer could move it.

The guards:
- Delete is ONE dialog with every outcome. It was two chained confirms where the
  second one's Cancel/Escape/backdrop meant "delete here only" — dismissing the
  dialog deleted the playlist. ConfirmProvider gained useChoice() for it.
- ConfirmProvider focuses Cancel when an offered action is destructive; the
  confirm button took autoFocus unconditionally, so a stray Enter on an open
  dialog ran "Delete user" or "Clear audit log".
- Removing an item asks first, and rebases the undo history instead of throwing
  it away: useUndoable.rebase maps every snapshot, so the reorder history stays
  valid for the remaining items.
- A failed detail query showed "Loading…" forever; it now says so and offers a
  retry. Rename and reorder failures are surfaced instead of swallowed (reorder
  was a bare .then(), which also produced an unhandled rejection).
- Local reorder/remove no longer require YouTube write scope.
- playlistName() replaces the watch-later localizer copied into three files.

frontend/src/components/ConfirmProvider.tsx

@@ -5,6 +5,11 @@ import Modal from "./Modal";
 // App-styled, promise-based replacement for window.confirm. Wrap the tree in
 // <ConfirmProvider> once, then anywhere:  const confirm = useConfirm();
 //   if (await confirm({ message: "…", danger: true })) { … }
+//
+// For a decision with more than two outcomes use `useChoice()` instead — never chain two
+// confirms, because the second dialog's Cancel/Escape/backdrop is then indistinguishable from
+// a deliberate answer (the playlist delete used to read a dismissal as "delete here only" and
+// went ahead and deleted).
 export interface ConfirmOptions {
   title?: string;
   message: ReactNode;
@@ -13,62 +18,108 @@ export interface ConfirmOptions {
   danger?: boolean;
 }
 
+export interface Choice {
+  id: string;
+  label: string;
+  danger?: boolean;
+}
+
+export interface ChoiceOptions {
+  title?: string;
+  message: ReactNode;
+  cancelLabel?: string;
+  /** Rendered left→right after Cancel. Resolves to the clicked choice's `id`. */
+  choices: Choice[];
+}
+
+type ChoiceFn = (opts: ChoiceOptions) => Promise<string | null>;
 type ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;
 
-const ConfirmContext = createContext<ConfirmFn>(() => Promise.resolve(false));
+const ChoiceContext = createContext<ChoiceFn>(() => Promise.resolve(null));
 
+/** Two outcomes: resolves true on confirm, false on cancel/Escape/backdrop. */
 export function useConfirm(): ConfirmFn {
-  return useContext(ConfirmContext);
+  const ask = useContext(ChoiceContext);
+  return useCallback(
+    async (opts: ConfirmOptions) => {
+      const picked = await ask({
+        title: opts.title,
+        message: opts.message,
+        cancelLabel: opts.cancelLabel,
+        choices: [
+          { id: "confirm", label: opts.confirmLabel ?? "", danger: opts.danger },
+        ],
+      });
+      return picked === "confirm";
+    },
+    [ask]
+  );
+}
+
+/** Three or more outcomes. Resolves to the chosen id, or **null** when the user cancels,
+ * presses Escape or clicks the backdrop — dismissal is never one of the actions. */
+export function useChoice(): ChoiceFn {
+  return useContext(ChoiceContext);
 }
 
 export function ConfirmProvider({ children }: { children: ReactNode }) {
   const { t } = useTranslation();
   const [state, setState] = useState<{
-    opts: ConfirmOptions;
-    resolve: (ok: boolean) => void;
+    opts: ChoiceOptions;
+    resolve: (id: string | null) => void;
   } | null>(null);
 
-  const confirm = useCallback<ConfirmFn>(
-    (opts) => new Promise<boolean>((resolve) => setState({ opts, resolve })),
+  const ask = useCallback<ChoiceFn>(
+    (opts) => new Promise<string | null>((resolve) => setState({ opts, resolve })),
     []
   );
 
-  function close(ok: boolean) {
-    state?.resolve(ok);
+  function close(id: string | null) {
+    state?.resolve(id);
     setState(null);
   }
 
+  const choices = state?.opts.choices ?? [];
+  // Focus Cancel when any offered action is destructive: the confirm button used to take
+  // autoFocus unconditionally, so a stray Enter on an open dialog executed "Delete user" or
+  // "Clear audit log" without the user ever looking at it.
+  const anyDanger = choices.some((c) => c.danger);
+
   return (
-    <ConfirmContext.Provider value={confirm}>
+    <ChoiceContext.Provider value={ask}>
       {children}
       {state && (
         <Modal
           title={state.opts.title ?? t("common.confirmTitle")}
-          onClose={() => close(false)}
-          maxWidth="max-w-sm"
+          onClose={() => close(null)}
+          maxWidth={choices.length > 1 ? "max-w-md" : "max-w-sm"}
         >
           <p className="text-sm text-muted leading-relaxed">{state.opts.message}</p>
-          <div className="flex justify-end gap-2 mt-5">
+          <div className="flex justify-end gap-2 mt-5 flex-wrap">
             <button
-              onClick={() => close(false)}
+              autoFocus={anyDanger}
+              onClick={() => close(null)}
               className="px-4 py-2 rounded-lg text-sm border border-border text-muted hover:text-fg hover:bg-surface transition"
             >
               {state.opts.cancelLabel ?? t("common.cancel")}
             </button>
-            <button
-              autoFocus
-              onClick={() => close(true)}
-              className={`px-4 py-2 rounded-lg text-sm font-semibold transition ${
-                state.opts.danger
-                  ? "bg-red-500 text-white hover:bg-red-600"
-                  : "bg-accent text-accent-fg hover:opacity-90"
-              }`}
-            >
-              {state.opts.confirmLabel ?? t("common.confirm")}
-            </button>
+            {choices.map((c, i) => (
+              <button
+                key={c.id}
+                autoFocus={!anyDanger && i === choices.length - 1}
+                onClick={() => close(c.id)}
+                className={`px-4 py-2 rounded-lg text-sm font-semibold transition ${
+                  c.danger
+                    ? "bg-red-500 text-white hover:bg-red-600"
+                    : "bg-accent text-accent-fg hover:opacity-90"
+                }`}
+              >
+                {c.label || t("common.confirm")}
+              </button>
+            ))}
           </div>
         </Modal>
       )}
-    </ConfirmContext.Provider>
+    </ChoiceContext.Provider>
   );
 }