From 4d992dbe053e8d508c2ac839d45bf7616cf1e67a Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Fri, 25 Sep 2026 15:55:23 +0200
Subject: [PATCH] ui : move mcp from the add menu to the sidebar rail

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/chat/ChatForm/ChatForm.svelte         |  7 +--
 .../ChatFormActionAddDropdown.svelte          | 11 +----
 .../ChatFormActionAddSheet.svelte             | 14 ------
 .../ChatFormActions/ChatFormActions.svelte    |  5 --
 .../app/dialogs/DialogManageModels.svelte     |  2 +-
 .../src/lib/components/app/dialogs/index.ts   |  2 +-
 .../SidebarNavigation.svelte                  |  5 ++
 .../SidebarNavigationActions.svelte           | 46 +++++++++++--------
 tools/ui/src/lib/constants/ui.constants.ts    |  6 +++
 tools/ui/src/lib/enums/ui.enums.ts            |  1 +
 tools/ui/src/lib/types/chat.d.ts              |  1 -
 11 files changed, 42 insertions(+), 58 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
index 893f8077dd..b22db3a395 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatForm.svelte
@@ -8,8 +8,7 @@
 		ChatFormInputFileInputInvisible,
 		ChatFormMcpResourcesList,
 		ChatFormPickers,
-		DialogMcpResourcesBrowser,
-		DialogMcpServers
+		DialogMcpResourcesBrowser
 	} from '$lib/components/app';
 	import {
 		CLIPBOARD_CONTENT_QUOTE_PREFIX,
@@ -193,7 +192,6 @@
 	let preSelectedResourceUri = $state<string | undefined>(undefined);
 
 	// MCP Servers Dialog State
-	let isMcpServersDialogOpen = $state(false);
 
 	let currentConfig = $derived(settingsStore.config);
 
@@ -628,7 +626,6 @@
 				isReasoning={chatStore.isReasoning}
 				{isRecording}
 				onFileUpload={handleFileUpload}
-				onMcpSettingsClick={() => (isMcpServersDialogOpen = true)}
 				onMicClick={handleMicClick}
 				{onStop}
 				onSystemPromptClick={() => onSystemPromptClick?.({ files: uploadedFiles, message: value })}
@@ -667,5 +664,3 @@
 	}}
 	preSelectedUri={preSelectedResourceUri}
 />
-
-<DialogMcpServers bind:open={isMcpServersDialogOpen} />
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
index 9c3a9e8912..bf5a61fbf7 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { File, Image, MessageSquare, Mic, Plus, Video } from '@lucide/svelte';
-	import { ChatFormActionAddToolsSubmenu, McpLogo } from '$lib/components/app';
+	import { ChatFormActionAddToolsSubmenu } from '$lib/components/app';
 	import { buttonVariants } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -132,15 +132,6 @@
 			</DropdownMenu.Item>
 
 			<ChatFormActionAddToolsSubmenu />
-
-			<DropdownMenu.Item
-				class="flex cursor-pointer items-center gap-2"
-				onclick={chatFormActions.onMcpSettingsClick}
-			>
-				<McpLogo class={ICON_CLASS_DEFAULT} />
-
-				<span>MCP Servers</span>
-			</DropdownMenu.Item>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
 </div>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
index acd0f4d211..8668112aeb 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddSheet.svelte
@@ -9,7 +9,6 @@
 		MessageSquare,
 		PencilRuler
 	} from '@lucide/svelte';
-	import { McpLogo } from '$lib/components/app';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Collapsible from '$lib/components/ui/collapsible';
 	import * as Sheet from '$lib/components/ui/sheet';
@@ -227,19 +226,6 @@
 						</Collapsible.Content>
 					</Collapsible.Root>
 				{/if}
-
-				<button
-					class={sheetItemClass}
-					onclick={() => {
-						sheetOpen = false;
-						chatFormActions.onMcpSettingsClick?.();
-					}}
-					type="button"
-				>
-					<McpLogo class="inline {ICON_CLASS_DEFAULT} shrink-0" />
-
-					<span>MCP Servers</span>
-				</button>
 			</div>
 		</Sheet.Content>
 	</Sheet.Root>
diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
index 395f2cfbe1..f5e03fe79f 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte
@@ -31,7 +31,6 @@
 		onMicClick?: () => void;
 		onStop?: () => void;
 		onSystemPromptClick?: () => void;
