@nextclaw/ui 0.24.1 → 0.24.3

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

@@ -1,27 +1,42 @@
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import type { ProjectSkillMaterial } from "@nextclaw/client-sdk";
 import { formatNumber, t } from "@/shared/lib/i18n";
 import { ProjectEmptyState } from "./project-section";
 
 export function ProjectSkills({
-  snapshot,
+  skills,
+  isLoading,
+  isError,
   onOpen,
 }: {
-  snapshot: ProjectObservationSnapshot;
-  onOpen: (skill: ProjectObservationSnapshot["skills"][number]) => void;
+  skills: ProjectSkillMaterial[];
+  isLoading: boolean;
+  isError: boolean;
+  onOpen: (skill: ProjectSkillMaterial) => void;
 }) {
+  if (isLoading) {
+    return (
+      <p className="py-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </p>
+    );
+  }
+  if (isError) {
+    return (
+      <p className="py-5 text-sm text-destructive">{t("projectsLoadFailed")}</p>
+    );
+  }
   return (
     <section className="min-w-0" aria-label={t("projectsSkills")}>
       <p className="mb-3 text-sm text-muted-foreground">
-        {formatNumber(snapshot.skills.length)} {t("projectsSkillsCountSuffix")}
+        {formatNumber(skills.length)} {t("projectsSkillsCountSuffix")}
       </p>
-      {snapshot.skills.length ? (
+      {skills.length ? (
         <div className="grid min-w-0 gap-3 md:grid-cols-2">
-          {snapshot.skills.map((skill) => (
+          {skills.map((skill) => (
             <button
               type="button"
               key={skill.ref}
-              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors enabled:hover:border-border enabled:hover:bg-muted/30 disabled:cursor-not-allowed"
-              disabled={!skill.readable}
+              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors hover:border-border hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
               onClick={() => onOpen(skill)}
             >
               <h3 className="text-sm font-medium">{skill.name}</h3>
@@ -37,11 +52,6 @@ export function ProjectSkills({
               >
                 {skill.description ?? skill.ref}
               </p>
-              {!skill.readable ? (
-                <p className="mt-2 text-xs text-destructive">
-                  {t("projectsUnavailable")}
-                </p>
-              ) : null}
             </button>
           ))}
         </div>

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

@@ -8,8 +8,9 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/projects/hooks/use-project-work", () => ({
-  useProjectWork: () => ({
-    data: { states: [{ id: "planned", name: "Planned" }] },
+  useProjectWorkEvents: vi.fn(),
+  useProjectWorkStates: () => ({
+    data: [{ id: "planned", name: "Planned" }],
   }),
   useProjectWorkItem: mocks.useProjectWorkItem,
   useProjectWorkActivity: () => ({ data: { activities: [] } }),

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,161 @@ 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");
+    const groupSection = group.closest("section");
+    const workItem = screen.getByRole("button", {
+      name: /Clickable work item/,
+    });
+    expect(groupSection?.className).not.toContain("border");
+    expect(groupSection?.className).not.toContain("rounded-xl");
+    expect(groupSection?.className).not.toContain("bg-muted");
+    expect(workItem.className).toContain("border");
+    expect(workItem.className).toContain("rounded-xl");
+    expect(count.className).not.toContain("rounded-full");
+    expect(count.className).toContain("text-muted-foreground");
+    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");
+    expect(group.className).not.toContain("rounded-xl");
+    expect(group.className).not.toContain("bg-muted");
+    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");
+  });
 });