ui : strip the manage models chrome and match the discover shell

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash

tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	import { Logo } from '$lib/components/app/misc';
 	import ModelsManager from '$lib/components/app/models/ModelsManager/ModelsManager.svelte';
 	import * as Dialog from '$lib/components/ui/dialog';
 
 	interface Props {
-		onOpenDiscover?: () => void;
 		open?: boolean;
 		onOpenChange?: (open: boolean) => void;
 	}
 
-	let { onOpenChange, onOpenDiscover, open = $bindable(false) }: Props = $props();
+	let { onOpenChange, open = $bindable(false) }: Props = $props();
 
 	function handleOpenChange(value: boolean) {
 		open = value;
@@ -19,18 +17,10 @@
 
 <Dialog.Root onOpenChange={handleOpenChange} {open}>
 	<Dialog.Content
-		class="flex flex-col md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-380! md:overflow-hidden"
+		class="grid gap-0 p-0 md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-380! md:overflow-hidden"
 	>
-		<Dialog.Header>
-			<Dialog.Title class="flex items-center gap-2">
-				<Logo class="h-5 w-5" style="--size: 1.25rem" />
+		<Dialog.Title class="sr-only">Manage models</Dialog.Title>
 
-				<span>Manage models</span>
-			</Dialog.Title>
-
-			<Dialog.Description>Model management goes here.</Dialog.Description>
-		</Dialog.Header>
-
-		<ModelsManager {onOpenDiscover} />
+		<ModelsManager />
 	</Dialog.Content>
 </Dialog.Root>

tools/ui/src/lib/components/app/models/ModelsManager/ModelsManager.svelte

@@ -21,10 +21,9 @@
 
 	interface Props {
 		onClose?: () => void;
-		onOpenDiscover?: () => void;
 	}
 
-	let { onClose, onOpenDiscover }: Props = $props();
+	let { onClose }: Props = $props();
 
 	let filter = $state('');
 	let selectedId = $state<string | null>(null);
@@ -187,14 +186,12 @@
 			{groups}
 			{isFavorite}
 			onCopyId={copyId}
-			onGetModels={() => onOpenDiscover?.()}
 			onSelect={(option) => (selectedId = option.id)}
 			onToggleFavorite={toggleFavorite}
 			onToggleLoad={(option) => void toggleLoad(option)}
 			onUseInNewChat={(option) => void useInNewChat(option)}
 			{selectedId}
 			{summary}
-			title="All models"
 		/>
 	</div>
 

tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ModelsTableGroup } from './utils';
 	import { modelParamsLabel, modelSizeLabel } from './utils';
-	import { ArrowUpDown, Heart, Loader2, MoreHorizontal, Plus } from '@lucide/svelte';
+	import { Heart, Loader2, MoreHorizontal } from '@lucide/svelte';
 	import { ModelAvatar, ModelId, ModelsSection } from '$lib/components/app';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
@@ -15,14 +15,12 @@
 		groups: ModelsTableGroup[];
 		isFavorite: (option: ModelOption) => boolean;
 		onCopyId: (option: ModelOption) => void;
-		onGetModels: () => void;
 		onSelect: (option: ModelOption) => void;
 		onToggleFavorite: (option: ModelOption) => void;
 		onToggleLoad: (option: ModelOption) => void;
 		onUseInNewChat: (option: ModelOption) => void;
 		selectedId: string | null;
 		summary: string;
-		title: string;
 	}
 
 	let {
@@ -30,25 +28,15 @@
 		groups,
 		isFavorite,
 		onCopyId,
-		onGetModels,
 		onSelect,
 		onToggleFavorite,
 		onToggleLoad,
 		onUseInNewChat,
 		selectedId,
-		summary,
-		title
+		summary
 	}: Props = $props();
 
-	let descending = $state(false);
-	let sortedGroups = $derived(
-		groups.map((group) => {
-			const items = [...group.items].sort((a, b) => a.name.localeCompare(b.name));
-
-			return { ...group, items: descending ? items.reverse() : items };
-		})
-	);
-	let isEmpty = $derived(sortedGroups.every((group) => group.items.length === 0));
+	let isEmpty = $derived(groups.every((group) => group.items.length === 0));
 	const rowGrid = 'grid grid-cols-[3.5rem_minmax(0,1fr)_5.5rem_3rem_4.5rem] items-center gap-3';
 
 	function stateOf(option: ModelOption): ServerModelStatus | null {
@@ -170,30 +158,10 @@
 {/snippet}
 
 <div class="flex h-full min-h-0 flex-col">
-	<div class="flex shrink-0 items-center gap-2 px-4 pt-3 pb-2">
-		<h3 class="text-sm font-medium">{title}</h3>
+	<div class="flex shrink-0 items-center gap-2 px-4 py-3">
+		<Input bind:value={filter} class="h-8 max-w-64 text-sm" placeholder="Filter models..." />
 
 		<span class="ml-auto text-xs text-muted-foreground">{summary}</span>
-
-		<Button class="h-7 gap-1 px-2 text-xs" onclick={onGetModels} variant="ghost">
-			<Plus class="h-3.5 w-3.5" />
-
-			Get models
-		</Button>
-
-		<Button
-			aria-label="Sort by name"
-			class="h-7 w-7"
-			onclick={() => (descending = !descending)}
-			size="icon"
-			variant="ghost"
-		>
-			<ArrowUpDown class="h-3.5 w-3.5" />
-		</Button>
-	</div>
-
-	<div class="flex shrink-0 items-center gap-2 px-4 pb-3">
-		<Input bind:value={filter} class="h-8 max-w-64 text-sm" placeholder="Filter models..." />
 	</div>
 
 	<div
@@ -211,7 +179,7 @@
 	</div>
 
 	<div class="min-h-0 flex-1 overflow-y-auto py-2">
-		{#each sortedGroups as group (group.key)}
+		{#each groups as group (group.key)}
 			{#if group.items.length > 0}
 				<ModelsSection
 					backendId={group.backendId ?? undefined}

tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte

@@ -458,13 +458,7 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
-<DialogManageModels
-	bind:open={manageModelsOpen}
-	onOpenDiscover={() => {
-		manageModelsOpen = false;
-		modelsDiscoverOpen = true;
-	}}
-/>
+<DialogManageModels bind:open={manageModelsOpen} />
 
 <DialogModelsDiscover bind:open={modelsDiscoverOpen} />