feat: add empty state for server list when there are 0 servers

Author: kantord

src/app/catalog/components/__tests__/servers.test.tsx

@@ -111,8 +111,9 @@ describe("Servers", () => {
         />,
       );
 
+      expect(screen.getByText("No results found")).toBeVisible();
       expect(
-        screen.getByText('No servers found matching "nonexistent"'),
+        screen.getByText(/couldn't find any servers matching "nonexistent"/),
       ).toBeVisible();
     });
   });
@@ -122,12 +123,23 @@ describe("Servers", () => {
       render(<Servers servers={[]} viewMode="grid" searchQuery="" />);
 
       expect(screen.getByText("No servers available")).toBeVisible();
+      expect(
+        screen.getByText(/no MCP servers in the catalog yet/i),
+      ).toBeVisible();
     });
 
     it("shows no servers message in list mode", () => {
       render(<Servers servers={[]} viewMode="list" searchQuery="" />);
 
       expect(screen.getByText("No servers available")).toBeVisible();
     });
+
+    it("displays illustration in empty state", () => {
+      const { container } = render(
+        <Servers servers={[]} viewMode="grid" searchQuery="" />,
+      );
+
+      expect(container.querySelector("svg")).toBeInTheDocument();
+    });
   });
 });

src/app/catalog/components/empty-state.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import { IllustrationEmptyInbox } from "@/components/illustrations/illustration-empty-inbox";
+import { IllustrationNoSearchResults } from "@/components/illustrations/illustration-no-search-results";
+
+interface EmptyStateProps {
+  variant: "no-servers" | "no-results";
+  searchQuery?: string;
+  actions?: ReactNode;
+}
+
+export function EmptyState({ variant, searchQuery, actions }: EmptyStateProps) {
+  const isNoResults = variant === "no-results";
+
+  return (
+    <div className="flex items-center justify-center py-20">
+      <div className="flex flex-col items-center text-center gap-4 max-w-md">
+        {isNoResults ? (
+          <IllustrationNoSearchResults className="size-32" />
+        ) : (
+          <IllustrationEmptyInbox className="size-32" />
+        )}
+
+        <div className="space-y-2">
+          <h2 className="text-xl font-semibold tracking-tight">
+            {isNoResults ? "No results found" : "No servers available"}
+          </h2>
+          <p className="text-muted-foreground">
+            {isNoResults
+              ? `We couldn't find any servers matching "${searchQuery}". Try adjusting your search.`
+              : "There are no MCP servers in the catalog yet. Check back later."}
+          </p>
+        </div>
+
+        {actions && <div className="flex gap-2 mt-2">{actions}</div>}
+      </div>
+    </div>
+  );
+}

src/app/catalog/components/servers.tsx

@@ -3,6 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 import type { V0ServerJson } from "@/generated/types.gen";
+import { EmptyState } from "./empty-state";
 import { ServerCard } from "./server-card";
 import { ServersTable } from "./servers-table";
 
@@ -42,11 +43,10 @@ export function Servers({ servers, viewMode, searchQuery }: ServersProps) {
 
   if (filteredServers.length === 0) {
     return (
-      <div className="p-12 text-center">
-        {searchQuery
-          ? `No servers found matching "${searchQuery}"`
-          : "No servers available"}
-      </div>
+      <EmptyState
+        variant={searchQuery ? "no-results" : "no-servers"}
+        searchQuery={searchQuery}
+      />
     );
   }