From b262c2d2273fac7ce2d232b6d82074f48d3fabe3 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 23 Sep 2026 14:30:09 +0200
Subject: [PATCH] ui : use the box icon and move discover into the manager
 header

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/dialogs/DialogManageModels.svelte     | 14 +++--
 .../SidebarNavigation.svelte                  |  4 +-
 .../SidebarNavigationActions.svelte           | 54 +++++++++----------
 tools/ui/src/lib/constants/ui.constants.ts    |  9 +---
 tools/ui/src/lib/stores/ui.svelte.ts          |  5 ++
 5 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
index 0b5eaa4088..b09d57cadf 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { Logo } from '$lib/components/app/misc';
+	import { Box, PackageSearch } from '@lucide/svelte';
 	import ModelsManager from '$lib/components/app/models/ModelsManager/ModelsManager.svelte';
+	import { Button } from '$lib/components/ui/button';
 	import * as Dialog from '$lib/components/ui/dialog';
+	import { uiStore } from '$lib/stores';
 
 	interface Props {
 		open?: boolean;
@@ -20,12 +22,18 @@
 	<Dialog.Content
 		class="md:h-[calc(100vh-4rem)]! md:max-h-240! md:w-[calc(100vw-4rem)]! md:max-w-360! flex flex-col p-4"
 	>
-		<Dialog.Header class="p-2">
+		<Dialog.Header class="flex flex-row items-center justify-between p-2 pr-8">
 			<Dialog.Title class="flex items-center gap-2">
-				<Logo class="h-5 w-5" style="--size: 1.25rem" />
+				<Box class="h-5 w-5" />
 
 				<span>Manage models</span>
 			</Dialog.Title>
+
+			<Button onclick={() => uiStore.openDiscoverModels()} size="sm" variant="outline">
+				<PackageSearch class="h-3.5 w-3.5" />
+
+				Discover models
+			</Button>
 		</Dialog.Header>
 
 		<ModelsManager class="mt-4" />
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
index 7fc78ce89f..832928c616 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -95,7 +95,6 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
-	let modelsDiscoverOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
 	let renameOriginalTitle = $state('');
@@ -392,7 +391,6 @@
 				bind:searchQuery
 				class="px-2"
 				isExpandedMode={innerWidth > 768 ? uiStore.isSidebarExpanded : true}
-				onDiscoverModelsClick={() => (modelsDiscoverOpen = true)}
 				onManageModelsClick={() => uiStore.openModelsManager()}
 				onNewChat={() => {
 					if (deviceStore.isMobile) {
@@ -459,7 +457,7 @@
 
 <DialogManageModels bind:open={uiStore.manageModelsOpen} />
 
-<DialogModelsDiscover bind:open={modelsDiscoverOpen} />
+<DialogModelsDiscover bind:open={uiStore.discoverModelsOpen} />
 
 <style>
 	aside {
diff --git a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
index 53dbbafa1d..55b5423a37 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
@@ -25,7 +25,6 @@
 		searchQuery: string;
 		onSearchDeactivated?: () => void;
 		onSearchClick?: () => void;
-		onDiscoverModelsClick?: () => void;
 		onManageModelsClick?: () => void;
 		onNewChat?: () => void;
 		onSettingsClick?: () => void;
@@ -35,7 +34,6 @@
 		class: className,
 		isExpandedMode = false,
 		isSearchModeActive = $bindable(false),
-		onDiscoverModelsClick,
 		onManageModelsClick,
 		onNewChat,
 		onSearchClick,
@@ -123,20 +121,18 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.action === SidebarAction.DISCOVER_MODELS
-						? () => onDiscoverModelsClick?.()
-						: item.action === SidebarAction.MANAGE_MODELS
-							? () => onManageModelsClick?.()
-							: item.action === SidebarAction.SETTINGS
-								? () => onSettingsClick?.()
-								: item.route
-									? () => {
-											onNewChat?.();
-											goto(item.route!);
-										}
-									: isSearchOnMobile
-										? undefined
-										: onSearchClick}
+					: item.action === SidebarAction.MANAGE_MODELS
+						? () => onManageModelsClick?.()
+						: item.action === SidebarAction.SETTINGS
+							? () => onSettingsClick?.()
+							: item.route
+								? () => {
+										onNewChat?.();
+										goto(item.route!);
+									}
+								: isSearchOnMobile
+									? undefined
+									: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,
@@ -183,20 +179,18 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.action === SidebarAction.DISCOVER_MODELS
-						? () => onDiscoverModelsClick?.()
-						: item.action === SidebarAction.MANAGE_MODELS
-							? () => onManageModelsClick?.()
-							: item.action === SidebarAction.SETTINGS
-								? () => onSettingsClick?.()
-								: item.route
-									? () => {
-											onNewChat?.();
-											goto(item.route!);
-										}
-									: isSearchOnMobile
-										? undefined
-										: onSearchClick}
+					: item.action === SidebarAction.MANAGE_MODELS
+						? () => onManageModelsClick?.()
+						: item.action === SidebarAction.SETTINGS
+							? () => onSettingsClick?.()
+							: item.route
+								? () => {
+										onNewChat?.();
+										goto(item.route!);
+									}
+								: isSearchOnMobile
+									? undefined
+									: onSearchClick}
 			{@const itemTransition = {
 				delay: !initialized ? i * ICON_STRIP_TRANSITION_DELAY_MULTIPLIER : 0,
 				duration: ICON_STRIP_TRANSITION_DURATION,
diff --git a/tools/ui/src/lib/constants/ui.constants.ts b/tools/ui/src/lib/constants/ui.constants.ts
index d994c5a01e..f1b3d10aaf 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,4 +1,4 @@
-import { Cog, Package, PackageSearch, Search, Settings, SquarePen } from '@lucide/svelte';
+import { Box, Package, Search, Settings, SquarePen } from '@lucide/svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -81,14 +81,9 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 		tooltip: 'New chat'
 	},
 	{ icon: Search, keys: ['cmd', 'k'], tooltip: 'Search' },
-	{
-		action: SidebarAction.DISCOVER_MODELS,
-		icon: PackageSearch,
-		tooltip: 'Discover models'
-	},
 	{
 		action: SidebarAction.MANAGE_MODELS,
-		icon: Cog,
+		icon: Box,
 		tooltip: 'Manage models'
 	},
 	{
diff --git a/tools/ui/src/lib/stores/ui.svelte.ts b/tools/ui/src/lib/stores/ui.svelte.ts
index 3bfcdf32d3..4b481d0b85 100644
--- a/tools/ui/src/lib/stores/ui.svelte.ts
+++ b/tools/ui/src/lib/stores/ui.svelte.ts
@@ -7,12 +7,17 @@
  */
 
 class UiStore {
+	discoverModelsOpen = $state(false);
+
 	/** Whether the desktop sidebar is expanded (open). */
 	isSidebarExpanded = $state(false);
 	/** Model the manager reveals when it opens, a qualified id or a raw model name. */
 	manageModelFocus = $state<string | null>(null);
 	/** Open state of the models manager, driven from the sidebar and from model rows. */
 	manageModelsOpen = $state(false);
+	openDiscoverModels(): void {
+		this.discoverModelsOpen = true;
+	}
 
 	/** Open the models manager, optionally focused on one model. */
 	openModelsManager(focus?: string): void {