From e5db861e8be50df24624427643106cbe045bd8dc Mon Sep 17 00:00:00 2001
From: Silentoplayz <50341825+Silentoplayz@users.noreply.github.com>
Date: Tue, 25 Feb 2025 16:10:57 -0500
Subject: [PATCH 1/2] Update Interface.svelte

feat: Add sortable banners
---
 .../admin/Settings/Interface.svelte           | 46 +++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index e3542475e..644e90dfd 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
+	import Sortable from 'sortablejs';
 
 	import { getBackendConfig, getTaskConfig, updateTaskConfig } from '$lib/apis';
 	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
@@ -38,6 +39,25 @@
 
 	let promptSuggestions = [];
 	let banners: Banner[] = [];
+	let bannersSortable;
+
+	const updateBanners = async () => {
+                const sortedBanners = Array.from(document.querySelector('.banners-sortable').children).map((element, index) => {
+                                const idInput = element.querySelector('input[name="id"]');
+                                if (idInput) {
+                                                const banner = banners.find(b => b.id === idInput.value);
+                                                if (banner) {
+                                                                banner.position = index;
+                                                }
+                                                return banner;
+                                } else {
+                                                console.error('No id input found for banner');
+                                }
+                }).filter(banner => banner !== undefined);
+
+                await setBanners(localStorage.token, sortedBanners);
+                _banners.set(sortedBanners);
+	};
 
 	const updateInterfaceHandler = async () => {
 		taskConfig = await updateTaskConfig(localStorage.token, taskConfig);
@@ -49,15 +69,24 @@
 	};
 
 	onMount(async () => {
-		taskConfig = await getTaskConfig(localStorage.token);
+        taskConfig = await getTaskConfig(localStorage.token);
+        promptSuggestions = $config?.default_prompt_suggestions ?? [];
 
-		promptSuggestions = $config?.default_prompt_suggestions ?? [];
-		banners = await getBanners(localStorage.token);
-	});
+        while (!document.querySelector('.banners-sortable')) {
+                await new Promise(resolve => globalThis.setTimeout(resolve, 100));
+        }
 
-	const updateBanners = async () => {
-		_banners.set(await setBanners(localStorage.token, banners));
-	};
+        banners = await getBanners(localStorage.token);
+        _banners.set(banners);
+
+        bannersSortable = new Sortable(document.querySelector('.banners-sortable'), {
+                handle: ".flex-1",
+                animation: 300,
+                onSort: (event) => {
+                        updateBanners();
+                },
+        });
+});
 </script>
 
 {#if taskConfig}
@@ -321,12 +350,13 @@
 						</button>
 					</div>
 
-					<div class=" flex flex-col space-y-1">
+					<div class="banners-sortable">
 						{#each banners as banner, bannerIdx}
 							<div class=" flex justify-between">
 								<div
 									class="flex flex-row flex-1 border rounded-xl border-gray-100 dark:border-gray-850"
 								>
+									<input type="hidden" name="id" value={banner.id} />
 									<select
 										class="w-fit capitalize rounded-xl py-2 px-4 text-xs bg-transparent outline-hidden"
 										bind:value={banner.type}

From dd84f5487166e1f7a423d3d4a1f0547218fdfb93 Mon Sep 17 00:00:00 2001
From: Silentoplayz <50341825+Silentoplayz@users.noreply.github.com>
Date: Tue, 25 Feb 2025 16:40:06 -0500
Subject: [PATCH 2/2] Update Interface.svelte

fix
---
 src/lib/components/admin/Settings/Interface.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/lib/components/admin/Settings/Interface.svelte b/src/lib/components/admin/Settings/Interface.svelte
index 644e90dfd..0a9b3cf88 100644
--- a/src/lib/components/admin/Settings/Interface.svelte
+++ b/src/lib/components/admin/Settings/Interface.svelte
@@ -82,9 +82,6 @@
         bannersSortable = new Sortable(document.querySelector('.banners-sortable'), {
                 handle: ".flex-1",
                 animation: 300,
-                onSort: (event) => {
-                        updateBanners();
-                },
         });
 });
 </script>