-		onMcpSettingsClick?: () => void;
 	}
 
 	let {
@@ -43,7 +42,6 @@
 		isReasoning = false,
 		isRecording = false,
 		onFileUpload,
-		onMcpSettingsClick,
 		onMicClick,
 		onStop,
 		onSystemPromptClick,
@@ -135,9 +133,6 @@
 		get onFileUpload() {
 			return onFileUpload;
 		},
-		get onMcpSettingsClick() {
-			return onMcpSettingsClick;
-		},
 		get onSystemPromptClick() {
 			return onSystemPromptClick;
 		}
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
index 0231757011..413853f4bb 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogManageModels.svelte
@@ -102,7 +102,7 @@
 			</Dialog.Title>
 		</Dialog.Header>
 
-		<div class="dialog-view min-h-0 flex-1 pt-2" data-visible={!isSwapping}>
+		<div class="dialog-view min-h-0 flex-1" data-visible={!isSwapping}>
 			{#if shownView === 'manage'}
 				<ModelsManager class="h-full">
 					{#snippet toolbarEnd()}
diff --git a/tools/ui/src/lib/components/app/dialogs/index.ts b/tools/ui/src/lib/components/app/dialogs/index.ts
index 5950f9a004..803c2f1287 100644
--- a/tools/ui/src/lib/components/app/dialogs/index.ts
+++ b/tools/ui/src/lib/components/app/dialogs/index.ts
@@ -19,7 +19,7 @@
 export { default as DialogMcpServerAddNew } from './DialogMcpServerAddNew.svelte';
 
 /**
- * **DialogMcpServers** - MCP servers dialog shown from the chat form
+ * **DialogMcpServers** - MCP servers dialog shown from the sidebar
  *
  * Shows the same MCP server list as the `/mcp-servers` route inside a modal
  * dialog.
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 f2b1faa5a8..613348c045 100644
--- a/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
+++ b/tools/ui/src/lib/components/app/navigation/SidebarNavigation/SidebarNavigation.svelte
@@ -6,6 +6,7 @@
 		ActionIcon,
 		DialogConversationRename,
 		DialogManageModels,
+		DialogMcpServers,
 		DialogSettingsChat,
 		Logo,
 		SidebarNavigationActions,
@@ -94,6 +95,7 @@
 
 	let renameDialogOpen = $state(false);
 	let settingsDialogOpen = $state(false);
+	let mcpDialogOpen = $state(false);
 	let renameTargetConversationId = $state<string | null>(null);
 	let renameDraft = $state('');
 	let renameOriginalTitle = $state('');
@@ -391,6 +393,7 @@
 				class="px-2"
 				isExpandedMode={innerWidth > 768 ? uiStore.isSidebarExpanded : true}
 				onManageModelsClick={() => uiStore.openModelsManager()}
+				onMcpClick={() => (mcpDialogOpen = true)}
 				onNewChat={() => {
 					if (deviceStore.isMobile) {
 						scheduleMobileCollapse();
@@ -454,6 +457,8 @@
 
 <DialogSettingsChat bind:open={settingsDialogOpen} />
 
+<DialogMcpServers bind:open={mcpDialogOpen} />
+
 <DialogManageModels bind:open={uiStore.manageModelsOpen} />
 
 <style>
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 55b5423a37..97170e5462 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;
 		onManageModelsClick?: () => void;
+		onMcpClick?: () => void;
 		onNewChat?: () => void;
 		onSettingsClick?: () => void;
 	}
@@ -35,6 +36,7 @@
 		isExpandedMode = false,
 		isSearchModeActive = $bindable(false),
 		onManageModelsClick,
+		onMcpClick,
 		onNewChat,
 		onSearchClick,
 		onSearchDeactivated,
@@ -123,16 +125,18 @@
 						}
 					: item.action === SidebarAction.MANAGE_MODELS
 						? () => onManageModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.MCP
+							? () => onMcpClick?.()
+							: 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,
@@ -181,16 +185,18 @@
 						}
 					: item.action === SidebarAction.MANAGE_MODELS
 						? () => onManageModelsClick?.()
-						: item.action === SidebarAction.SETTINGS
-							? () => onSettingsClick?.()
-							: item.route
-								? () => {
-										onNewChat?.();
-										goto(item.route!);
-									}
-								: isSearchOnMobile
-									? undefined
-									: onSearchClick}
+						: item.action === SidebarAction.MCP
+							? () => onMcpClick?.()
+							: 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 231c756cc5..c680ac11c5 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,4 +1,5 @@
 import { Package, Search, Settings, SquarePen } from '@lucide/svelte';
+import McpLogo from '$lib/components/app/mcp/McpLogo.svelte';
 import { SidebarAction, ToolSource } from '$lib/enums';
 import type { DesktopIconStripItem } from '$lib/types';
 
@@ -86,6 +87,11 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 		icon: MODEL_SELECTOR_ICON,
 		tooltip: 'Models'
 	},
+	{
+		action: SidebarAction.MCP,
+		icon: McpLogo,
+		tooltip: 'MCP'
+	},
 	{
 		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 7bd4d3b9fe..b190054894 100644
--- a/tools/ui/src/lib/enums/ui.enums.ts
+++ b/tools/ui/src/lib/enums/ui.enums.ts
@@ -25,6 +25,7 @@ export enum ScrollCarouselVariant {
 export enum SidebarAction {
 	DISCOVER_MODELS = 'discover-models',
 	MANAGE_MODELS = 'manage-models',
+	MCP = 'mcp',
 	NEW_CHAT = 'new-chat',
 	SETTINGS = 'settings'
 }
diff --git a/tools/ui/src/lib/types/chat.d.ts b/tools/ui/src/lib/types/chat.d.ts
index 86a868c33a..7950f0d240 100644
--- a/tools/ui/src/lib/types/chat.d.ts
+++ b/tools/ui/src/lib/types/chat.d.ts
@@ -335,5 +335,4 @@ export interface ChatFormActionsContext {
 	readonly hasVisionModality: boolean;
 	onFileUpload?: () => void;
 	onSystemPromptClick?: () => void;
-	onMcpSettingsClick?: () => void;
 }