Add search and sorting functionality to MCP marketplace view

Author: HadasaSchechterV

webview-ui/src/components/mcp/marketplace/McpMarketplaceView.tsx

@@ -1,18 +1,29 @@
-import { useEffect, useState } from "react"
-import { VSCodeButton, VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react"
+import { useEffect, useState, useMemo } from "react"
+import {
+	VSCodeButton,
+	VSCodeProgressRing,
+	VSCodeDropdown,
+	VSCodeOption,
+	VSCodeTextField,
+} from "@vscode/webview-ui-toolkit/react"
 import { useAppTranslation } from "../../../i18n/TranslationContext"
 import { useExtensionState } from "../../../context/ExtensionStateContext"
 import { vscode } from "../../../utils/vscode"
 import { McpMarketplaceItem } from "../../../../../src/shared/mcp"
 import McpMarketplaceCard from "./McpMarketplaceCard"
 import McpSubmitCard from "./McpSubmitCard"
 
+type SortOption = "stars" | "downloads" | "newest" | "updated"
+
 const McpMarketplaceView = () => {
 	const { t } = useAppTranslation()
 	const { mcpServers } = useExtensionState()
 	const [isLoading, setIsLoading] = useState(true)
 	const [error, setError] = useState<string | null>(null)
 	const [items, setItems] = useState<McpMarketplaceItem[]>([])
+	const [searchQuery, setSearchQuery] = useState("")
+	const [selectedCategory, setSelectedCategory] = useState<string>("all")
+	const [sortBy, setSortBy] = useState<SortOption>("stars")
 
 	useEffect(() => {
 		const handleMessage = (event: MessageEvent) => {
@@ -31,15 +42,52 @@ const McpMarketplaceView = () => {
 				}
 			}
 		}
-
 		window.addEventListener("message", handleMessage)
-
-		// Request marketplace data when component mounts
 		vscode.postMessage({ type: "fetchMcpMarketplace" })
-
 		return () => window.removeEventListener("message", handleMessage)
 	}, [])
 
+	const categories = useMemo(() => {
+		const categorySet = new Set(items.map((item) => item.category))
+		return ["all", ...Array.from(categorySet)]
+	}, [items])
+
+	const filteredAndSortedItems = useMemo(() => {
+		let filtered = items
+
+		// Apply search filter
+		if (searchQuery) {
+			const query = searchQuery.toLowerCase()
+			filtered = filtered.filter(
+				(item) =>
+					item.name.toLowerCase().includes(query) ||
+					item.description.toLowerCase().includes(query) ||
+					item.tags.some((tag) => tag.toLowerCase().includes(query)),
+			)
+		}
+
+		// Apply category filter
+		if (selectedCategory !== "all") {
+			filtered = filtered.filter((item) => item.category === selectedCategory)
+		}
+
+		// Apply sorting
+		return [...filtered].sort((a, b) => {
+			switch (sortBy) {
+				case "stars":
+					return b.githubStars - a.githubStars
+				case "downloads":
+					return b.downloadCount - a.downloadCount
+				case "newest":
+					return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+				case "updated":
+					return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+				default:
+					return 0
+			}
+		})
+	}, [items, searchQuery, selectedCategory, sortBy])
+
 	if (isLoading) {
 		return (
 			<div
@@ -84,7 +132,33 @@ const McpMarketplaceView = () => {
 
 	return (
 		<div style={{ padding: "0 10px" }}>
-			{items.length === 0 ? (
+			<div style={{ padding: "16px 0", display: "flex", gap: "16px", alignItems: "center" }}>
+				<VSCodeTextField
+					placeholder={t("mcp:marketplace.searchPlaceholder")}
+					value={searchQuery}
+					onChange={(e) => setSearchQuery((e.target as HTMLInputElement).value)}
+					style={{ flexGrow: 1 }}
+				/>
+				<VSCodeDropdown
+					value={selectedCategory}
+					onChange={(e) => setSelectedCategory((e.target as HTMLSelectElement).value)}>
+					{categories.map((category) => (
+						<VSCodeOption key={category} value={category}>
+							{category === "all" ? t("mcp:marketplace.allCategories") : category}
+						</VSCodeOption>
+					))}
+				</VSCodeDropdown>
+				<VSCodeDropdown
+					value={sortBy}
+					onChange={(e) => setSortBy((e.target as HTMLSelectElement).value as SortOption)}>
+					<VSCodeOption value="stars">{t("mcp:marketplace.sortByStars")}</VSCodeOption>
+					<VSCodeOption value="downloads">{t("mcp:marketplace.sortByDownloads")}</VSCodeOption>
+					<VSCodeOption value="newest">{t("mcp:marketplace.sortByNewest")}</VSCodeOption>
+					<VSCodeOption value="updated">{t("mcp:marketplace.sortByUpdated")}</VSCodeOption>
+				</VSCodeDropdown>
+			</div>
+
+			{filteredAndSortedItems.length === 0 ? (
 				<div
 					style={{
 						display: "flex",
@@ -96,7 +170,11 @@ const McpMarketplaceView = () => {
 						textAlign: "center",
 					}}>
 					<span className="codicon codicon-inbox" style={{ fontSize: "48px", marginBottom: "16px" }} />
-					<p style={{ margin: 0 }}>{t("mcp:marketplace.noServers")}</p>
+					<p style={{ margin: 0 }}>
+						{searchQuery || selectedCategory !== "all"
+							? t("mcp:marketplace.noResults")
+							: t("mcp:marketplace.noServers")}
+					</p>
 				</div>
 			) : (
 				<div
@@ -106,7 +184,7 @@ const McpMarketplaceView = () => {
 						gap: "16px",
 						padding: "16px 0",
 					}}>
-					{items.map((item) => (
+					{filteredAndSortedItems.map((item) => (
 						<McpMarketplaceCard key={item.mcpId} item={item} installedServers={mcpServers} />
 					))}
 					<McpSubmitCard />

webview-ui/src/i18n/locales/en/mcp.json

@@ -31,9 +31,16 @@
 	"marketplace": {
 		"loading": "Loading marketplace...",
 		"noServers": "No servers available",
+		"noResults": "No matching servers found",
 		"retry": "Retry",
 		"install": "Install",
-		"by": "by {{author}}"
+		"by": "by {{author}}",
+		"searchPlaceholder": "Search servers...",
+		"allCategories": "All Categories",
+		"sortByStars": "Sort by Stars",
+		"sortByDownloads": "Sort by Downloads",
+		"sortByNewest": "Sort by Newest",
+		"sortByUpdated": "Sort by Last Updated"
 	},
 	"networkTimeout": {
 		"label": "Network Timeout",