enh: shift unpin pinned models

src/lib/components/layout/Sidebar/PinnedModelList.svelte

@@ -6,8 +6,10 @@
 	import { chatId, mobile, models, settings, showSidebar } from '$lib/stores';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { updateUserSettings } from '$lib/apis/users';
+	import PinnedModelItem from './PinnedModelItem.svelte';
 
 	export let selectedChatId = null;
+	export let shiftKey = false;
 
 	const initPinnedModelsSortable = () => {
 		const pinnedModelsList = document.getElementById('pinned-models-list');
@@ -40,39 +42,22 @@
 	{#each $settings.pinnedModels as modelId (modelId)}
 		{@const model = $models.find((model) => model.id === modelId)}
 		{#if model}
-			<div
-				class="px-[7px] 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}"
-					on:click={() => {
-						selectedChatId = null;
-						chatId.set('');
-
-						if ($mobile) {
-							showSidebar.set(false);
-						}
-					}}
-					draggable="false"
-				>
-					<div class="self-center shrink-0">
-						<img
-							crossorigin="anonymous"
-							src={model?.info?.meta?.profile_image_url ?? `${WEBUI_BASE_URL}/static/favicon.png`}
-							class=" size-5 rounded-full -translate-x-[0.5px]"
-							alt="logo"
-						/>
-					</div>
-
-					<div class="flex self-center translate-y-[0.5px]">
-						<div class=" self-center text-sm font-primary line-clamp-1">
-							{model?.name ?? modelId}
-						</div>
-					</div>
-				</a>
-			</div>
+			<PinnedModelItem
+				{model}
+				{shiftKey}
+				onClick={() => {
+					selectedChatId = null;
+					chatId.set('');
+					if ($mobile) {
+						showSidebar.set(false);
+					}
+				}}
+				onUnpin={() => {
+					const pinnedModels = $settings.pinnedModels.filter((id) => id !== modelId);
+					settings.set({ ...$settings, pinnedModels });
+					updateUserSettings(localStorage.token, { ui: $settings });
+				}}
+			/>
 		{/if}
 	{/each}
 </div>