fix(sidebar): ChatItem document listener teardown and shared drag image (#23209)

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) {
+		const el = itemElement;
-			document.addEventListener('click', onClickOutside, true);
+		if (!el) return;
 
-			// Event listener for when dragging starts
+		document.addEventListener('click', onClickOutside, true);
-			itemElement.addEventListener('dragstart', onDragStart);
+		el.addEventListener('dragstart', onDragStart);
-			// Event listener for when dragging occurs (optional)
+		el.addEventListener('drag', onDrag);
-			itemElement.addEventListener('drag', onDrag);
+		el.addEventListener('dragend', onDragEndHandler);
-			// Event listener for when dragging ends
-			itemElement.addEventListener('dragend', onDragEndHandler);
-		}
-	});
 
-	onDestroy(() => {
+		return () => {
-		if (itemElement) {
 			document.removeEventListener('click', onClickOutside, true);
-
+			el.removeEventListener('dragstart', onDragStart);
-			itemElement.removeEventListener('dragstart', onDragStart);
+			el.removeEventListener('drag', onDrag);
-			itemElement.removeEventListener('drag', onDrag);
+			el.removeEventListener('dragend', onDragEndHandler);
-			itemElement.removeEventListener('dragend', onDragEndHandler);
+		};
-		}
 	});
 
 	let showDeleteConfirm = false;