feat: redesign settings pages to match canonical flat UI patterns (#493)
* refactor(settings): new IA shell + projects section + skills catalog discoverability * chore(settings): split providers list by scope; show user before project * fix: navigation flow in mobile Settings * feat: redesign settings pages to use modern elevated surface patterns * feat: replace helper text with tooltips in settings * ui: redesign update dialog and fix external link routing - Restructures UpdateDialog to focus on changelog readability with a wider max-w-4xl canvas - Highlights @username contributor mentions with theme primary color - Strips excessive vertical padding and right-aligns compact action buttons - Disables streamdown's internal link safety dialog in favor of direct Tauri shell routing * feat: refactor Git identities into dedicated Git settings page * feat: unify sidebar background styling across VS Code and web/mobile * fix: adjust button styling and layout for mobile settings pages * feat: add MCP settings page and sidebar * feat: hide models in provider view (thanks to @nguyenngothuong) * feat: add "Add new provider" option to model selector dropdown * fix: local evroc logo + provider dropdown icons * fix: increase width of provider menu * fix: dark theme background color for better contrast * feat: update @opencode-ai/sdk dependency to v1.2.10 * fix: restore session sorting to only use updated time * fix: added settings for sessions deletion dialog * fix: adjust padding on settings pages for better layout * fix: standardize select dropdown height across UI * fix: agent selector UI and notification settings * fix: remove redundant helper text from settings pages * fix: update UI layout for description fields * fix: remove border-none and shadow-none from textarea classes * fix: enable context menu on sidebar items * feat: refactor UI controls and layout patterns across settings pages * fix: use headerless blocks when page title already provides context * fix: remove subtask option from command settings * fix: refactor mcp page settings * fix: reduce spacing in skills configuration pages * feat: refactor voice settings * feat: refactor settings sidebar sections
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
d2d39c48ac
commit
d2358c2c03
@@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ButtonLarge } from '@/components/ui/button-large';
|
||||
import { ButtonSmall } from '@/components/ui/button-small';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { toast } from '@/components/ui';
|
||||
@@ -20,12 +22,10 @@ import {
|
||||
RiEyeOffLine,
|
||||
RiFolderLine,
|
||||
RiPlugLine,
|
||||
RiSaveLine,
|
||||
RiUser3Line,
|
||||
} from '@remixicon/react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { ButtonSmall } from '@/components/ui/button-small';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -109,21 +109,18 @@ const CommandTextarea: React.FC<CommandTextareaProps> = ({ value, onChange }) =>
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
One argument per line. Blank lines are ignored.
|
||||
</p>
|
||||
<Button
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 gap-1 px-2 typography-micro text-muted-foreground"
|
||||
size="xs"
|
||||
className="!font-normal gap-1 text-muted-foreground"
|
||||
onClick={handlePasteFromClipboard}
|
||||
type="button"
|
||||
title="Paste full command from clipboard and auto-split"
|
||||
>
|
||||
<RiClipboardLine className="h-3 w-3" />
|
||||
Paste command
|
||||
</Button>
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
@@ -255,17 +252,17 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ value, onChange }) => {
|
||||
<span className="typography-micro text-muted-foreground w-32 shrink-0">Key</span>
|
||||
<span className="typography-micro text-muted-foreground">Value</span>
|
||||
</div>
|
||||
<Button
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-6 gap-1 px-2 typography-micro text-muted-foreground"
|
||||
size="xs"
|
||||
className="!font-normal gap-1 text-muted-foreground"
|
||||
onClick={handlePasteDotEnv}
|
||||
type="button"
|
||||
title="Paste KEY=VALUE lines from clipboard"
|
||||
>
|
||||
<RiClipboardLine className="h-3 w-3" />
|
||||
Paste .env
|
||||
</Button>
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
|
||||
{/* Rows */}
|
||||
@@ -302,28 +299,27 @@ const EnvEditor: React.FC<EnvEditorProps> = ({ value, onChange }) => {
|
||||
</button>
|
||||
</div>
|
||||
{/* Remove */}
|
||||
<Button
|
||||
size="icon"
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
className="h-8 w-7 shrink-0 text-muted-foreground hover:text-destructive"
|
||||
className="h-7 w-7 px-0 shrink-0 text-muted-foreground hover:text-[var(--status-error)]"
|
||||
onClick={() => removeRow(idx)}
|
||||
>
|
||||
<RiDeleteBinLine className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
<ButtonSmall
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-1.5 h-7 typography-meta"
|
||||
size="xs"
|
||||
className="!font-normal gap-1.5"
|
||||
onClick={addRow}
|
||||
type="button"
|
||||
>
|
||||
<RiAddLine className="h-3.5 w-3.5" />
|
||||
Add variable
|
||||
</Button>
|
||||
</ButtonSmall>
|
||||
|
||||
{hasSensitiveValues && (
|
||||
<p className="typography-micro text-muted-foreground/60">
|
||||
@@ -345,16 +341,14 @@ const STATUS_LABEL: Record<string, string> = {
|
||||
};
|
||||
|
||||
const StatusBadge: React.FC<{ status: string | undefined; enabled: boolean }> = ({ status, enabled }) => {
|
||||
if (!enabled) {
|
||||
return <span className="typography-micro text-muted-foreground/50">Disabled</span>;
|
||||
}
|
||||
if (!enabled) return null;
|
||||
if (!status) return null;
|
||||
|
||||
const colorMap: Record<string, string> = {
|
||||
connected: 'text-green-600 dark:text-green-400',
|
||||
failed: 'text-destructive',
|
||||
needs_auth: 'text-yellow-600 dark:text-yellow-400',
|
||||
needs_client_registration: 'text-yellow-600 dark:text-yellow-400',
|
||||
connected: 'text-[var(--status-success)]',
|
||||
failed: 'text-[var(--status-error)]',
|
||||
needs_auth: 'text-[var(--status-warning)]',
|
||||
needs_client_registration: 'text-[var(--status-warning)]',
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -523,195 +517,200 @@ export const McpPage: React.FC = () => {
|
||||
|
||||
return (
|
||||
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
|
||||
<div className="mx-auto max-w-2xl space-y-5 p-6">
|
||||
<div className="mx-auto w-full max-w-3xl p-3 sm:p-6 sm:pt-8">
|
||||
|
||||
{/* ── Header card: name + status + enabled + connect ── */}
|
||||
<div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)] px-4 py-3 space-y-3">
|
||||
|
||||
{/* Row 1: name + connect button */}
|
||||
<div className="flex items-center justify-between gap-3 min-w-0">
|
||||
<div className="min-w-0">
|
||||
{isNewServer ? (
|
||||
<Input
|
||||
value={draftName}
|
||||
onChange={(e) => setDraftName(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
|
||||
placeholder="my-mcp-server"
|
||||
className="font-mono text-base h-8 w-64"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<h1 className="typography-ui-header font-semibold truncate">{selectedMcpName}</h1>
|
||||
)}
|
||||
{isNewServer && (
|
||||
<p className="typography-micro text-muted-foreground mt-0.5">
|
||||
Lowercase, numbers, hyphens and underscores only
|
||||
</p>
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<div className="min-w-0">
|
||||
{isNewServer ? (
|
||||
<h2 className="typography-ui-header font-semibold text-foreground truncate">New MCP Server</h2>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<h2 className="typography-ui-header font-semibold text-foreground truncate">{selectedMcpName}</h2>
|
||||
<StatusBadge status={runtimeStatus?.status} enabled={enabled} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<p className="typography-meta text-muted-foreground truncate">
|
||||
{isNewServer ? 'Configure a new MCP server' : `${mcpType === 'local' ? 'Local · stdio' : 'Remote · SSE'} transport`}
|
||||
</p>
|
||||
{!isNewServer && (
|
||||
<ButtonSmall
|
||||
variant={isConnected ? 'outline' : 'default'}
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
onClick={handleToggleConnect}
|
||||
disabled={isConnecting || !enabled}
|
||||
>
|
||||
{isConnecting ? 'Working...' : isConnected ? 'Disconnect' : 'Connect'}
|
||||
</ButtonSmall>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isNewServer && (
|
||||
<Select value={draftScope} onValueChange={(value) => setDraftScope(value as McpScope)}>
|
||||
<SelectTrigger className="!h-8 w-auto gap-1.5">
|
||||
{draftScope === 'user' ? (
|
||||
<RiUser3Line className="h-4 w-4" />
|
||||
) : (
|
||||
<RiFolderLine className="h-4 w-4" />
|
||||
)}
|
||||
<span className="capitalize">{draftScope}</span>
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectItem value="user" className="pr-2 [&>span:first-child]:hidden">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiUser3Line className="h-4 w-4" />
|
||||
<span>User</span>
|
||||
</div>
|
||||
<span className="typography-micro text-muted-foreground ml-6">Available in all projects</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="project" className="pr-2 [&>span:first-child]:hidden">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiFolderLine className="h-4 w-4" />
|
||||
<span>Project</span>
|
||||
</div>
|
||||
<span className="typography-micro text-muted-foreground ml-6">Only in current project</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{!isNewServer && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant={isConnected ? 'outline' : 'default'}
|
||||
onClick={handleToggleConnect}
|
||||
disabled={isConnecting || !enabled}
|
||||
className="h-7 shrink-0"
|
||||
>
|
||||
{isConnecting ? 'Working…' : isConnected ? 'Disconnect' : 'Connect'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Row 2: status + type badge + enabled toggle */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusBadge status={runtimeStatus?.status} enabled={enabled} />
|
||||
<span className="typography-micro text-muted-foreground/40">·</span>
|
||||
<span className="typography-micro text-muted-foreground bg-muted px-1.5 py-0.5 rounded border border-border/50">
|
||||
{mcpType === 'local' ? 'stdio' : 'remote'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Enabled toggle */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn('typography-micro', enabled ? 'text-foreground' : 'text-muted-foreground/60')}>
|
||||
{enabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={enabled}
|
||||
onClick={() => setEnabled(!enabled)}
|
||||
className={cn(
|
||||
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
|
||||
enabled ? 'bg-primary' : 'bg-muted',
|
||||
)}
|
||||
>
|
||||
<span className={cn(
|
||||
'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform',
|
||||
enabled ? 'translate-x-4' : 'translate-x-0',
|
||||
)} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3: type selector — always visible so user can switch type */}
|
||||
<div className="flex gap-1 pt-1 border-t border-[var(--interactive-border)]">
|
||||
<ButtonSmall
|
||||
variant={mcpType === 'local' ? 'default' : 'outline'}
|
||||
onClick={() => setMcpType('local')}
|
||||
className={cn(mcpType !== 'local' && 'text-foreground')}
|
||||
>
|
||||
Local · stdio
|
||||
</ButtonSmall>
|
||||
<ButtonSmall
|
||||
variant={mcpType === 'remote' ? 'default' : 'outline'}
|
||||
onClick={() => setMcpType('remote')}
|
||||
className={cn(mcpType !== 'remote' && 'text-foreground')}
|
||||
>
|
||||
Remote · SSE
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Connection ── */}
|
||||
<div className="space-y-2">
|
||||
{mcpType === 'local' ? (
|
||||
<>
|
||||
<label className="typography-ui-label font-medium text-foreground">
|
||||
Command
|
||||
</label>
|
||||
{/* Server Identity */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">Server</h3>
|
||||
</div>
|
||||
|
||||
<section className="px-2 pb-2 pt-0 space-y-0">
|
||||
|
||||
{isNewServer && (
|
||||
<div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
|
||||
<div className="flex min-w-0 flex-col sm:w-56 shrink-0">
|
||||
<span className="typography-ui-label text-foreground">Server Name</span>
|
||||
</div>
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
|
||||
<Input
|
||||
value={draftName}
|
||||
onChange={(e) => setDraftName(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
|
||||
placeholder="my-mcp-server"
|
||||
className="h-7 w-48 font-mono px-2"
|
||||
autoFocus
|
||||
/>
|
||||
<Select value={draftScope} onValueChange={(value) => setDraftScope(value as McpScope)}>
|
||||
<SelectTrigger className="!h-7 !w-7 !min-w-0 !px-0 !py-0 justify-center [&>svg:last-child]:hidden" title={draftScope === 'user' ? 'User scope' : 'Project scope'}>
|
||||
{draftScope === 'user' ? <RiUser3Line className="h-3.5 w-3.5" /> : <RiFolderLine className="h-3.5 w-3.5" />}
|
||||
</SelectTrigger>
|
||||
<SelectContent align="end">
|
||||
<SelectItem value="user">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiUser3Line className="h-3.5 w-3.5" />
|
||||
<span>User</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="project">
|
||||
<div className="flex items-center gap-2">
|
||||
<RiFolderLine className="h-3.5 w-3.5" />
|
||||
<span>Project</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="group flex cursor-pointer items-center gap-2 py-1.5"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-pressed={enabled}
|
||||
onClick={() => setEnabled(!enabled)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
setEnabled(!enabled);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={enabled}
|
||||
onChange={setEnabled}
|
||||
ariaLabel="Enable server"
|
||||
/>
|
||||
<span className="typography-ui-label text-foreground">Enable Server</span>
|
||||
</div>
|
||||
|
||||
<div className="pb-1.5 pt-0.5">
|
||||
<div className="flex min-w-0 flex-col gap-1.5">
|
||||
<span className="typography-ui-label text-foreground">Transport Mode</span>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<ButtonSmall
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => setMcpType('local')}
|
||||
className={cn(
|
||||
'!font-normal',
|
||||
mcpType === 'local'
|
||||
? 'border-[var(--primary-base)] text-[var(--primary-base)] bg-[var(--primary-base)]/10 hover:text-[var(--primary-base)]'
|
||||
: 'text-foreground'
|
||||
)}
|
||||
>
|
||||
Local · stdio
|
||||
</ButtonSmall>
|
||||
<ButtonSmall
|
||||
variant="outline"
|
||||
size="xs"
|
||||
onClick={() => setMcpType('remote')}
|
||||
className={cn(
|
||||
'!font-normal',
|
||||
mcpType === 'remote'
|
||||
? 'border-[var(--primary-base)] text-[var(--primary-base)] bg-[var(--primary-base)]/10 hover:text-[var(--primary-base)]'
|
||||
: 'text-foreground'
|
||||
)}
|
||||
>
|
||||
Remote · SSE
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Connection */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">
|
||||
{mcpType === 'local' ? 'Command' : 'Server URL'}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<section className="px-2 pb-2 pt-0">
|
||||
{mcpType === 'local' ? (
|
||||
<CommandTextarea value={command} onChange={setCommand} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<label className="typography-ui-label font-medium text-foreground">
|
||||
Server URL
|
||||
</label>
|
||||
) : (
|
||||
<Input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="https://mcp.example.com/mcp"
|
||||
className="font-mono typography-meta"
|
||||
/>
|
||||
<p className="typography-micro text-muted-foreground">
|
||||
SSE endpoint URL of the remote MCP server
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ── Environment Variables ── */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<label className="typography-ui-label font-medium text-foreground">
|
||||
{/* Environment Variables */}
|
||||
<div className="mb-2">
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">
|
||||
Environment Variables
|
||||
{envEntries.length > 0 && (
|
||||
<span className="ml-1.5 typography-micro text-muted-foreground font-normal">
|
||||
({envEntries.length})
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
</h3>
|
||||
</div>
|
||||
<EnvEditor value={envEntries} onChange={setEnvEntries} />
|
||||
|
||||
<section className="px-2 pb-2 pt-0">
|
||||
<EnvEditor value={envEntries} onChange={setEnvEntries} />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ── Actions ── */}
|
||||
<div className="flex items-center justify-between border-t border-[var(--interactive-border)] pt-4 gap-4">
|
||||
{!isNewServer ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
className="h-7 gap-1.5 typography-meta text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
>
|
||||
<RiDeleteBinLine className="h-3.5 w-3.5" />
|
||||
Delete
|
||||
</Button>
|
||||
) : <div />}
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2 px-2 py-1">
|
||||
<ButtonSmall
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || (!isDirty && !isNewServer)}
|
||||
className="h-7 gap-1.5 typography-meta"
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
>
|
||||
<RiSaveLine className="h-3.5 w-3.5" />
|
||||
{isSaving ? 'Saving…' : isNewServer ? 'Create' : 'Save changes'}
|
||||
</Button>
|
||||
{isSaving ? 'Saving...' : isNewServer ? 'Create' : 'Save Changes'}
|
||||
</ButtonSmall>
|
||||
{!isNewServer && (
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
className="!font-normal text-[var(--status-error)] hover:text-[var(--status-error)]"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
Delete
|
||||
</ButtonSmall>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ButtonSmall } from '@/components/ui/button-small';
|
||||
import { ButtonLarge } from '@/components/ui/button-large';
|
||||
import {
|
||||
Dialog,
|
||||
@@ -9,14 +9,15 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { RiAddLine, RiDeleteBinLine, RiMore2Line, RiPlugLine, RiServerLine } from '@remixicon/react';
|
||||
import { RiAddLine, RiDeleteBinLine, RiMore2Line, RiPlugLine } from '@remixicon/react';
|
||||
import { useMcpConfigStore, type McpDraft, type McpServerConfig } from '@/stores/useMcpConfigStore';
|
||||
import { useMcpStore } from '@/stores/useMcpStore';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { isVSCodeRuntime } from '@/lib/desktop';
|
||||
import { isMobileDeviceViaCSS } from '@/lib/device';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { toast } from '@/components/ui';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -48,9 +49,9 @@ const StatusDot: React.FC<{ tone: StatusTone; enabled: boolean }> = ({ tone, ena
|
||||
);
|
||||
}
|
||||
const classes: Record<StatusTone, string> = {
|
||||
success: 'bg-green-500',
|
||||
error: 'bg-destructive',
|
||||
warning: 'bg-yellow-500',
|
||||
success: 'bg-[var(--status-success)]',
|
||||
error: 'bg-[var(--status-error)]',
|
||||
warning: 'bg-[var(--status-warning)]',
|
||||
idle: 'bg-muted-foreground/40',
|
||||
};
|
||||
return (
|
||||
@@ -59,8 +60,7 @@ const StatusDot: React.FC<{ tone: StatusTone; enabled: boolean }> = ({ tone, ena
|
||||
};
|
||||
|
||||
export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
|
||||
const bgClass = 'bg-background';
|
||||
|
||||
const { mcpServers, selectedMcpName, setSelectedMcp, setMcpDraft, loadMcpConfigs, deleteMcp } =
|
||||
useMcpConfigStore();
|
||||
@@ -70,6 +70,16 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
|
||||
const [deleteTarget, setDeleteTarget] = React.useState<McpServerConfig | null>(null);
|
||||
const [isDeleting, setIsDeleting] = React.useState(false);
|
||||
const [openMenuMcp, setOpenMenuMcp] = React.useState<string | null>(null);
|
||||
|
||||
const projectServers = React.useMemo(
|
||||
() => mcpServers.filter((server) => server.scope === 'project'),
|
||||
[mcpServers]
|
||||
);
|
||||
const userServers = React.useMemo(
|
||||
() => mcpServers.filter((server) => server.scope !== 'project'),
|
||||
[mcpServers]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadMcpConfigs();
|
||||
@@ -113,22 +123,21 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', bgClass)}>
|
||||
{/* Header */}
|
||||
<div className="border-b px-3 py-3">
|
||||
<div className="border-b px-3 pt-4 pb-3">
|
||||
<h2 className="text-base font-semibold text-foreground mb-3">MCP Servers</h2>
|
||||
<SettingsProjectSelector className="mb-3" />
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{mcpServers.length} server{mcpServers.length !== 1 ? 's' : ''}
|
||||
Total {mcpServers.length}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 -my-1 text-muted-foreground"
|
||||
className="h-7 w-7 px-0 -my-1 text-muted-foreground"
|
||||
onClick={handleCreateNew}
|
||||
title="Add MCP server"
|
||||
>
|
||||
<RiAddLine className="size-4" />
|
||||
</Button>
|
||||
<RiAddLine className="h-3.5 w-3.5" />
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -141,74 +150,147 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
<p className="typography-meta mt-1 opacity-75">Use the + button above to add one</p>
|
||||
</div>
|
||||
) : (
|
||||
mcpServers.map((server) => {
|
||||
const runtimeStatus = mcpStatus[server.name];
|
||||
const tone = statusToneFromMcp(runtimeStatus?.status);
|
||||
const isSelected = selectedMcpName === server.name;
|
||||
<>
|
||||
{projectServers.length > 0 && (
|
||||
<>
|
||||
<div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
Project Servers
|
||||
</div>
|
||||
{projectServers.map((server) => {
|
||||
const runtimeStatus = mcpStatus[server.name];
|
||||
const tone = statusToneFromMcp(runtimeStatus?.status);
|
||||
const isSelected = selectedMcpName === server.name;
|
||||
const isMobile = isMobileDeviceViaCSS();
|
||||
|
||||
return (
|
||||
<div
|
||||
key={server.name}
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
|
||||
isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover',
|
||||
)}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedMcp(server.name);
|
||||
setMcpDraft(null);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
className="flex min-w-0 flex-1 flex-col gap-0 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusDot tone={tone} enabled={server.enabled} />
|
||||
<span className="typography-ui-label font-normal truncate text-foreground">
|
||||
{server.name}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground bg-muted px-1 rounded flex-shrink-0 leading-none pb-px border border-border/50">
|
||||
{server.type}
|
||||
</span>
|
||||
{!server.enabled && (
|
||||
<span className="typography-micro text-muted-foreground/60 flex-shrink-0">
|
||||
off
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="typography-micro text-muted-foreground/60 truncate leading-tight pl-4">
|
||||
{server.type === 'local'
|
||||
? (server as { command?: string[] }).command?.join(' ') ?? ''
|
||||
: (server as { url?: string }).url ?? ''}
|
||||
</div>
|
||||
</button>
|
||||
return (
|
||||
<div
|
||||
key={server.name}
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200 select-none',
|
||||
isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover',
|
||||
)}
|
||||
onContextMenu={!isMobile ? (e) => {
|
||||
e.preventDefault();
|
||||
setOpenMenuMcp(server.name);
|
||||
} : undefined}
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedMcp(server.name);
|
||||
setMcpDraft(null);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
className="flex min-w-0 flex-1 flex-col gap-0 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusDot tone={tone} enabled={server.enabled} />
|
||||
<span className="typography-ui-label font-normal truncate text-foreground">{server.name}</span>
|
||||
<span className="typography-micro text-muted-foreground bg-muted px-1 rounded flex-shrink-0 leading-none pb-px border border-border/50">
|
||||
{server.type}
|
||||
</span>
|
||||
</div>
|
||||
<div className="typography-micro text-muted-foreground/60 truncate leading-tight pl-4">
|
||||
{server.type === 'local'
|
||||
? (server as { command?: string[] }).command?.join(' ') ?? ''
|
||||
: (server as { url?: string }).url ?? ''}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
|
||||
<DropdownMenu open={openMenuMcp === server.name} onOpenChange={(open) => setOpenMenuMcp(open ? server.name : null)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<ButtonSmall variant="ghost" className="h-6 w-6 px-0 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100">
|
||||
<RiMore2Line className="h-3.5 w-3.5" />
|
||||
</ButtonSmall>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-fit min-w-20">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(server);
|
||||
}}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<RiDeleteBinLine className="h-4 w-4 mr-px" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{userServers.length > 0 && (
|
||||
<>
|
||||
<div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
User Servers
|
||||
</div>
|
||||
{userServers.map((server) => {
|
||||
const runtimeStatus = mcpStatus[server.name];
|
||||
const tone = statusToneFromMcp(runtimeStatus?.status);
|
||||
const isSelected = selectedMcpName === server.name;
|
||||
const isMobile = isMobileDeviceViaCSS();
|
||||
|
||||
return (
|
||||
<div
|
||||
key={server.name}
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200 select-none',
|
||||
isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover',
|
||||
)}
|
||||
onContextMenu={!isMobile ? (e) => {
|
||||
e.preventDefault();
|
||||
setOpenMenuMcp(server.name);
|
||||
} : undefined}
|
||||
>
|
||||
<RiMore2Line className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-fit min-w-20">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(server);
|
||||
}}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<RiDeleteBinLine className="h-4 w-4 mr-px" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedMcp(server.name);
|
||||
setMcpDraft(null);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
className="flex min-w-0 flex-1 flex-col gap-0 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusDot tone={tone} enabled={server.enabled} />
|
||||
<span className="typography-ui-label font-normal truncate text-foreground">{server.name}</span>
|
||||
<span className="typography-micro text-muted-foreground bg-muted px-1 rounded flex-shrink-0 leading-none pb-px border border-border/50">
|
||||
{server.type}
|
||||
</span>
|
||||
</div>
|
||||
<div className="typography-micro text-muted-foreground/60 truncate leading-tight pl-4">
|
||||
{server.type === 'local'
|
||||
? (server as { command?: string[] }).command?.join(' ') ?? ''
|
||||
: (server as { url?: string }).url ?? ''}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<DropdownMenu open={openMenuMcp === server.name} onOpenChange={(open) => setOpenMenuMcp(open ? server.name : null)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<ButtonSmall variant="ghost" className="h-6 w-6 px-0 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100">
|
||||
<RiMore2Line className="h-3.5 w-3.5" />
|
||||
</ButtonSmall>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-fit min-w-20">
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDeleteTarget(server);
|
||||
}}
|
||||
className="text-destructive focus:text-destructive"
|
||||
>
|
||||
<RiDeleteBinLine className="h-4 w-4 mr-px" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ScrollableOverlay>
|
||||
|
||||
@@ -226,14 +308,13 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
<ButtonLarge
|
||||
variant="ghost"
|
||||
onClick={() => setDeleteTarget(null)}
|
||||
disabled={isDeleting}
|
||||
className="text-foreground hover:bg-interactive-hover hover:text-foreground"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</ButtonLarge>
|
||||
<ButtonLarge onClick={handleDelete} disabled={isDeleting}>
|
||||
{isDeleting ? 'Deleting…' : 'Delete'}
|
||||
</ButtonLarge>
|
||||
@@ -245,4 +326,4 @@ export const McpSidebar: React.FC<McpSidebarProps> = ({ onItemSelect }) => {
|
||||
};
|
||||
|
||||
// Re-export for easy sidebar icon usage
|
||||
export { RiServerLine as McpIcon };
|
||||
export { McpIcon } from '@/components/icons/McpIcon';
|
||||
|
||||
Reference in New Issue
Block a user