@nextclaw/ui 0.24.0 → 0.24.2

package/src/features/projects/components/project-overview.tsx

@@ -1,81 +1,139 @@
-import { t } from "@/shared/lib/i18n";
+import { formatDateTime, t } from "@/shared/lib/i18n";
 import {
+  useProjectRecentArtifacts,
   useProjectWork,
+  useProjectWorkEvents,
   useProjectWorkSummary,
 } from "@/features/projects/hooks/use-project-work";
+import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work-state-label.utils";
+import { formatProjectRelativeTime } from "@/features/projects/utils/project-artifact-view.utils";
+import {
+  ProjectEmptyState,
+  ProjectFilePreviewButton,
+  ProjectSection,
+} from "./project-section";
 
 export function ProjectOverview({
   projectId,
+  onOpenArtifact,
   onOpenWorkItem,
 }: {
   projectId: string;
+  onOpenArtifact: (path: string, label: string) => void;
   onOpenWorkItem: (workItemId: string) => void;
 }) {
+  useProjectWorkEvents(projectId);
   const summary = useProjectWorkSummary(projectId);
-  const work = useProjectWork(projectId);
-  if (summary.isLoading || work.isLoading)
-    return (
-      <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
-        {t("projectsLoading")}
-      </div>
-    );
-  if (summary.isError || work.isError)
-    return (
-      <div className="rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
-        {t("projectsLoadFailed")}
-      </div>
-    );
-  const recent = work.data!.items.slice(0, 5);
+  const work = useProjectWork(projectId, { limit: 5 });
+  const artifacts = useProjectRecentArtifacts(projectId, 5);
+  const recent =
+    work.data?.pages.flatMap((page) => page.items).slice(0, 5) ?? [];
   return (
     <div className="space-y-5">
       <section
         className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
         aria-label={t("projectsWorkSummary")}
       >
-        {(
-          [
-            ["projectsWorkTotal", summary.data!.total],
-            ["projectsWorkActive", summary.data!.active],
-            ["projectsWorkNeedsAttention", summary.data!.attention],
-            ["projectsWorkCompleted", summary.data!.completed],
-          ] as const
-        ).map(([label, value]) => (
-          <div
-            key={label}
-            className="rounded-xl border border-border/60 bg-card p-4"
-          >
-            <div className="text-2xl font-semibold">{value}</div>
-            <div className="mt-1 text-xs text-muted-foreground">{t(label)}</div>
-          </div>
-        ))}
-      </section>
-      <section>
-        <h2 className="mb-3 text-sm font-semibold">
-          {t("projectsWorkRecentlyUpdated")}
-        </h2>
-        <div className="space-y-2">
-          {recent.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              className="flex w-full items-center justify-between gap-3 rounded-xl border border-border/60 bg-card px-4 py-3 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-              onClick={() => onOpenWorkItem(item.id)}
+        {summary.data ? (
+          (
+            [
+              ["projectsWorkTotal", summary.data!.total],
+              ["projectsWorkActive", summary.data!.active],
+              ["projectsWorkNeedsAttention", summary.data!.attention],
+              ["projectsWorkCompleted", summary.data!.completed],
+            ] as const
+          ).map(([label, value]) => (
+            <div
+              key={label}
+              className="rounded-xl border border-border/60 bg-card p-4"
             >
-              <span className="min-w-0 truncate text-sm font-medium">
-                {item.title}
-              </span>
-              <span className="shrink-0 text-xs text-muted-foreground">
-                {item.state.name}
-              </span>
-            </button>
-          ))}
-          {!recent.length ? (
-            <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
-              {t("projectsWorkEmpty")}
+              <div className="text-2xl font-semibold">{value}</div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                {t(label)}
+              </div>
             </div>
-          ) : null}
-        </div>
+          ))
+        ) : (
+          <div className="col-span-full rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+            {summary.isError ? t("projectsLoadFailed") : t("projectsLoading")}
+          </div>
+        )}
       </section>
