@nextclaw/ui 0.24.0-beta.0 → 0.24.0

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

@@ -0,0 +1,367 @@
+import { useState } from "react";
+import type {
+  ProjectWorkActivity,
+  ProjectWorkItemDetail,
+  ProjectWorkState,
+} from "@nextclaw/client-sdk";
+import { ExternalLink, Link2, Trash2, Unlink } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/shared/components/ui/button";
+import { ConfirmDialog } from "@/shared/components/ui/confirm-dialog";
+import { Input } from "@/shared/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/shared/components/ui/overlays/sheet";
+import { Textarea } from "@/shared/components/ui/textarea";
+import { t } from "@/shared/lib/i18n";
+import {
+  useProjectWork,
+  useProjectWorkActions,
+  useProjectWorkActivity,
+  useProjectWorkItem,
+} from "@/features/projects/hooks/use-project-work";
+
+export function ProjectWorkItemDrawer({
+  onOpenArtifact,
+  onOpenChange,
+  projectId,
+  projectRoot,
+  workItemId,
+}: {
+  onOpenArtifact: (path: string, label: string) => void;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  projectRoot: string;
+  workItemId: string | null;
+}) {
+  const item = useProjectWorkItem(projectId, workItemId);
+  const activity = useProjectWorkActivity(projectId, workItemId);
+  const work = useProjectWork(projectId, true);
+  return (
+    <Sheet open={Boolean(workItemId)} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        closeLabel={t("projectsCloseDetails")}
+        className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-[680px]"
+      >
+        {item.isLoading ? (
+          <div className="p-6 text-sm text-muted-foreground">
+            {t("projectsLoading")}
+          </div>
+        ) : null}
+        {item.isError ? (
+          <div className="p-6 text-sm text-destructive">
+            {t("projectsWorkItemLoadFailed")}
+          </div>
+        ) : null}
+        {item.data ? (
+          <ProjectWorkItemEditor
+            key={`${item.data.id}:${item.data.version}`}
+            item={item.data}
+            states={work.data?.states ?? []}
+            activities={activity.data?.activities ?? []}
+            onOpenArtifact={(path, label) =>
+              onOpenArtifact(joinProjectPath(projectRoot, path), label)
+            }
+            onClose={() => onOpenChange(false)}
+          />
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function ProjectWorkItemEditor({
+  activities,
+  item,
+  onClose,
+  onOpenArtifact,
+  states,
+}: {
+  activities: ProjectWorkActivity[];
+  item: ProjectWorkItemDetail;
+  onClose: () => void;
+  onOpenArtifact: (path: string, label: string) => void;
+  states: ProjectWorkState[];
+}) {
+  const actions = useProjectWorkActions(item.projectId);
+  const [title, setTitle] = useState(item.title);
+  const [description, setDescription] = useState(item.description);
+  const [stateId, setStateId] = useState(item.stateId);
+  const [attention, setAttention] = useState(item.attention);
+  const [artifactPath, setArtifactPath] = useState("");
+  const [artifactLabel, setArtifactLabel] = useState("");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const runAction = async (
+    action: () => Promise<unknown>,
+    onSuccess?: () => void,
+  ) => {
+    try {
+      await action();
+      onSuccess?.();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("projectsWorkActionFailed"),
+      );
+    }
+  };
+  const save = async () => {
+    try {
+      await actions.updateItem.mutateAsync({
+        workItemId: item.id,
+        patch: {
+          title,
+          description,
+          stateId,
+          attention,
+          expectedVersion: item.version,
+        },
+      });
+      toast.success(t("projectsWorkItemSaved"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("projectsWorkItemSaveFailed"),
+      );
+    }
+  };
+  const linkArtifact = async () => {
+    if (!artifactPath.trim()) return;
+    try {
+      await actions.linkArtifact.mutateAsync({
+        workItemId: item.id,
+        path: artifactPath.trim(),
+        ...(artifactLabel.trim() ? { label: artifactLabel.trim() } : {}),
+      });
+      setArtifactPath("");
+      setArtifactLabel("");
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("projectsWorkArtifactLinkFailed"),
+      );
+    }
+  };
+  return (
+    <>
+      <SheetHeader className="shrink-0 border-b border-border/60 px-5 pb-5 pt-6 pr-14 sm:px-7 sm:pt-7">
+        <SheetTitle>{t("projectsWorkDetails")}</SheetTitle>
+        <SheetDescription>
+          {item.id} · {t("projectsWorkVersion")} {item.version}
+        </SheetDescription>
+      </SheetHeader>
+      <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-5 py-6 sm:px-7">
+        <section className="space-y-3">
+          <label className="block text-xs font-medium text-muted-foreground">
+            {t("projectsWorkTitle")}
+          </label>
+          <Input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+          />
+          <label className="block text-xs font-medium text-muted-foreground">
+            {t("projectsWorkDescription")}
+          </label>
+          <Textarea
+            className="min-h-28"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+          />
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">
+                {t("projectsStatus")}
+              </label>
+              <Select value={stateId} onValueChange={setStateId}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {states.map((state) => (
+                    <SelectItem key={state.id} value={state.id}>
+                      {state.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-muted-foreground">
+                {t("projectsWorkAttention")}
+              </label>
+              <Select
+                value={attention}
+                onValueChange={(value) =>
+                  setAttention(value as typeof attention)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">
+                    {t("projectsWorkAttention_none")}
+                  </SelectItem>
+                  <SelectItem value="blocked">
+                    {t("projectsWorkAttention_blocked")}
+                  </SelectItem>
+                  <SelectItem value="awaiting-user">
+                    {t("projectsWorkAttention_awaiting-user")}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </section>
+        <section>
+          <h3 className="mb-3 text-sm font-semibold">
+            {t("projectsWorkArtifacts")}
+          </h3>
+          <div className="space-y-2">
+            {item.artifacts.map((artifact) => (
+              <div
+                key={artifact.id}
+                className="flex items-center gap-2 rounded-xl border border-border/60 p-2"
+              >
+                <button
+                  type="button"
+                  className="min-w-0 flex-1 rounded-lg px-2 py-1 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  onClick={() =>
+                    onOpenArtifact(
+                      artifact.path,
+                      artifact.label ?? artifact.path,
+                    )
+                  }
+                >
+                  <span className="flex items-center gap-2 truncate text-sm font-medium">
+                    <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                    {artifact.label ?? artifact.path}
+                  </span>
+                  <span className="block truncate text-xs text-muted-foreground">
+                    {artifact.path}
+                  </span>
+                </button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  aria-label={t("projectsWorkUnlinkArtifact")}
+                  onClick={() =>
+                    void runAction(() =>
+                      actions.unlinkArtifact.mutateAsync({
+                        workItemId: item.id,
+                        artifactLinkId: artifact.id,
+                      }),
+                    )
+                  }
+                >
+                  <Unlink className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            {!item.artifacts.length ? (
+              <p className="text-sm text-muted-foreground">
+                {t("projectsWorkNoArtifacts")}
+              </p>
+            ) : null}
+          </div>
+          <div className="mt-3 grid gap-2 sm:grid-cols-[1fr_12rem_auto]">
+            <Input
+              value={artifactPath}
+              onChange={(event) => setArtifactPath(event.target.value)}
+              placeholder={t("projectsWorkArtifactPath")}
+            />
+            <Input
+              value={artifactLabel}
+              onChange={(event) => setArtifactLabel(event.target.value)}
+              placeholder={t("projectsWorkArtifactLabel")}
+            />
+            <Button
+              variant="outline"
+              onClick={() => void linkArtifact()}
+              disabled={!artifactPath.trim() || actions.linkArtifact.isPending}
+            >
+              <Link2 className="mr-2 h-4 w-4" />
+              {t("projectsWorkLinkArtifact")}
+            </Button>
+          </div>
+        </section>
+        <section>
+          <h3 className="mb-3 text-sm font-semibold">
+            {t("projectsActivity")}
+          </h3>
+          <ol className="space-y-2">
+            {activities.map((entry) => (
+              <li
+                key={entry.id}
+                className="rounded-xl bg-muted/35 px-3 py-2 text-sm"
+              >
+                <span className="font-medium">
+                  {t(`projectsWorkActivity_${entry.type}`)}
+                </span>
+                <span className="ml-2 text-xs text-muted-foreground">
+                  {entry.actor.kind} ·{" "}
+                  {new Date(entry.createdAt).toLocaleString()}
+                </span>
+              </li>
+            ))}
+          </ol>
+        </section>
+      </div>
+      <SheetFooter className="shrink-0 border-t border-border/60 bg-background px-5 py-4 sm:px-7">
+        {item.deletedAt ? (
+          <Button
+            variant="outline"
+            onClick={() =>
+              void runAction(() => actions.restoreItem.mutateAsync(item.id))
+            }
+          >
+            {t("projectsRestore")}
+          </Button>
+        ) : (
+          <Button variant="destructive" onClick={() => setConfirmDelete(true)}>
+            <Trash2 className="mr-2 h-4 w-4" />
+            {t("projectsDelete")}
+          </Button>
+        )}
+        <Button
+          onClick={() => void save()}
+          disabled={!title.trim() || actions.updateItem.isPending}
+        >
+          {t("save")}
+        </Button>
+      </SheetFooter>
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title={t("projectsDeleteWorkItem")}
+        description={t("projectsDeleteWorkItemDescription")}
+        confirmLabel={t("projectsDelete")}
+        variant="destructive"
+        onCancel={() => setConfirmDelete(false)}
+        onConfirm={() =>
+          void runAction(() => actions.deleteItem.mutateAsync(item.id), onClose)
+        }
+      />
+    </>
+  );
+}
+
+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

@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectWorkItems } from "./project-work-items";
+
+const mocks = vi.hoisted(() => ({
+  createItem: vi.fn(),
+  useProjectWork: vi.fn(),
+}));
+
+vi.mock("@/features/projects/hooks/use-project-work", () => ({
+  sortProjectWorkStates: (states: unknown[]) => states,
+  useProjectWork: mocks.useProjectWork,
+  useProjectWorkActions: () => ({
+    createItem: { mutateAsync: mocks.createItem, isPending: false },
+    createState: { mutateAsync: vi.fn(), isPending: false },
+    updateState: { mutateAsync: vi.fn(), isPending: false },
+    deleteState: { mutateAsync: vi.fn(), isPending: false },
+  }),
+}));
+
+const state = {
+  id: "planned",
+  projectId: "project-1",
+  name: "Planned",
+  category: "unstarted",
+  position: 0,
+  isDefault: true,
+  createdAt: "2026-09-01T00:00:00.000Z",
+  updatedAt: "2026-09-01T00:00:00.000Z",
+};
+const item = {
+  id: "work-1",
+  projectId: "project-1",
+  title: "Clickable work item",
+  description: "",
+  stateId: state.id,
+  state,
+  attention: "none",
+  version: 1,
+  createdAt: "2026-09-01T00:00:00.000Z",
+  updatedAt: "2026-09-01T00:00:00.000Z",
+  deletedAt: null,
+  artifacts: [],
+};
+
+describe("ProjectWorkItems", () => {
+  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 },
+    });
+    const onOpenWorkItem = vi.fn();
+    render(
+      <ProjectWorkItems
+        projectId="project-1"
+        onOpenWorkItem={onOpenWorkItem}
+      />,
+    );
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Clickable work item/ }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Board|看板/ }));
+    fireEvent.click(
+      screen.getByRole("button", { name: /Clickable work item/ }),
+    );
+
+    expect(onOpenWorkItem).toHaveBeenNthCalledWith(1, "work-1");
+    expect(onOpenWorkItem).toHaveBeenNthCalledWith(2, "work-1");
+  });
+
+  it("creates a work item and immediately opens its drawer", async () => {
+    mocks.useProjectWork.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: { items: [], states: [state], total: 0 },
+    });
+    mocks.createItem.mockResolvedValue(item);
+    const onOpenWorkItem = vi.fn();
+    render(
+      <ProjectWorkItems
+        projectId="project-1"
+        onOpenWorkItem={onOpenWorkItem}
+      />,
+    );
+
+    fireEvent.change(
+      screen.getByPlaceholderText(/Add a work item|添加工作项/),
+      { target: { value: "Clickable work item" } },
+    );
+    fireEvent.click(screen.getByRole("button", { name: /Create|创建/ }));
+
+    await vi.waitFor(() =>
+      expect(onOpenWorkItem).toHaveBeenCalledWith("work-1"),
+    );
+  });
+});

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

