From 298766ad1a7da41fcedec303cf4b0d643a75f49b Mon Sep 17 00:00:00 2001
From: Josep Piguillem <jgpigui@gmail.com>
Date: Fri, 9 Oct 2026 13:53:03 +0200
Subject: [PATCH] fix(web): cards move between board columns again

Since the swimlanes, each column's list is stamped from a template
declared outside the cdkDropListGroup, and a template only sees the
drop groups around where it is declared: every column was on its own and
no card could leave its column. The lists of each row are now connected
by id, with and without swimlanes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../presenters/src/lib/pages/board.page.ts    | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/libs/web/tracker/presenters/src/lib/pages/board.page.ts b/libs/web/tracker/presenters/src/lib/pages/board.page.ts
index d5eb07f..405bd77 100644
--- a/libs/web/tracker/presenters/src/lib/pages/board.page.ts
+++ b/libs/web/tracker/presenters/src/lib/pages/board.page.ts
@@ -1,9 +1,4 @@
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDropList,
-  CdkDropListGroup,
-} from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -90,7 +85,6 @@ const NOBODY = '__nobody__';
   selector: 'ts-board-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CdkDropListGroup,
     CdkDropList,
     CdkDrag,
     FormField,
@@ -218,7 +212,7 @@ const NOBODY = '__nobody__';
       </div>
     } @else {
       @if (laneMode() === 'none') {
-        <div class="ts-board" cdkDropListGroup>
+        <div class="ts-board">
           @for (column of board.columns(); track column.status) {
             <section
               class="ts-column"
@@ -261,7 +255,7 @@ const NOBODY = '__nobody__';
                 <span class="ts-mono ts-muted">{{ lane.count }}</span>
               </h3>
               <!-- Cards move between columns of their own row only. -->
-              <div class="ts-board" cdkDropListGroup>
+              <div class="ts-board">
                 @for (column of lane.columns; track column.status) {
                   <section
                     class="ts-column ts-column--lane"
@@ -304,6 +298,7 @@ const NOBODY = '__nobody__';
         class="ts-column__list"
         cdkDropList
         [id]="lane + '|' + column.status"
+        [cdkDropListConnectedTo]="rowLists()[lane] ?? []"
         [cdkDropListData]="column"
         [cdkDropListDisabled]="!project.canContribute()"
         [cdkDropListEnterPredicate]="canEnter"
@@ -748,6 +743,21 @@ export class BoardPage {
   protected statusTone = (status: string) =>
     statusLook(this.project.workflow(), status).tone;
 
+  /**
+   * The ids of each row's column lists, by row ('' without swimlanes): a card
+   * moves between the columns of its own row. Connected by id because the
+   * lists are stamped from a template, and a template only sees the drop
+   * groups around where it is declared, not where it is placed.
+   */
+  protected readonly rowLists = computed(() => {
+    const statuses = this.board.columns().map((c) => c.status);
+    const rows =
+      this.laneMode() === 'none' ? [''] : this.lanes().map((l) => l.key);
+    return Object.fromEntries(
+      rows.map((row) => [row, statuses.map((status) => `${row}|${status}`)]),
+    );
+  });
+
   /** Columns a dragged ticket can enter: its allowed transitions. */
   protected readonly canEnter = (
     drag: CdkDrag<IssueSummary>,