Keep the template picker in the create flow, make catalog cards real links, and stop showing a fake community when review has no draft.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/GovernanceTemplateGrid.test.tsx

@@ -1,10 +1,13 @@
-import { describe, vi } from "vitest";
+import { describe, expect, it } from "vitest";
+import { screen } from "@testing-library/react";
 import {
   componentTestSuite,
   type ComponentTestSuiteConfig,
 } from "../utils/componentTestSuite";
+import { renderWithProviders as render } from "../utils/test-utils";
 import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
 import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+import "@testing-library/jest-dom/vitest";
 
 type Props = React.ComponentProps<typeof GovernanceTemplateGrid>;
 
@@ -13,10 +16,10 @@ const config: ComponentTestSuiteConfig<Props> = {
   name: "GovernanceTemplateGrid",
   props: {
     entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2),
-    onTemplateClick: vi.fn(),
+    hrefForTemplate: (slug: string) => `/create/review-template/${slug}`,
   } as Props,
-  requiredProps: ["entries", "onTemplateClick"],
-  primaryRole: "button",
+  requiredProps: ["entries", "hrefForTemplate"],
+  primaryRole: "link",
   testCases: {
     renders: true,
     accessibility: true,
@@ -25,4 +28,21 @@ const config: ComponentTestSuiteConfig<Props> = {
 
 describe("GovernanceTemplateGrid", () => {
   componentTestSuite<Props>(config);
+
+  it("renders each catalog card as a link to template review", () => {
+    const entries = GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2);
+    render(
+      <GovernanceTemplateGrid
+        entries={entries}
+        hrefForTemplate={(slug) => `/create/review-template/${slug}`}
+      />,
+    );
+
+    for (const entry of entries) {
+      expect(
+        screen.getByRole("link", { name: new RegExp(entry.title, "i") }),
+      ).toHaveAttribute("href", `/create/review-template/${entry.slug}`);
+    }
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
 });

tests/components/ReviewPage.test.tsx

@@ -10,6 +10,18 @@ import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/Com
 import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
 import { testRouter } from "../mocks/navigation";
 
+function ReviewWithTitle({ title }: { title: string }) {
+  const { state, updateState } = useCreateFlow();
+  const seededRef = React.useRef(false);
+  useEffect(() => {
+    if (seededRef.current) return;
+    seededRef.current = true;
+    updateState({ title });
+  }, [title, updateState]);
+  if (state.title !== title) return null;
+  return <CommunityReviewScreen />;
+}
+
 describe("CommunityReviewScreen", () => {
   beforeEach(() => {
     testRouter.replace.mockReset();
@@ -21,8 +33,24 @@ describe("CommunityReviewScreen", () => {
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
-  it("renders HeaderLockup with expected title", () => {
+  it("shows an empty state instead of a baked-in community name", () => {
     render(<CommunityReviewScreen />);
+    expect(
+      screen.getByRole("heading", { name: "No community in progress yet" }),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Mutual Aid Mondays")).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("heading", {
+        name: "Your community is added - congrats!",
+      }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Start creating" }),
+    ).toHaveAttribute("href", "/create/informational");
+  });
+
+  it("renders HeaderLockup with expected title when a community name exists", () => {
+    render(<ReviewWithTitle title="Garden Club" />);
     expect(
       screen.getByRole("heading", {
         name: "Your community is added - congrats!",
@@ -30,8 +58,8 @@ describe("CommunityReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders HeaderLockup with expected description", () => {
-    render(<CommunityReviewScreen />);
+  it("renders HeaderLockup with expected description when a community name exists", () => {
+    render(<ReviewWithTitle title="Garden Club" />);
     expect(
       screen.getByText(
         /In the next section, we'll go through membership, decision-making, conflict resolution, and community values and create a custom operating manual for your organization based on the specifics you just shared./i,
@@ -39,13 +67,13 @@ describe("CommunityReviewScreen", () => {
     ).toBeInTheDocument();
   });
 
-  it("renders Rule with title fallback when no community name is set", () => {
-    render(<CommunityReviewScreen />);
-    expect(screen.getByText("Mutual Aid Mondays")).toBeInTheDocument();
+  it("renders Rule with the community name from state", () => {
+    render(<ReviewWithTitle title="Garden Club" />);
+    expect(screen.getByText("Garden Club")).toBeInTheDocument();
   });
 
   it("omits the Rule description when the user has not entered community context", () => {
-    render(<CommunityReviewScreen />);
+    render(<ReviewWithTitle title="Garden Club" />);
     expect(
       screen.queryByText(
         /Mutual Aid Monday is a grassroots community in Denver/i,
@@ -53,13 +81,13 @@ describe("CommunityReviewScreen", () => {
     ).not.toBeInTheDocument();
   });
 
-  it("renders Rule as a button (card is interactive)", () => {
-    render(<CommunityReviewScreen />);
+  it("renders Rule as a button when a community name exists", () => {
+    render(<ReviewWithTitle title="Garden Club" />);
     const buttons = screen.getAllByRole("button");
     expect(buttons.length).toBeGreaterThanOrEqual(1);
-    expect(
-      buttons.some((el) => el.textContent?.includes("Mutual Aid Mondays")),
-    ).toBe(true);
+    expect(buttons.some((el) => el.textContent?.includes("Garden Club"))).toBe(
+      true,
+    );
   });
 });