refactor(ui): extract shared components and deduplicate MCP/Skills panels (#897)

* refactor(ui): add tooltips and icons to MCP and Skills panels

* refactor: deduplicate UnifiedSkillsPanel and UnifiedMcpPanel shared code

src/components/mcp/UnifiedMcpPanel.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Server } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Switch } from "@/components/ui/switch";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import {
   useAllMcpServers,
   useToggleMcpApp,
@@ -13,19 +13,19 @@ import type { McpServer } from "@/types";
 import type { AppId } from "@/lib/api/types";
 import McpFormModal from "./McpFormModal";
 import { ConfirmDialog } from "../ConfirmDialog";
-import { Edit3, Trash2 } from "lucide-react";
+import { Edit3, Trash2, ExternalLink } from "lucide-react";
 import { settingsApi } from "@/lib/api";
 import { mcpPresets } from "@/config/mcpPresets";
 import { toast } from "sonner";
+import { APP_IDS } from "@/config/appConfig";
+import { AppCountBar } from "@/components/common/AppCountBar";
+import { AppToggleGroup } from "@/components/common/AppToggleGroup";
+import { ListItemRow } from "@/components/common/ListItemRow";
 
 interface UnifiedMcpPanelProps {
   onOpenChange: (open: boolean) => void;
 }
 
-/**
- * 统一 MCP 管理面板
- * v3.7.0 新架构：所有 MCP 服务器统一管理，每个服务器通过复选框控制应用到哪些客户端
- */
 export interface UnifiedMcpPanelHandle {
   openAdd: () => void;
   openImport: () => void;
@@ -45,26 +45,22 @@ const UnifiedMcpPanel = React.forwardRef<
     onConfirm: () => void;
   } | null>(null);
 
-  // Queries and Mutations
   const { data: serversMap, isLoading } = useAllMcpServers();
   const toggleAppMutation = useToggleMcpApp();
   const deleteServerMutation = useDeleteMcpServer();
   const importMutation = useImportMcpFromApps();
 
-  // Convert serversMap to array for easier rendering
   const serverEntries = useMemo((): Array<[string, McpServer]> => {
     if (!serversMap) return [];
     return Object.entries(serversMap);
   }, [serversMap]);
 
-  // Count enabled servers per app
   const enabledCounts = useMemo(() => {
     const counts = { claude: 0, codex: 0, gemini: 0, opencode: 0 };
     serverEntries.forEach(([_, server]) => {
-      if (server.apps.claude) counts.claude++;
-      if (server.apps.codex) counts.codex++;
-      if (server.apps.gemini) counts.gemini++;
-      if (server.apps.opencode) counts.opencode++;
+      for (const app of APP_IDS) {
+        if (server.apps[app]) counts[app]++;
+      }
     });
     return counts;
   }, [serverEntries]);
@@ -77,9 +73,7 @@ const UnifiedMcpPanel = React.forwardRef<
     try {
       await toggleAppMutation.mutateAsync({ serverId, app, enabled });
     } catch (error) {
-      toast.error(t("common.error"), {
-        description: String(error),
-      });
+      toast.error(t("common.error"), { description: String(error) });
     }
   };
 
@@ -106,9 +100,7 @@ const UnifiedMcpPanel = React.forwardRef<
         });
       }
     } catch (error) {
-      toast.error(t("common.error"), {
-        description: String(error),
-      });
+      toast.error(t("common.error"), { description: String(error) });
     }
   };
 
@@ -128,9 +120,7 @@ const UnifiedMcpPanel = React.forwardRef<
           setConfirmDialog(null);
           toast.success(t("common.success"), { closeButton: true });
         } catch (error) {
-          toast.error(t("common.error"), {
-            description: String(error),
-          });
+          toast.error(t("common.error"), { description: String(error) });
         }
       },
     });
