fix: default pinned models stop applying after a user's first page load (#28069)

Changing "Default Pinned Models" in admin settings had no effect for anyone who had already opened Open WebUI once. The sidebar copied the admin default into that user's own settings the first time it rendered and saved it to the server, which marked them as having customized their pins, so every later change to the default was ignored for them. Merely loading the page was enough, the user never had to touch a pin.

The default is now resolved for display only, through a shared store that falls back to the admin list while the user has no pins of their own, the same way default models already work. Nothing is written to the user's settings until they actually pin, unpin or reorder something, at which point their choice takes over for good. Unpinning everything still persists an empty list rather than snapping back to the default.

Users whose settings were already overwritten by the old behaviour keep that copy, since a stored pin list cannot be told apart from a deliberate one.

Fixes a drag-reorder path that mixed sidebar positions with stored ones, and stops the sidebar section reopening itself after any unrelated settings change.

src/lib/apis/index.ts

@@ -1758,6 +1758,7 @@ export interface ModelConfig {
 export interface ModelMeta {
 	toolIds: never[];
 	description?: string;
+	hidden?: boolean;
 	capabilities?: object;
 	profile_image_url?: string;
 }

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

@@ -7,7 +7,14 @@
 	import { onMount, onDestroy, getContext, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import { config, models as _models, settings, showSettings, user } from '$lib/stores';
+	import {
+		config,
+		models as _models,
+		pinnedModels,
+		settings,
+		showSettings,
+		user
+	} from '$lib/stores';
 	import {
 		createNewModel,
 		deleteAllModels,
@@ -607,15 +614,12 @@
 	};
 
 	const pinModelHandler = async (modelId) => {
-		let pinnedModels = $settings?.pinnedModels ?? [];
-
-		if (pinnedModels.includes(modelId)) {
-			pinnedModels = pinnedModels.filter((id) => id !== modelId);
-		} else {
-			pinnedModels = [...new Set([...pinnedModels, modelId])];
-		}
-
-		settings.set({ ...$settings, pinnedModels: pinnedModels });
+		settings.set({
+			...$settings,
+			pinnedModels: $pinnedModels.includes(modelId)
+				? $pinnedModels.filter((id) => id !== modelId)
+				: [...$pinnedModels, modelId]
+		});
 		await updateUserSettings(localStorage.token, { ui: $settings });
 	};
 

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

@@ -18,7 +18,7 @@
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 	import LockClosed from '$lib/components/icons/LockClosed.svelte';
 
-	import { config, settings } from '$lib/stores';
+	import { config, pinnedModels, settings } from '$lib/stores';
 	import Link from '$lib/components/icons/Link.svelte';
 
 	const i18n = getContext('i18n');
@@ -173,14 +173,14 @@
 				class="select-none flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[0.8125rem] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
 				on:click={() => runAndClose(() => pinModelHandler(model?.id))}
 			>
-				{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+				{#if $pinnedModels.includes(model?.id)}
 					<PinSlash />
 				{:else}
 					<Pin />
 				{/if}
 
 				<div class="flex items-center">
-					{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+					{#if $pinnedModels.includes(model?.id)}
 						{$i18n.t('Hide from Sidebar')}
 					{:else}
 						{$i18n.t('Keep in Sidebar')}

src/lib/components/chat/ModelSelector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { models, settings, user } from '$lib/stores';
+	import { models, pinnedModels, settings, user } from '$lib/stores';
 	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import Selector from './ModelSelector/Selector.svelte';
@@ -35,15 +35,12 @@
 	};
 
 	const pinModelHandler = async (modelId) => {
-		let pinnedModels = $settings?.pinnedModels ?? [];
-
-		if (pinnedModels.includes(modelId)) {
-			pinnedModels = pinnedModels.filter((id) => id !== modelId);
-		} else {
-			pinnedModels = [...new Set([...pinnedModels, modelId])];
-		}
-
-		settings.set({ ...$settings, pinnedModels: pinnedModels });
+		settings.set({
+			...$settings,
+			pinnedModels: $pinnedModels.includes(modelId)
+				? $pinnedModels.filter((id) => id !== modelId)
+				: [...$pinnedModels, modelId]
+		});
 		await updateUserSettings(localStorage.token, { ui: $settings });
 	};
 

src/lib/components/chat/ModelSelector/ModelItemMenu.svelte

@@ -9,7 +9,7 @@
 	import PinSlash from '$lib/components/icons/PinSlash.svelte';
 	import Link from '$lib/components/icons/Link.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
-	import { config, settings, showSettings, user } from '$lib/stores';
+	import { config, pinnedModels, settings, showSettings, user } from '$lib/stores';
 	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
 
 	const i18n = getContext('i18n');
@@ -104,7 +104,7 @@
 
 			<button
 				type="button"
-				aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
+				aria-pressed={$pinnedModels.includes(model?.id)}
 				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[0.8125rem] hover:bg-gray-50/40 dark:hover:bg-gray-800/40 transition"
 				on:click={(e) => {
 					e.stopPropagation();
@@ -114,14 +114,14 @@
 					show = false;
 				}}
 			>
-				{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+				{#if $pinnedModels.includes(model?.id)}
 					<PinSlash className="size-3.5" />
 				{:else}
 					<Pin className="size-3.5" />
 				{/if}
 
 				<div class="flex items-center">
-					{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+					{#if $pinnedModels.includes(model?.id)}
 						{$i18n.t('Hide from Sidebar')}
 					{:else}
 						{$i18n.t('Keep in Sidebar')}

src/lib/components/layout/Sidebar.svelte

@@ -22,7 +22,7 @@
 		socket,
 		config,
 		isApp,
-		models,
+		visiblePinnedModels,
 		selectedFolder,
 		WEBUI_NAME,
 		sidebarWidth
@@ -120,9 +120,7 @@
 
 	let showCreateFolderModal = false;
 
-	let pinnedModels = [];
-
-	let showPinnedModels = false;
+	let showPinnedModels = true;
 	let showPinnedNotes = false;
 	let showChannels = false;
 	let showFolders = false;
@@ -683,12 +681,6 @@
 						navElement.style['-webkit-app-region'] = 'drag';
 					}
 				}
-			}),
-			settings.subscribe((value) => {
-				if (pinnedModels != value?.pinnedModels ?? []) {
-					pinnedModels = value?.pinnedModels ?? [];
-					showPinnedModels = pinnedModels.length > 0;
-				}
 			})
 		];
 
@@ -1285,7 +1277,7 @@
 						</div>
 					</div>
 
-					{#if ($models ?? []).length > 0 && (($settings?.pinnedModels ?? []).length > 0 || $config?.default_pinned_models)}
+					{#if $visiblePinnedModels.length > 0}
 						<SidebarSection
 							id="sidebar-models"
 							bind:open={showPinnedModels}

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

@@ -1,18 +1,23 @@
 <script>
 	import Sortable from 'sortablejs';
 
-	import { onDestroy, onMount, tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
 
-	import { chatId, config, mobile, models, settings, showSidebar } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import {
+		chatId,
+		mobile,
+		models,
+		pinnedModels,
+		settings,
+		showSidebar,
+		visiblePinnedModels
+	} from '$lib/stores';
 	import { updateUserSettings } from '$lib/apis/users';
 	import PinnedModelItem from './PinnedModelItem.svelte';
 
 	export let selectedChatId = null;
 	export let shiftKey = false;
 
-	let pinnedModels = [];
-
 	const initPinnedModelsSortable = () => {
 		const pinnedModelsList = document.getElementById('pinned-models-list');
 		if (pinnedModelsList && !$mobile) {
@@ -28,91 +33,49 @@
 					);
 				},
 				onUpdate: async (event) => {
-					const modelId = event.item.dataset.id;
-					const newIndex = event.newIndex;
+					const reorderedIds = [...$visiblePinnedModels];
+					const [movedId] = reorderedIds.splice(event.oldIndex, 1);
+					reorderedIds.splice(event.newIndex, 0, movedId);
 
-					const pinnedModels = $settings.pinnedModels;
-					const oldIndex = pinnedModels.indexOf(modelId);
-
-					pinnedModels.splice(oldIndex, 1);
-					pinnedModels.splice(newIndex, 0, modelId);
-
-					settings.set({ ...$settings, pinnedModels: pinnedModels });
+					// Keep pins for models the user cannot see
+					settings.set({
+						...$settings,
+						pinnedModels: [
+							...reorderedIds,
+							...$pinnedModels.filter((id) => !$visiblePinnedModels.includes(id))
+						]
+					});
 					await updateUserSettings(localStorage.token, { ui: $settings });
 				}
 			});
 		}
 	};
 
-	let unsubscribeSettings;
-
-	const cleanupStalePinnedModels = async (modelIds) => {
-		const validModels = modelIds.filter((id) => {
-			const model = $models.find((m) => m.id === id);
-			// Remove if model not found (deleted) or if hidden
-			return model && !(model?.info?.meta?.hidden ?? false);
-		});
-
-		if (validModels.length !== modelIds.length) {
-			pinnedModels = validModels;
-			settings.set({ ...$settings, pinnedModels: validModels });
-			await updateUserSettings(localStorage.token, { ui: $settings });
-		}
-	};
-
 	onMount(async () => {
-		pinnedModels = $settings?.pinnedModels ?? [];
-
-		if (pinnedModels.length === 0 && $config?.default_pinned_models) {
-			const defaultPinnedModels = ($config?.default_pinned_models).split(',').filter((id) => id);
-			pinnedModels = defaultPinnedModels.filter((id) => $models.find((model) => model.id === id));
-
-			settings.set({ ...$settings, pinnedModels });
-			await updateUserSettings(localStorage.token, { ui: $settings });
-		}
-
-		// Auto-unpin hidden or deleted models
-		if (pinnedModels.length > 0) {
-			await cleanupStalePinnedModels(pinnedModels);
-		}
-
-		unsubscribeSettings = settings.subscribe((value) => {
-			pinnedModels = value?.pinnedModels ?? [];
-		});
-
 		await tick();
 		initPinnedModelsSortable();
 	});
-
-	onDestroy(() => {
-		if (unsubscribeSettings) {
-			unsubscribeSettings();
-		}
-	});
 </script>
 
 <div class="mt-0.5 pb-1.5" id="pinned-models-list">
-	{#each pinnedModels as modelId (modelId)}
-		{@const model = $models.find((model) => model.id === modelId)}
-		{#if model}
-			<PinnedModelItem
-				{model}
-				{shiftKey}
-				onClick={() => {
-					selectedChatId = null;
-					chatId.set('');
-					if ($mobile) {
-						showSidebar.set(false);
-					}
-				}}
-				onUnpin={($settings?.pinnedModels ?? []).includes(modelId)
-					? () => {
-							const pinnedModels = $settings.pinnedModels.filter((id) => id !== modelId);
-							settings.set({ ...$settings, pinnedModels });
-							updateUserSettings(localStorage.token, { ui: $settings });
-						}
-					: null}
-			/>
-		{/if}
+	{#each $visiblePinnedModels as modelId (modelId)}
+		<PinnedModelItem
+			model={$models.find((model) => model.id === modelId)}
+			{shiftKey}
+			onClick={() => {
+				selectedChatId = null;
+				chatId.set('');
+				if ($mobile) {
+					showSidebar.set(false);
+				}
+			}}
+			onUnpin={() => {
+				settings.set({
+					...$settings,
+					pinnedModels: $pinnedModels.filter((id) => id !== modelId)
+				});
+				updateUserSettings(localStorage.token, { ui: $settings });
+			}}
+		/>
 	{/each}
 </div>

src/lib/components/workspace/Models.svelte

@@ -17,6 +17,7 @@
 		config,
 		mobile,
 		models as _models,
+		pinnedModels,
 		settings,
 		user,
 		workspaceActions
@@ -292,15 +293,12 @@
 	};
 
 	const pinModelHandler = async (modelId) => {
-		let pinnedModels = $settings?.pinnedModels ?? [];
-
-		if (pinnedModels.includes(modelId)) {
-			pinnedModels = pinnedModels.filter((id) => id !== modelId);
-		} else {
-			pinnedModels = [...new Set([...pinnedModels, modelId])];
-		}
-
-		settings.set({ ...$settings, pinnedModels: pinnedModels });
+		settings.set({
+			...$settings,
+			pinnedModels: $pinnedModels.includes(modelId)
+				? $pinnedModels.filter((id) => id !== modelId)
+				: [...$pinnedModels, modelId]
+		});
 		await updateUserSettings(localStorage.token, { ui: $settings });
 	};
 

src/lib/components/workspace/Models/ModelMenu.svelte

@@ -15,7 +15,7 @@
 	import Pin from '$lib/components/icons/Pin.svelte';
 	import PinSlash from '$lib/components/icons/PinSlash.svelte';
 
-	import { config, user as currentUser, settings } from '$lib/stores';
+	import { config, user as currentUser, pinnedModels, settings } from '$lib/stores';
 	import Link from '$lib/components/icons/Link.svelte';
 
 	const i18n = getContext('i18n');
@@ -131,14 +131,14 @@
 				class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-[0.8125rem] hover:text-gray-900 dark:hover:text-gray-100"
 				on:click={() => runAndClose(() => pinModelHandler(model?.id))}
 			>
-				{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+				{#if $pinnedModels.includes(model?.id)}
 					<PinSlash />
 				{:else}
 					<Pin />
 				{/if}
 
 				<div class="flex items-center">
-					{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
+					{#if $pinnedModels.includes(model?.id)}
 						{$i18n.t('Hide from Sidebar')}
 					{:else}
 						{$i18n.t('Keep in Sidebar')}

src/lib/stores/index.ts

@@ -1,5 +1,5 @@
 import { APP_NAME } from '$lib/constants';
-import { type Writable, writable } from 'svelte/store';
+import { type Writable, derived, writable } from 'svelte/store';
 import type { ModelConfig } from '$lib/apis';
 import type { Banner } from '$lib/types';
 import type { Socket } from 'socket.io-client';
@@ -103,6 +103,20 @@ export const banners: Writable<Banner[]> = writable([]);
 
 export const settings: Writable<Settings> = writable({});
 
+// Users who never pinned a model follow the admin default, so changes to it keep reaching them
+export const pinnedModels = derived([settings, config], ([$settings, $config]) =>
+	$settings?.pinnedModels === undefined
+		? ($config?.default_pinned_models ?? '').split(',').filter((id) => id)
+		: $settings.pinnedModels
+);
+
+// Pins for models the user cannot see are kept in their settings but left out of the sidebar
+export const visiblePinnedModels = derived([pinnedModels, models], ([$pinnedModels, $models]) =>
+	$pinnedModels.filter((id) =>
+		$models.some((model) => model.id === id && !model.info?.meta?.hidden)
+	)
+);
+
 export const audioQueue = writable<AudioQueue | null>(null);
 export const chatRequestQueues: Writable<
 	Record<string, { id: string; prompt: string; files: any[] }[]>
@@ -200,7 +214,7 @@ type OllamaModelDetails = {
 };
 
 type Settings = {
-	pinnedModels?: never[];
+	pinnedModels?: string[];
 	toolServers?: never[];
 	detectArtifacts?: boolean;
 	showUpdateToast?: boolean;
@@ -310,6 +324,7 @@ type Config = {
 	version: string;
 	default_locale: string;
 	default_models: string;
+	default_pinned_models?: string | null;
 	default_prompt_suggestions: PromptSuggestion[];
 	features: {
 		auth: boolean;