fix: correct top-drop position to stay at top [4.x] (#114)

* fix: correct top-drop position to stay at top (#110)

Dragging a card to the very top of a column made it snap to the bottom.
All other drop positions worked.

Root cause: Filament's shared x-sortable directive wraps SortableJS and
re-inserts the dragged node after items[newDraggableIndex - 1] to work
around filamentphp/filament#17402. That branch is skipped when
newDraggableIndex === 0, so SortableJS's stale DOM leaks through on top
drops. flowforge's handleSortableEnd then read neighbors from
event.to.sortable.toArray(), which was still in the old order — producing
a payload of (afterCardId = old previous, beforeCardId = null), which the
backend correctly interprets as "append to bottom".

Fix: extend the insertBefore workaround to newDraggableIndex === 0, then
derive neighbors from the normalized DOM (querySelectorAll scoped to
parentNode) rather than sortable.toArray(). The backend position math
was already correct — confirmed by the new feature test that calls
moveCard with a realistic multi-card column and asserts the moved card
ends up at the top.

Closes #110

* refactor: make handleSortableEnd robust to SortableJS and selector variants

Addresses Copilot review feedback on #110 fix:

1. Fall back to event.newIndex when event.newDraggableIndex is absent —
   some SortableJS builds / event shims only expose newIndex.
2. Include [data-card-id] in the normalization selector and neighbor
   query, symmetrical with the data-card-id fallback already used for
   the dragged card's own id. Without this, cards that only expose
   data-card-id would silently fall through to (null, null), which the
   backend treats as "move to bottom".

Browser-verified: top drop still lands at top when the event only
carries newIndex, and when cards only expose data-card-id.

* chore: remove Unreleased section from changelog (release workflow auto-updates)

Author: ManukMinasyan

resources/dist/flowforge.js

@@ -26,35 +26,57 @@ export default function flowforge({state}) {
         },
 
         handleSortableEnd(event) {
-            const newOrder = event.to.sortable.toArray();
-            let cardId = event.item.getAttribute('x-sortable-item');
+            const draggedNode = event.item;
+            const parentNode = event.to;
+            // SortableJS exposes both newIndex (across all children) and
+            // newDraggableIndex (draggable children only). Prefer the draggable
+            // index where available and fall back to newIndex for older or
+            // alternative SortableJS builds.
+            const dropIndex = event.newDraggableIndex ?? event.newIndex;
+
+            const itemSelector = ':scope > [x-sortable-item], :scope > [data-card-id]';
+            const readId = (el) => el.getAttribute('x-sortable-item') || el.getAttribute('data-card-id');
+
+            // Filament's shared x-sortable directive re-inserts the dragged
+            // node after items[dropIndex - 1] to work around
+            // filamentphp/filament#17402, but that branch is skipped when
+            // dropIndex === 0 — leaving the DOM stale on top drops. Extend
+            // the workaround so the top position is normalized before we
+            // read neighbors.
+            if (dropIndex === 0) {
+                const firstItem = parentNode.querySelector(itemSelector);
+                if (firstItem && firstItem !== draggedNode) {
+                    parentNode.insertBefore(draggedNode, firstItem);
+                }
+            }
 
-            // Fallback to data-card-id if x-sortable-item is missing (edge case safety)
+            const cardId = readId(draggedNode);
             if (!cardId) {
-                cardId = event.item.getAttribute('data-card-id');
-                if (!cardId) {
-                    console.error('Flowforge: Could not determine card ID for move operation');
-                    return;
-                }
+                console.error('Flowforge: Could not determine card ID for move operation');
+                return;
             }
 
-            const targetColumn = event.to.getAttribute('data-column-id');
+            const targetColumn = parentNode.getAttribute('data-column-id');
             if (!targetColumn) {
                 console.error('Flowforge: Target column ID is missing');
                 return;
             }
 
-            const cardElement = event.item;
-
-            this.setCardState(cardElement, true);
+            // Derive neighbors from the normalized DOM rather than
+            // sortable.toArray(), which can return stale order when SortableJS
+            // leaves the DOM out of sync.
+            const items = parentNode.querySelectorAll(itemSelector);
+            const index = Array.prototype.indexOf.call(items, draggedNode);
+            const afterCardId = index > 0 ? readId(items[index - 1]) : null;
+            const beforeCardId = index >= 0 && index < items.length - 1
+                ? readId(items[index + 1])
+                : null;
 
-            const cardIndex = newOrder.indexOf(cardId);
-            const afterCardId = cardIndex > 0 ? newOrder[cardIndex - 1] : null;
-            const beforeCardId = cardIndex < newOrder.length - 1 ? newOrder[cardIndex + 1] : null;
+            this.setCardState(draggedNode, true);
 
             this.$wire.moveCard(cardId, targetColumn, afterCardId, beforeCardId)
-                .then(() => this.setCardState(cardElement, false))
-                .catch(() => this.setCardState(cardElement, false));
+                .then(() => this.setCardState(draggedNode, false))
+                .catch(() => this.setCardState(draggedNode, false));
         },
 
         setCardState(cardElement, disabled) {

resources/js/flowforge.js

@@ -66,6 +66,30 @@
             ->and((float) $movedTask->order_position)->toBeLessThan(65535);
     });
 
+    test('dragging last card to top places it above first card (regression for #110)', function () {
+        $first = Task::factory()->inProgress()->withPosition('65535.0000000000')->create(['title' => 'First']);
+        $second = Task::factory()->inProgress()->withPosition('131070.0000000000')->create(['title' => 'Second']);
+        $third = Task::factory()->inProgress()->withPosition('196605.0000000000')->create(['title' => 'Third']);
+        $last = Task::factory()->inProgress()->withPosition('262140.0000000000')->create(['title' => 'Last']);
+
+        Livewire::test(TestBoard::class)
+            ->call('moveCard', (string) $last->id, 'in_progress', null, (string) $first->id);
+
+        $movedTask = $last->fresh();
+        expect((float) $movedTask->order_position)->toBeLessThan((float) $first->order_position);
+
+        $orderedIds = Task::where('status', 'in_progress')
+            ->orderBy('order_position')
+            ->pluck('id')
+            ->map(fn ($id) => (string) $id)
+            ->toArray();
+
+        expect($orderedIds[0])->toBe((string) $last->id)
+            ->and($orderedIds[1])->toBe((string) $first->id)
+            ->and($orderedIds[2])->toBe((string) $second->id)
+            ->and($orderedIds[3])->toBe((string) $third->id);
+    });
+
     test('moves card to bottom of column', function () {
         $existingTask = Task::factory()->inProgress()->withPosition('65535.0000000000')->create();
         $taskToMove = Task::factory()->todo()->withPosition('65535.0000000000')->create();