From 031ea3a58ff62b66f4553586eb30658af4ef57a6 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 16 Nov 2025 11:31:27 +0800
Subject: [PATCH] style(mcp): refine panel layout for better visual hierarchy
 and compactness

- Replace checkboxes with toggle switches for app selection (more intuitive for enable/disable actions)
- Change switch color from blue to emerald to match MCP button theme
- Stack app options vertically with labels on left to save horizontal space
- Reduce panel width from max-w-4xl to max-w-3xl for more compact design
- Move docs button next to server name for better information grouping
---
 src/components/mcp/UnifiedMcpPanel.tsx | 82 +++++++++++++-------------
 src/components/ui/switch.tsx           |  2 +-
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/src/components/mcp/UnifiedMcpPanel.tsx b/src/components/mcp/UnifiedMcpPanel.tsx
index 908be51..ab96746 100644
--- a/src/components/mcp/UnifiedMcpPanel.tsx
+++ b/src/components/mcp/UnifiedMcpPanel.tsx
@@ -9,7 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { useAllMcpServers, useToggleMcpApp } from "@/hooks/useMcp";
 import type { McpServer } from "@/types";
 import type { AppId } from "@/lib/api/types";
@@ -117,7 +117,7 @@ const UnifiedMcpPanel: React.FC<UnifiedMcpPanelProps> = ({
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-4xl max-h-[85vh] min-h-[600px] flex flex-col">
+        <DialogContent className="max-w-3xl max-h-[85vh] min-h-[600px] flex flex-col">
           <DialogHeader>
             <div className="flex items-center justify-between pr-8">
               <DialogTitle>{t("mcp.unifiedPanel.title")}</DialogTitle>
@@ -264,9 +264,22 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
       <div className="flex items-center gap-4">
         {/* 左侧：服务器信息 */}
         <div className="flex-1 min-w-0">
-          <h3 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
-            {name}
-          </h3>
+          <div className="flex items-center gap-2 mb-1">
+            <h3 className="font-medium text-gray-900 dark:text-gray-100">
+              {name}
+            </h3>
+            {docsUrl && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={openDocs}
+                title={t("mcp.presets.docs")}
+              >
+                {t("mcp.presets.docs")}
+              </Button>
+            )}
+          </div>
           {description && (
             <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
               {description}
@@ -279,70 +292,59 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
           )}
         </div>
 
-        {/* 中间：应用复选框 */}
-        <div className="flex items-center gap-4 flex-shrink-0">
-          <div className="flex items-center gap-2">
-            <Checkbox
-              id={`${id}-claude`}
-              checked={server.apps.claude}
-              onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "claude", checked === true)
-              }
-            />
+        {/* 中间：应用开关 */}
+        <div className="flex flex-col gap-2 flex-shrink-0 min-w-[120px]">
+          <div className="flex items-center justify-between gap-3">
             <label
               htmlFor={`${id}-claude`}
               className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
             >
               {t("mcp.unifiedPanel.apps.claude")}
             </label>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Checkbox
-              id={`${id}-codex`}
-              checked={server.apps.codex}
+            <Switch
+              id={`${id}-claude`}
+              checked={server.apps.claude}
               onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "codex", checked === true)
+                onToggleApp(id, "claude", checked)
               }
             />
+          </div>
+
+          <div className="flex items-center justify-between gap-3">
             <label
               htmlFor={`${id}-codex`}
               className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
             >
               {t("mcp.unifiedPanel.apps.codex")}
             </label>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Checkbox
-              id={`${id}-gemini`}
-              checked={server.apps.gemini}
+            <Switch
+              id={`${id}-codex`}
+              checked={server.apps.codex}
               onCheckedChange={(checked: boolean) =>
-                onToggleApp(id, "gemini", checked === true)
+                onToggleApp(id, "codex", checked)
               }
             />
+          </div>
+
+          <div className="flex items-center justify-between gap-3">
             <label
               htmlFor={`${id}-gemini`}
               className="text-sm text-gray-700 dark:text-gray-300 cursor-pointer"
             >
               {t("mcp.unifiedPanel.apps.gemini")}
             </label>
+            <Switch
+              id={`${id}-gemini`}
+              checked={server.apps.gemini}
+              onCheckedChange={(checked: boolean) =>
+                onToggleApp(id, "gemini", checked)
+              }
+            />
           </div>
         </div>
 
         {/* 右侧：操作按钮 */}
         <div className="flex items-center gap-2 flex-shrink-0">
-          {docsUrl && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={openDocs}
-              title={t("mcp.presets.docs")}
-            >
-              {t("mcp.presets.docs")}
-            </Button>
-          )}
           <Button
             type="button"
             variant="ghost"
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index edc2441..2482958 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     ref={ref}
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-300 dark:data-[state=unchecked]:bg-gray-700",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-emerald-500 dark:data-[state=checked]:bg-emerald-600 data-[state=unchecked]:bg-gray-300 dark:data-[state=unchecked]:bg-gray-700",
       className,
     )}
     {...props}