From 55fe4b2aa40b4f61ddeff5bae0d8335afaf27ef3 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 2 Sep 2026 12:40:07 +0200
Subject: [PATCH] ui : move the discover models entry to the sidebar

Replace the selector dropdown footer entry with a sidebar action that opens the discover dialog.

Assisted-by: pi:zai-org/GLM-5.3
---
 .../app/models/ModelsSelectorDropdown.svelte  | 18 ++------
 .../navigation/DropdownMenuSearchable.svelte  |  4 +-
 .../SidebarNavigation.svelte                  |  5 ++
 .../SidebarNavigationActions.svelte           | 46 +++++++++++--------
 tools/ui/src/lib/constants/ui.constants.ts    |  7 ++-
 tools/ui/src/lib/enums/ui.enums.ts            |  1 +
 6 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
index bc534230b9..581e535b12 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import ModelLoadHighlight from './ModelLoadHighlight.svelte';
-	import { ChevronDown, Lightbulb, Loader2, PackageSearch } from '@lucide/svelte';
+	import { ChevronDown, Lightbulb, Loader2 } from '@lucide/svelte';
 	import {
 		DialogModelInformation,
-		DialogModelsDiscover,
 		DropdownMenuSearchable,
 		ModelId,
 		ModelsSelectorList,
@@ -40,7 +39,6 @@
 
 	let isOpen = $state(false);
 	let highlightedId = $state<string | null>(null);
-	let modelsHubOpen = $state(false);
 
 	const ms = useModelsSelector({
 		currentModel: () => currentModel,
@@ -329,19 +327,11 @@
 						</div>
 
 						{#snippet footer()}
-							<!-- Sticky actions footer: reasoning effort panel and discover
-							     models. Sticks to the bottom of the content scrollport. -->
+							<!-- Sticky actions footer: reasoning effort panel.
+							     Sticks to the bottom of the content scrollport. -->
 							<div onfocusin={clearHighlight} onmouseenter={clearHighlight} role="none">
 								<ModelsSelectorReasoningPanel />
 
-								<DropdownMenu.Item
-									class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent"
-									onclick={() => (modelsHubOpen = true)}
-								>
-									<PackageSearch class="h-4 w-4 shrink-0 text-muted-foreground" />
-
-									<span>Discover models</span>
-								</DropdownMenu.Item>
 							</div>
 						{/snippet}
 					</DropdownMenuSearchable>
@@ -408,5 +398,3 @@
 		open={ms.showModelDialog}
 	/>
 {/if}
-
-<DialogModelsDiscover bind:open={modelsHubOpen} />
diff --git a/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte b/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
index cead390fa1..b20e086a46 100644
--- a/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
+++ b/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
@@ -58,8 +58,8 @@
 
 {#if footer}
 	<!-- Sticks to the bottom of the dropdown content's scrollport. -->
-	<div class="sticky bottom-0 z-20 bg-popover px-1 pb-2">
-		<div class="-mx-1 mb-1 h-px bg-border/20"></div>
+	<div class="sticky bottom-0 z-20 bg-popover py-1.5">
+		<div class="h-px bg-border/20 mb-1.5 mx-1.5"></div>
 
 		{@render footer()}
 	</div>
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 8bf12279e3..156229dc5b 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -5,6 +5,7 @@
 	import {
 		ActionIcon,
 		DialogConversationRename,
+		DialogModelsDiscover,
 		DialogSettingsChat,
 		Logo,
 		SidebarNavigationActions,
@@ -93,6 +94,7 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
+	let modelsHubOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
 	let renameOriginalTitle = $state('');
@@ -402,6 +404,7 @@
 					isSearchModeActive = false;
 					searchQuery = '';
 				}}
+				onDiscoverModelsClick={() => (modelsHubOpen = true)}
 				onSettingsClick={() => (settingsDialogOpen = true)}
 			/>
 
@@ -452,6 +455,8 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
+<DialogModelsDiscover bind:open={modelsHubOpen} />
+
 <style>
 	aside {
 		@media (max-width: 768px) {
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 6bc2ca2d7f..d33ac57e97 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigationActions.svelte
@@ -26,6 +26,7 @@
 		onSearchDeactivated?: () => void;
 		onSearchClick?: () => void;
 		onNewChat?: () => void;
+		onDiscoverModelsClick?: () => void;
 		onSettingsClick?: () => void;
 	}
 
@@ -34,6 +35,7 @@
 		isExpandedMode = false,
 		isSearchModeActive = $bindable(false),
 		onNewChat,
+		onDiscoverModelsClick,
 		onSearchClick,
 		onSearchDeactivated,
 		onSettingsClick,
@@ -117,16 +119,18 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.action === SidebarAction.SETTINGS
-						? () => onSettingsClick?.()
-						: item.route
-							? () => {
-									onNewChat?.();
-									goto(item.route!);
-								}
-							: isSearchOnMobile
-								? undefined
-								: onSearchClick}
+					: item.action === SidebarAction.DISCOVER_MODELS
+						? () => onDiscoverModelsClick?.()
+						: 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,
@@ -173,16 +177,18 @@
 							onNewChat?.();
 							void conversationsStore.openNewChat();
 						}
-					: item.action === SidebarAction.SETTINGS
-						? () => onSettingsClick?.()
-						: item.route
-							? () => {
-									onNewChat?.();
-									goto(item.route!);
-								}
-							: isSearchOnMobile
-								? undefined
-								: onSearchClick}
+					: item.action === SidebarAction.DISCOVER_MODELS
+						? () => onDiscoverModelsClick?.()
+						: 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 20696f987d..4140abfb52 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,4 +1,4 @@
-import { Package, Search, Settings, SquarePen } from '@lucide/svelte';
+import { Package, PackageSearch, Search, Settings, SquarePen } from '@lucide/svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -64,6 +64,11 @@ 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.SETTINGS,
 		icon: Settings,
diff --git a/tools/ui/src/lib/enums/ui.enums.ts b/tools/ui/src/lib/enums/ui.enums.ts
index 4eda1d6911..2d70478cc3 100644
--- a/tools/ui/src/lib/enums/ui.enums.ts
+++ b/tools/ui/src/lib/enums/ui.enums.ts
@@ -24,6 +24,7 @@ export enum ScrollCarouselVariant {
  */
 export enum SidebarAction {
 	NEW_CHAT = 'new-chat',
+	DISCOVER_MODELS = 'discover-models',
 	SETTINGS = 'settings'
 }