From 2734fcad63032cde8addd07e0a4470844e3eae5e Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Wed, 1 Apr 2026 19:40:02 +0800
Subject: [PATCH] fix(sidebar): ChatItem document listener teardown and shared
 drag image (#23209)

---
 .../components/layout/Sidebar/ChatItem.svelte | 43 +++++++++----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 6bb37981a..465d0d1e0 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -1,7 +1,14 @@
+<script context="module" lang="ts">
+	/** Shared 1×1 transparent drag preview; avoids one Image per sidebar row */
+	const invisibleDragImage = new Image();
+	invisibleDragImage.src =
+		'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+</script>
+
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import { goto, invalidate, invalidateAll } from '$app/navigation';
-	import { onMount, getContext, createEventDispatcher, tick, onDestroy } from 'svelte';
+	import { onMount, getContext, createEventDispatcher, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
@@ -224,14 +231,10 @@
 	let x = 0;
 	let y = 0;
 
-	const dragImage = new Image();
-	dragImage.src =
-		'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
-
 	const onDragStart = (event) => {
 		event.stopPropagation();
 
-		event.dataTransfer.setDragImage(dragImage, 0, 0);
+		event.dataTransfer.setDragImage(invisibleDragImage, 0, 0);
 
 		// Set the data to be transferred
 		event.dataTransfer.setData(
@@ -276,26 +279,20 @@
 	};
 
 	onMount(() => {
-		if (itemElement) {
-			document.addEventListener('click', onClickOutside, true);
+		const el = itemElement;
+		if (!el) return;
 
-			// Event listener for when dragging starts
-			itemElement.addEventListener('dragstart', onDragStart);
-			// Event listener for when dragging occurs (optional)
-			itemElement.addEventListener('drag', onDrag);
-			// Event listener for when dragging ends
-			itemElement.addEventListener('dragend', onDragEndHandler);
-		}
-	});
+		document.addEventListener('click', onClickOutside, true);
+		el.addEventListener('dragstart', onDragStart);
+		el.addEventListener('drag', onDrag);
+		el.addEventListener('dragend', onDragEndHandler);
 
-	onDestroy(() => {
-		if (itemElement) {
+		return () => {
 			document.removeEventListener('click', onClickOutside, true);
-
-			itemElement.removeEventListener('dragstart', onDragStart);
-			itemElement.removeEventListener('drag', onDrag);
-			itemElement.removeEventListener('dragend', onDragEndHandler);
-		}
+			el.removeEventListener('dragstart', onDragStart);
+			el.removeEventListener('drag', onDrag);
+			el.removeEventListener('dragend', onDragEndHandler);
+		};
 	});
 
 	let showDeleteConfirm = false;