block · T0nyzz · Aug 16, 2026
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { after, afterEach, before, test } from "node:test";
+
+import { JSDOM } from "jsdom";
+
+const dom = new JSDOM("<!doctype html><html><body></body></html>", {
+  url: "http://localhost",
+});
+
+before(() => {
+  Object.assign(globalThis, {
+    document: dom.window.document,
+    HTMLElement: dom.window.HTMLElement,
+    IS_REACT_ACT_ENVIRONMENT: true,
+    window: dom.window,
+  });
+  dom.window.matchMedia = () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+  });
+});
+
+afterEach(async () => {
+  const { cleanup } = await import("@testing-library/react");
+  cleanup();
+});
+
+after(() => dom.window.close());
+
+test("empty projects state renders a create-project action that fires the provided callback", async () => {
+  const { createElement } = await import("react");
+  const { fireEvent, render, screen } = await import("@testing-library/react");
+  const { EmptyState } = await import("./ProjectCards.tsx");
+
+  let createClicked = false;
+  render(
+    createElement(EmptyState, {
+      onCreateProject: () => {
+        createClicked = true;
+      },
+    }),
+  );
+
+  assert.ok(screen.getByText("No projects yet"));
+  const createButton = screen.getByRole("button", { name: "Create project" });
+  fireEvent.click(createButton);
+  assert.equal(createClicked, true);
+});
@@ -327,7 +327,11 @@ function RepositoryUnavailableIndicator({
   );
 }
 
-export function EmptyState() {
+export function EmptyState({
+  onCreateProject,
+}: {
+  onCreateProject: () => void;
+}) {
   return (
     <div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-16 text-center">
       <Folders className="h-10 w-10 text-muted-foreground/40" />
@@ -337,6 +341,9 @@ export function EmptyState() {
           Projects published to this relay will appear here.
         </p>
       </div>
+      <Button onClick={onCreateProject} size="sm" type="button">
+        Create project
+      </Button>
     </div>
   );
 }

@@ -15,7 +15,10 @@ import {
   useProjectsWorkItemsQuery,
 } from "@/features/projects/hooks";
 import { useRepositoryActivitySummariesQuery } from "@/features/projects/repositoryActivityHooks";
-import { useCreateProjectMutation } from "@/features/projects/useCreateProject";
+import {
+  type CreateProjectInput,
+  useCreateProjectMutation,
+} from "@/features/projects/useCreateProject";
 import { selectProjectRepository } from "@/features/projects/projectModels";
 import { useProjectsRepoSnapshotsQuery } from "@/features/projects/useProjectsRepoSnapshots";
 import {
@@ -573,6 +576,23 @@ export function ProjectsView() {
     [deleteProjectMutation],
   );
 
+  const handleCreateProject = React.useCallback(
+    async (input: CreateProjectInput) => {
+      const result = await createProjectMutation.mutateAsync(input);
+      if (result.compatibilityWarning) {
+        toast.warning("Created as a standalone project", {
+          description: result.compatibilityWarning,
+        });
+      } else {
+        toast.success(`Project "${result.project.name}" created.`);
+      }
+      // Land on the complete project list after creation.
+      handleRepositoryScopeChange("all");
+      handleFilterChange("projects");
+    },
+    [createProjectMutation, handleFilterChange, handleRepositoryScopeChange],
+  );
+
   if (projectsQuery.isLoading) {
     return <ViewLoadingFallback kind="projects" />;
   }
@@ -593,7 +613,17 @@ export function ProjectsView() {
   }
 
   if (projects.length === 0) {
-    return <EmptyState />;
+    return (
+      <>
+        <EmptyState onCreateProject={() => setCreateProjectOpen(true)} />
+        <CreateProjectDialog
+          isCreating={createProjectMutation.isPending}
+          onCreate={handleCreateProject}
+          onOpenChange={setCreateProjectOpen}
+          open={createProjectOpen}
+        />
+      </>
+    );
   }
 
   const projectItems =
@@ -790,19 +820,7 @@ export function ProjectsView() {
       <div className="absolute right-4 top-4 z-40">{createMenu}</div>
       <CreateProjectDialog
         isCreating={createProjectMutation.isPending}
-        onCreate={async (input) => {
-          const result = await createProjectMutation.mutateAsync(input);
-          if (result.compatibilityWarning) {
-            toast.warning("Created as a standalone project", {
-              description: result.compatibilityWarning,
-            });
-          } else {
-            toast.success(`Project "${result.project.name}" created.`);
-          }
-          // Land on the complete project list after creation.
-          handleRepositoryScopeChange("all");
-          handleFilterChange("projects");
-        }}
+        onCreate={handleCreateProject}
         onOpenChange={setCreateProjectOpen}
         open={createProjectOpen}
       />