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

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

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>

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>