@igstack/app-catalog-frontend-core 6.3.1-alpha-20261003051755 → 6.5.0

package/src/modules/appCatalog/utils/accessTabLabel.ts

@@ -0,0 +1,95 @@
+import type {
+  ApprovalMethod,
+  Resource,
+} from '@igstack/app-catalog-backend-core'
+
+/**
+ * What the detail card's access tab says about itself.
+ *
+ * `route` names how you get in — the tab reads `Access — <route>` — and `chip`
+ * is the one number worth carrying next to it.
+ */
+export interface AccessTabLabel {
+  route: string
+  chip?: string
+}
+
+/** Shown when nothing in the entry records a way in. */
+export const ROUTE_UNDOCUMENTED = 'not documented'
+/** Shown when the resource needs no request at all. */
+export const ROUTE_FREE = 'Free'
+/** A request with no named channel behind it. */
+export const ROUTE_REQUEST = 'request'
+
+/**
+ * Names the access route for a resource's tab.
+ *
+ * The point is that the tab answers "can I get in?" BEFORE it is opened. That
+ * is what lets every entry carry the same four tabs: an access tab holding one
+ * sentence saying the route is unknown is a dead end when you have to click to
+ * find out, and merely a fact you already read when the label says it.
+ *
+ * A named channel beats the step count, because the channel is the thing people
+ * recognise — most entries route through one or two of them, and "two steps"
+ * describes effort rather than destination. The count rides in `chip` instead.
+ */
+export function accessTabLabel(
+  resource: Resource,
+  approvalMethods: ApprovalMethod[],
+): AccessTabLabel {
+  const request = resource.accessRequest
+  // Children carry their access as top-level fields rather than an
+  // `accessRequest`, and the detail card's access section already falls back to
+  // them. The tab has to agree with the section below it, or the label promises
+  // something the panel does not show.
+  const hasContactsOnly =
+    (resource.approverSlugs?.length ?? 0) > 0 ||
+    Boolean(resource.accessComments)
+
+  if (!request) {
+    return hasContactsOnly
+      ? { route: ROUTE_REQUEST, chip: undefined }
+      : { route: ROUTE_UNDOCUMENTED }
+  }
+
+  const method = approvalMethods.find(
+    (m) => m.slug === request.approvalMethodSlug,
+  )
+  const hasWrittenSteps = Boolean(request.requestPrompt || request.comments)
+  const isTwoStep = Boolean(hasWrittenSteps && request.postApprovalInstructions)
+
+  // Steps before roles: two-step is the rarer and more consequential shape, and
+  // an entry that is both (a named channel AND a follow-up) is exactly the one
+  // where "there is more to do after approval" is the thing worth knowing.
+  const roleCount = request.roles?.length ?? 0
+  const chip = isTwoStep
+    ? '2 steps'
+    : roleCount > 0
+      ? `${roleCount} role${roleCount === 1 ? '' : 's'}`
+      : undefined
+
+  if (method?.type === 'noAccessRequired') return { route: ROUTE_FREE, chip }
+
+  // Nothing here can name a channel: `custom` has none by definition, and an
+  // `approvalMethodSlug` that resolves to no method is a dangling reference —
+  // the section below renders an access box with nothing in it either way.
+  const cannotNameRoute = !method || method.type === 'custom'
+
+  // `unknown` is the honest "we did not find out". A route we cannot name AND
+  // cannot describe is the same dead end wearing a different slug: claiming
+  // "request" there would promise a way in that the panel does not show.
+  if (method?.type === 'unknown' || (cannotNameRoute && !hasWrittenSteps)) {
+    return { route: ROUTE_UNDOCUMENTED, chip }
+  }
+
+  // A named desk, bot or team. `shortName` exists because `displayName` is
+  // written for prose and the longest in use does not fit a tab. No `&& method`
+  // guard: `cannotNameRoute` is `!method || …`, so ruling it out already narrows
+  // `method` to present.
+  if (!cannotNameRoute) {
+    return { route: method.shortName ?? method.displayName, chip }
+  }
+
+  // Written steps with no channel to name them.
+  return { route: isTwoStep ? '2 steps' : ROUTE_REQUEST, chip }
+}

package/dist/esm/modules/appCatalog/ui/detail/CommentsSection.d.ts

