From 0b6c92baa702e3cf46ced54cb726e8efa0a6ee83 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 24 Feb 2026 14:57:59 -0600
Subject: [PATCH] refac

---
 .../admin/Settings/Models/ModelList.svelte    | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/admin/Settings/Models/ModelList.svelte b/src/lib/components/admin/Settings/Models/ModelList.svelte
index d501a485d4..d6ad88a7db 100644
--- a/src/lib/components/admin/Settings/Models/ModelList.svelte
+++ b/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
+			);
+		}
+
+		// Update reactive data — Svelte will re-render with the new order
+		modelIds = newOrder;
 	};
 
-	$: if (modelIds) {
-		init();
-	}
-
-	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">