From f8a1a00e0a767f796a56293ea14593465db6cff4 Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Fri, 3 Apr 2026 18:49:39 +0200
Subject: [PATCH] fix: prevent snap-back after drag and click-opens-edit during
 drag

Two fixes:
- Remove onSettled clearing tempItems before refetch completes,
  let useEffect clear it when fresh server data arrives
- Track isDragging ref to suppress edit panel click after drag
- Remove layout="position" which interfered with reorder detection

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/components/CandidateListItem.tsx | 20 ++++++++++++++++----
 src/client/routes/threads/$threadId.tsx     |  7 +++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/client/components/CandidateListItem.tsx b/src/client/components/CandidateListItem.tsx
index 11a244a..8b6ae44 100644
--- a/src/client/components/CandidateListItem.tsx
+++ b/src/client/components/CandidateListItem.tsx
@@ -1,4 +1,5 @@
 import { Reorder } from "framer-motion";
+import { useRef } from "react";
 import { useFormatters } from "../hooks/useFormatters";
 import type { CandidateDelta } from "../hooks/useImpactDeltas";
 import { LucideIcon } from "../lib/iconData";
@@ -56,6 +57,7 @@ export function CandidateListItem({
 	delta,
 	onDragEnd,
 }: CandidateListItemProps) {
+	const isDragging = useRef(false);
 	const { weight, price } = useFormatters();
 	const openCandidateEditPanel = useUIStore((s) => s.openCandidateEditPanel);
 	const openConfirmDeleteCandidate = useUIStore(
@@ -99,7 +101,10 @@ export function CandidateListItem({
 			{/* Name + badges */}
 			<button
 				type="button"
-				onClick={() => openCandidateEditPanel(candidate.id)}
+				onClick={() => {
+					if (isDragging.current) return;
+					openCandidateEditPanel(candidate.id);
+				}}
 				className="flex-1 min-w-0 text-left"
 			>
 				<p className="text-sm font-semibold text-gray-900 truncate">
@@ -211,14 +216,21 @@ export function CandidateListItem({
 		return (
 			<Reorder.Item
 				value={candidate}
-				onDragEnd={onDragEnd}
-				layout="position"
+				onDragStart={() => {
+					isDragging.current = true;
+				}}
+				onDragEnd={() => {
+					// Delay clearing so onClick can check it
+					setTimeout(() => {
+						isDragging.current = false;
+					}, 0);
+					onDragEnd?.();
+				}}
 				whileDrag={{
 					scale: 1.02,
 					boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
 					cursor: "grabbing",
 				}}
-				transition={{ layout: { duration: 0.15, ease: "easeOut" } }}
 				style={{ marginBottom: 8, cursor: "grab" }}
 				className={sharedClassName}
 			>
diff --git a/src/client/routes/threads/$threadId.tsx b/src/client/routes/threads/$threadId.tsx
index bcb9cd9..f724440 100644
--- a/src/client/routes/threads/$threadId.tsx
+++ b/src/client/routes/threads/$threadId.tsx
@@ -87,10 +87,9 @@ function ThreadDetailPage() {
 
 	function handleDragEnd() {
 		if (!tempItems) return;
-		reorderMutation.mutate(
-			{ orderedIds: tempItems.map((c) => c.id) },
-			{ onSettled: () => setTempItems(null) },
-		);
+		reorderMutation.mutate({
+			orderedIds: tempItems.map((c) => c.id),
+		});
 	}
 
 	return (