@@ -0,0 +1,199 @@
+import { useState } from "react";
+import type { ProjectWorkItemDetail } from "@nextclaw/client-sdk";
+import { LayoutGrid, List, Plus, Settings2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { t } from "@/shared/lib/i18n";
+import {
+  useProjectWork,
+  useProjectWorkActions,
+} from "@/features/projects/hooks/use-project-work";
+import { ProjectWorkStateSettings } from "./project-work-state-settings";
+
+function WorkItemButton({
+  item,
+  onOpen,
+}: {
+  item: ProjectWorkItemDetail;
+  onOpen: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className="w-full rounded-xl border border-border/50 bg-card p-3 text-left text-sm shadow-sm transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+      onClick={onOpen}
+    >
+      <span className="block font-medium">{item.title}</span>
+      <span className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+        <span>{item.state.name}</span>
+        {item.attention !== "none" ? (
+          <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-amber-700 dark:text-amber-300">
+            {t(`projectsWorkAttention_${item.attention}`)}
+          </span>
+        ) : null}
+        {item.deletedAt ? <span>{t("projectsDeleted")}</span> : null}
+      </span>
+    </button>
+  );
+}
+
+export function ProjectWorkItems({
+  onOpenWorkItem,
+  projectId,
+}: {
+  onOpenWorkItem: (workItemId: string) => void;
+  projectId: string;
+}) {
+  const [view, setView] = useState<"list" | "board">("list");
+  const [includeDeleted, setIncludeDeleted] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const work = useProjectWork(projectId, includeDeleted);
+  const actions = useProjectWorkActions(projectId);
+  const create = async () => {
+    if (!newTitle.trim()) return;
+    try {
+      const item = await actions.createItem.mutateAsync({
+        title: newTitle.trim(),
+      });
+      setNewTitle("");
+      onOpenWorkItem(item.id);
+    } catch (error) {
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : t("projectsWorkItemCreateFailed"),
+      );
+    }
+  };
+  if (work.isLoading)
+    return (
+      <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </div>
+    );
+  if (work.isError)
+    return (
+      <div className="rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
+        {t("projectsLoadFailed")}
+      </div>
+    );
+  const data = work.data!;
+  return (
+    <section aria-label={t("projectsWork")} className="min-w-0 space-y-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="flex min-w-[16rem] flex-1 gap-2">
+          <Input
+            value={newTitle}
+            onChange={(event) => setNewTitle(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") void create();
+            }}
+            placeholder={t("projectsWorkNewItem")}
+          />
+          <Button
+            onClick={() => void create()}
+            disabled={!newTitle.trim() || actions.createItem.isPending}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t("projectsCreate")}
+          </Button>
+        </div>
+        <div
+          className="flex items-center gap-1 rounded-xl bg-muted/40 p-1"
+          role="group"
+          aria-label={t("projectsWorkViews")}
+        >
+          <Button
+            size="sm"
+            variant={view === "list" ? "secondary" : "ghost"}
+            aria-pressed={view === "list"}
+            onClick={() => setView("list")}
+          >
+            <List className="mr-2 h-4 w-4" />
+            {t("projectsWorkList")}
+          </Button>
+          <Button
+            size="sm"
+            variant={view === "board" ? "secondary" : "ghost"}
+            aria-pressed={view === "board"}
+            onClick={() => setView("board")}
+          >
+            <LayoutGrid className="mr-2 h-4 w-4" />
+            {t("projectsWorkBoard")}
+          </Button>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setSettingsOpen(true)}
+        >
+          <Settings2 className="mr-2 h-4 w-4" />
+          {t("projectsWorkStateSettings")}
+        </Button>
+      </div>
+      <label className="flex w-fit items-center gap-2 text-xs text-muted-foreground">
+        <input
+          type="checkbox"
+          checked={includeDeleted}
+          onChange={(event) => setIncludeDeleted(event.target.checked)}
+        />
+        {t("projectsWorkShowDeleted")}
+      </label>
+      {!data.items.length ? (
+        <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
+          {t("projectsWorkEmpty")}
+        </div>
+      ) : null}
+      {view === "list" && data.items.length ? (
+        <div className="space-y-2">
+          {data.items.map((item) => (
+            <WorkItemButton
+              key={item.id}
+              item={item}
+              onOpen={() => onOpenWorkItem(item.id)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {view === "board" && data.items.length ? (
+        <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {data.states.map((state) => {
+            const items = data.items.filter(
+              (item) => item.stateId === state.id,
+            );
+            return (
+              <section
+                key={state.id}
+                className="min-w-0 rounded-xl bg-muted/35 p-3"
+              >
+                <div className="mb-3 flex items-center justify-between gap-2">
+                  <h3 className="text-sm font-semibold">{state.name}</h3>
+                  <span className="text-xs text-muted-foreground">
+                    {items.length}
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  {items.map((item) => (
+                    <WorkItemButton
+                      key={item.id}
+                      item={item}
+                      onOpen={() => onOpenWorkItem(item.id)}
+                    />
+                  ))}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+      ) : null}
+      <ProjectWorkStateSettings
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        projectId={projectId}
+        states={data.states}
+      />
+    </section>
+  );
+}