From e3b4b2c81664acb0d862545b0b66cc32031f0dd7 Mon Sep 17 00:00:00 2001
From: pashpashpash <nik@nugbase.com>
Date: Fri, 14 Feb 2025 14:25:58 -0800
Subject: [PATCH] ui polish

---
 .../mcp/marketplace/McpMarketplaceCard.tsx    | 181 +++++++++---------
 1 file changed, 95 insertions(+), 86 deletions(-)

diff --git a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
index bbe3ace015..da11b6f78b 100644
--- a/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
+++ b/webview-ui/src/components/mcp/marketplace/McpMarketplaceCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { McpMarketplaceItem, McpServer } from "../../../../../src/shared/mcp"
 import { vscode } from "../../../utils/vscode"
 
@@ -36,101 +36,110 @@ const McpMarketplaceCard = ({ item, installedServers }: McpMarketplaceCardProps)
 				flexDirection: "column",
 				gap: "12px",
 			}}>
-			<div style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
-				{item.logoUrl && (
-					<img
-						src={item.logoUrl}
-						alt={`${item.name} logo`}
-						style={{
-							width: "48px",
-							height: "48px",
-							borderRadius: "4px",
-						}}
-					/>
-				)}
-				<div style={{ flex: 1 }}>
-					<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
-						<div>
-							<h3 style={{ margin: 0, fontSize: "16px" }}>{item.name}</h3>
-							<div style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>by {item.author}</div>
-						</div>
-						<VSCodeButton
-							appearance={isInstalled ? "secondary" : "primary"}
-							disabled={isInstalled || isDownloading}
-							onClick={() => {
-								if (!isInstalled && !isDownloading) {
-									setIsDownloading(true)
-									vscode.postMessage({
-										type: "downloadMcp",
-										mcpId: item.mcpId,
-									})
-								}
-							}}>
-							<span
-								className={`codicon codicon-${isInstalled ? "check" : isDownloading ? "sync codicon-modifier-spin" : "cloud-download"}`}
-								style={{ marginRight: "6px" }}
-							/>
-							{isInstalled ? "Installed" : isDownloading ? "Downloading..." : "Download"}
-						</VSCodeButton>
-					</div>
-					<p style={{ margin: "8px 0", fontSize: "13px" }}>{item.description}</p>
-					<div
-						style={{
-							display: "flex",
-							gap: "16px",
-							fontSize: "12px",
-							color: "var(--vscode-descriptionForeground)",
-							alignItems: "center",
-						}}>
-						<VSCodeButton
-							appearance="icon"
-							onClick={() => vscode.postMessage({ type: "openFile", text: item.githubUrl })}
-							title="View on GitHub">
-							<span className="codicon codicon-github" />
-						</VSCodeButton>
-						<div style={{ display: "flex", alignItems: "center", gap: "4px", marginRight: "8px" }}>
-							<span className="codicon codicon-star-full" />
-							{item.githubStars?.toLocaleString() ?? 0}
-						</div>
-						<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-							<span className="codicon codicon-cloud-download" />
-							{item.downloadCount?.toLocaleString() ?? 0}
-						</div>
-						{item.requiresApiKey && (
-							<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-								<span className="codicon codicon-key" title="Requires API key" />
-							</div>
-						)}
-						{item.isRecommended && (
-							<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-								<span className="codicon codicon-verified" title="Recommended" />
-							</div>
-						)}
-					</div>
-					<div style={{ display: "flex", gap: "8px", marginTop: "8px", flexWrap: "wrap" }}>
-						<span
+			<div>
+				<div style={{ display: "flex", gap: "16px", alignItems: "flex-start" }}>
+					{item.logoUrl && (
+						<img
+							src={item.logoUrl}
+							alt={`${item.name} logo`}
 							style={{
-								fontSize: "11px",
-								padding: "2px 6px",
+								width: "48px",
+								height: "48px",
 								borderRadius: "4px",
-								background: "var(--vscode-charts-blue)",
-								color: "var(--vscode-foreground)",
+							}}
+						/>
+					)}
+					<div style={{ flex: 1 }}>
+						<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+							<div>
+								<h3 style={{ margin: 0, fontSize: "16px" }}>{item.name}</h3>
+								<div style={{ fontSize: "12px", color: "var(--vscode-descriptionForeground)" }}>
+									by {item.author}
+								</div>
+							</div>
+							<VSCodeButton
+								appearance={isInstalled ? "secondary" : "primary"}
+								disabled={isInstalled || isDownloading}
+								onClick={() => {
+									if (!isInstalled && !isDownloading) {
+										setIsDownloading(true)
+										vscode.postMessage({
+											type: "downloadMcp",
+											mcpId: item.mcpId,
+										})
+									}
+								}}>
+								<span
+									className={`codicon codicon-${isInstalled ? "check" : isDownloading ? "sync codicon-modifier-spin" : "cloud-download"}`}
+									style={{ marginRight: "6px" }}
+								/>
+								{isInstalled ? "Installed" : isDownloading ? "Downloading..." : "Download"}
+							</VSCodeButton>
+						</div>
+						<p style={{ margin: "8px 0", fontSize: "13px" }}>{item.description}</p>
+						<div
+							style={{
+								display: "flex",
+								gap: "16px",
+								fontSize: "12px",
+								color: "var(--vscode-descriptionForeground)",
+								alignItems: "center",
 							}}>
-							{item.category}
-						</span>
-						{item.tags.map((tag) => (
+							<VSCodeLink
+								href={item.githubUrl}
+								title="View on GitHub"
+								style={{
+									display: "flex",
+									alignItems: "center",
+									height: "16px", // hacky way to get the icon to center. vscodelink does weird stuff
+									color: "var(--vscode-descriptionForeground)",
+								}}>
+								<span className="codicon codicon-github" style={{ fontSize: "16px" }} />
+							</VSCodeLink>
+							<div style={{ display: "flex", alignItems: "center", gap: "4px", marginRight: "8px" }}>
+								<span className="codicon codicon-star-full" />
+								{item.githubStars?.toLocaleString() ?? 0}
+							</div>
+							<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+								<span className="codicon codicon-cloud-download" />
+								{item.downloadCount?.toLocaleString() ?? 0}
+							</div>
+							{item.requiresApiKey && (
+								<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+									<span className="codicon codicon-key" title="Requires API key" />
+								</div>
+							)}
+							{item.isRecommended && (
+								<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+									<span className="codicon codicon-verified" title="Recommended" />
+								</div>
+							)}
+						</div>
+						<div style={{ display: "flex", gap: "8px", marginTop: "8px", flexWrap: "wrap" }}>
 							<span
-								key={tag}
 								style={{
 									fontSize: "11px",
 									padding: "2px 6px",
 									borderRadius: "4px",
-									background: "var(--vscode-badge-background)",
-									color: "var(--vscode-badge-foreground)",
+									background: "var(--vscode-charts-blue)",
+									color: "var(--vscode-foreground)",
 								}}>
-								{tag}
+								{item.category}
 							</span>
-						))}
+							{item.tags.map((tag) => (
+								<span
+									key={tag}
+									style={{
+										fontSize: "11px",
+										padding: "2px 6px",
+										borderRadius: "4px",
+										background: "var(--vscode-badge-background)",
+										color: "var(--vscode-badge-foreground)",
+									}}>
+									{tag}
+								</span>
+							))}
+						</div>
 					</div>
 				</div>
 			</div>