From 623d3f90bf7f6703a1ecd98f2d23eb7ac99994e3 Mon Sep 17 00:00:00 2001
From: beo3000 <pakabu@web.de>
Date: Sun, 22 Feb 2026 16:17:03 +0100
Subject: [PATCH] added drag&drop

---
 .../src/lib/components/AgendaView.svelte      | 74 +++++++++++++++----
 1 file changed, 59 insertions(+), 15 deletions(-)

diff --git a/ka-note/client/src/lib/components/AgendaView.svelte b/ka-note/client/src/lib/components/AgendaView.svelte
index 6c526f3..1b2dc9b 100644
--- a/ka-note/client/src/lib/components/AgendaView.svelte
+++ b/ka-note/client/src/lib/components/AgendaView.svelte
@@ -2,7 +2,7 @@
 	import type { Topic } from '@ka-note/shared';
 	import { liveQuery } from 'dexie';
 	import { db } from '$lib/db/schema';
-	import { createTopic, createHistoryEntry, JOURNAL_TOPIC_ID } from '$lib/db/repositories';
+	import { createTopic, createHistoryEntry, updateTopicSortOrder, JOURNAL_TOPIC_ID } from '$lib/db/repositories';
 	import { today } from '$lib/db/helpers';
 	import { processedTopicIds } from '$lib/stores/agenda';
 	import TopicInput from './TopicInput.svelte';
@@ -53,6 +53,34 @@
 		const topic = await createTopic(contextId, title);
 		await createHistoryEntry(topic.id, today(), 'Thema angelegt.');
 	}
+
+	// --- Drag & Drop ---
+	let dragId = $state<string | null>(null);
+	let dragOverId = $state<string | null>(null);
+
+	function onDragStart(id: string) {
+		dragId = id;
+	}
+
+	function onDragOver(id: string) {
+		if (dragId && id !== dragId) dragOverId = id;
+	}
+
+	function onDragEnd() {
+		if (dragId && dragOverId) {
+			const list = showSplit ? [...openTopics] : [...allTopics];
+			const fromIdx = list.findIndex(t => t.id === dragId);
+			const toIdx = list.findIndex(t => t.id === dragOverId);
+			if (fromIdx !== -1 && toIdx !== -1) {
+				const reordered = [...list];
+				const [moved] = reordered.splice(fromIdx, 1);
+				reordered.splice(toIdx, 0, moved);
+				updateTopicSortOrder(contextId, reordered.map(t => t.id));
+			}
+		}
+		dragId = null;
+		dragOverId = null;
+	}
 </script>
 
 <TopicInput oncreate={handleCreate} />
@@ -65,13 +93,21 @@
 	{/if}
 
 	{#each openTopics as topic (topic.id)}
-		<TopicCard
-			{topic}
-			{contextId}
-			{isDailyLog}
-			{isMeetingMode}
-			isProcessed={false}
-		/>
+		<div
+			draggable="true"
+			ondragstart={() => onDragStart(topic.id)}
+			ondragover={(e) => { e.preventDefault(); onDragOver(topic.id); }}
+			ondragend={onDragEnd}
+			class="transition-opacity {dragId === topic.id ? 'opacity-30' : ''} {dragOverId === topic.id ? 'outline outline-2 outline-accent rounded-lg' : ''}"
+		>
+			<TopicCard
+				{topic}
+				{contextId}
+				{isDailyLog}
+				{isMeetingMode}
+				isProcessed={false}
+			/>
+		</div>
 	{/each}
 
 	{#if processedTopics.length > 0}
@@ -91,13 +127,21 @@
 	{/each}
 {:else}
 	{#each allTopics as topic (topic.id)}
-		<TopicCard
-			{topic}
-			{contextId}
-			{isDailyLog}
-			{isMeetingMode}
-			isProcessed={processedIds.has(topic.id)}
-		/>
+		<div
+			draggable="true"
+			ondragstart={() => onDragStart(topic.id)}
+			ondragover={(e) => { e.preventDefault(); onDragOver(topic.id); }}
+			ondragend={onDragEnd}
+			class="transition-opacity {dragId === topic.id ? 'opacity-30' : ''} {dragOverId === topic.id ? 'outline outline-2 outline-accent rounded-lg' : ''}"
+		>
+			<TopicCard
+				{topic}
+				{contextId}
+				{isDailyLog}
+				{isMeetingMode}
+				isProcessed={processedIds.has(topic.id)}
+			/>
+		</div>
 	{/each}
 {/if}