+      <div className="grid min-w-0 gap-4 lg:grid-cols-2">
+        <ProjectSection title={t("projectsWorkRecentlyUpdated")}>
+          {work.isLoading ? (
+            <p className="py-5 text-sm text-muted-foreground">
+              {t("projectsLoading")}
+            </p>
+          ) : work.isError ? (
+            <p className="py-5 text-sm text-destructive">
+              {t("projectsLoadFailed")}
+            </p>
+          ) : recent.length ? (
+            <div className="space-y-2">
+              {recent.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className="flex w-full items-center justify-between gap-3 rounded-xl bg-muted/45 px-3 py-3 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  onClick={() => onOpenWorkItem(item.id)}
+                >
+                  <span className="min-w-0 truncate text-sm font-medium">
+                    {item.title}
+                  </span>
+                  <span className="shrink-0 text-xs text-muted-foreground">
+                    {getProjectWorkStateLabel(item.state.name)}
+                  </span>
+                </button>
+              ))}
+            </div>
+          ) : (
+            <ProjectEmptyState>{t("projectsWorkEmpty")}</ProjectEmptyState>
+          )}
+        </ProjectSection>
+        <ProjectSection title={t("projectsRecentArtifacts")}>
+          {artifacts.isLoading ? (
+            <p className="py-5 text-sm text-muted-foreground">
+              {t("projectsLoading")}
+            </p>
+          ) : artifacts.isError ? (
+            <p className="py-5 text-sm text-destructive">
+              {t("projectsLoadFailed")}
+            </p>
+          ) : artifacts.data?.artifacts.length ? (
+            <div className="space-y-2">
+              {artifacts.data.artifacts.map((artifact) => (
+                <ProjectFilePreviewButton
+                  key={artifact.id}
+                  available={artifact.exists}
+                  path={artifact.path}
+                  label={artifact.label ?? artifact.path}
+                  onOpen={onOpenArtifact}
+                  className="block w-full rounded-xl bg-muted/45 p-3 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+                >
+                  <span className="block truncate font-medium">
+                    {artifact.label ?? artifact.path}
+                  </span>
+                  <span className="mt-1 block truncate text-xs text-muted-foreground">
+                    {artifact.workItemTitle}
+                    <time
+                      dateTime={artifact.createdAt}
+                      title={formatDateTime(artifact.createdAt)}
+                    >
+                      {` · ${formatProjectRelativeTime(artifact.createdAt)}`}
+                    </time>
+                    {!artifact.exists ? ` · ${t("projectsUnavailable")}` : ""}
+                  </span>
+                </ProjectFilePreviewButton>
+              ))}
+            </div>
+          ) : (
+            <ProjectEmptyState>
+              {t("projectsNoRecentArtifacts")}
+            </ProjectEmptyState>
+          )}
+        </ProjectSection>
+      </div>
     </div>
   );
 }

package/src/features/projects/components/work/project-work-item-drawer.tsx

