Skip to content

Commit 41e0d30

Browse files
viper151claudeblackmammoth
authored
feat(redesign): skills and MCP action controls in settings (#942)
* feat(settings): refine skills and MCP action controls * feat(settings): open add skill in dialog * fix(settings): stabilize add skill dialog size * fix(skills): scope success banner and add menu focus management Gate the skills install success banner behind a local just-installed flag so it no longer re-appears stale after reopening and cancelling the add dialog, and disable the cancel/close controls while an install is in flight. Add keyboard focus management to ActionMenu: focus the first item on open and restore focus to the trigger on Escape or item selection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix: skill folder picker --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Haile <118998054+blackmammoth@users.noreply.github.com>
1 parent 1942eeb commit 41e0d30

5 files changed

Lines changed: 589 additions & 291 deletions

File tree

‎src/components/mcp/view/McpServers.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
33

44
import type { McpProject, McpProvider, McpScope, ProviderMcpServer } from '../types';
55
import { IS_PLATFORM } from '../../../constants/config';
6-
import { Badge, Button } from '../../../shared/view/ui';
6+
import { ActionMenu, Badge, Button } from '../../../shared/view/ui';
77
import {
88
MCP_GLOBAL_SUPPORTED_SCOPES,
99
MCP_GLOBAL_SUPPORTED_TRANSPORTS,
@@ -134,33 +134,40 @@ export default function McpServers({ selectedProvider, currentProjects }: McpSer
134134

135135
return (
136136
<div className="space-y-4">
137-
<div className="flex items-center gap-3">
138-
<Server className="h-5 w-5 text-primary" />
139-
<h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
137+
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
138+
<div className="flex min-w-0 items-start gap-3">
139+
<Server className="mt-0.5 h-5 w-5 flex-shrink-0 text-purple-500" />
140+
<div className="min-w-0 space-y-1">
141+
<h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
142+
<p className="text-sm text-muted-foreground">{description}</p>
143+
</div>
144+
</div>
145+
<ActionMenu
146+
label="Add MCP Server"
147+
icon={Plus}
148+
className="w-full sm:w-auto"
149+
triggerClassName={`w-full sm:w-auto ${MCP_PROVIDER_BUTTON_CLASSES[selectedProvider]}`}
150+
items={[
151+
{
152+
key: 'global',
153+
label: globalButtonLabel,
154+
description: globalAddDescription,
155+
icon: Globe,
156+
onSelect: openGlobalForm,
157+
},
158+
{
159+
key: 'provider',
160+
label: providerButtonLabel,
161+
description: providerAddDescription,
162+
icon: Server,
163+
onSelect: () => openForm(),
164+
},
165+
]}
166+
/>
167+
140168
</div>
141-
<p className="text-sm text-muted-foreground">{description}</p>
142169

143170
<div className="space-y-2">
144-
<div className="flex flex-wrap items-center gap-2">
145-
<Button
146-
onClick={openGlobalForm}
147-
className={MCP_PROVIDER_BUTTON_CLASSES[selectedProvider]}
148-
size="sm"
149-
title={globalAddDescription}
150-
>
151-
<Plus className="mr-2 h-4 w-4" />
152-
{globalButtonLabel}
153-
</Button>
154-
<Button
155-
onClick={() => openForm()}
156-
variant="outline"
157-
size="sm"
158-
title={providerAddDescription}
159-
>
160-
<Plus className="mr-2 h-4 w-4" />
161-
{providerButtonLabel}
162-
</Button>
163-
</div>
164171
<div className="min-h-4">
165172
{saveStatus === 'success' && (
166173
<span className="animate-in fade-in text-xs text-muted-foreground">{t('saveStatus.success')}</span>

0 commit comments

Comments
 (0)