Merge pull request #16115 from silentoplayz/draggable-pinned-models

feat: allow draggable reorganization of pinned models in chat sidebar

src/lib/components/layout/Sidebar.svelte

@@ -59,6 +59,8 @@
 	import Search from '../icons/Search.svelte';
 	import SearchModal from './SearchModal.svelte';
 	import FolderModal from './Sidebar/Folders/FolderModal.svelte';
+	import Sortable from 'sortablejs';
+	import { updateUserSettings } from '$lib/apis/users';
 
 	const BREAKPOINT = 768;
 
@@ -79,6 +81,28 @@
 	let folders = {};
 	let newFolderId = null;
 
+	const initPinnedModelsSortable = () => {
+		const pinnedModelsList = document.getElementById('pinned-models-list');
+		if (pinnedModelsList) {
+			new Sortable(pinnedModelsList, {
+				animation: 150,
+				onUpdate: async (event) => {
+					const modelId = event.item.dataset.id;
+					const newIndex = event.newIndex;
+
+					const pinnedModels = $settings.pinnedModels;
+					const oldIndex = pinnedModels.indexOf(modelId);
+
+					pinnedModels.splice(oldIndex, 1);
+					pinnedModels.splice(newIndex, 0, modelId);
+
+					settings.set({ ...$settings, pinnedModels: pinnedModels });
+					await updateUserSettings(localStorage.token, { ui: $settings });
+				}
+			});
+		}
+	};
+
 	const initFolders = async () => {
 		const folderList = await getFolders(localStorage.token).catch((error) => {
 			toast.error(`${error}`);
@@ -373,6 +397,7 @@
 
 		await initChannels();
 		await initChatList();
+		initPinnedModelsSortable();
 
 		window.addEventListener('keydown', onKeyDown);
 		window.addEventListener('keyup', onKeyUp);
@@ -673,12 +698,15 @@
 		{/if}
 
 		<div class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+			<div class="mt-0.5" id="pinned-models-list">
 				{#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0}
-				<div class="mt-0.5">
 					{#each $settings.pinnedModels as modelId (modelId)}
 						{@const model = $models.find((model) => model.id === modelId)}
 						{#if model}
-							<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+							<div
+								class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200 cursor-grab"
+								data-id={modelId}
+							>
 								<a
 									class="grow flex items-center space-x-2.5 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 									href="/?model={modelId}"
@@ -711,8 +739,8 @@
 							</div>
 						{/if}
 					{/each}
-				</div>
 				{/if}
+			</div>
 
 			{#if $config?.features?.enable_channels && ($user?.role === 'admin' || $channels.length > 0)}
 				<Folder