@@ -1,3 +0,0 @@
-export declare function CommentsSection({ appSlug }: {
-    appSlug: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/detail/CommentsSection.js

@@ -1,228 +0,0 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
-import { useState } from "react";
-import { useTRPC } from "../../../../api/infra/trpc.js";
-import { Button } from "../../../../ui/button.js";
-import { cn } from "../../../../lib/utils.js";
-import { formatRelativeTime } from "../../utils/formatRelativeTime.js";
-const FIELD_CLASSES = "placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
-function errorMessage(error) {
-  return error instanceof Error ? error.message : "Something went wrong";
-}
-const STATUS_LABELS = {
-  applied: {
-    text: "✓ Applied — thank you!",
-    className: "comment-chip-applied",
-    title: "This comment improved the entry — the catalog now carries what it said."
-  },
-  acknowledged: {
-    text: "Seen",
-    className: "comment-chip-seen",
-    title: "A maintainer read this comment and left the entry as it was."
-  }
-};
-function StatusChip({ status }) {
-  const label = STATUS_LABELS[status];
-  return /* @__PURE__ */ jsx("span", { className: cn("comment-chip", label.className), title: label.title, children: label.text });
-}
-function ReviewerReply({ reply }) {
-  return /* @__PURE__ */ jsxs("div", { className: "border-primary/45 bg-muted/60 mt-1.5 rounded-r-lg border-l-2 px-2.5 py-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: "Catalog team" }),
-    /* @__PURE__ */ jsx("p", { className: "mt-0.5 whitespace-pre-wrap", children: reply })
-  ] });
-}
-function isSubmitChord(event) {
-  return event.key === "Enter" && (event.metaKey || event.ctrlKey);
-}
-function CommentsSection({ appSlug }) {
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
-  const listOptions = trpc.comments.list.queryOptions({ resourceSlug: appSlug });
-  const { data: comments, isLoading, error } = useQuery(listOptions);
-  const [draft, setDraft] = useState("");
-  const [editingId, setEditingId] = useState(null);
-  const [editDraft, setEditDraft] = useState("");
-  const [composerOpen, setComposerOpen] = useState(false);
-  const refresh = () => queryClient.invalidateQueries({ queryKey: listOptions.queryKey });
-  const add = useMutation(
-    trpc.comments.add.mutationOptions({
-      onSuccess: () => {
-        setDraft("");
-        void refresh();
-      }
-    })
-  );
-  const edit = useMutation(
-    trpc.comments.edit.mutationOptions({
-      onSuccess: () => {
-        setEditingId(null);
-        void refresh();
-      }
-    })
-  );
-  const remove = useMutation(
-    trpc.comments.remove.mutationOptions({ onSuccess: () => void refresh() })
-  );
-  const post = () => {
-    const body = draft.trim();
-    if (body) add.mutate({ resourceSlug: appSlug, body });
-  };
-  const saveEdit = (id) => {
-    const body = editDraft.trim();
-    if (body) edit.mutate({ id, body });
-  };
-  const failure = error ?? add.error ?? edit.error ?? remove.error;
-  const hasComments = !!comments && comments.length > 0;
-  const hasLabelled = !!(comments == null ? void 0 : comments.some((comment) => comment.status));
-  return /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-    /* @__PURE__ */ jsxs("h3", { className: "mb-2 text-sm font-medium", children: [
-      "Comments",
-      comments && comments.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground ml-1 font-normal", children: [
-        "(",
-        comments.length,
-        ")"
-      ] })
-    ] }),
-    isLoading ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Loading comments…" }) : comments && comments.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: comments.map((comment) => {
-      const canEdit = comment.isMine && !!comment.canEditUntil && Date.parse(comment.canEditUntil) > Date.now();
-      return /* @__PURE__ */ jsxs("li", { className: "text-xs", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: comment.authorName }),
-          /* @__PURE__ */ jsx("span", { children: formatRelativeTime(comment.createdAt) }),
-          comment.editedAt && /* @__PURE__ */ jsx("span", { children: "(edited)" }),
-          comment.status && /* @__PURE__ */ jsx(StatusChip, { status: comment.status }),
-          canEdit && editingId !== comment.id && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "hover:text-foreground underline",
-                onClick: () => {
-                  setEditingId(comment.id);
-                  setEditDraft(comment.body);
-                },
-                children: "Edit"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "hover:text-destructive underline",
-                onClick: () => remove.mutate({ id: comment.id }),
-                children: "Delete"
-              }
-            )
-          ] })
-        ] }),
-        editingId === comment.id ? /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-2", children: [
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              autoFocus: true,
-              rows: 3,
-              className: cn(FIELD_CLASSES),
-              value: editDraft,
-              onChange: (event) => setEditDraft(event.target.value),
-              onKeyDown: (event) => {
-                if (isSubmitChord(event)) {
-                  event.preventDefault();
-                  saveEdit(comment.id);
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                disabled: !editDraft.trim() || edit.isPending,
-                onClick: () => saveEdit(comment.id),
-                children: "Save"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                onClick: () => setEditingId(null),
-                children: "Cancel"
-              }
-            )
-          ] })
-        ] }) : /* @__PURE__ */ jsx("p", { className: "mt-0.5 whitespace-pre-wrap", children: comment.body }),
-        comment.reviewerReply && /* @__PURE__ */ jsx(ReviewerReply, { reply: comment.reviewerReply })
-      ] }, comment.id);
-    }) }) : null,
-    hasLabelled && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground border-border mt-3 border-t pt-2.5 text-[0.6875rem] leading-relaxed", children: [
-      /* @__PURE__ */ jsx(StatusChip, { status: "applied" }),
-      " means the comment improved this entry — the catalog now carries what it said.",
-      " ",
-      /* @__PURE__ */ jsx(StatusChip, { status: "acknowledged" }),
-      " means a maintainer read it and left the entry as it was."
-    ] }),
-    !isLoading && !hasComments && /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
-      "No comments yet.",
-      " ",
-      !composerOpen && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "hover:text-foreground underline",
-          onClick: () => setComposerOpen(true),
-          children: "Be the first."
-        }
-      )
-    ] }),
-    (hasComments || composerOpen) && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "mt-3 space-y-2",
-          composerOpen && "animate-in fade-in slide-in-from-top-2 duration-200"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              autoFocus: composerOpen,
-              rows: 3,
-              className: cn(FIELD_CLASSES),
-              placeholder: "Leave a comment…",
-              value: draft,
-              onChange: (event) => setDraft(event.target.value),
-              onKeyDown: (event) => {
-                if (isSubmitChord(event)) {
-                  event.preventDefault();
-                  post();
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                size: "sm",
-                disabled: !draft.trim() || add.isPending,
-                onClick: post,
-                children: add.isPending ? "Posting…" : "Post"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Posted under a nickname. You can edit or delete it for one hour." })
-          ] })
-        ]
-      }
-    ),
-    failure && /* @__PURE__ */ jsx("p", { className: "text-destructive mt-2 text-xs", children: errorMessage(failure) })
-  ] });
-}
-export {
-  CommentsSection
-};
-//# sourceMappingURL=CommentsSection.js.map

