fix(downloads): remove column reorder flicker

Clear old FLIP transforms before committing the new download grid order. Serialize and coalesce column-order persistence, keep live download snapshots from overwriting local layout state, reassert imported settings after older requests, and block overlapping pointer or arrow moves during settling.

tests/app-shell.test.tsx

@@ -65,6 +65,14 @@ describe("desktop shell", () => {
     expect(sparklineBlock).toContain("window.setInterval(tick, 750)");
   });
 
+  it("does not let live download snapshots overwrite the local column order", () => {
+    const source = readFileSync(new URL("../src/renderer/App.tsx", import.meta.url), "utf8");
+    const stateUpdates = source.slice(source.indexOf("unsubscribe = window.rd.onStateUpdate"), source.indexOf("unsubClipboard = window.rd.onClipboardDetected"));
+
+    expect(stateUpdates).not.toContain("setColumnOrder");
+    expect(stateUpdates).not.toContain("syncColumnOrderFromSnapshot");
+  });
+
   it("keeps application menus mounted for animated opening and closing", () => {
     const source = readFileSync(new URL("../src/renderer/App.tsx", import.meta.url), "utf8");
     const css = readFileSync(new URL("../src/renderer/styles.css", import.meta.url), "utf8");

tests/column-drag.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
+import * as columnDrag from "../src/renderer/views/downloads/column-drag";
 import { calculateColumnDragPreview, updateDownloadColumnDrag, type DownloadColumnDragSession } from "../src/renderer/views/downloads/column-drag";
 
 const columns = [
@@ -51,4 +52,111 @@ describe("animated download column drag", () => {
     expect(setProperty).toHaveBeenCalledTimes(1);
     expect(setProperty).toHaveBeenCalledWith("--downloads-active-drag-x", "25px");
   });
+
+  it.each([
+    { draggedId: "name", measurements: columns, next: ["size", "name", "status"] },
+    {
+      draggedId: "name",
+      measurements: [
+        { id: "size", left: 0, width: 150 },
+        { id: "name", left: 150, width: 300 },
+        { id: "status", left: 450, width: 100 }
+      ],
+      next: ["name", "size", "status"]
+    }
+  ])("clears transforms before committing a $draggedId grid move", ({ draggedId, measurements, next }) => {
+    const commitDownloadColumnDrag = (columnDrag as unknown as {
+      commitDownloadColumnDrag?: (session: DownloadColumnDragSession, order: string[], commit: (order: string[]) => void) => void;
+    }).commitDownloadColumnDrag;
+    expect(commitDownloadColumnDrag).toBeTypeOf("function");
+    if (!commitDownloadColumnDrag) return;
+
+    const events: string[] = [];
+    const root = {
+      classList: { remove: () => events.push("clear-classes") },
+      dataset: { columnDragging: draggedId },
+      querySelectorAll: () => [],
+      style: {
+        removeProperty: (property: string) => events.push(`clear:${property}`)
+      }
+    } as unknown as HTMLElement;
+    const session = {
+      active: true,
+      draggedId,
+      measurements,
+      pointerId: -1,
+      preview: calculateColumnDragPreview(measurements, draggedId, next[0] === draggedId ? -160 : 160),
+      root,
+      startX: 0
+    } as DownloadColumnDragSession;
+
+    commitDownloadColumnDrag(session, next, (order) => {
+      events.push(`commit:${order.join("|")}`);
+    });
+
+    expect(events.at(-1)).toBe(`commit:${next.join("|")}`);
+    expect(events.slice(0, -1)).toContain("clear:--downloads-column-drag-name");
+    expect(events.slice(0, -1)).toContain("clear:--downloads-column-drag-size");
+  });
+
+  it("serializes and coalesces rapid persistence requests", async () => {
+    const createDownloadColumnOrderPersistence = (columnDrag as unknown as {
+      createDownloadColumnOrderPersistence?: (
+        initial: string[],
+        persist: (order: string[]) => Promise<string[]>,
+        apply: (order: string[]) => void
+      ) => { enqueue: (order: string[]) => void; whenIdle: () => Promise<void> };
+    }).createDownloadColumnOrderPersistence;
+    expect(createDownloadColumnOrderPersistence).toBeTypeOf("function");
+    if (!createDownloadColumnOrderPersistence) return;
+
+    const pending: Array<(order: string[]) => void> = [];
+    const persisted: string[][] = [];
+    const applied: string[][] = [];
+    const coordinator = createDownloadColumnOrderPersistence(["name", "size"], (order) => {
+      persisted.push(order);
+      return new Promise((resolve) => pending.push(resolve));
+    }, (order) => applied.push(order));
+
+    coordinator.enqueue(["size", "name"]);
+    coordinator.enqueue(["name", "size"]);
+    coordinator.enqueue(["size", "name"]);
+    expect(persisted).toEqual([["size", "name"]]);
+
+    pending.shift()?.(["size", "name"]);
+    await vi.waitFor(() => expect(persisted).toEqual([["size", "name"], ["size", "name"]]));
+    pending.shift()?.(["size", "name"]);
+    await coordinator.whenIdle();
+
+    expect(applied.at(-1)).toEqual(["size", "name"]);
+  });
+
+  it("reasserts an authoritative import after an older request finishes", async () => {
+    const createDownloadColumnOrderPersistence = (columnDrag as unknown as {
+      createDownloadColumnOrderPersistence?: (
+        initial: string[],
+        persist: (order: string[]) => Promise<string[]>,
+        apply: (order: string[]) => void
+      ) => { applyAuthoritative: (order: string[]) => void; enqueue: (order: string[]) => void; whenIdle: () => Promise<void> };
+    }).createDownloadColumnOrderPersistence;
+    expect(createDownloadColumnOrderPersistence).toBeTypeOf("function");
+    if (!createDownloadColumnOrderPersistence) return;
+
+    const pending: Array<(order: string[]) => void> = [];
+    const persisted: string[][] = [];
+    const applied: string[][] = [];
+    const coordinator = createDownloadColumnOrderPersistence(["name", "size"], (order) => {
+      persisted.push(order);
+      return new Promise((resolve) => pending.push(resolve));
+    }, (order) => applied.push(order));
+
+    coordinator.enqueue(["size", "name"]);
+    coordinator.applyAuthoritative(["status", "name", "size"]);
+    pending.shift()?.(["size", "name"]);
+    await vi.waitFor(() => expect(persisted.at(-1)).toEqual(["status", "name", "size"]));
+    pending.shift()?.(["status", "name", "size"]);
+    await coordinator.whenIdle();
+
+    expect(applied.at(-1)).toEqual(["status", "name", "size"]);
+  });
 });

tests/downloads-view.test.tsx

@@ -1512,6 +1512,7 @@ describe("download table row contracts", () => {
     const moveLeft = findElement(header, (element) => element.type === "button" && element.props["aria-label"] === "Geladen / Größe nach links verschieben");
     const previous = { getBoundingClientRect: () => ({ left: 100, width: 100 }), matches: () => true };
     const current = {
+      closest: () => null,
       getBoundingClientRect: () => ({ left: 200, width: 100 }),
       previousElementSibling: previous,
       nextElementSibling: null
@@ -1530,6 +1531,65 @@ describe("download table row contracts", () => {
     ]);
   });
 
+  it("ignores another column move while the previous move is settling", () => {
+    const calls: string[] = [];
+    const header = DownloadsTableHeader({
+      actions: createActions({
+        onColumnPointerDown: () => calls.push("down"),
+        onColumnPointerMove: () => calls.push("move"),
+        onColumnPointerUp: () => calls.push("up")
+      }),
+      columnOrder: ["name", "size", "account"],
+      gridTemplate: "200px 100px 100px",
+      selectedCount: 0,
+      sortColumn: "name",
+      sortDirection: "asc",
+      visibleIds: ["package-a"]
+    });
+    const moveRight = findElement(header, (element) => element.type === "button" && element.props["aria-label"] === "Name nach rechts verschieben");
+    const table = { classList: { contains: (className: string) => className === "is-column-drag-settling" } };
+    const sibling = { getBoundingClientRect: () => ({ left: 300, width: 100 }), matches: () => true };
+    const current = {
+      closest: (selector: string) => selector === ".downloads-table" ? table : null,
+      getBoundingClientRect: () => ({ left: 100, width: 200 }),
+      previousElementSibling: null,
+      nextElementSibling: sibling
+    };
+
+    moveRight.props.onClick({ currentTarget: { closest: () => current }, stopPropagation: () => {} });
+
+    expect(calls).toEqual([]);
+  });
+
+  it("does not start a pointer drag while a column move is settling", () => {
+    const calls: string[] = [];
+    const header = DownloadsTableHeader({
+      actions: createActions({ onColumnPointerDown: () => calls.push("down") }),
+      columnOrder: ["name", "size", "account"],
+      gridTemplate: "200px 100px 100px",
+      selectedCount: 0,
+      sortColumn: "name",
+      sortDirection: "asc",
+      visibleIds: ["package-a"]
+    });
+    const nameHeader = findElement(header, (element) => element.props["data-download-column"] === "name");
+    const pointerCapture = vi.fn();
+
+    nameHeader.props.onPointerDown({
+      button: 0,
+      clientX: 200,
+      currentTarget: {
+        closest: () => ({ classList: { contains: (className: string) => className === "is-column-drag-settling" } }),
+        setPointerCapture: pointerCapture
+      },
+      isPrimary: true,
+      pointerId: 4
+    });
+
+    expect(pointerCapture).not.toHaveBeenCalled();
+    expect(calls).toEqual([]);
+  });
+
   it("includes package selection state in memo equality", () => {
     const model = withRuntime(createInput());
     const row = model.packageRows[0];