MCP - Factor out servers toggle list [2/2] (#2681)

* factor out servers toggle list

* changeset

.changeset/polite-lions-deliver.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+factor out servers list

.changeset/spotty-ears-jump.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+make ServerRow not optionally not expandable

webview-ui/src/components/mcp/configuration/tabs/installed/InstalledServersView.tsx

@@ -1,7 +1,7 @@
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { vscode } from "../../../../../utils/vscode"
 import { useExtensionState } from "../../../../../context/ExtensionStateContext"
-import ServerRow from "./server-row/ServerRow"
+import ServersToggleList from "./ServersToggleList"
 const InstalledServersView = () => {
 	const { mcpServers: servers } = useExtensionState()
 
@@ -29,31 +29,7 @@ const InstalledServersView = () => {
 				</VSCodeLink>
 			</div>
 
-			{servers.length > 0 ? (
-				<div
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						gap: "10px",
-					}}>
-					{servers.map((server) => (
-						<ServerRow key={server.name} server={server} />
-					))}
-				</div>
-			) : (
-				<div
-					style={{
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						gap: "12px",
-						marginTop: 20,
-						marginBottom: 20,
-						color: "var(--vscode-descriptionForeground)",
-					}}>
-					No MCP servers installed
-				</div>
-			)}
+			<ServersToggleList servers={servers} />
 
 			{/* Settings Section */}
 			<div style={{ marginBottom: "20px", marginTop: 10 }}>

webview-ui/src/components/mcp/configuration/tabs/installed/ServersToggleList.tsx

@@ -0,0 +1,18 @@
+import { McpServer } from "@shared/mcp"
+import ServerRow from "./server-row/ServerRow"
+
+const ServersToggleList = ({ servers }: { servers: McpServer[] }) => {
+	return servers.length > 0 ? (
+		<div className="flex flex-col gap-2.5">
+			{servers.map((server) => (
+				<ServerRow key={server.name} server={server} />
+			))}
+		</div>
+	) : (
+		<div className="flex flex-col items-center gap-3 my-5 text-[var(--vscode-descriptionForeground)]">
+			No MCP servers installed
+		</div>
+	)
+}
+
+export default ServersToggleList

webview-ui/src/components/mcp/configuration/tabs/installed/server-row/ServerRow.tsx

@@ -17,7 +17,7 @@ import McpToolRow from "./McpToolRow"
 import McpResourceRow from "./McpResourceRow"
 import { useExtensionState } from "../../../../../../context/ExtensionStateContext"
 
-const ServerRow = ({ server }: { server: McpServer }) => {
+const ServerRow = ({ server, isExpandable = true }: { server: McpServer; isExpandable?: boolean }) => {
 	const { mcpMarketplaceCatalog, autoApprovalSettings } = useExtensionState()
 
 	const [isExpanded, setIsExpanded] = useState(false)
@@ -35,7 +35,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 	}
 
 	const handleRowClick = () => {
-		if (!server.error) {
+		if (!server.error && isExpandable) {
 			setIsExpanded(!isExpanded)
 		}
 	}
@@ -104,12 +104,13 @@ const ServerRow = ({ server }: { server: McpServer }) => {
 					alignItems: "center",
 					padding: "8px",
 					background: "var(--vscode-textCodeBlock-background)",
-					cursor: server.error ? "default" : "pointer",
+
+					cursor: server.error ? "default" : isExpandable ? "pointer" : "default",
 					borderRadius: isExpanded || server.error ? "4px 4px 0 0" : "4px",
 					opacity: server.disabled ? 0.6 : 1,
 				}}
 				onClick={handleRowClick}>
-				{!server.error && (
+				{!server.error && isExpandable && (
 					<span className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`} style={{ marginRight: "8px" }} />
 				)}
 				<span