@@ -143,18 +133,11 @@ const UnifiedMcpPanel = React.forwardRef<
 
   return (
     <div className="px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
-      {/* Info Section */}
-      <div className="flex-shrink-0 py-4 glass rounded-xl border border-white/10 mb-4 px-6">
-        <div className="text-sm text-muted-foreground">
-          {t("mcp.serverCount", { count: serverEntries.length })} ·{" "}
-          {t("mcp.unifiedPanel.apps.claude")}: {enabledCounts.claude} ·{" "}
-          {t("mcp.unifiedPanel.apps.codex")}: {enabledCounts.codex} ·{" "}
-          {t("mcp.unifiedPanel.apps.gemini")}: {enabledCounts.gemini} ·{" "}
-          {t("mcp.unifiedPanel.apps.opencode")}: {enabledCounts.opencode}
-        </div>
-      </div>
+      <AppCountBar
+        totalLabel={t("mcp.serverCount", { count: serverEntries.length })}
+        counts={enabledCounts}
+      />
 
-      {/* Content - Scrollable */}
       <div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
         {isLoading ? (
           <div className="text-center py-12 text-muted-foreground">
@@ -173,22 +156,24 @@ const UnifiedMcpPanel = React.forwardRef<
             </p>
           </div>
         ) : (
-          <div className="space-y-3">
-            {serverEntries.map(([id, server]) => (
-              <UnifiedMcpListItem
-                key={id}
-                id={id}
-                server={server}
-                onToggleApp={handleToggleApp}
-                onEdit={handleEdit}
-                onDelete={handleDelete}
-              />
-            ))}
-          </div>
+          <TooltipProvider delayDuration={300}>
+            <div className="rounded-xl border border-border-default overflow-hidden">
+              {serverEntries.map(([id, server], index) => (
+                <UnifiedMcpListItem
+                  key={id}
+                  id={id}
+                  server={server}
+                  onToggleApp={handleToggleApp}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                  isLast={index === serverEntries.length - 1}
+                />
+              ))}
+            </div>
+          </TooltipProvider>
         )}
       </div>
 
-      {/* Form Modal */}
       {isFormOpen && (
         <McpFormModal
           editingId={editingId || undefined}
@@ -205,7 +190,6 @@ const UnifiedMcpPanel = React.forwardRef<
         />
       )}
 
-      {/* Confirm Dialog */}
       {confirmDialog && (
         <ConfirmDialog
           isOpen={confirmDialog.isOpen}
@@ -221,16 +205,13 @@ const UnifiedMcpPanel = React.forwardRef<
 
 UnifiedMcpPanel.displayName = "UnifiedMcpPanel";
 
-/**
- * 统一 MCP 列表项组件
- * 展示服务器名称、描述，以及三个应用的复选框
- */
 interface UnifiedMcpListItemProps {
   id: string;
   server: McpServer;
   onToggleApp: (serverId: string, app: AppId, enabled: boolean) => void;
   onEdit: (id: string) => void;
   onDelete: (id: string) => void;
+  isLast?: boolean;
 }
 
 const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
@@ -239,12 +220,12 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
   onToggleApp,
   onEdit,
   onDelete,
+  isLast,
 }) => {
   const { t } = useTranslation();
   const name = server.name || id;
   const description = server.description || "";
 
-  // 匹配预设元信息
   const meta = mcpPresets.find((p) => p.id === id);
   const docsUrl = server.docs || meta?.docs;
   const homepageUrl = server.homepage || meta?.homepage;
@@ -261,126 +242,61 @@ const UnifiedMcpListItem: React.FC<UnifiedMcpListItemProps> = ({
   };
 
   return (
-    <div className="group relative flex items-center gap-4 p-4 rounded-xl border border-border-default bg-muted/50 hover:bg-muted hover:border-border-default/80 hover:shadow-sm transition-all duration-300">
-      {/* 左侧：服务器信息 */}
+    <ListItemRow isLast={isLast}>
       <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2 mb-1">
-          <h3 className="font-medium text-foreground">{name}</h3>
+        <div className="flex items-center gap-1.5">
+          <span className="font-medium text-sm text-foreground truncate">{name}</span>
           {docsUrl && (
-            <Button
+            <button
               type="button"
-              variant="ghost"
-              size="sm"
               onClick={openDocs}
+              className="text-muted-foreground/60 hover:text-foreground flex-shrink-0"
               title={t("mcp.presets.docs")}
             >
-              {t("mcp.presets.docs")}
-            </Button>
+              <ExternalLink size={12} />
+            </button>
           )}
         </div>
         {description && (
-          <p className="text-sm text-muted-foreground line-clamp-2">
+          <p className="text-xs text-muted-foreground truncate" title={description}>
             {description}
           </p>
         )}
         {!description && tags && tags.length > 0 && (
-          <p className="text-xs text-muted-foreground/70 truncate">
+          <p className="text-xs text-muted-foreground/60 truncate">
             {tags.join(", ")}
           </p>
         )}
       </div>
 
-      {/* 中间：应用开关 */}
-      <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-foreground/80 cursor-pointer"
-          >
-            {t("mcp.unifiedPanel.apps.claude")}
-          </label>
-          <Switch
-            id={`${id}-claude`}
-            checked={server.apps.claude}
-            onCheckedChange={(checked: boolean) =>
-              onToggleApp(id, "claude", checked)
-            }
-          />
-        </div>
+      <AppToggleGroup
+        apps={server.apps}
+        onToggle={(app, enabled) => onToggleApp(id, app, enabled)}
+      />
 
-        <div className="flex items-center justify-between gap-3">
-          <label
-            htmlFor={`${id}-codex`}
-            className="text-sm text-foreground/80 cursor-pointer"
-          >
-            {t("mcp.unifiedPanel.apps.codex")}
-          </label>
-          <Switch
-            id={`${id}-codex`}
-            checked={server.apps.codex}
-            onCheckedChange={(checked: boolean) =>
-              onToggleApp(id, "codex", checked)
-            }
-          />
-        </div>
-
-        <div className="flex items-center justify-between gap-3">
-          <label
-            htmlFor={`${id}-gemini`}
-            className="text-sm text-foreground/80 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 className="flex items-center justify-between gap-3">
-          <label
-            htmlFor={`${id}-opencode`}
-            className="text-sm text-foreground/80 cursor-pointer"
-          >
-            {t("mcp.unifiedPanel.apps.opencode")}
-          </label>
-          <Switch
-            id={`${id}-opencode`}
-            checked={server.apps.opencode}
-            onCheckedChange={(checked: boolean) =>
-              onToggleApp(id, "opencode", checked)
-            }
-          />
-        </div>
-      </div>
-
-      {/* 右侧：操作按钮 */}
-      <div className="flex items-center gap-2 flex-shrink-0">
+      <div className="flex items-center gap-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
         <Button
           type="button"
           variant="ghost"
           size="icon"
+          className="h-7 w-7"
           onClick={() => onEdit(id)}
           title={t("common.edit")}
         >
-          <Edit3 size={16} />
+          <Edit3 size={14} />
         </Button>
-
         <Button
           type="button"
           variant="ghost"
           size="icon"
+          className="h-7 w-7 hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
           onClick={() => onDelete(id)}
-          className="hover:text-red-500 hover:bg-red-100 dark:hover:text-red-400 dark:hover:bg-red-500/10"
           title={t("common.delete")}
         >
-          <Trash2 size={16} />
+          <Trash2 size={14} />
         </Button>
       </div>
-    </div>
+    </ListItemRow>
   );
 };