package/dist/esm/modules/appCatalog/ui/detail/CommentsSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CommentsSection.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/CommentsSection.tsx"],"sourcesContent":["import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { useState } from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { Button } from '~/ui/button'\nimport { cn } from '~/lib/utils'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\n\n/**\n * Feedback on one app, from anyone browsing the catalog.\n *\n * Nobody has to log in to leave a comment, so the server attributes each one to a\n * pseudonym derived from an httpOnly cookie (\"Curious Ferret\"). That cookie is also\n * the only thing that authorises editing or deleting, and only for the first hour —\n * `canEditUntil` arrives from the server as an absolute instant so a skewed client\n * clock cannot show controls the server would refuse.\n */\n\n/** Same shape the input primitive uses, minus the fixed height. */\nconst FIELD_CLASSES =\n  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : 'Something went wrong'\n}\n\n/**\n * What a maintainer did with a comment, as the reader sees it.\n *\n * `applied` is the point of the whole thing: a comment that improved the entry\n * gets public credit, so the next person can see that commenting changes the\n * catalog. Nobody sets these from the UI — the review tooling writes them.\n */\nconst STATUS_LABELS = {\n  applied: {\n    text: '✓ Applied — thank you!',\n    className: 'comment-chip-applied',\n    title:\n      'This comment improved the entry — the catalog now carries what it said.',\n  },\n  acknowledged: {\n    text: 'Seen',\n    className: 'comment-chip-seen',\n    title: 'A maintainer read this comment and left the entry as it was.',\n  },\n} as const\n\nfunction StatusChip({ status }: { status: 'applied' | 'acknowledged' }) {\n  const label = STATUS_LABELS[status]\n  return (\n    <span className={cn('comment-chip', label.className)} title={label.title}>\n      {label.text}\n    </span>\n  )\n}\n\n/** The maintainers' answer, attributed to the team rather than a pseudonym. */\nfunction ReviewerReply({ reply }: { reply: string }) {\n  return (\n    <div className=\"border-primary/45 bg-muted/60 mt-1.5 rounded-r-lg border-l-2 px-2.5 py-1.5\">\n      <span className=\"text-muted-foreground font-medium\">Catalog team</span>\n      <p className=\"mt-0.5 whitespace-pre-wrap\">{reply}</p>\n    </div>\n  )\n}\n\n/** Cmd/Ctrl+Enter submits; plain Enter keeps making paragraphs. */\nfunction isSubmitChord(event: React.KeyboardEvent): boolean {\n  return event.key === 'Enter' && (event.metaKey || event.ctrlKey)\n}\n\nexport function CommentsSection({ appSlug }: { appSlug: string }) {\n  const trpc = useTRPC()\n  const queryClient = useQueryClient()\n  const listOptions = trpc.comments.list.queryOptions({ resourceSlug: appSlug })\n  const { data: comments, isLoading, error } = useQuery(listOptions)\n\n  const [draft, setDraft] = useState('')\n  const [editingId, setEditingId] = useState<string | null>(null)\n  const [editDraft, setEditDraft] = useState('')\n  /**\n   * Most apps have no comments, and an empty form under \"no comments yet\" is just\n   * noise. So the composer stays behind the invitation until someone accepts it —\n   * which is also what earns the caret: focus follows the click, never the mount.\n   */\n  const [composerOpen, setComposerOpen] = useState(false)\n\n  const refresh = () =>\n    queryClient.invalidateQueries({ queryKey: listOptions.queryKey })\n\n  const add = useMutation(\n    trpc.comments.add.mutationOptions({\n      onSuccess: () => {\n        setDraft('')\n        void refresh()\n      },\n    }),\n  )\n  const edit = useMutation(\n    trpc.comments.edit.mutationOptions({\n      onSuccess: () => {\n        setEditingId(null)\n        void refresh()\n      },\n    }),\n  )\n  const remove = useMutation(\n    trpc.comments.remove.mutationOptions({ onSuccess: () => void refresh() }),\n  )\n\n  const post = () => {\n    const body = draft.trim()\n    if (body) add.mutate({ resourceSlug: appSlug, body })\n  }\n\n  const saveEdit = (id: string) => {\n    const body = editDraft.trim()\n    if (body) edit.mutate({ id, body })\n  }\n\n  // One line for every failed action: three mutations and one query, one place to look.\n  const failure = error ?? add.error ?? edit.error ?? remove.error\n  const hasComments = !!comments && comments.length > 0\n  const hasLabelled = !!comments?.some((comment) => comment.status)\n\n  return (\n    <div className=\"mt-6\">\n      <h3 className=\"mb-2 text-sm font-medium\">\n        Comments\n        {comments && comments.length > 0 && (\n          <span className=\"text-muted-foreground ml-1 font-normal\">\n            ({comments.length})\n          </span>\n        )}\n      </h3>\n\n      {isLoading ? (\n        <p className=\"text-muted-foreground text-xs\">Loading comments…</p>\n      ) : comments && comments.length > 0 ? (\n        <ul className=\"space-y-3\">\n          {comments.map((comment) => {\n            const canEdit =\n              comment.isMine &&\n              !!comment.canEditUntil &&\n              Date.parse(comment.canEditUntil) > Date.now()\n\n            return (\n              <li key={comment.id} className=\"text-xs\">\n                <div className=\"text-muted-foreground flex items-center gap-2\">\n                  <span className=\"text-foreground font-medium\">\n                    {comment.authorName}\n                  </span>\n                  <span>{formatRelativeTime(comment.createdAt)}</span>\n                  {comment.editedAt && <span>(edited)</span>}\n                  {comment.status && <StatusChip status={comment.status} />}\n                  {canEdit && editingId !== comment.id && (\n                    <>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-foreground underline\"\n                        onClick={() => {\n                          setEditingId(comment.id)\n                          setEditDraft(comment.body)\n                        }}\n                      >\n                        Edit\n                      </button>\n                      <button\n                        type=\"button\"\n                        className=\"hover:text-destructive underline\"\n                        onClick={() => remove.mutate({ id: comment.id })}\n                      >\n                        Delete\n                      </button>\n                    </>\n                  )}\n                </div>\n\n                {editingId === comment.id ? (\n                  <div className=\"mt-1 space-y-2\">\n                    <textarea\n                      autoFocus\n                      rows={3}\n                      className={cn(FIELD_CLASSES)}\n                      value={editDraft}\n                      onChange={(event) => setEditDraft(event.target.value)}\n                      onKeyDown={(event) => {\n                        if (isSubmitChord(event)) {\n                          event.preventDefault()\n                          saveEdit(comment.id)\n                        }\n                      }}\n                    />\n                    <div className=\"flex gap-2\">\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={!editDraft.trim() || edit.isPending}\n                        onClick={() => saveEdit(comment.id)}\n                      >\n                        Save\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        onClick={() => setEditingId(null)}\n                      >\n                        Cancel\n                      </Button>\n                    </div>\n                  </div>\n                ) : (\n                  <p className=\"mt-0.5 whitespace-pre-wrap\">{comment.body}</p>\n                )}\n\n                {comment.reviewerReply && (\n                  <ReviewerReply reply={comment.reviewerReply} />\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      ) : null}\n\n      {/* A chip nobody can decode motivates nobody — but the legend is noise on\n          an entry where no comment has been reviewed yet, so it comes and goes\n          with the chips. */}\n      {hasLabelled && (\n        <p className=\"text-muted-foreground border-border mt-3 border-t pt-2.5 text-[0.6875rem] leading-relaxed\">\n          <StatusChip status=\"applied\" /> means the comment improved this entry\n          — the catalog now carries what it said.{' '}\n          <StatusChip status=\"acknowledged\" /> means a maintainer read it and\n          left the entry as it was.\n        </p>\n      )}\n\n      {!isLoading && !hasComments && (\n        <p className=\"text-muted-foreground text-xs\">\n          No comments yet.{' '}\n          {!composerOpen && (\n            <button\n              type=\"button\"\n              className=\"hover:text-foreground underline\"\n              onClick={() => setComposerOpen(true)}\n            >\n              Be the first.\n            </button>\n          )}\n        </p>\n      )}\n\n      {(hasComments || composerOpen) && (\n        <div\n          className={cn(\n            'mt-3 space-y-2',\n            composerOpen &&\n              'animate-in fade-in slide-in-from-top-2 duration-200',\n          )}\n        >\n          <textarea\n            autoFocus={composerOpen}\n            rows={3}\n            className={cn(FIELD_CLASSES)}\n            placeholder=\"Leave a comment…\"\n            value={draft}\n            onChange={(event) => setDraft(event.target.value)}\n            onKeyDown={(event) => {\n              if (isSubmitChord(event)) {\n                event.preventDefault()\n                post()\n              }\n            }}\n          />\n          <div className=\"flex items-center gap-3\">\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              disabled={!draft.trim() || add.isPending}\n              onClick={post}\n            >\n              {add.isPending ? 'Posting…' : 'Post'}\n            </Button>\n            <span className=\"text-muted-foreground text-xs\">\n              Posted under a nickname. You can edit or delete it for one hour.\n            </span>\n          </div>\n        </div>\n      )}\n\n      {/* Outside the composer: a failed list query leaves nothing to collapse into. */}\n      {failure && (\n        <p className=\"text-destructive mt-2 text-xs\">{errorMessage(failure)}</p>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/src/__tests__/modules/appCatalog/ui/detail/CommentsSection.emptyState.test.tsx

@@ -1,64 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, expect, it, vi } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-
-// The section only needs a comment list here; the whole tRPC/react-query stack is
-// stubbed down to that one query so the empty state is the only thing under test.
-const state = vi.hoisted(() => ({
-  comments: [] as unknown[],
-}))
-
-vi.mock('@tanstack/react-query', () => ({
-  useQuery: vi.fn(() => ({ data: state.comments, isLoading: false })),
-  useMutation: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
-  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
-}))
-vi.mock('~/api/infra/trpc', () => ({
-  useTRPC: vi.fn(() => ({
-    comments: {
-      list: { queryOptions: () => ({ queryKey: ['comments'] }) },
-      add: { mutationOptions: (o: unknown) => o },
-      edit: { mutationOptions: (o: unknown) => o },
-      remove: { mutationOptions: (o: unknown) => o },
-    },
-  })),
-}))
-
-const { CommentsSection } =
-  await import('~/modules/appCatalog/ui/detail/CommentsSection')
-
-describe('CommentsSection — empty state', () => {
-  it('keeps the composer behind "Be the first." until it is clicked', async () => {
-    state.comments = []
-    render(<CommentsSection appSlug="example-app" />)
-
-    const invite = screen.getByRole('button', { name: 'Be the first.' })
-    expect(screen.queryByPlaceholderText('Leave a comment…')).toBeNull()
-
-    await userEvent.click(invite)
-
-    const field = screen.getByPlaceholderText('Leave a comment…')
-    expect(field).toBeInTheDocument()
-    expect(field).toHaveFocus()
-    // One affordance at a time: the invite hides itself once it has done its job.
-    expect(screen.queryByRole('button', { name: 'Be the first.' })).toBeNull()
-  })
-
-  it('shows the composer straight away once comments exist, without stealing focus', () => {
-    state.comments = [
-      {
-        id: 'c1',
-        authorName: 'Curious Ferret',
-        body: 'Useful.',
-        createdAt: new Date().toISOString(),
-      },
-    ]
-    render(<CommentsSection appSlug="example-app" />)
-
-    const field = screen.getByPlaceholderText('Leave a comment…')
-    expect(field).toBeInTheDocument()
-    expect(field).not.toHaveFocus()
-    expect(screen.queryByRole('button', { name: 'Be the first.' })).toBeNull()
-  })
-})

package/src/__tests__/modules/appCatalog/ui/detail/CommentsSection.reviewStatus.test.tsx

@@ -1,93 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-
-// Same stub shape as the empty-state test: only the list query matters here.
-const state = vi.hoisted(() => ({
-  comments: [] as unknown[],
-}))
-
-vi.mock('@tanstack/react-query', () => ({
-  useQuery: vi.fn(() => ({ data: state.comments, isLoading: false })),
-  useMutation: vi.fn(() => ({ mutate: vi.fn(), isPending: false })),
-  useQueryClient: vi.fn(() => ({ invalidateQueries: vi.fn() })),
-}))
-vi.mock('~/api/infra/trpc', () => ({
-  useTRPC: vi.fn(() => ({
-    comments: {
-      list: { queryOptions: () => ({ queryKey: ['comments'] }) },
-      add: { mutationOptions: (o: unknown) => o },
-      edit: { mutationOptions: (o: unknown) => o },
-      remove: { mutationOptions: (o: unknown) => o },
-    },
-  })),
-}))
-
-const { CommentsSection } =
-  await import('~/modules/appCatalog/ui/detail/CommentsSection')
-
-const base = {
-  id: 'c1',
-  authorName: 'Merry Mole',
-  body: 'This portal only covers one business unit.',
-  createdAt: new Date().toISOString(),
-  editedAt: null,
-  isMine: false,
-  canEditUntil: null,
-  status: null as string | null,
-  reviewerReply: null as string | null,
-}
-
-/** The chip text, minus the legend's two sample chips. */
-function chips(name: RegExp) {
-  return screen.getAllByText(name)
-}
-
-describe('CommentsSection — review status', () => {
-  it('credits an applied comment and explains the label', () => {
-    state.comments = [{ ...base, status: 'applied' }]
-    render(<CommentsSection appSlug="example-app" />)
-
-    // One on the comment, one in the legend.
-    expect(chips(/Applied — thank you!/)).toHaveLength(2)
-    expect(
-      screen.getByText(/means the comment improved this entry/),
-    ).toBeInTheDocument()
-  })
-
-  it('shows the quieter label for a comment that changed nothing', () => {
-    state.comments = [{ ...base, status: 'acknowledged' }]
-    render(<CommentsSection appSlug="example-app" />)
-
-    expect(chips(/^Seen$/)).toHaveLength(2)
-    expect(screen.getByText(/left the entry as it was/)).toBeInTheDocument()
-  })
-
-  it('renders the maintainer reply under the comment', () => {
-    state.comments = [
-      {
-        ...base,
-        status: 'applied',
-        reviewerReply: 'Folded into Background — thank you.',
-      },
-    ]
-    render(<CommentsSection appSlug="example-app" />)
-
-    expect(screen.getByText('Catalog team')).toBeInTheDocument()
-    expect(
-      screen.getByText('Folded into Background — thank you.'),
-    ).toBeInTheDocument()
-  })
-
-  it('stays silent on an unreviewed comment — no chip, no legend', () => {
-    state.comments = [base]
-    render(<CommentsSection appSlug="example-app" />)
-
-    expect(screen.queryByText(/Applied — thank you!/)).toBeNull()
-    expect(screen.queryByText(/^Seen$/)).toBeNull()
-    expect(
-      screen.queryByText(/means the comment improved this entry/),
-    ).toBeNull()
-    expect(screen.queryByText('Catalog team')).toBeNull()
-  })
-})