From 5253e7ec3779a85b6e1eba8479efae26fcd8737c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 19 Oct 2025 10:27:03 +0800
Subject: [PATCH] refine: improve MCP panel spacing and add icon consistency

Enhance visual consistency across MCP dialogs with better spacing
and appropriate icons for add/edit actions.

Changes:
- McpFormModal: Use Plus icon for "Add" button, Save icon for "Edit" button
- McpPanel: Balance spacing around server info line (py-4 for info section,
  pb-4 for content area) to create equal visual weight between header and
  server list

The MCP panel now has consistent vertical rhythm with 1rem spacing above
and below the server count info line.
---
 src/components/mcp/McpFormModal.tsx | 3 ++-
 src/components/mcp/McpPanel.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/mcp/McpFormModal.tsx b/src/components/mcp/McpFormModal.tsx
index e14b7d0..f006fa7 100644
--- a/src/components/mcp/McpFormModal.tsx
+++ b/src/components/mcp/McpFormModal.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import {
   Save,
+  Plus,
   AlertCircle,
   ChevronDown,
   ChevronUp,
@@ -663,7 +664,7 @@ const McpFormModal: React.FC<McpFormModalProps> = ({
                 disabled={saving || (!isEditing && !!idError)}
                 variant="mcp"
               >
-                <Save size={16} />
+                {isEditing ? <Save size={16} /> : <Plus size={16} />}
                 {saving
                   ? t("common.saving")
                   : isEditing
diff --git a/src/components/mcp/McpPanel.tsx b/src/components/mcp/McpPanel.tsx
index 20ff91c..2698ea5 100644
--- a/src/components/mcp/McpPanel.tsx
+++ b/src/components/mcp/McpPanel.tsx
@@ -131,7 +131,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
           </DialogHeader>
 
           {/* Info Section */}
-          <div className="flex-shrink-0 px-6">
+          <div className="flex-shrink-0 px-6 py-4">
             <div className="text-sm text-gray-500 dark:text-gray-400">
               {t("mcp.serverCount", { count: Object.keys(servers).length })} ·{" "}
               {t("mcp.enabledCount", { count: enabledCount })}
@@ -139,7 +139,7 @@ const McpPanel: React.FC<McpPanelProps> = ({ open, onOpenChange, appType }) => {
           </div>
 
           {/* Content - Scrollable */}
-          <div className="flex-1 overflow-y-auto px-6 py-4">
+          <div className="flex-1 overflow-y-auto px-6 pb-4">
             {loading ? (
               <div className="text-center py-12 text-gray-500 dark:text-gray-400">
                 {t("mcp.loading")}