fix(comments) : show notified threads in inbox and stop edit notifications

2026-10-12 23:03:17 +07:00
parent 1fe35546d3
commit 05350e7aab
8 changed files with 316 additions and 35 deletions
@@ -0,0 +1,156 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { CommentItem, CommentPage } from "@/lib/comments/types";
+
+const events = vi.hoisted(() => ({ refresh: undefined as undefined | (() => Promise<unknown>) }));
+vi.mock("./use-comment-events", () => ({ useCommentEvents: (_scope: unknown, refresh: () => Promise<unknown>) => { events.refresh = refresh; } }));
+vi.mock("./comment-card", () => ({
+  CommentCard: ({ item, defaultExpanded, onChange, overview }: { item: CommentItem; defaultExpanded: boolean; onChange: () => Promise<unknown>; overview: React.ReactNode }) =>
+    <tr id={`comment-${item.id}`} data-expanded={defaultExpanded}><td>{item.text}<button onClick={() => void onChange()}>Update {item.id}</button></td><td>{overview}</td></tr>,
+}));
+
+import { AdminCommentInbox } from "./admin-comment-inbox";
+
+const viewer = { id: "admin", admin: true, name: "Admin" };
+const target = "stygian:test";
+const selectedId = "00000000-0000-4000-8000-000000000001";
+function comment(id: string, text = id): CommentItem {
+  return {
+    id, rootId: null, replyToId: null, replyToName: null,
+    authorName: "Author", authorImage: null, authorAdmin: false, text, images: [], version: 1,
+    createdAt: "2026-10-08T12:00:00Z", editedAt: "2026-10-08T12:00:00Z",
+    hidden: false, ownHidden: false, deleted: false, hearted: false, likes: 0, reaction: 0,
+    replyCount: 1, hasReplies: true, canEdit: true, canInteract: true, canModerate: true,
+    target, targetName: "Test round", targetImage: null, href: "/stygian/comment?schedule=test",
+  };
+}
+function page(items: CommentItem[], nextCursor: string | null = null): CommentPage { return { items, nextCursor, viewer }; }
+
+let container: HTMLDivElement;
+let root: Root;
+let inbox: CommentPage;
+let nextPage: CommentPage;
+let selected: CommentItem;
+const fetchMock = vi.fn<typeof fetch>();
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  events.refresh = undefined;
+  selected = comment(selectedId, "Selected conversation");
+  inbox = page([comment("newer", "Newer conversation")]);
+  nextPage = page([]);
+  fetchMock.mockReset();
+  fetchMock.mockImplementation(async (input) => {
+    const url = new URL(String(input), "https://guide.sudloh.com");
+    return Response.json(url.pathname === "/api/admin/comments" ? url.searchParams.has("cursor") ? nextPage : inbox : { item: selected, viewer });
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+
+async function mount(initial = inbox, notification: string | undefined = selectedId) {
+  await act(async () => root.render(<AdminCommentInbox initial={initial} initialTarget={target} initialComment={notification}
+    targets={[{ value: target, label: "Test round", image: null, rarity: null, characterKey: null }]} />));
+}
+function rows() { return [...container.querySelectorAll("tbody tr[id]")].map((row) => row.id); }
+async function click(label: string) {
+  const button = [...container.querySelectorAll("button")].find((item) => item.textContent?.trim() === label);
+  expect(button).toBeDefined();
+  await act(async () => button!.click());
+}
+function singleRequests() { return fetchMock.mock.calls.filter(([url]) => String(url) === `/api/comments/${selectedId}`); }
+
+describe("notification conversations in the admin inbox", () => {
+  it("moves a loaded conversation to the first normal row, expands it, and avoids a second lookup", async () => {
+    await mount(page([...inbox.items, selected]));
+    expect(rows()).toEqual([`comment-${selectedId}`, "comment-newer"]);
+    expect(container.querySelector(`#comment-${selectedId}`)?.getAttribute("data-expanded")).toBe("true");
+    expect(container.querySelector(`#comment-${selectedId} td:last-child a`)?.textContent).toBe("Test round");
+    expect(container.textContent).not.toContain("การสนทนาจากการแจ้งเตือน");
+    expect(singleRequests()).toHaveLength(0);
+  });
+
+  it("loads an older conversation and deduplicates it when pagination catches up", async () => {
+    await mount(page(inbox.items, "next-page"));
+    expect(rows()).toEqual([`comment-${selectedId}`, "comment-newer"]);
+    expect(singleRequests()).toHaveLength(1);
+    nextPage = page([comment(selectedId, "Fresh page content"), comment("oldest")]);
+    await click("ดูความคิดเห็นเพิ่มเติม");
+    expect(rows()).toEqual([`comment-${selectedId}`, "comment-newer", "comment-oldest"]);
+    expect(container.textContent).toContain("Fresh page content");
+    expect(singleRequests()).toHaveLength(1);
+    expect(fetchMock.mock.calls.some(([url]) => String(url).includes("cursor=next-page"))).toBe(true);
+  });
+
+  it("keeps an older conversation fresh after mutations, manual refresh, and live updates", async () => {
+    await mount();
+    selected = comment(selectedId, "After reply or moderation");
+    await click(`Update ${selectedId}`);
+    expect(container.textContent).toContain("After reply or moderation");
+    selected = comment(selectedId, "After manual refresh");
+    await click("รีเฟรช");
+    expect(container.textContent).toContain("After manual refresh");
+    selected = comment(selectedId, "After live update");
+    await act(async () => { await events.refresh!(); });
+    expect(container.textContent).toContain("After live update");
+    expect(rows()).toEqual([`comment-${selectedId}`, "comment-newer"]);
+  });
+
+  it.each(["visibility", "answered", "target"])("clears the notification selection when the %s filter changes", async (filter) => {
+    await mount();
+    inbox = page([comment("filtered")]);
+    if (filter === "target") {
+      const clear = container.querySelector<HTMLButtonElement>('[data-slot="combobox-clear"]');
+      expect(clear).not.toBeNull();
+      await act(async () => clear!.click());
+    } else await click(filter === "visibility" ? "ซ่อนอยู่" : "ยังไม่ได้ตอบ");
+    expect(rows()).toEqual(["comment-filtered"]);
+    expect(singleRequests()).toHaveLength(1);
+    const query = new URL(String(fetchMock.mock.calls.at(-1)![0]), "https://guide.sudloh.com").searchParams;
+    if (filter === "target") expect(query.has("target")).toBe(false);
+    else expect(query.get(filter === "visibility" ? "status" : "unanswered")).toBe(filter === "visibility" ? "hidden" : "true");
+  });
+
+  it("shows loading without an empty state and ignores a late lookup after filtering", async () => {
+    let resolve!: (response: Response) => void;
+    fetchMock.mockImplementationOnce(() => new Promise<Response>((done) => { resolve = done; }));
+    await mount(page([]));
+    expect(container.querySelector('[role="status"]')).not.toBeNull();
+    expect(container.textContent).not.toContain("ไม่พบความคิดเห็นที่ตรงกัน");
+    const signal = singleRequests()[0][1]?.signal;
+    await click("ซ่อนอยู่");
+    expect(signal?.aborted).toBe(true);
+    await act(async () => resolve(Response.json({ item: selected, viewer })));
+    expect(rows()).toEqual(["comment-newer"]);
+  });
+
+  it.each(["missing", "wrong target", "reply"])("shows an inline error for a %s conversation while keeping the list usable", async (failure) => {
+    if (failure === "missing") fetchMock.mockResolvedValueOnce(Response.json({ error: "comment-not-found" }, { status: 404 }));
+    else selected = { ...selected, ...(failure === "reply" ? { rootId: "another-root" } : { target: "guide:other" }) };
+    await mount();
+    expect(container.querySelector('[role="alert"]')).not.toBeNull();
+    expect(rows()).toEqual(["comment-newer"]);
+    expect(container.querySelector('[role="status"]')).toBeNull();
+    selected = comment(selectedId, "Recovered conversation");
+    await click("รีเฟรช");
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+    expect(rows()).toEqual([`comment-${selectedId}`, "comment-newer"]);
+  });
+
+  it("preserves the normal inbox order without a notification", async () => {
+    await mount(page([comment("newer"), selected]), "");
+    expect(rows()).toEqual(["comment-newer", `comment-${selectedId}`]);
+    expect(singleRequests()).toHaveLength(0);
+  });
+});
@@ -12,11 +12,12 @@ import { FuzzyCombobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxI
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import type { CommentPage } from "@/lib/comments/types";
+import type { CommentItem, CommentPage } from "@/lib/comments/types";
 import { characterRarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
 import { useMarkCommentsRead } from "./admin-unread-comments";
-import { CommentCard, CommentThread } from "./comment-card";
+import { CommentCard } from "./comment-card";
+import { commentRequest } from "./client";
 import { AdminCommentRowsSkeleton } from "./comment-skeleton";
 import { useCommentEvents } from "./use-comment-events";
 import { useCommentFeed } from "./use-comment-feed";
@@ -26,42 +27,64 @@ export function AdminCommentInbox({ initial, targets, initialTarget, initialComm
  const [target, setTarget] = useState<TargetOption | null>(targets.find((item) => item.value === initialTarget) ?? null);
  const [status, setStatus] = useState("all");
  const [answered, setAnswered] = useState("all");
+  const [selectedId, setSelectedId] = useState(initialTarget ? initialComment : undefined);
+  const [selectedResult, setSelectedResult] = useState<{ item: CommentItem | null; error: string }>({ item: null, error: "" });
  const query = new URLSearchParams({ view: "inbox", grouped: "true", status, unanswered: String(answered === "unanswered") });
  if (target) query.set("target", target.value);
  const feed = useCommentFeed(`/api/admin/comments?${query}`, initial);
+  const loadedSelection = feed.page.items.find((item) => item.id === selectedId && item.target === initialTarget && !item.rootId);
+  const selectionLoaded = Boolean(loadedSelection);
+  useEffect(() => {
+    if (!selectedId || !initialTarget || selectionLoaded) return;
+    const controller = new AbortController();
+    void Promise.resolve().then(async () => {
+      if (controller.signal.aborted) return;
+      setSelectedResult((current) => ({ ...current, error: "" }));
+      try {
+        const result = await commentRequest<{ item: CommentItem }>(`/api/comments/${selectedId}`, { signal: controller.signal });
+        if (!result.item || result.item.id !== selectedId || result.item.target !== initialTarget || result.item.rootId) throw new Error("ไม่พบการสนทนาที่เลือก");
+        if (!controller.signal.aborted) setSelectedResult({ item: result.item, error: "" });
+      } catch (cause) {
+        if (!controller.signal.aborted) setSelectedResult({ item: null, error: cause instanceof Error ? cause.message : "ไม่สามารถโหลดการสนทนาได้" });
+      }
+    });
+    return () => controller.abort();
+  }, [selectedId, initialTarget, selectionLoaded, feed.revision]);
+  const selectedItem = selectedId ? loadedSelection ?? selectedResult.item : null;
+  const selectedError = selectedId && !selectionLoaded ? selectedResult.error : "";
+  const selectedBusy = Boolean(selectedId && !selectedItem && !selectedError);
+  const items = selectedItem ? [selectedItem, ...feed.page.items.filter((item) => item.id !== selectedId)] : feed.page.items;
  useCommentEvents({ admin: true }, () => feed.refresh({ silent: true, forceRevision: true }));
  const markRead = useMarkCommentsRead();
  useEffect(() => { void markRead(target?.value ?? "all"); }, [markRead, target, feed.revision]);
  return <div className="flex min-w-0 flex-col gap-6 max-md:[&_button]:min-h-11 max-md:[&_button]:min-w-11">
-    {initialComment && initialTarget && <section className="flex min-w-0 flex-col gap-3" aria-label={"การสนทนาจากการแจ้งเตือน"}>
-      <h2 className="font-heading text-lg font-semibold">{"การสนทนาจากการแจ้งเตือน"}</h2>
-      <CommentThread rootId={initialComment} expectedTarget={initialTarget} onChange={() => feed.refresh({ silent: true })} />
-    </section>}
    <FieldGroup className="lg:grid lg:grid-cols-[repeat(3,minmax(0,1fr))_auto] lg:items-end">
      <Field><FieldLabel>{"ไกด์หรือรอบ Stygian"}</FieldLabel>
-        <FuzzyCombobox items={targets} value={target} onValueChange={setTarget} itemToStringLabel={(item) => item.label} itemToStringValue={(item) => item.value}
+        <FuzzyCombobox items={targets} value={target} onValueChange={(value) => { if (value?.value !== target?.value) setSelectedId(undefined); setTarget(value); }} itemToStringLabel={(item) => item.label} itemToStringValue={(item) => item.value}
          searchNames={(item) => [item.label]} autoHighlight>
          <ComboboxInput aria-label={"ค้นหาไกด์หรือรอบ Stygian"} placeholder={"ทุกไกด์และทุกรอบ"} showClear />
          <ComboboxContent><ComboboxEmpty>{"ไม่พบไกด์ที่ตรงกัน"}</ComboboxEmpty><ComboboxList>{(item: TargetOption) => <ComboboxItem key={item.value} value={item}><Avatar className={cn("size-9 shrink-0", characterRarityGradientClass(item.characterKey, item.rarity))}><AvatarImage src={item.image ?? undefined} alt="" /><AvatarFallback>{item.label.slice(0, 2)}</AvatarFallback></Avatar><span className="min-w-0 flex-1 truncate">{item.label}</span></ComboboxItem>}</ComboboxList></ComboboxContent>
        </FuzzyCombobox>
      </Field>
-      <Field><FieldLabel>{"การแสดงผล"}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[status]} onValueChange={(values) => { if (values[0]) setStatus(values[0]); }} variant="outline" aria-label={"กรองการแสดงผลความคิดเห็น"}>
+      <Field><FieldLabel>{"การแสดงผล"}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[status]} onValueChange={(values) => { if (values[0] && values[0] !== status) { setSelectedId(undefined); setStatus(values[0]); } }} variant="outline" aria-label={"กรองการแสดงผลความคิดเห็น"}>
        <ToggleGroupItem value="all">{"ทั้งหมด"}</ToggleGroupItem><ToggleGroupItem value="visible">{"แสดงอยู่"}</ToggleGroupItem><ToggleGroupItem value="hidden">{"ซ่อนอยู่"}</ToggleGroupItem>
      </ToggleGroup></Field>
-      <Field><FieldLabel>{"การตอบกลับจากผู้ดูแล"}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[answered]} onValueChange={(values) => { if (values[0]) setAnswered(values[0]); }} variant="outline" aria-label={"กรองการตอบกลับจากผู้ดูแล"}>
+      <Field><FieldLabel>{"การตอบกลับจากผู้ดูแล"}</FieldLabel><ToggleGroup className="max-w-full flex-wrap" value={[answered]} onValueChange={(values) => { if (values[0] && values[0] !== answered) { setSelectedId(undefined); setAnswered(values[0]); } }} variant="outline" aria-label={"กรองการตอบกลับจากผู้ดูแล"}>
        <ToggleGroupItem value="all">{"ทุกความคิดเห็น"}</ToggleGroupItem><ToggleGroupItem value="unanswered">{"ยังไม่ได้ตอบ"}</ToggleGroupItem>
      </ToggleGroup></Field>
      <Button variant="outline" className="self-end" disabled={feed.busy} onClick={() => void feed.refresh({ silent: false, forceRevision: true })}><RefreshCwIcon data-icon="inline-start" />{"รีเฟรช"}</Button>
    </FieldGroup>
    {feed.error && <Alert variant="destructive"><AlertDescription>{feed.error}</AlertDescription></Alert>}
-    {feed.page.items.length > 0 && <section aria-label={"ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian"} className="flex min-w-0 flex-col">
+    {selectedError && <Alert variant="destructive"><AlertDescription>{selectedError}</AlertDescription></Alert>}
+    {selectedBusy && <AdminCommentRowsSkeleton count={1} />}
+    {items.length > 0 && <section aria-label={"ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian"} className="flex min-w-0 flex-col">
      <Table className="table-fixed max-md:block" aria-label={"ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian"}>
        <TableHeader className="max-md:sr-only"><TableRow>
          <TableHead scope="col" className="px-0">{"ความคิดเห็น"}</TableHead>
          <TableHead scope="col" className="w-[280px] px-0 text-right">{"เนื้อหา"}</TableHead>
        </TableRow></TableHeader>
        <TableBody className="max-md:block">
-          {feed.page.items.map((item) => <CommentCard key={item.id} item={item} viewer={feed.page.viewer} inbox onChange={() => feed.refresh({ silent: true, forceRevision: true })} revision={feed.revision}
+          {items.map((item) => <CommentCard key={item.id} item={item} viewer={feed.page.viewer} inbox defaultExpanded={item.id === selectedId} onChange={() => feed.refresh({ silent: true, forceRevision: true })} revision={feed.revision}
            overview={item.target.startsWith("stygian:") ? <Link href={item.href} prefetch={false} className="min-w-0 break-words rounded-lg py-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
              {item.targetName}
            </Link> : item.targetImage && <Link href={item.href} prefetch={false} className="shrink-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring">
@@ -70,7 +93,7 @@ export function AdminCommentInbox({ initial, targets, initialTarget, initialComm
        </TableBody>
      </Table>
    </section>}
-    {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>{"ไม่พบความคิดเห็นที่ตรงกัน"}</EmptyTitle><EmptyDescription>{"ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian จะแสดงที่นี่"}</EmptyDescription></EmptyHeader></Empty>}
+    {!items.length && !feed.busy && !feed.error && !selectedBusy && !selectedError && <Empty><EmptyHeader><EmptyTitle>{"ไม่พบความคิดเห็นที่ตรงกัน"}</EmptyTitle><EmptyDescription>{"ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian จะแสดงที่นี่"}</EmptyDescription></EmptyHeader></Empty>}
    {feed.busy && <AdminCommentRowsSkeleton count={feed.page.items.length ? 1 : 3} />}
    {feed.page.nextCursor && <Button variant="outline" disabled={feed.busy} onClick={() => void feed.more()}>{"ดูความคิดเห็นเพิ่มเติม"}</Button>}
  </div>;
@@ -34,6 +34,17 @@ describe("Thai comment UI", () => {
    expect(html).not.toContain("No matching comments");
  });

+  it("renders the notification conversation once in the regular inbox table", () => {
+    const selected = { ...comment, id: "selected", text: "การสนทนาที่เลือก" };
+    const html = renderToStaticMarkup(<AdminCommentInbox initial={{ items: [comment, selected], nextCursor: null, viewer }}
+      targets={[]} initialTarget={comment.target} initialComment={selected.id} />);
+    expect(html).not.toContain("การสนทนาจากการแจ้งเตือน");
+    expect(html.match(/id="comment-selected"/g)).toHaveLength(1);
+    expect(html.indexOf('id="comment-selected"')).toBeLessThan(html.indexOf('id="comment-test"'));
+    expect(html.slice(html.indexOf("<tbody"), html.indexOf("</tbody>"))).toContain('id="comment-selected"');
+    expect(html).not.toContain("<article");
+  });
+
  it("renders editing controls in Thai while preserving the draft", () => {
    const html = renderToStaticMarkup(<CommentComposer target="guide:test" editing={comment} onSaved={() => {}} />);
    expect(html).toContain("บันทึกการแก้ไข");