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/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);
   }