From 035ee3982a68df99e657943803d6ea47cd0756bf Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 28 Sep 2026 11:17:12 +0200
Subject: [PATCH] ui : offer manage models from the selector footer

The reasoning panel used to sit in the selector's sticky footer, and the
slot is empty now. It carries Manage models instead, in the dropdown and at
the foot of the mobile sheet, which closes the selector and then opens the
manager so the dialog takes focus cleanly.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../ModelsManager/ModelsManagerFilters.svelte |  2 +-
 .../ModelsSelectorDropdown.svelte             | 23 +++++++++++++++++--
 .../ModelsSelector/ModelsSelectorSheet.svelte | 23 +++++++++++++++++--
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
index 7c0eacff02..bd8c1a6d55 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerFilters.svelte
@@ -171,7 +171,7 @@
 	<!-- a checkbox chip: the whole pill is the control, the box is its indicator -->
 	<Toggle
 		bind:pressed={draft}
-		class="inline-flex items-center whitespace-nowrap {FILTER_TRIGGER_CLASS}"
+		class="inline-flex items-center whitespace-nowrap {FILTER_TRIGGER_CLASS} px-2!"
 		variant="outline"
 	>
 		<span
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
index b57d789187..194f28ee6c 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
-	import { ChevronDown, Loader2 } from '@lucide/svelte';
+	import { Box, ChevronDown, Loader2 } from '@lucide/svelte';
 	import {
 		DropdownMenuSearchable,
 		ModelId,
@@ -19,7 +19,7 @@
 	} from '$lib/constants';
 	import { KeyboardKey, ServerModelStatus } from '$lib/enums';
 	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
-	import { modelsStore, settingsStore } from '$lib/stores';
+	import { modelsStore, settingsStore, uiStore } from '$lib/stores';
 	import { modelLoadFraction } from '$lib/utils';
 	import { rawModelId } from '$lib/utils/model-option-id';
 
@@ -133,6 +133,13 @@
 		highlightedId = visualOrder[index];
 	}
 
+	function handleManageModels() {
+		isOpen = false;
+
+		// let the menu finish closing before the dialog takes focus
+		setTimeout(() => uiStore.openModelsManager(), 0);
+	}
+
 	function handleAddBackend() {
 		isOpen = false;
 
@@ -364,6 +371,18 @@
 								{showOrgName}
 							/>
 						</div>
+
+						{#snippet footer()}
+							<!-- Sticky action footer: it sticks to the bottom of the content
+							     scrollport, past the option list. -->
+							<DropdownMenu.Group class="px-2">
+								<DropdownMenu.Item class="gap-2" onSelect={handleManageModels}>
+									<Box class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+
+									Manage models
+								</DropdownMenu.Item>
+							</DropdownMenu.Group>
+						{/snippet}
 					</DropdownMenuSearchable>
 				</DropdownMenu.Content>
 			</DropdownMenu.Root>
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
index a576822e38..a42c6857bd 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorSheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ModelLoadHighlight from '../ModelLoadHighlight.svelte';
-	import { ChevronDown, Loader2 } from '@lucide/svelte';
+	import { Box, ChevronDown, Loader2 } from '@lucide/svelte';
 	import {
 		ModelId,
 		ModelsSelectorList,
@@ -12,7 +12,7 @@
 	import { SETTINGS_KEYS } from '$lib/constants';
 	import { ServerModelStatus } from '$lib/enums';
 	import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
-	import { modelsStore, settingsStore } from '$lib/stores';
+	import { modelsStore, settingsStore, uiStore } from '$lib/stores';
 	import { modelLoadFraction } from '$lib/utils';
 
 	interface Props {
@@ -67,6 +67,13 @@
 		}
 	}
 
+	function handleManageModels() {
+		sheetOpen = false;
+
+		// let the sheet finish closing before the dialog takes focus
+		setTimeout(() => uiStore.openModelsManager(), 0);
+	}
+
 	function handleAddBackend() {
 		sheetOpen = false;
 
@@ -201,6 +208,18 @@
 								{showOrgName}
 							/>
 						</div>
+
+						<div class="px-2 pb-1">
+							<button
+								class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent"
+								onclick={handleManageModels}
+								type="button"
+							>
+								<Box class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+
+								Manage models
+							</button>
+						</div>
 					</div>
 				</Sheet.Content>
 			</Sheet.Root>