fix(playlists): UAT round 1 — drag lag, an invisible default sort, dialog layout

- The dragged row trailed the cursor by 150ms. The row carried Tailwind's bare
  `transition` utility (copied from DataTable's <tr>), which animates TRANSFORM
  — exactly the property dnd-kit drives from the pointer. transition-colors now,
  and the row being dragged drops dnd-kit's own transition too.
- The list looked sorted by Channel when it was really in its stored order that
  happens to be channel-grouped, and nothing said so. Sorting by "#" ascending
  IS the stored order, so it is now the neutral state: the header shows a real
  arrow for it, cycling off any column lands back on it, and it stays the state
  where drag is enabled and no save is offered.
- A choice dialog with two or more actions stacks vertically. Side by side they
  wrapped raggedly, and the wrapped one read as a lesser second group when the
  two are peers. Cancel goes last, actions run least to most destructive.

frontend/src/components/ConfirmProvider.tsx

@@ -84,6 +84,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
   // 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);
+  const multi = choices.length > 1;
 
   return (
     <ChoiceContext.Provider value={ask}>
@@ -95,11 +96,22 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
           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 flex-wrap">
+          {/* One action: the familiar Cancel/Confirm row. Two or more: a column, because side by
+              side they wrap raggedly and a wrapped button reads as a second, lesser group — and
+              these are peers. Ordered least to most destructive, top to bottom. */}
+          <div
+            className={
+              multi
+                ? "flex flex-col gap-2 mt-5"
+                : "flex justify-end gap-2 mt-5 flex-wrap"
+            }
+          >
             <button
               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"
+              className={`px-4 py-2 rounded-lg text-sm border border-border text-muted hover:text-fg hover:bg-surface transition ${
+                multi ? "w-full order-last" : ""
+              }`}
             >
               {state.opts.cancelLabel ?? t("common.cancel")}
             </button>
@@ -109,6 +121,8 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
                 autoFocus={!anyDanger && i === choices.length - 1}
                 onClick={() => close(c.id)}
                 className={`px-4 py-2 rounded-lg text-sm font-semibold transition ${
+                  multi ? "w-full" : ""
+                } ${
                   c.danger
                     ? "bg-red-500 text-white hover:bg-red-600"
                     : "bg-accent text-accent-fg hover:opacity-90"

frontend/src/components/Playlists.tsx

@@ -61,6 +61,12 @@ import { GRIP_KEY, playlistColumns } from "./playlistColumns";
 // It composes `tableHeader`'s pieces instead of rendering a `DataTable`, because DataTable owns
 // its own filter/sort/page state and the stored order needs a single owner.
 
+// The neutral view: "#" ascending IS the stored order, so the header can show a real arrow for it
+// instead of the list looking unsorted (or, worse, looking sorted by whatever column the stored
+// order happens to correlate with — the user read a channel-grouped playlist as sorted by Channel).
+const STORED_SORT: SortState = { key: "pos", dir: "asc" };
+const isStoredSort = (s: SortState) => s?.key === "pos" && s.dir === "asc";
+
 const idsKey = (items: Video[]) =>
   items
     .map((v) => v.id)
@@ -88,10 +94,14 @@ function Row({
       ref={setNodeRef}
       style={{
         transform: CSS.Transform.toString(transform),
-        transition,
+        // No transition on the row being dragged: dnd-kit drives `transform` from the pointer, so
+        // animating it makes the row trail the cursor. The others keep it for the reflow animation.
+        transition: isDragging ? undefined : transition,
         opacity: isDragging ? 0.6 : 1,
       }}
-      className="border-b border-border/50 hover:bg-card/40 transition"
+      // transition-COLORS, not `transition` — the bare utility animates transform too, which is
+      // the same lag by another route (150ms behind the pointer, on every row).
+      className="border-b border-border/50 hover:bg-card/40 transition-colors"
     >
       {columns.map((col) => (
         <td
@@ -171,7 +181,7 @@ export default function Playlists() {
   });
   const items = order.value;
   // VIEW state — never written to the server on its own.
-  const [viewSort, setViewSort] = useState<SortState>(null);
+  const [viewSort, setViewSort] = useState<SortState>(STORED_SORT);
   const [filters, setFilters] = useState<FilterMap>({});
   const [groupBy, setGroupBy] = useState(false);
   // Tracks the membership (id set) currently loaded into `order`, so a refetch that only
@@ -214,7 +224,7 @@ export default function Playlists() {
 
   // Reset the view when switching playlists (the stored order itself is per-playlist).
   useEffect(() => {
-    setViewSort(null);
+    setViewSort(STORED_SORT);
     setFilters({});
     setGroupBy(false);
   }, [selectedId]);
@@ -256,19 +266,20 @@ export default function Playlists() {
   const shownRef = useRef(shown);
   shownRef.current = shown;
 
-  const viewActive = viewSort !== null || groupBy || filterActive;
+  const viewActive = !isStoredSort(viewSort) || groupBy || filterActive;
   // Saving a FILTERED view would drop every hidden item from the playlist, so the button only
   // offers itself when the view is a pure reordering of the whole list.
   const canSaveOrder = canEdit && !filterActive && !sameOrder(shown, items);
 
   function toggleSort(key: string) {
-    setViewSort((s) => cycleSort(s, key));
+    // Cycling off any column lands back on the stored order rather than on a nameless "unsorted".
+    setViewSort((s) => cycleSort(s, key) ?? STORED_SORT);
   }
   function applyFilter(key: string, value: string | string[]) {
     setFilters((f) => ({ ...f, [key]: value }));
   }
   function clearView() {
-    setViewSort(null);
+    setViewSort(STORED_SORT);
     setFilters({});
     setGroupBy(false);
   }

frontend/src/components/playlistColumns.tsx

@@ -33,9 +33,13 @@ export function playlistColumns({
       key: "pos",
       header: "#",
       align: "right",
-      width: "3rem",
+      width: "4.5rem",
       nowrap: true,
       hideInCard: true,
+      // Sorting by "#" ascending is the stored order itself — that is what makes it a truthful
+      // default for the header arrow, and a one-click way back from any other sort.
+      sortable: true,
+      sortValue: indexOf,
       render: (v) => <span className="text-xs text-muted tabular-nums">{indexOf(v) + 1}</span>,
     },
     {