From db0eb67ef1133fd94a2848df2def74d62b1aa1e3 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 28 Sep 2026 16:23:38 +0200
Subject: [PATCH] ui : move mcp servers to the sidebar rail

The add menu keeps to what it attaches to the conversation, so the MCP
servers dialog moves to the sidebar rail and its menu entries and the
form callback they used go with it.

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../app/chat/ChatForm/ChatForm.svelte         |  7 +--
 .../ChatFormActionAddButton.svelte            |  4 +-
 .../ChatFormActionAddSheet.svelte             | 14 ------
 .../ChatFormActions/ChatFormActions.svelte    |  6 ---
 .../SidebarNavigation.svelte                  |  5 ++
 .../SidebarNavigationActions.svelte           | 46 +++++++++++--------
 tools/ui/src/lib/constants/ui.constants.ts    |  6 +++
 tools/ui/src/lib/enums/ui.enums.ts            |  2 +
 tools/ui/src/lib/types/chat.d.ts              |  1 -
 9 files changed, 42 insertions(+), 49 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/ChatFormActionAddButton.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte
index 60e7bd1d4a..443046615b 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddButton.svelte
@@ -15,11 +15,11 @@
 <Tooltip.Root>
 	<Tooltip.Trigger class="w-full">
 		<Button
-			class="file-upload-button md:h-8 md:w-8 h-9 w-9 rounded-full p-0"
+			class="file-upload-button bg-background h-9 w-9 rounded-full p-0 shadow-sm md:h-8 md:w-8 dark:bg-muted-foreground/15"
 			{disabled}
 			{onclick}
 			type="button"
-			variant="secondary"
+			variant="ghost"
 		>
 			<span class="sr-only">{ATTACHMENT_TOOLTIP_TEXT}</span>
 
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 56e8434e86..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';
@@ -226,19 +225,6 @@
 							</div>
 						</Collapsible.Content>
 					</Collapsible.Root>
-
-					<button
-						class={sheetItemClass}
-						onclick={() => {
-							sheetOpen = false;
-							chatFormActions.onMcpSettingsClick?.();
-						}}
-						type="button"
-					>
-						<McpLogo class="inline {ICON_CLASS_DEFAULT} shrink-0" />
-
-						<span>MCP Servers</span>
-					</button>
 				{/if}
 			</div>
 		</Sheet.Content>
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 748f062a65..64dde870e2 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
@@ -30,7 +30,6 @@
 		uploadedFiles?: ChatUploadedFile[];
 		onFileUpload?: () => void;
 		onMicClick?: () => void;
-		onMcpSettingsClick?: () => void;
 		onStop?: () => void;
 		onSystemPromptClick?: () => void;
 	}
@@ -44,7 +43,6 @@
 		isReasoning = false,
 		isRecording = false,
 		onFileUpload,
-		onMcpSettingsClick,
 		onMicClick,
 		onStop,
 		onSystemPromptClick,
@@ -136,10 +134,6 @@
 		get onFileUpload() {
 			return onFileUpload;
 		},
-
-		get onMcpSettingsClick() {
-			return onMcpSettingsClick;
-		},
 		get onSystemPromptClick() {
 			return onSystemPromptClick;
 		}
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 8180d2bf69..981b94e326 100644
--- a/tools/ui/src/lib/constants/ui.constants.ts
+++ b/tools/ui/src/lib/constants/ui.constants.ts
@@ -1,5 +1,6 @@
 import { MODEL_ICON } from './icons.constants';
 import { 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';
 
@@ -84,6 +85,11 @@ export const SIDEBAR_ACTIONS_ITEMS: DesktopIconStripItem[] = [
 		icon: MODEL_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 7945ecb85b..b190054894 100644
--- a/tools/ui/src/lib/enums/ui.enums.ts
+++ b/tools/ui/src/lib/enums/ui.enums.ts
@@ -23,7 +23,9 @@ export enum ScrollCarouselVariant {
  * Sidebar icon strip actions handled directly by the sidebar.
  */
 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 835f2081d2..7950f0d240 100644
--- a/tools/ui/src/lib/types/chat.d.ts
+++ b/tools/ui/src/lib/types/chat.d.ts
@@ -334,6 +334,5 @@ export interface ChatFormActionsContext {
 	readonly hasVideoModality: boolean;
 	readonly hasVisionModality: boolean;
 	onFileUpload?: () => void;
-	onMcpSettingsClick?: () => void;
 	onSystemPromptClick?: () => void;
 }