From 45c4240e49c2738b6f6b545d5c9e1dd80cec3915 Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Sat, 29 Nov 2025 11:08:32 +0100
Subject: [PATCH 1/6] try 1

---
 src/routes/+page.svelte | 150 ++++++++++++++++++++++++++++++++++------
 1 file changed, 129 insertions(+), 21 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f7bb50f..59881ae 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 
 	let draggedImage: TierImage | null = null;
 	let draggedFrom: SourceType | null = null;
+	let activeDropTarget: { tier: SourceType; index: number } | null = null;
 
 	function handleUpload(event: Event) {
 		const input = event.target as HTMLInputElement;
@@ -25,7 +26,13 @@
 		draggedFrom = from;
 	}
 
-	function handleDrop(target: SourceType) {
+	function handleDragEnd() {
+		draggedImage = null;
+		draggedFrom = null;
+		activeDropTarget = null;
+	}
+
+	function handleDrop(target: SourceType, index: number) {
 		if (!draggedImage || draggedFrom === null) return;
 
 		if (draggedFrom === 'uploaded') {
@@ -35,13 +42,28 @@
 		}
 
 		if (target === 'uploaded') {
-			uploadedImages = [...uploadedImages, draggedImage];
+			const items = [...uploadedImages];
+			items.splice(index, 0, draggedImage);
+			uploadedImages = items;
 		} else {
-			tierItems[target] = [...tierItems[target], draggedImage];
+			const items = [...tierItems[target]];
+			items.splice(index, 0, draggedImage);
+			tierItems[target] = items;
 		}
 
 		draggedImage = null;
 		draggedFrom = null;
+		activeDropTarget = null;
+	}
+
+	function handleEnter(tier: SourceType, index: number) {
+		activeDropTarget = { tier, index };
+	}
+
+	function handleLeave(tier: SourceType, index: number) {
+		if (activeDropTarget?.tier === tier && activeDropTarget?.index === index) {
+			activeDropTarget = null;
+		}
 	}
 
 	function allowDrop(event: DragEvent) {
@@ -58,57 +80,104 @@
 
 <!-- Tier rows -->
 <div class="mx-4 flex flex-col divide-y-2 border-y-2">
-	{#each tiers as label, i}
+	{#each tiers as label, tierLevelIndex}
 		<div class="grid h-24 grid-cols-[90px_1fr]">
 			<div
 				class="flex items-center justify-center text-xl font-bold text-gray-800 select-none"
-				style="background-color: {getTierColor(i)}"
+				style="background-color: {getTierColor(tierLevelIndex)}"
 			>
 				{label}
 			</div>
 			<div
 				role="list"
 				aria-label="Tier {label} drop zone"
-				class="flex items-center gap-2 overflow-x-auto border-l border-black bg-neutral-900 p-2"
+				class="flex items-center justify-start gap-2 overflow-x-auto border-l border-black bg-neutral-900 px-2"
 				on:dragover={allowDrop}
-				on:drop={() => handleDrop(i)}
 			>
-				{#each tierItems[i] as image}
-					<img
-						src={image.src}
-						alt="tier item"
-						class="h-16 w-16 cursor-pointer rounded object-cover"
-						draggable="true"
-						on:dragstart={() => handleDragStart(image, i)}
-					/>
+				{#if tierItems[tierLevelIndex].length === 0}
+					<div
+						class="drop-target full-drop-target"
+						on:dragover={allowDrop}
+						on:drop={() => handleDrop(tierLevelIndex, 0)}
+					>
+						<span class="pointer-events-none text-gray-400 italic select-none">Drop items here...</span>
+					</div>
 				{:else}
-					<p class="text-gray-500 italic select-none">Drop items here...</p>
-				{/each}
+					{#each tierItems[tierLevelIndex] as image, index (image.id)}
+						{#if draggedImage?.id !== image.id}
+							<!-- Drop zone before each image unless it's the dragged one -->
+							<div
+								class="drop-target"
+								class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
+								on:dragenter={() => handleEnter(tierLevelIndex, index)}
+								on:dragleave={() => handleLeave(tierLevelIndex, index)}
+								on:dragover={allowDrop}
+								on:drop={() => handleDrop(tierLevelIndex, index)}
+							></div>
+						{/if}
+						<img
+							src={image.src}
+							alt="tier item"
+							class="h-16 w-16 cursor-pointer rounded object-cover"
+							draggable="true"
+							on:dragstart={() => handleDragStart(image, tierLevelIndex)}
+							on:dragend={handleDragEnd}
+						/>
+					{/each}
+
+					<!-- Final drop target fills remaining space -->
+					<div
+						class="drop-target drop-expand"
+						class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length}
+						on:dragenter={() => handleEnter(tierLevelIndex, tierItems[tierLevelIndex].length)}
+						on:dragleave={() => handleLeave(tierLevelIndex, tierItems[tierLevelIndex].length)}
+						on:dragover={allowDrop}
+						on:drop={() => handleDrop(tierLevelIndex, tierItems[tierLevelIndex].length)}
+					></div>
+				{/if}
 			</div>
 		</div>
 	{/each}
 </div>
 
+<!-- Uploaded items -->
 <div
 	role="list"
 	aria-label="Uploaded items drop zone"
 	class="mx-4 mt-8 mb-6 min-h-[120px] rounded-lg border-2 border-dashed border-gray-400 bg-gray-50 p-4"
 	on:dragover={allowDrop}
-	on:drop={() => handleDrop('uploaded')}
+	on:drop={() => handleDrop('uploaded', uploadedImages.length)}
 >
 	<h2 class="mb-2 text-lg font-semibold select-none">Uploaded Items</h2>
 	<div class="flex flex-wrap gap-4">
-		{#each uploadedImages as image}
+		{#each uploadedImages as image, index (image.id)}
+			{#if draggedImage?.id !== image.id}
+				<div
+					class="drop-target"
+					class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index}
+					on:dragenter={() => handleEnter('uploaded', index)}
+					on:dragleave={() => handleLeave('uploaded', index)}
+					on:dragover={allowDrop}
+					on:drop={() => handleDrop('uploaded', index)}
+				></div>
+			{/if}
 			<img
 				src={image.src}
 				alt="uploaded item"
 				class="h-16 w-16 cursor-pointer rounded object-cover"
 				draggable="true"
 				on:dragstart={() => handleDragStart(image, 'uploaded')}
+				on:dragend={handleDragEnd}
 			/>
-		{:else}
-			<p class="text-gray-500 italic select-none">No images uploaded yet.</p>
 		{/each}
+		<div
+			class="drop-target"
+			class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length}
+			on:dragenter={() => handleEnter('uploaded', uploadedImages.length)}
+			on:dragleave={() => handleLeave('uploaded', uploadedImages.length)}
+			on:dragover={allowDrop}
+			on:drop={() => handleDrop('uploaded', uploadedImages.length)}
+		></div>
 	</div>
 </div>
 
@@ -121,3 +190,42 @@
 		<input type="file" accept="image/*" multiple class="hidden" on:change={handleUpload} />
 	</label>
 </div>
+
+<style>
+	.drop-target {
+		width: 4px;
+		min-width: 4px;
+		height: 64px;
+		border: 2px dashed transparent;
+		background-color: transparent;
+		transition:
+			width 0.2s ease,
+			background-color 0.2s ease,
+			border-color 0.2s ease;
+		flex-shrink: 0;
+	}
+
+	.drop-hover {
+		width: 24px;
+		background-color: rgba(74, 222, 128, 0.1);
+		border-color: #4ade80;
+	}
+
+	.full-drop-target {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 2px dashed #ccc;
+		transition: border-color 0.2s;
+	}
+
+	.full-drop-target:hover {
+		border-color: #4ade80;
+	}
+
+	.drop-expand {
+		flex-grow: 1;
+	}
+</style>

From f4d1b6236e06d7a357910c7828bf5de923433ff0 Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Sat, 29 Nov 2025 11:14:50 +0100
Subject: [PATCH 2/6] fix items put on left side

---
 src/routes/+page.svelte | 70 +++++++++++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 10 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 59881ae..f6cfc35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -96,16 +96,25 @@
 			>
 				{#if tierItems[tierLevelIndex].length === 0}
 					<div
-						class="drop-target full-drop-target"
+						class="full-drop-target"
+						on:dragenter={() => handleEnter(tierLevelIndex, 0)}
+						on:dragleave={() => handleLeave(tierLevelIndex, 0)}
 						on:dragover={allowDrop}
 						on:drop={() => handleDrop(tierLevelIndex, 0)}
 					>
-						<span class="pointer-events-none text-gray-400 italic select-none">Drop items here...</span>
+						{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === 0 && draggedImage}
+							<img
+								src={draggedImage.src}
+								alt="ghost preview"
+								class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+							/>
+						{:else}
+							<span class="pointer-events-none text-gray-400 italic select-none">Drop items here...</span>
+						{/if}
 					</div>
 				{:else}
 					{#each tierItems[tierLevelIndex] as image, index (image.id)}
 						{#if draggedImage?.id !== image.id}
-							<!-- Drop zone before each image unless it's the dragged one -->
 							<div
 								class="drop-target"
 								class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
@@ -113,8 +122,17 @@
 								on:dragleave={() => handleLeave(tierLevelIndex, index)}
 								on:dragover={allowDrop}
 								on:drop={() => handleDrop(tierLevelIndex, index)}
-							></div>
+							>
+								{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index && draggedImage}
+									<img
+										src={draggedImage.src}
+										alt="ghost preview"
+										class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+									/>
+								{/if}
+							</div>
 						{/if}
+
 						<img
 							src={image.src}
 							alt="tier item"
@@ -125,7 +143,6 @@
 						/>
 					{/each}
 
-					<!-- Final drop target fills remaining space -->
 					<div
 						class="drop-target drop-expand"
 						class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length}
@@ -133,7 +150,15 @@
 						on:dragleave={() => handleLeave(tierLevelIndex, tierItems[tierLevelIndex].length)}
 						on:dragover={allowDrop}
 						on:drop={() => handleDrop(tierLevelIndex, tierItems[tierLevelIndex].length)}
-					></div>
+					>
+						{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length && draggedImage}
+							<img
+								src={draggedImage.src}
+								alt="ghost preview"
+								class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+							/>
+						{/if}
+					</div>
 				{/if}
 			</div>
 		</div>
@@ -159,8 +184,17 @@
 					on:dragleave={() => handleLeave('uploaded', index)}
 					on:dragover={allowDrop}
 					on:drop={() => handleDrop('uploaded', index)}
-				></div>
+				>
+					{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage}
+						<img
+							src={draggedImage.src}
+							alt="ghost preview"
+							class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+						/>
+					{/if}
+				</div>
 			{/if}
+
 			<img
 				src={image.src}
 				alt="uploaded item"
@@ -170,6 +204,7 @@
 				on:dragend={handleDragEnd}
 			/>
 		{/each}
+
 		<div
 			class="drop-target"
 			class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length}
@@ -177,7 +212,15 @@
 			on:dragleave={() => handleLeave('uploaded', uploadedImages.length)}
 			on:dragover={allowDrop}
 			on:drop={() => handleDrop('uploaded', uploadedImages.length)}
-		></div>
+		>
+			{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length && draggedImage}
+				<img
+					src={draggedImage.src}
+					alt="ghost preview"
+					class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+				/>
+			{/if}
+		</div>
 	</div>
 </div>
 
@@ -203,10 +246,14 @@
 			background-color 0.2s ease,
 			border-color 0.2s ease;
 		flex-shrink: 0;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.drop-hover {
-		width: 24px;
+		width: 64px;
 		background-color: rgba(74, 222, 128, 0.1);
 		border-color: #4ade80;
 	}
@@ -216,9 +263,10 @@
 		height: 100%;
 		display: flex;
 		align-items: center;
-		justify-content: center;
+		justify-content: flex-start;
 		border: 2px dashed #ccc;
 		transition: border-color 0.2s;
+		padding-left: 4px;
 	}
 
 	.full-drop-target:hover {
@@ -227,5 +275,7 @@
 
 	.drop-expand {
 		flex-grow: 1;
+		justify-content: flex-start;
+		padding-left: 4px;
 	}
 </style>

From 26892e5e29554854a9058b8010196665baf34bf1 Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Wed, 7 Jan 2026 15:01:11 +0100
Subject: [PATCH 3/6] Fix hovering hitbox

---
 src/routes/+page.svelte | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f6cfc35..a523a2b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -117,6 +117,7 @@
 						{#if draggedImage?.id !== image.id}
 							<div
 								class="drop-target"
+								class:is-dragging={draggedImage !== null}
 								class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
 								on:dragenter={() => handleEnter(tierLevelIndex, index)}
 								on:dragleave={() => handleLeave(tierLevelIndex, index)}
@@ -145,6 +146,7 @@
 
 					<div
 						class="drop-target drop-expand"
+						class:is-dragging={draggedImage !== null}
 						class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length}
 						on:dragenter={() => handleEnter(tierLevelIndex, tierItems[tierLevelIndex].length)}
 						on:dragleave={() => handleLeave(tierLevelIndex, tierItems[tierLevelIndex].length)}
@@ -179,6 +181,7 @@
 			{#if draggedImage?.id !== image.id}
 				<div
 					class="drop-target"
+					class:is-dragging={draggedImage !== null}
 					class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index}
 					on:dragenter={() => handleEnter('uploaded', index)}
 					on:dragleave={() => handleLeave('uploaded', index)}
@@ -207,6 +210,7 @@
 
 		<div
 			class="drop-target"
+			class:is-dragging={draggedImage !== null}
 			class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length}
 			on:dragenter={() => handleEnter('uploaded', uploadedImages.length)}
 			on:dragleave={() => handleLeave('uploaded', uploadedImages.length)}
@@ -236,6 +240,7 @@
 
 <style>
 	.drop-target {
+		position: relative;
 		width: 4px;
 		min-width: 4px;
 		height: 64px;
@@ -252,6 +257,22 @@
 		justify-content: center;
 	}
 
+	.drop-target.is-dragging::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 60px;
+		height: 100%;
+		z-index: 20;
+	}
+
+	.drop-target.is-dragging.drop-hover::after {
+		width: 120px;
+	}
+
 	.drop-hover {
 		width: 64px;
 		background-color: rgba(74, 222, 128, 0.1);

From 17aa9d033bba31d3cf40ea1d2942d3d65f0421ea Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Wed, 7 Jan 2026 15:10:28 +0100
Subject: [PATCH 4/6] fix different padding for ghost image

---
 src/routes/+page.svelte | 72 +++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a523a2b..41bbe1f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -114,25 +114,23 @@
 					</div>
 				{:else}
 					{#each tierItems[tierLevelIndex] as image, index (image.id)}
-						{#if draggedImage?.id !== image.id}
-							<div
-								class="drop-target"
-								class:is-dragging={draggedImage !== null}
-								class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
-								on:dragenter={() => handleEnter(tierLevelIndex, index)}
-								on:dragleave={() => handleLeave(tierLevelIndex, index)}
-								on:dragover={allowDrop}
-								on:drop={() => handleDrop(tierLevelIndex, index)}
-							>
-								{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index && draggedImage}
-									<img
-										src={draggedImage.src}
-										alt="ghost preview"
-										class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
-									/>
-								{/if}
-							</div>
-						{/if}
+						<div
+							class="drop-target"
+							class:is-dragging={draggedImage !== null}
+							class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
+							on:dragenter={() => handleEnter(tierLevelIndex, index)}
+							on:dragleave={() => handleLeave(tierLevelIndex, index)}
+							on:dragover={allowDrop}
+							on:drop={() => handleDrop(tierLevelIndex, index)}
+						>
+							{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index && draggedImage}
+								<img
+									src={draggedImage.src}
+									alt="ghost preview"
+									class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+								/>
+							{/if}
+						</div>
 
 						<img
 							src={image.src}
@@ -178,25 +176,23 @@
 	<h2 class="mb-2 text-lg font-semibold select-none">Uploaded Items</h2>
 	<div class="flex flex-wrap gap-4">
 		{#each uploadedImages as image, index (image.id)}
-			{#if draggedImage?.id !== image.id}
-				<div
-					class="drop-target"
-					class:is-dragging={draggedImage !== null}
-					class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index}
-					on:dragenter={() => handleEnter('uploaded', index)}
-					on:dragleave={() => handleLeave('uploaded', index)}
-					on:dragover={allowDrop}
-					on:drop={() => handleDrop('uploaded', index)}
-				>
-					{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage}
-						<img
-							src={draggedImage.src}
-							alt="ghost preview"
-							class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
-						/>
-					{/if}
-				</div>
-			{/if}
+			<div
+				class="drop-target"
+				class:is-dragging={draggedImage !== null}
+				class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index}
+				on:dragenter={() => handleEnter('uploaded', index)}
+				on:dragleave={() => handleLeave('uploaded', index)}
+				on:dragover={allowDrop}
+				on:drop={() => handleDrop('uploaded', index)}
+			>
+				{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage}
+					<img
+						src={draggedImage.src}
+						alt="ghost preview"
+						class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+					/>
+				{/if}
+			</div>
 
 			<img
 				src={image.src}

From 4a8cc1fac2d4b5d858f2036b60246b192c53516c Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Wed, 7 Jan 2026 15:18:09 +0100
Subject: [PATCH 5/6] don't show ghost on each side of hovered image

---
 src/routes/+page.svelte | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 41bbe1f..a895e36 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 
 	let draggedImage: TierImage | null = null;
 	let draggedFrom: SourceType | null = null;
+	let draggedIndex: number | null = null;
 	let activeDropTarget: { tier: SourceType; index: number } | null = null;
 
 	function handleUpload(event: Event) {
@@ -21,14 +22,16 @@
 		uploadedImages = [...uploadedImages, ...newImages];
 	}
 
-	function handleDragStart(image: TierImage, from: SourceType) {
+	function handleDragStart(image: TierImage, from: SourceType, index: number) {
 		draggedImage = image;
 		draggedFrom = from;
+		draggedIndex = index;
 	}
 
 	function handleDragEnd() {
 		draggedImage = null;
 		draggedFrom = null;
+		draggedIndex = null;
 		activeDropTarget = null;
 	}
 
@@ -40,7 +43,7 @@
 		} else {
 			tierItems[draggedFrom] = tierItems[draggedFrom].filter((img) => img.id !== draggedImage?.id);
 		}
-
+		
 		if (target === 'uploaded') {
 			const items = [...uploadedImages];
 			items.splice(index, 0, draggedImage);
@@ -53,6 +56,7 @@
 
 		draggedImage = null;
 		draggedFrom = null;
+		draggedIndex = null;
 		activeDropTarget = null;
 	}
 
@@ -117,13 +121,15 @@
 						<div
 							class="drop-target"
 							class:is-dragging={draggedImage !== null}
-							class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index}
+							class:drop-hover={activeDropTarget?.tier === tierLevelIndex &&
+								activeDropTarget?.index === index &&
+								(draggedFrom !== tierLevelIndex || (draggedIndex !== index && draggedIndex !== index - 1))}
 							on:dragenter={() => handleEnter(tierLevelIndex, index)}
 							on:dragleave={() => handleLeave(tierLevelIndex, index)}
 							on:dragover={allowDrop}
 							on:drop={() => handleDrop(tierLevelIndex, index)}
 						>
-							{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index && draggedImage}
+							{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === index && draggedImage && (draggedFrom !== tierLevelIndex || (draggedIndex !== index && draggedIndex !== index - 1))}
 								<img
 									src={draggedImage.src}
 									alt="ghost preview"
@@ -137,7 +143,7 @@
 							alt="tier item"
 							class="h-16 w-16 cursor-pointer rounded object-cover"
 							draggable="true"
-							on:dragstart={() => handleDragStart(image, tierLevelIndex)}
+							on:dragstart={() => handleDragStart(image, tierLevelIndex, index)}
 							on:dragend={handleDragEnd}
 						/>
 					{/each}
@@ -145,13 +151,16 @@
 					<div
 						class="drop-target drop-expand"
 						class:is-dragging={draggedImage !== null}
-						class:drop-hover={activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length}
+						class:drop-hover={activeDropTarget?.tier === tierLevelIndex &&
+							activeDropTarget?.index === tierItems[tierLevelIndex].length &&
+							(draggedFrom !== tierLevelIndex ||
+								(draggedIndex !== tierItems[tierLevelIndex].length && draggedIndex !== tierItems[tierLevelIndex].length - 1))}
 						on:dragenter={() => handleEnter(tierLevelIndex, tierItems[tierLevelIndex].length)}
 						on:dragleave={() => handleLeave(tierLevelIndex, tierItems[tierLevelIndex].length)}
 						on:dragover={allowDrop}
 						on:drop={() => handleDrop(tierLevelIndex, tierItems[tierLevelIndex].length)}
 					>
-						{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length && draggedImage}
+						{#if activeDropTarget?.tier === tierLevelIndex && activeDropTarget?.index === tierItems[tierLevelIndex].length && draggedImage && (draggedFrom !== tierLevelIndex || (draggedIndex !== tierItems[tierLevelIndex].length && draggedIndex !== tierItems[tierLevelIndex].length - 1))}
 							<img
 								src={draggedImage.src}
 								alt="ghost preview"
@@ -179,13 +188,15 @@
 			<div
 				class="drop-target"
 				class:is-dragging={draggedImage !== null}
-				class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index}
+				class:drop-hover={activeDropTarget?.tier === 'uploaded' &&
+					activeDropTarget?.index === index &&
+					(draggedFrom !== 'uploaded' || (draggedIndex !== index && draggedIndex !== index - 1))}
 				on:dragenter={() => handleEnter('uploaded', index)}
 				on:dragleave={() => handleLeave('uploaded', index)}
 				on:dragover={allowDrop}
 				on:drop={() => handleDrop('uploaded', index)}
 			>
-				{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage}
+				{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage && (draggedFrom !== 'uploaded' || (draggedIndex !== index && draggedIndex !== index - 1))}
 					<img
 						src={draggedImage.src}
 						alt="ghost preview"
@@ -199,7 +210,7 @@
 				alt="uploaded item"
 				class="h-16 w-16 cursor-pointer rounded object-cover"
 				draggable="true"
-				on:dragstart={() => handleDragStart(image, 'uploaded')}
+				on:dragstart={() => handleDragStart(image, 'uploaded', index)}
 				on:dragend={handleDragEnd}
 			/>
 		{/each}
@@ -207,13 +218,16 @@
 		<div
 			class="drop-target"
 			class:is-dragging={draggedImage !== null}
-			class:drop-hover={activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length}
+			class:drop-hover={activeDropTarget?.tier === 'uploaded' &&
+				activeDropTarget?.index === uploadedImages.length &&
+				(draggedFrom !== 'uploaded' ||
+					(draggedIndex !== uploadedImages.length && draggedIndex !== uploadedImages.length - 1))}
 			on:dragenter={() => handleEnter('uploaded', uploadedImages.length)}
 			on:dragleave={() => handleLeave('uploaded', uploadedImages.length)}
 			on:dragover={allowDrop}
 			on:drop={() => handleDrop('uploaded', uploadedImages.length)}
 		>
-			{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length && draggedImage}
+			{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length && draggedImage && (draggedFrom !== 'uploaded' || (draggedIndex !== uploadedImages.length && draggedIndex !== uploadedImages.length - 1))}
 				<img
 					src={draggedImage.src}
 					alt="ghost preview"

From cfabed9a5b7bb171082ec65ac5244f008067619e Mon Sep 17 00:00:00 2001
From: Patertuck <patric.brandao@hispeed.ch>
Date: Tue, 20 Jan 2026 14:19:28 +0100
Subject: [PATCH 6/6] Adapt reordering with ghost preview to backend

---
 frontend/src/routes/[tierlistId]/+page.svelte | 284 +++++++++++++++---
 1 file changed, 239 insertions(+), 45 deletions(-)

diff --git a/frontend/src/routes/[tierlistId]/+page.svelte b/frontend/src/routes/[tierlistId]/+page.svelte
index b3a0dd7..b117a9b 100644
--- a/frontend/src/routes/[tierlistId]/+page.svelte
+++ b/frontend/src/routes/[tierlistId]/+page.svelte
@@ -15,37 +15,44 @@
 	let uploadedImages: TierImage[] = $state([]);
 	let tiers: Tier[] = $state([]);
 
-	let draggedImage: TierImage | null = null;
-	let draggedFrom: SourceType | null = null;
+	let draggedImage: TierImage | null = $state(null);
+	let draggedFrom: SourceType | null = $state(null);
+	let draggedIndex: number | null = $state(null);
+	let activeDropTarget: { tier: SourceType; index: number } | null = $state(null);
 
 	onMount(async () => {
 		tierlistId = data.tierlistId;
-
-		let response = await fetch(`${PUBLIC_API_URL}/tierlist/${tierlistId}`);
-		let tierlist = await response.json();
-		tierlistName = tierlist['Name'];
-		uploadedImages = tierlist['UnassignedEntries'].map((x) => ({
-			id: x['id'],
-			src: `${PUBLIC_API_URL}/images/${x['file_key']}`
-		}));
-		tiers = tierlist['Tiers'].map((x) => ({
-			id: x['id'],
-			name: x['name'],
-			entries: x['entries'].map((y) => ({
-				id: y['id'],
-				src: `${PUBLIC_API_URL}/images/${y['file_key']}`
-			}))
-		}));
+		try {
+			let response = await fetch(`${PUBLIC_API_URL}/tierlist/${tierlistId}`);
+			if (response.ok) {
+				let tierlist = await response.json();
+				tierlistName = tierlist['Name'];
+				uploadedImages = tierlist['UnassignedEntries'].map((x: any) => ({
+					id: x['id'],
+					src: `${PUBLIC_API_URL}/images/${x['file_key']}`
+				}));
+				tiers = tierlist['Tiers'].map((x: any) => ({
+					id: x['id'],
+					name: x['name'],
+					entries: x['entries'].map((y: any) => ({
+						id: y['id'],
+						src: `${PUBLIC_API_URL}/images/${y['file_key']}`
+					}))
+				}));
+			}
+		} catch (error) {
+			console.error("Failed to load tierlist:", error);
+		}
 	});
 
 	async function handleUpload(event: Event) {
 		const input = event.target as HTMLInputElement;
 		const files = Array.from(input.files ?? []);
 		let newImages = [];
+
 		for (const file of files) {
 			const formData = new FormData();
 			formData.append('image', file);
-
 			try {
 				const response = await fetch(`${PUBLIC_API_URL}/tierlist/${tierlistId}/upload`, {
 					method: 'POST',
@@ -60,12 +67,30 @@
 		uploadedImages = [...uploadedImages, ...newImages];
 	}
 
-	async function handleDragStart(image: TierImage, from: SourceType) {
+	function handleDragStart(image: TierImage, from: SourceType, index: number) {
 		draggedImage = image;
 		draggedFrom = from;
+		draggedIndex = index;
+	}
+
+	function handleDragEnd() {
+		draggedImage = null;
+		draggedFrom = null;
+		draggedIndex = null;
+		activeDropTarget = null;
+	}
+
+	function handleEnter(tier: SourceType, index: number) {
+		activeDropTarget = { tier, index };
 	}
 
-	async function handleDrop(target: SourceType) {
+	function handleLeave(tier: SourceType, index: number) {
+		if (activeDropTarget?.tier === tier && activeDropTarget?.index === index) {
+			activeDropTarget = null;
+		}
+	}
+
+	async function handleDrop(target: SourceType, insertIndex: number) {
 		if (!draggedImage || draggedFrom === null) return;
 
 		if (draggedFrom === 'uploaded') {
@@ -77,12 +102,16 @@
 		}
 
 		if (target === 'uploaded') {
-			uploadedImages = [...uploadedImages, draggedImage];
+			const items = [...uploadedImages];
+			items.splice(insertIndex, 0, draggedImage);
+			uploadedImages = items;
 		} else {
-			tiers[target].entries = [...tiers[target].entries, draggedImage];
+			const items = [...tiers[target].entries];
+			items.splice(insertIndex, 0, draggedImage);
+			tiers[target].entries = items;
 		}
 
-		const response = await fetch(`${PUBLIC_API_URL}/tierlist/${tierlistId}/move`, {
+		await fetch(`${PUBLIC_API_URL}/tierlist/${tierlistId}/move`, {
 			method: 'POST',
 			body: JSON.stringify({
 				TierID: target === 'uploaded' ? null : tiers[target].id,
@@ -90,8 +119,7 @@
 			})
 		});
 
-		draggedImage = null;
-		draggedFrom = null;
+		handleDragEnd();
 	}
 
 	function allowDrop(event: DragEvent) {
@@ -106,7 +134,6 @@
 
 <h1 class="my-6 select-none text-center text-3xl font-bold">Tierlist Creator</h1>
 
-<!-- Tier rows -->
 <div class="mx-4 flex flex-col divide-y-2 border-y-2">
 	{#each tiers as tier, i}
 		<div class="grid h-24 grid-cols-[90px_1fr]">
@@ -116,24 +143,87 @@
 			>
 				{tier.name}
 			</div>
+			
 			<div
 				role="list"
 				aria-label="Tier {tier.name} drop zone"
-				class="flex items-center gap-2 overflow-x-auto border-l border-black bg-neutral-900 p-2"
+				class="flex items-center justify-start gap-2 overflow-x-auto border-l border-black bg-neutral-900 px-2"
 				ondragover={allowDrop}
-				ondrop={() => handleDrop(i)}
 			>
-				{#each tier.entries as image}
-					<img
-						src={image.src}
-						alt="tier item"
-						class="h-16 w-16 cursor-pointer rounded object-cover"
-						draggable="true"
-						ondragstart={() => handleDragStart(image, i)}
-					/>
+				{#if tier.entries.length === 0}
+					<div
+						class="full-drop-target"
+						ondragenter={() => handleEnter(i, 0)}
+						ondragleave={() => handleLeave(i, 0)}
+						ondragover={allowDrop}
+						ondrop={() => handleDrop(i, 0)}
+						role="listitem"
+					>
+						{#if activeDropTarget?.tier === i && activeDropTarget?.index === 0 && draggedImage}
+							<img
+								src={draggedImage.src}
+								alt="ghost preview"
+								class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+							/>
+						{:else}
+							<p class="text-gray-500 italic select-none pointer-events-none">Drop items here...</p>
+						{/if}
+					</div>
 				{:else}
-					<p class="text-gray-500 italic select-none">Drop items here...</p>
-				{/each}
+					{#each tier.entries as image, index (image.id.toString())}
+						<div
+							class="drop-target"
+							class:is-dragging={draggedImage !== null}
+							class:drop-hover={activeDropTarget?.tier === i &&
+								activeDropTarget?.index === index &&
+								(draggedFrom !== i || (draggedIndex !== index && draggedIndex !== index - 1))}
+							ondragenter={() => handleEnter(i, index)}
+							ondragleave={() => handleLeave(i, index)}
+							ondragover={allowDrop}
+							ondrop={() => handleDrop(i, index)}
+							role="listitem"
+						>
+							{#if activeDropTarget?.tier === i && activeDropTarget?.index === index && draggedImage && (draggedFrom !== i || (draggedIndex !== index && draggedIndex !== index - 1))}
+								<img
+									src={draggedImage.src}
+									alt="ghost preview"
+									class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+								/>
+							{/if}
+						</div>
+
+						<img
+							src={image.src}
+							alt="tier item"
+							class="h-16 w-16 cursor-pointer rounded object-cover"
+							draggable="true"
+							ondragstart={() => handleDragStart(image, i, index)}
+							ondragend={handleDragEnd}
+						/>
+					{/each}
+
+					<div
+						class="drop-target drop-expand"
+						class:is-dragging={draggedImage !== null}
+						class:drop-hover={activeDropTarget?.tier === i &&
+							activeDropTarget?.index === tier.entries.length &&
+							(draggedFrom !== i ||
+								(draggedIndex !== tier.entries.length && draggedIndex !== tier.entries.length - 1))}
+						ondragenter={() => handleEnter(i, tier.entries.length)}
+						ondragleave={() => handleLeave(i, tier.entries.length)}
+						ondragover={allowDrop}
+						ondrop={() => handleDrop(i, tier.entries.length)}
+						role="listitem"
+					>
+						{#if activeDropTarget?.tier === i && activeDropTarget?.index === tier.entries.length && draggedImage && (draggedFrom !== i || (draggedIndex !== tier.entries.length && draggedIndex !== tier.entries.length - 1))}
+							<img
+								src={draggedImage.src}
+								alt="ghost preview"
+								class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+							/>
+						{/if}
+					</div>
+				{/if}
 			</div>
 		</div>
 	{/each}
@@ -144,25 +234,66 @@
 	aria-label="Uploaded items drop zone"
 	class="mx-4 mb-6 mt-8 min-h-[120px] rounded-lg border-2 border-dashed border-gray-400 bg-gray-50 p-4"
 	ondragover={allowDrop}
-	ondrop={() => handleDrop('uploaded')}
+	ondrop={() => handleDrop('uploaded', uploadedImages.length)}
 >
 	<h2 class="mb-2 select-none text-lg font-semibold">Uploaded Items</h2>
 	<div class="flex flex-wrap gap-4">
-		{#each uploadedImages as image}
+		{#each uploadedImages as image, index (image.id.toString())}
+			<div
+				class="drop-target"
+				class:is-dragging={draggedImage !== null}
+				class:drop-hover={activeDropTarget?.tier === 'uploaded' &&
+					activeDropTarget?.index === index &&
+					(draggedFrom !== 'uploaded' || (draggedIndex !== index && draggedIndex !== index - 1))}
+				ondragenter={() => handleEnter('uploaded', index)}
+				ondragleave={() => handleLeave('uploaded', index)}
+				ondragover={allowDrop}
+				ondrop={() => handleDrop('uploaded', index)}
+				role="listitem"
+			>
+				{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === index && draggedImage && (draggedFrom !== 'uploaded' || (draggedIndex !== index && draggedIndex !== index - 1))}
+					<img
+						src={draggedImage.src}
+						alt="ghost preview"
+						class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+					/>
+				{/if}
+			</div>
+
 			<img
 				src={image.src}
 				alt="uploaded item"
 				class="h-16 w-16 cursor-pointer rounded object-cover"
 				draggable="true"
-				ondragstart={() => handleDragStart(image, 'uploaded')}
+				ondragstart={() => handleDragStart(image, 'uploaded', index)}
+				ondragend={handleDragEnd}
 			/>
-		{:else}
-			<p class="text-gray-500 italic select-none">No images uploaded yet.</p>
 		{/each}
+
+		<div
+			class="drop-target"
+			class:is-dragging={draggedImage !== null}
+			class:drop-hover={activeDropTarget?.tier === 'uploaded' &&
+				activeDropTarget?.index === uploadedImages.length &&
+				(draggedFrom !== 'uploaded' ||
+					(draggedIndex !== uploadedImages.length && draggedIndex !== uploadedImages.length - 1))}
+			ondragenter={() => handleEnter('uploaded', uploadedImages.length)}
+			ondragleave={() => handleLeave('uploaded', uploadedImages.length)}
+			ondragover={allowDrop}
+			ondrop={() => handleDrop('uploaded', uploadedImages.length)}
+			role="listitem"
+		>
+			{#if activeDropTarget?.tier === 'uploaded' && activeDropTarget?.index === uploadedImages.length && draggedImage && (draggedFrom !== 'uploaded' || (draggedIndex !== uploadedImages.length && draggedIndex !== uploadedImages.length - 1))}
+				<img
+					src={draggedImage.src}
+					alt="ghost preview"
+					class="h-16 w-16 rounded object-cover opacity-40 pointer-events-none"
+				/>
+			{/if}
+		</div>
 	</div>
 </div>
 
-<!-- Upload button -->
 <div class="mt-8 text-center">
 	<label
 		class="inline-block cursor-pointer select-none rounded bg-sky-500 px-4 py-2 font-bold text-white hover:bg-sky-700"
@@ -171,3 +302,66 @@
 		<input type="file" accept="image/*" multiple class="hidden" onchange={handleUpload} />
 	</label>
 </div>
+
+<style>
+	.drop-target {
+		position: relative;
+		width: 4px;
+		min-width: 4px;
+		height: 64px;
+		border: 2px dashed transparent;
+		background-color: transparent;
+		transition:
+			width 0.2s ease,
+			background-color 0.2s ease,
+			border-color 0.2s ease;
+		flex-shrink: 0;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.drop-target.is-dragging::after {
+		content: '';
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 60px;
+		height: 100%;
+		z-index: 20;
+	}
+
+	.drop-target.is-dragging.drop-hover::after {
+		width: 120px;
+	}
+
+	.drop-hover {
+		width: 64px;
+		background-color: rgba(74, 222, 128, 0.1);
+		border-color: #4ade80;
+	}
+
+	.full-drop-target {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		border: 2px dashed #ccc;
+		transition: border-color 0.2s;
+		padding-left: 4px;
+	}
+
+	.full-drop-target:hover {
+		border-color: #4ade80;
+	}
+
+	.drop-expand {
+		flex-grow: 1;
+		justify-content: flex-start;
+		padding-left: 4px;
+	}
+</style>
\ No newline at end of file