@@ -27,11 +27,14 @@ import {
 import { Textarea } from "@/shared/components/ui/textarea";
 import { t } from "@/shared/lib/i18n";
 import {
-  useProjectWork,
   useProjectWorkActions,
   useProjectWorkActivity,
+  useProjectWorkEvents,
   useProjectWorkItem,
+  useProjectWorkStates,
 } from "@/features/projects/hooks/use-project-work";
+import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work-state-label.utils";
+import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
 
 export function ProjectWorkItemDrawer({
   onOpenArtifact,
@@ -48,7 +51,8 @@ export function ProjectWorkItemDrawer({
 }) {
   const item = useProjectWorkItem(projectId, workItemId);
   const activity = useProjectWorkActivity(projectId, workItemId);
-  const work = useProjectWork(projectId, true);
+  useProjectWorkEvents(projectId);
+  const states = useProjectWorkStates(projectId);
   return (
     <Sheet open={Boolean(workItemId)} onOpenChange={onOpenChange}>
       <SheetContent
@@ -70,7 +74,7 @@ export function ProjectWorkItemDrawer({
           <ProjectWorkItemEditor
             key={`${item.data.id}:${item.data.version}`}
             item={item.data}
-            states={work.data?.states ?? []}
+            states={states.data ?? []}
             activities={activity.data?.activities ?? []}
             onOpenArtifact={(path, label) =>
               onOpenArtifact(joinProjectPath(projectRoot, path), label)
@@ -193,7 +197,7 @@ function ProjectWorkItemEditor({
                 <SelectContent>
                   {states.map((state) => (
                     <SelectItem key={state.id} value={state.id}>
-                      {state.name}
+                      {getProjectWorkStateLabel(state.name)}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -359,9 +363,3 @@ function ProjectWorkItemEditor({
     </>
   );
 }
-
-function joinProjectPath(rootPath: string, relativePath: string): string {
-  const separator =
-    rootPath.endsWith("/") || rootPath.endsWith("\\") ? "" : "/";
-  return `${rootPath}${separator}${relativePath}`;
-}

package/src/features/projects/components/work/project-work-items.test.tsx

@@ -1,15 +1,24 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ProjectWorkItems } from "./project-work-items";
 
 const mocks = vi.hoisted(() => ({
   createItem: vi.fn(),
+  fetchNextPage: vi.fn(),
+  states: null as unknown[] | null,
   useProjectWork: vi.fn(),
 }));
 
 vi.mock("@/features/projects/hooks/use-project-work", () => ({
   sortProjectWorkStates: (states: unknown[]) => states,
+  sortProjectWorkStatesForList: (states: unknown[]) => states,
   useProjectWork: mocks.useProjectWork,
+  useProjectWorkEvents: vi.fn(),
+  useProjectWorkStates: () => ({
+    isLoading: false,
+    isError: false,
+    data: mocks.states ?? [state],
+  }),
   useProjectWorkActions: () => ({
     createItem: { mutateAsync: mocks.createItem, isPending: false },
     createState: { mutateAsync: vi.fn(), isPending: false },
@@ -40,15 +49,22 @@ const item = {
   createdAt: "2026-09-01T00:00:00.000Z",
   updatedAt: "2026-09-01T00:00:00.000Z",
   deletedAt: null,
-  artifacts: [],
+  artifactCount: 0,
 };
 
 describe("ProjectWorkItems", () => {
+  beforeEach(() => {
+    mocks.states = null;
+  });
+
   it("opens the same work item detail from list and board cards", () => {
     mocks.useProjectWork.mockReturnValue({
       isLoading: false,
       isError: false,
-      data: { items: [item], states: [state], total: 1 },
+      data: { pages: [{ items: [item], nextCursor: null, total: 1 }] },
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      fetchNextPage: mocks.fetchNextPage,
     });
     const onOpenWorkItem = vi.fn();
     render(
@@ -74,7 +90,10 @@ describe("ProjectWorkItems", () => {
     mocks.useProjectWork.mockReturnValue({
       isLoading: false,
       isError: false,
-      data: { items: [], states: [state], total: 0 },
+      data: { pages: [{ items: [], nextCursor: null, total: 0 }] },
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      fetchNextPage: mocks.fetchNextPage,
     });
     mocks.createItem.mockResolvedValue(item);
     const onOpenWorkItem = vi.fn();
@@ -95,4 +114,149 @@ describe("ProjectWorkItems", () => {
       expect(onOpenWorkItem).toHaveBeenCalledWith("work-1"),
     );
   });
+
+  it("collapses a state group and loads its next page independently", () => {
+    mocks.fetchNextPage.mockReset();
+    mocks.useProjectWork.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: { pages: [{ items: [item], nextCursor: "next", total: 21 }] },
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      fetchNextPage: mocks.fetchNextPage,
+    });
+    render(<ProjectWorkItems projectId="project-1" onOpenWorkItem={vi.fn()} />);
+
+    const group = screen.getByRole("button", { name: /Planned.*21/ });
+    const count = screen.getByText("21");
+    expect(count.className).toContain("rounded-full");
+    expect(count.className).toContain("tabular-nums");
+    fireEvent.click(group);
+    expect(group.textContent).toContain("21");
+    expect(
+      screen.queryByRole("button", { name: /Clickable work item/ }),
+    ).toBeNull();
+    fireEvent.click(group);
+    fireEvent.click(screen.getByRole("button", { name: /Load more|加载更多/ }));
+
+    expect(mocks.fetchNextPage).toHaveBeenCalledOnce();
+    expect(mocks.useProjectWork).toHaveBeenCalledWith("project-1", {
+      stateId: "planned",
+      includeDeleted: false,
+      limit: 20,
+    });
+  });
+
+  it("gives board columns one bounded shared height with independent scrolling", () => {
+    mocks.useProjectWork.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: { pages: [{ items: [item], nextCursor: null, total: 1 }] },
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      fetchNextPage: mocks.fetchNextPage,
+    });
+    render(<ProjectWorkItems projectId="project-1" onOpenWorkItem={vi.fn()} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Board|看板/ }));
+
+    const group = screen.getByRole("region", { name: /Planned|计划中/ });
+    expect(group.className).toContain("h-full");
+    const cards = screen.getByRole("button", {
+      name: /Clickable work item/,
+    }).parentElement;
+    expect(cards?.className).toContain("overflow-y-auto");
+    expect(group.parentElement?.className).toContain("h-[calc(100dvh-17rem)]");
+    expect(group.parentElement?.className).toContain("max-h-[52rem]");
+  });
+
+  it("encodes workflow state with shape, progress, and restrained color", () => {
+    mocks.states = [
+      {
+        ...state,
+        id: "backlog",
+        name: "Ideas",
+        category: "backlog",
+        position: 0,
+      },
+      {
+        ...state,
+        id: "todo",
+        name: "Ready",
+        category: "unstarted",
+        position: 1,
+      },
+      {
+        ...state,
+        id: "progress",
+        name: "Building",
+        category: "started",
+        position: 2,
+      },
+      {
+        ...state,
+        id: "review",
+        name: "Reviewing",
+        category: "started",
+        position: 3,
+      },
+      {
+        ...state,
+        id: "acceptance",
+        name: "Accepting",
+        category: "started",
+        position: 4,
+      },
+      {
+        ...state,
+        id: "done",
+        name: "Shipped",
+        category: "completed",
+        position: 5,
+      },
+      {
+        ...state,
+        id: "canceled",
+        name: "Stopped",
+        category: "canceled",
+        position: 6,
+      },
+    ];
+    mocks.useProjectWork.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: { pages: [{ items: [], nextCursor: null, total: 0 }] },
+      hasNextPage: false,
+      isFetchingNextPage: false,
+      fetchNextPage: mocks.fetchNextPage,
+    });
+    render(<ProjectWorkItems projectId="project-1" onOpenWorkItem={vi.fn()} />);
+
+    const visualFor = (name: string) =>
+      screen
+        .getByRole("button", { name: new RegExp(`${name}.*0`) })
+        .querySelector<HTMLElement>("[data-state-visual]");
+    expect(visualFor("Ideas")?.dataset.stateVisual).toBe("backlog");
+    expect(visualFor("Ready")?.dataset.stateVisual).toBe("unstarted");
+    expect(visualFor("Building")?.className).toContain("text-amber-500");
+    expect(
+      visualFor("Building")
+        ?.querySelectorAll("circle")[1]
+        ?.getAttribute("stroke-dasharray"),
+    ).toBe("25 75");
+    expect(visualFor("Reviewing")?.className).toContain("text-orange-500");
+    expect(
+      visualFor("Reviewing")
+        ?.querySelectorAll("circle")[1]
+        ?.getAttribute("stroke-dasharray"),
+    ).toBe("50 50");
+    expect(visualFor("Accepting")?.className).toContain("text-emerald-600");
+    expect(
+      visualFor("Accepting")
+        ?.querySelectorAll("circle")[1]
+        ?.getAttribute("stroke-dasharray"),
+    ).toBe("75 25");
+    expect(visualFor("Shipped")?.dataset.stateVisual).toBe("completed");
+    expect(visualFor("Stopped")?.dataset.stateVisual).toBe("canceled");
+  });
 });