refac

Author: tjbck

src/lib/components/admin/Settings/Models/ModelList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Sortable from 'sortablejs';
 
-	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	import { createEventDispatcher, getContext, onDestroy, onMount, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { models } from '$lib/stores';
@@ -14,20 +14,27 @@
 	let modelListElement = null;
 
 	const positionChangeHandler = () => {
-		const modelList = Array.from(modelListElement.children).map((child) =>
+		// Read new order from DOM
+		const newOrder = Array.from(modelListElement.children).map((child) =>
 			child.id.replace('model-item-', '')
 		);
 
-		modelIds = modelList;
-	};
+		// Revert SortableJS DOM manipulation so Svelte stays in control of the DOM
+		if (sortable) {
+			sortable.sort(
+				modelIds.map((id) => `model-item-${id}`),
+				true
+			);
+		}
 
-	$: if (modelIds) {
-		init();
-	}
+		// Update reactive data — Svelte will re-render with the new order
+		modelIds = newOrder;
+	};
 
-	const init = () => {
+	const initSortable = () => {
 		if (sortable) {
 			sortable.destroy();
+			sortable = null;
 		}
 
 		if (modelListElement) {
@@ -40,11 +47,24 @@
 			});
 		}
 	};
+
+	onMount(() => {
+		// Wait a tick for the {#if} block to render and bind modelListElement
+		tick().then(() => {
+			initSortable();
+		});
+	});
+
+	onDestroy(() => {
+		if (sortable) {
+			sortable.destroy();
+		}
+	});
 </script>
 
 {#if modelIds.length > 0}
 	<div class="flex flex-col -translate-x-1" bind:this={modelListElement}>
-		{#each modelIds as modelId, modelIdx (`${modelId}-${modelIdx}`)}
+		{#each modelIds as modelId (modelId)}
 			<div class=" flex gap-2 w-full justify-between items-center" id="model-item-{modelId}">
 				<Tooltip content={modelId} placement="top-start">
 					<div class="flex items-center gap-1">