Reorder

Drag a row to reorder it. The container has onSort and each row a sortItem key; dropping calls the server action with the new index, and the server-held order is the source of truth.

⠿Draft the proposal
⠿Review with the team
⠿Send for approval
⠿Ship it

Current order: Draft the proposal → Review with the team → Send for approval → Ship it

@expose tasks: Task[] = [];

@expose reorder(key: string, index: number) {   // called on drop
  const moved = this.tasks.find((t) => String(t.id) === key);
  const without = this.tasks.filter((t) => t !== moved);
  without.splice(index, 0, moved);
  this.tasks = without;   // persisted — server-authoritative
}

<ul onSort={this.reorder}>
  {this.tasks.map((task) => (
    <li key={String(task.id)} sortItem={String(task.id)}>{task.name}</li>
  ))}
</ul>