@focus-reactive/payload-plugin-comments 1.0.0

package/dist/components/CommentItem/index.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { startTransition } from "react";
+import { useTranslation } from "@payloadcms/ui";
+import { cn } from "../../utils/general/cn";
+import { useComments } from "../../providers/CommentsProvider";
+import { renderCommentText } from "../../utils/comment/renderCommentText";
+import { resolveUsername } from "../../utils/user/resolveUsername";
+import { FALLBACK_DELETED_USERNAME, FALLBACK_USERNAME } from "../../constants";
+import { ToolsPanel } from "./ToolsPanel";
+import { useRelativeDate } from "../../hooks/useRelativeDate";
+import { Avatar } from "../Avatar";
+function CommentItem({ comment, currentUserId }) {
+  const { resolveComment, removeComment, usernameFieldPath } = useComments();
+  const { t } = useTranslation();
+  const createdAtRelativeDate = useRelativeDate(comment.createdAt);
+  const deletedUserLabel = t("comments:deletedUser") ?? FALLBACK_DELETED_USERNAME;
+  const unknownLabel = t("comments:unknownAuthor") ?? FALLBACK_USERNAME;
+  const narrowedAuthor = typeof comment.author === "object" ? comment.author : null;
+  const authorName = resolveUsername(narrowedAuthor, usernameFieldPath, unknownLabel);
+  const isResolved = comment.isResolved ?? false;
+  const authorId = comment.author && typeof comment.author === "object" && "id" in comment.author ? comment.author.id : null;
+  const canDelete = currentUserId !== null && authorId === currentUserId;
+  const handleToggleResolve = () => {
+    startTransition(async () => {
+      await resolveComment(comment.id, !isResolved);
+    });
+  };
+  const handleDelete = () => {
+    startTransition(async () => {
+      await removeComment(comment.id);
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("group relative"), children: [
+    /* @__PURE__ */ jsx(
+      ToolsPanel,
+      {
+        isResolved,
+        canDelete,
+        onDelete: handleDelete,
+        onResolve: handleToggleResolve
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5 items-start", children: [
+      /* @__PURE__ */ jsx(Avatar, { user: narrowedAuthor, usernameFieldPath, fallbackName: unknownLabel }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-semibold text-[13px] text-(--theme-text)", children: authorName }),
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-(--theme-elevation-450)", children: createdAtRelativeDate })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "m-0 text-[13px] leading-normal text-(--theme-text) whitespace-pre-wrap wrap-break-word", children: renderCommentText({
+          text: comment.text,
+          mentions: comment.mentions,
+          currentUserId,
+          usernameFieldPath,
+          fallbackDeletedUsername: deletedUserLabel
+        }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  CommentItem
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CommentItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentItem/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { startTransition } from \"react\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\nimport type { Comment } from \"../../types\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { renderCommentText } from \"../../utils/comment/renderCommentText\";\nimport { resolveUsername } from \"../../utils/user/resolveUsername\";\nimport { FALLBACK_DELETED_USERNAME, FALLBACK_USERNAME } from \"../../constants\";\nimport { ToolsPanel } from \"./ToolsPanel\";\nimport { useRelativeDate } from \"../../hooks/useRelativeDate\";\nimport { Avatar } from \"../Avatar\";\n\ninterface Props {\n  comment: Comment;\n  currentUserId: number | null;\n}\n\nexport function CommentItem({ comment, currentUserId }: Props) {\n  const { resolveComment, removeComment, usernameFieldPath } = useComments();\n  const { t } = useTranslation();\n  const createdAtRelativeDate = useRelativeDate(comment.createdAt);\n\n  const deletedUserLabel = t(\"comments:deletedUser\" as never) ?? FALLBACK_DELETED_USERNAME;\n  const unknownLabel = t(\"comments:unknownAuthor\" as never) ?? FALLBACK_USERNAME;\n  const narrowedAuthor = typeof comment.author === \"object\" ? comment.author : null;\n  const authorName = resolveUsername(narrowedAuthor, usernameFieldPath, unknownLabel);\n\n  const isResolved = comment.isResolved ?? false;\n\n  const authorId =\n    comment.author && typeof comment.author === \"object\" && \"id\" in comment.author ? comment.author.id : null;\n  const canDelete = currentUserId !== null && authorId === currentUserId;\n\n  const handleToggleResolve = () => {\n    startTransition(async () => {\n      await resolveComment(comment.id, !isResolved);\n    });\n  };\n\n  const handleDelete = () => {\n    startTransition(async () => {\n      await removeComment(comment.id);\n    });\n  };\n\n  return (\n    <div className={cn(\"group relative\")}>\n      <ToolsPanel\n        isResolved={isResolved}\n        canDelete={canDelete}\n        onDelete={handleDelete}\n        onResolve={handleToggleResolve}\n      />\n\n      <div className=\"flex gap-2.5 items-start\">\n        <Avatar user={narrowedAuthor} usernameFieldPath={usernameFieldPath} fallbackName={unknownLabel} />\n\n        <div className=\"flex-1\">\n          <div className=\"flex items-center gap-2 mb-1\">\n            <span className=\"font-semibold text-[13px] text-(--theme-text)\">{authorName}</span>\n            <span className=\"text-[11px] text-(--theme-elevation-450)\">{createdAtRelativeDate}</span>\n          </div>\n\n          <p className=\"m-0 text-[13px] leading-normal text-(--theme-text) whitespace-pre-wrap wrap-break-word\">\n            {renderCommentText({\n              text: comment.text,\n              mentions: comment.mentions,\n              currentUserId,\n              usernameFieldPath,\n              fallbackDeletedUsername: deletedUserLabel,\n            })}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAiDM,cAWI,YAXJ;AA/CN,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,2BAA2B,yBAAyB;AAC7D,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,cAAc;AAOhB,SAAS,YAAY,EAAE,SAAS,cAAc,GAAU;AAC7D,QAAM,EAAE,gBAAgB,eAAe,kBAAkB,IAAI,YAAY;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,wBAAwB,gBAAgB,QAAQ,SAAS;AAE/D,QAAM,mBAAmB,EAAE,sBAA+B,KAAK;AAC/D,QAAM,eAAe,EAAE,wBAAiC,KAAK;AAC7D,QAAM,iBAAiB,OAAO,QAAQ,WAAW,WAAW,QAAQ,SAAS;AAC7E,QAAM,aAAa,gBAAgB,gBAAgB,mBAAmB,YAAY;AAElF,QAAM,aAAa,QAAQ,cAAc;AAEzC,QAAM,WACJ,QAAQ,UAAU,OAAO,QAAQ,WAAW,YAAY,QAAQ,QAAQ,SAAS,QAAQ,OAAO,KAAK;AACvG,QAAM,YAAY,kBAAkB,QAAQ,aAAa;AAEzD,QAAM,sBAAsB,MAAM;AAChC,oBAAgB,YAAY;AAC1B,YAAM,eAAe,QAAQ,IAAI,CAAC,UAAU;AAAA,IAC9C,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,MAAM;AACzB,oBAAgB,YAAY;AAC1B,YAAM,cAAc,QAAQ,EAAE;AAAA,IAChC,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,gBAAgB,GACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,IAEA,qBAAC,SAAI,WAAU,4BACb;AAAA,0BAAC,UAAO,MAAM,gBAAgB,mBAAsC,cAAc,cAAc;AAAA,MAEhG,qBAAC,SAAI,WAAU,UACb;AAAA,6BAAC,SAAI,WAAU,gCACb;AAAA,8BAAC,UAAK,WAAU,iDAAiD,sBAAW;AAAA,UAC5E,oBAAC,UAAK,WAAU,4CAA4C,iCAAsB;AAAA,WACpF;AAAA,QAEA,oBAAC,OAAE,WAAU,0FACV,4BAAkB;AAAA,UACjB,MAAM,QAAQ;AAAA,UACd,UAAU,QAAQ;AAAA,UAClB;AAAA,UACA;AAAA,UACA,yBAAyB;AAAA,QAC3B,CAAC,GACH;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsDrawer/components/Header.d.ts

@@ -0,0 +1,6 @@
+interface HeaderProps {
+    slug: string;
+}
+export declare function Header({ slug }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/CommentsDrawer/components/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"names":[],"mappings":"AASA,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,EAAE,WAAW,2CAwC3C"}

package/dist/components/CommentsDrawer/components/Header.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SelectInput, useModal, useTranslation } from "@payloadcms/ui";
+import { useComments } from "../../../providers/CommentsProvider";
+import { LoaderCircleIcon, XIcon } from "lucide-react";
+import { IconButton } from "../../IconButton";
+function Header({ slug }) {
+  const { t } = useTranslation();
+  const { closeModal } = useModal();
+  const { filter, setFilter, syncCommentsStatus } = useComments();
+  const options = [
+    { label: t("comments:filterOpen"), value: "open" },
+    { label: t("comments:filterResolved"), value: "resolved" },
+    { label: t("comments:filterMentioned"), value: "mentioned" }
+  ];
+  return /* @__PURE__ */ jsxs("header", { className: "sticky top-0 flex items-center gap-3 py-5 bg-(--theme-bg)", children: [
+    /* @__PURE__ */ jsx("h2", { className: "m-0 text-2xl font-bold", children: t("comments:label") }),
+    syncCommentsStatus === "loading" && /* @__PURE__ */ jsx(
+      LoaderCircleIcon,
+      {
+        width: 14,
+        height: 14,
+        className: "text-(--theme-elevation-450) animate-spin shrink-0",
+        "aria-label": t("comments:syncingComments")
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [
+      /* @__PURE__ */ jsx(
+        SelectInput,
+        {
+          name: "filter",
+          path: "filter",
+          options,
+          value: filter,
+          onChange: (option) => setFilter(option.value),
+          isClearable: false
+        }
+      ),
+      /* @__PURE__ */ jsx(IconButton, { onClick: () => closeModal(slug), title: t("comments:close"), children: /* @__PURE__ */ jsx(XIcon, { width: 16, height: 16 }) })
+    ] })
+  ] });
+}
+export {
+  Header
+};
+//# sourceMappingURL=Header.js.map

package/dist/components/CommentsDrawer/components/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsDrawer/components/Header.tsx"],"sourcesContent":["\"use client\";\n\nimport { SelectInput, useModal, useTranslation } from \"@payloadcms/ui\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport type { FilterMode } from \"../../../types\";\nimport { LoaderCircleIcon, XIcon } from \"lucide-react\";\nimport type { OptionObject } from \"payload\";\nimport { IconButton } from \"../../IconButton\";\n\ninterface HeaderProps {\n  slug: string;\n}\n\nexport function Header({ slug }: HeaderProps) {\n  const { t } = useTranslation();\n  const { closeModal } = useModal();\n  const { filter, setFilter, syncCommentsStatus } = useComments();\n\n  const options = [\n    { label: t(\"comments:filterOpen\" as never), value: \"open\" },\n    { label: t(\"comments:filterResolved\" as never), value: \"resolved\" },\n    { label: t(\"comments:filterMentioned\" as never), value: \"mentioned\" },\n  ];\n\n  return (\n    <header className=\"sticky top-0 flex items-center gap-3 py-5 bg-(--theme-bg)\">\n      <h2 className=\"m-0 text-2xl font-bold\">{t(\"comments:label\" as never)}</h2>\n\n      {syncCommentsStatus === \"loading\" && (\n        <LoaderCircleIcon\n          width={14}\n          height={14}\n          className=\"text-(--theme-elevation-450) animate-spin shrink-0\"\n          aria-label={t(\"comments:syncingComments\" as never)}\n        />\n      )}\n\n      <div className=\"flex items-center gap-2 ml-auto\">\n        <SelectInput\n          name=\"filter\"\n          path=\"filter\"\n          options={options}\n          value={filter}\n          onChange={(option) => setFilter((option as OptionObject).value as FilterMode)}\n          isClearable={false}\n        />\n\n        <IconButton onClick={() => closeModal(slug)} title={t(\"comments:close\" as never)}>\n          <XIcon width={16} height={16} />\n        </IconButton>\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AA0BM,cAWA,YAXA;AAxBN,SAAS,aAAa,UAAU,sBAAsB;AACtD,SAAS,mBAAmB;AAE5B,SAAS,kBAAkB,aAAa;AAExC,SAAS,kBAAkB;AAMpB,SAAS,OAAO,EAAE,KAAK,GAAgB;AAC5C,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,WAAW,IAAI,SAAS;AAChC,QAAM,EAAE,QAAQ,WAAW,mBAAmB,IAAI,YAAY;AAE9D,QAAM,UAAU;AAAA,IACd,EAAE,OAAO,EAAE,qBAA8B,GAAG,OAAO,OAAO;AAAA,IAC1D,EAAE,OAAO,EAAE,yBAAkC,GAAG,OAAO,WAAW;AAAA,IAClE,EAAE,OAAO,EAAE,0BAAmC,GAAG,OAAO,YAAY;AAAA,EACtE;AAEA,SACE,qBAAC,YAAO,WAAU,6DAChB;AAAA,wBAAC,QAAG,WAAU,0BAA0B,YAAE,gBAAyB,GAAE;AAAA,IAEpE,uBAAuB,aACtB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAU;AAAA,QACV,cAAY,EAAE,0BAAmC;AAAA;AAAA,IACnD;AAAA,IAGF,qBAAC,SAAI,WAAU,mCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,WAAW,UAAW,OAAwB,KAAmB;AAAA,UAC5E,aAAa;AAAA;AAAA,MACf;AAAA,MAEA,oBAAC,cAAW,SAAS,MAAM,WAAW,IAAI,GAAG,OAAO,EAAE,gBAAyB,GAC7E,8BAAC,SAAM,OAAO,IAAI,QAAQ,IAAI,GAChC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsDrawer/index.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    slug: string;
+}
+export declare function CommentsDrawer({ slug }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentsDrawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentsDrawer/index.tsx"],"names":[],"mappings":"AAQA,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,2CAoB7C"}

package/dist/components/CommentsDrawer/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { CommentsPanel } from "../CommentsPanel";
+import { Header } from "./components/Header";
+import { cn } from "../../utils/general/cn";
+import { Drawer, useModal } from "@payloadcms/ui";
+function CommentsDrawer({ slug }) {
+  const { modalState, closeModal, containerRef } = useModal();
+  const isOpen = !!modalState[slug]?.isOpen;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isOpen && containerRef.current && createPortal(
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50 z-29 cursor-pointer", onClick: () => closeModal(slug) }),
+      containerRef.current
+    ),
+    /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        className: cn("comments-drawer max-w-150 w-full m-0 ml-auto relative"),
+        slug,
+        Header: /* @__PURE__ */ jsx(Header, { slug }),
+        children: /* @__PURE__ */ jsx(CommentsPanel, { className: "pb-5" })
+      }
+    )
+  ] });
+}
+export {
+  CommentsDrawer
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CommentsDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentsDrawer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createPortal } from \"react-dom\";\nimport { CommentsPanel } from \"../CommentsPanel\";\nimport { Header } from \"./components/Header\";\nimport { cn } from \"../../utils/general/cn\";\nimport { Drawer, useModal } from \"@payloadcms/ui\";\n\ninterface Props {\n  slug: string;\n}\n\nexport function CommentsDrawer({ slug }: Props) {\n  const { modalState, closeModal, containerRef } = useModal();\n  const isOpen = !!modalState[slug]?.isOpen;\n\n  return (\n    <>\n      {isOpen\n        && containerRef.current\n        && createPortal(\n          <div className=\"fixed inset-0 bg-black/50 z-29 cursor-pointer\" onClick={() => closeModal(slug)} />,\n          containerRef.current,\n        )}\n      <Drawer\n        className={cn(\"comments-drawer max-w-150 w-full m-0 ml-auto relative\")}\n        slug={slug}\n        Header={<Header slug={slug} />}>\n        <CommentsPanel className=\"pb-5\" />\n      </Drawer>\n    </>\n  );\n}\n"],"mappings":";AAiBI,mBAIM,KAJN;AAfJ,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,QAAQ,gBAAgB;AAM1B,SAAS,eAAe,EAAE,KAAK,GAAU;AAC9C,QAAM,EAAE,YAAY,YAAY,aAAa,IAAI,SAAS;AAC1D,QAAM,SAAS,CAAC,CAAC,WAAW,IAAI,GAAG;AAEnC,SACE,iCACG;AAAA,cACI,aAAa,WACb;AAAA,MACD,oBAAC,SAAI,WAAU,iDAAgD,SAAS,MAAM,WAAW,IAAI,GAAG;AAAA,MAChG,aAAa;AAAA,IACf;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,uDAAuD;AAAA,QACrE;AAAA,QACA,QAAQ,oBAAC,UAAO,MAAY;AAAA,QAC5B,8BAAC,iBAAc,WAAU,QAAO;AAAA;AAAA,IAClC;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsHeaderButton/index.d.ts

@@ -0,0 +1,2 @@
+export declare function CommentsHeaderButton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentsHeaderButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentsHeaderButton/index.tsx"],"names":[],"mappings":"AAQA,wBAAgB,oBAAoB,4CAanC"}

package/dist/components/CommentsHeaderButton/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@payloadcms/ui";
+import { MessageSquare } from "lucide-react";
+import { CommentsDrawer } from "../CommentsDrawer";
+import { useCommentsDrawer } from "../../providers/CommentsDrawerProvider";
+import { IconButton } from "../IconButton";
+function CommentsHeaderButton() {
+  const { slug, open } = useCommentsDrawer();
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IconButton, { variant: "neutralSecondary", onClick: () => open(), title: t("comments:openCommentsAria"), children: /* @__PURE__ */ jsx(MessageSquare, { size: 16 }) }),
+    /* @__PURE__ */ jsx(CommentsDrawer, { slug })
+  ] });
+}
+export {
+  CommentsHeaderButton
+};
+//# sourceMappingURL=index.js.map

package/dist/components/CommentsHeaderButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentsHeaderButton/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { MessageSquare } from \"lucide-react\";\nimport { CommentsDrawer } from \"../CommentsDrawer\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\n\nexport function CommentsHeaderButton() {\n  const { slug, open } = useCommentsDrawer();\n  const { t } = useTranslation();\n\n  return (\n    <>\n      <IconButton variant=\"neutralSecondary\" onClick={() => open()} title={t(\"comments:openCommentsAria\" as never)}>\n        <MessageSquare size={16} />\n      </IconButton>\n\n      <CommentsDrawer slug={slug} />\n    </>\n  );\n}\n"],"mappings":";AAaI,mBAEI,KAFJ;AAXJ,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,SAAS,uBAAuB;AACrC,QAAM,EAAE,MAAM,KAAK,IAAI,kBAAkB;AACzC,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,iCACE;AAAA,wBAAC,cAAW,SAAQ,oBAAmB,SAAS,MAAM,KAAK,GAAG,OAAO,EAAE,2BAAoC,GACzG,8BAAC,iBAAc,MAAM,IAAI,GAC3B;AAAA,IAEA,oBAAC,kBAAe,MAAY;AAAA,KAC9B;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/CollapsibleGroup.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+interface CollapsibleGroupProps {
+    groupKey: string;
+    label: string;
+    children: ReactNode;
+    level: "collection" | "document" | "field";
+}
+export declare function CollapsibleGroup({ groupKey, label, children, level }: CollapsibleGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CollapsibleGroup.d.ts.map

package/dist/components/CommentsPanel/components/CollapsibleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;CAC5C;AAgCD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CAyB3F"}

package/dist/components/CommentsPanel/components/CollapsibleGroup.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useCollapseState } from "../hooks/useCollapseState";
+import { cn } from "../../../utils/general/cn";
+const collapsibleGroupVariants = {
+  wrapper: cva("flex w-full items-center gap-2 cursor-pointer select-none", {
+    variants: {
+      level: {
+        collection: "py-2",
+        document: "py-2",
+        field: "py-1.5"
+      }
+    }
+  }),
+  label: cva("flex-1 truncate", {
+    variants: {
+      level: {
+        collection: "text-[14px] font-semibold text-(--theme-text)",
+        document: "text-[13px] font-semibold text-(--theme-text)",
+        field: "text-[12px] font-medium text-(--theme-elevation-600)"
+      }
+    }
+  }),
+  childWrapper: cva("", {
+    variants: {
+      level: {
+        collection: "border-l-2 border-(--theme-elevation-100) pl-3",
+        document: "border-l-2 border-(--theme-elevation-100) pl-3",
+        field: ""
+      }
+    }
+  })
+};
+function CollapsibleGroup({ groupKey, label, children, level }) {
+  const [isCollapsed, toggle] = useCollapseState(groupKey);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: toggle,
+        onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && toggle(),
+        "aria-expanded": !isCollapsed,
+        className: collapsibleGroupVariants.wrapper({ level }),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: collapsibleGroupVariants.label({ level }), children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "shrink-0 w-4 h-4 text-(--theme-elevation-450) transition-transform duration-150",
+                isCollapsed && "-rotate-90"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    !isCollapsed && /* @__PURE__ */ jsx("div", { className: collapsibleGroupVariants.childWrapper({ level }), children })
+  ] });
+}
+export {
+  CollapsibleGroup
+};
+//# sourceMappingURL=CollapsibleGroup.js.map

package/dist/components/CommentsPanel/components/CollapsibleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/CollapsibleGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cva } from \"class-variance-authority\";\nimport { useCollapseState } from \"../hooks/useCollapseState\";\nimport { cn } from \"../../../utils/general/cn\";\n\ninterface CollapsibleGroupProps {\n  groupKey: string;\n  label: string;\n  children: ReactNode;\n  level: \"collection\" | \"document\" | \"field\";\n}\n\nconst collapsibleGroupVariants = {\n  wrapper: cva(\"flex w-full items-center gap-2 cursor-pointer select-none\", {\n    variants: {\n      level: {\n        collection: \"py-2\",\n        document: \"py-2\",\n        field: \"py-1.5\",\n      },\n    },\n  }),\n  label: cva(\"flex-1 truncate\", {\n    variants: {\n      level: {\n        collection: \"text-[14px] font-semibold text-(--theme-text)\",\n        document: \"text-[13px] font-semibold text-(--theme-text)\",\n        field: \"text-[12px] font-medium text-(--theme-elevation-600)\",\n      },\n    },\n  }),\n  childWrapper: cva(\"\", {\n    variants: {\n      level: {\n        collection: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        document: \"border-l-2 border-(--theme-elevation-100) pl-3\",\n        field: \"\",\n      },\n    },\n  }),\n};\n\nexport function CollapsibleGroup({ groupKey, label, children, level }: CollapsibleGroupProps) {\n  const [isCollapsed, toggle] = useCollapseState(groupKey);\n\n  return (\n    <div>\n      <div\n        role=\"button\"\n        tabIndex={0}\n        onClick={toggle}\n        onKeyDown={(e) => (e.key === \"Enter\" || e.key === \" \") && toggle()}\n        aria-expanded={!isCollapsed}\n        className={collapsibleGroupVariants.wrapper({ level })}>\n        <span className={collapsibleGroupVariants.label({ level })}>{label}</span>\n\n        <ChevronDown\n          className={cn(\n            \"shrink-0 w-4 h-4 text-(--theme-elevation-450) transition-transform duration-150\",\n            isCollapsed && \"-rotate-90\",\n          )}\n        />\n      </div>\n\n      {!isCollapsed && <div className={collapsibleGroupVariants.childWrapper({ level })}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";AAkDM,SAOE,KAPF;AA/CN,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AASnB,MAAM,2BAA2B;AAAA,EAC/B,SAAS,IAAI,6DAA6D;AAAA,IACxE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,OAAO,IAAI,mBAAmB;AAAA,IAC5B,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACD,cAAc,IAAI,IAAI;AAAA,IACpB,UAAU;AAAA,MACR,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,CAAC;AACH;AAEO,SAAS,iBAAiB,EAAE,UAAU,OAAO,UAAU,MAAM,GAA0B;AAC5F,QAAM,CAAC,aAAa,MAAM,IAAI,iBAAiB,QAAQ;AAEvD,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW,CAAC,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,QAAQ,OAAO;AAAA,QACjE,iBAAe,CAAC;AAAA,QAChB,WAAW,yBAAyB,QAAQ,EAAE,MAAM,CAAC;AAAA,QACrD;AAAA,8BAAC,UAAK,WAAW,yBAAyB,MAAM,EAAE,MAAM,CAAC,GAAI,iBAAM;AAAA,UAEnE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,IAEC,CAAC,eAAe,oBAAC,SAAI,WAAW,yBAAyB,aAAa,EAAE,MAAM,CAAC,GAAI,UAAS;AAAA,KAC/F;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/DocumentView.d.ts

@@ -0,0 +1,9 @@
+import type { Comment } from "../../../types";
+interface Props {
+    comments: Comment[];
+    userId: number | null;
+    className: string;
+}
+export declare function DocumentView({ comments, userId, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocumentView.d.ts.map

package/dist/components/CommentsPanel/components/DocumentView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAsBlE"}

package/dist/components/CommentsPanel/components/DocumentView.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@payloadcms/ui";
+import { useComments } from "../../../providers/CommentsProvider";
+import { groupCommentsByFieldPath } from "../utils/groupCommentsByFieldPath";
+import { FILTER_NO_COMMENTS_KEYS } from "../constants";
+import { FieldGroupSection } from "./FieldGroupSection";
+function DocumentView({ comments, userId, className }) {
+  const { t } = useTranslation();
+  const { filter, collectionSlug, documentId } = useComments();
+  const fields = groupCommentsByFieldPath(comments);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
+    /* @__PURE__ */ jsx(
+      FieldGroupSection,
+      {
+        fields,
+        userId,
+        collectionSlug: collectionSlug ?? void 0,
+        documentId: documentId ?? void 0
+      }
+    )
+  ] });
+}
+export {
+  DocumentView
+};
+//# sourceMappingURL=DocumentView.js.map

package/dist/components/CommentsPanel/components/DocumentView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function DocumentView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { filter, collectionSlug, documentId } = useComments();\n\n  const fields = groupCommentsByFieldPath(comments);\n\n  return (\n    <div className={className}>\n      {comments.length === 0 && (\n        <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n          {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n        </p>\n      )}\n\n      <FieldGroupSection\n        fields={fields}\n        userId={userId}\n        collectionSlug={collectionSlug ?? undefined}\n        documentId={documentId ?? undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,aAAa,EAAE,UAAU,QAAQ,UAAU,GAAU;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,gBAAgB,WAAW,IAAI,YAAY;AAE3D,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,kBAAkB;AAAA,QAClC,YAAY,cAAc;AAAA;AAAA,IAC5B;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/FieldGroupSection.d.ts

@@ -0,0 +1,11 @@
+import type { Comment } from "../../../types/comment";
+interface Props {
+    fields: Map<string | null, Comment[]>;
+    userId: number | null;
+    collectionSlug?: string;
+    documentId?: number;
+    globalSlug?: string;
+}
+export declare function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FieldGroupSection.d.ts.map

package/dist/components/CommentsPanel/components/FieldGroupSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupSection.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAQtD,UAAU,KAAK;IACb,MAAM,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,2CAiDlG"}

package/dist/components/CommentsPanel/components/FieldGroupSection.js

@@ -0,0 +1,62 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@payloadcms/ui";
+import { CollapsibleGroup } from "./CollapsibleGroup";
+import { CommentItem } from "../../CommentItem";
+import { createCollapsibleGroupKey } from "../utils/createCollapsibleGroupKey";
+import { resolveFieldLabel } from "../utils/resolveFieldLabel";
+import { useComments } from "../../../providers/CommentsProvider";
+import { CommentEditor } from "../../CommentEditor";
+function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }) {
+  const { t } = useTranslation();
+  const { fieldLabelRegistry } = useComments();
+  const generalComments = fields.get(null) ?? [];
+  const fieldEntries = [...fields.entries()].filter((entry) => entry[0] !== null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleGroup,
+      {
+        groupKey: createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath: null }),
+        label: t("comments:general"),
+        level: "field",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+          generalComments.map((comment) => /* @__PURE__ */ jsx(CommentItem, { comment, currentUserId: userId }, comment.id)),
+          /* @__PURE__ */ jsx(
+            CommentEditor,
+            {
+              fieldPath: null,
+              collectionSlug,
+              documentId,
+              globalSlug
+            }
+          )
+        ] })
+      }
+    ),
+    fieldEntries.map(([fieldPath, fieldComments]) => /* @__PURE__ */ jsx(
+      CollapsibleGroup,
+      {
+        groupKey: createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath }),
+        label: resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath }),
+        level: "field",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", "data-field-path": fieldPath, children: [
+          fieldComments.map((comment) => /* @__PURE__ */ jsx(CommentItem, { comment, currentUserId: userId }, comment.id)),
+          /* @__PURE__ */ jsx(
+            CommentEditor,
+            {
+              fieldPath,
+              collectionSlug,
+              documentId,
+              globalSlug
+            }
+          )
+        ] })
+      },
+      fieldPath
+    ))
+  ] });
+}
+export {
+  FieldGroupSection
+};
+//# sourceMappingURL=FieldGroupSection.js.map

package/dist/components/CommentsPanel/components/FieldGroupSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/FieldGroupSection.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { CollapsibleGroup } from \"./CollapsibleGroup\";\nimport { CommentItem } from \"../../CommentItem\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\nimport { resolveFieldLabel } from \"../utils/resolveFieldLabel\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { CommentEditor } from \"../../CommentEditor\";\n\ninterface Props {\n  fields: Map<string | null, Comment[]>;\n  userId: number | null;\n  collectionSlug?: string;\n  documentId?: number;\n  globalSlug?: string;\n}\n\nexport function FieldGroupSection({ fields, userId, collectionSlug, documentId, globalSlug }: Props) {\n  const { t } = useTranslation();\n  const { fieldLabelRegistry } = useComments();\n\n  const generalComments = fields.get(null) ?? [];\n  const fieldEntries = [...fields.entries()].filter((entry): entry is [string, Comment[]] => entry[0] !== null);\n\n  return (\n    <>\n      <CollapsibleGroup\n        groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath: null })}\n        label={t(\"comments:general\" as never)}\n        level=\"field\">\n        <div className=\"flex flex-col gap-3\">\n          {generalComments.map((comment) => (\n            <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n          ))}\n\n          <CommentEditor\n            fieldPath={null}\n            collectionSlug={collectionSlug}\n            documentId={documentId}\n            globalSlug={globalSlug}\n          />\n        </div>\n      </CollapsibleGroup>\n\n      {fieldEntries.map(([fieldPath, fieldComments]) => (\n        <CollapsibleGroup\n          key={fieldPath}\n          groupKey={createCollapsibleGroupKey({ collectionSlug, documentId, globalSlug, fieldPath })}\n          label={resolveFieldLabel({ registry: fieldLabelRegistry, collectionSlug, documentId, globalSlug, fieldPath })}\n          level=\"field\">\n          <div className=\"flex flex-col gap-3\" data-field-path={fieldPath}>\n            {fieldComments.map((comment) => (\n              <CommentItem key={comment.id} comment={comment} currentUserId={userId} />\n            ))}\n\n            <CommentEditor\n              fieldPath={fieldPath}\n              collectionSlug={collectionSlug}\n              documentId={documentId}\n              globalSlug={globalSlug}\n            />\n          </div>\n        </CollapsibleGroup>\n      ))}\n    </>\n  );\n}\n"],"mappings":";AA2BI,mBAOQ,KAFJ,YALJ;AAzBJ,SAAS,sBAAsB;AAE/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAUvB,SAAS,kBAAkB,EAAE,QAAQ,QAAQ,gBAAgB,YAAY,WAAW,GAAU;AACnG,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,mBAAmB,IAAI,YAAY;AAE3C,QAAM,kBAAkB,OAAO,IAAI,IAAI,KAAK,CAAC;AAC7C,QAAM,eAAe,CAAC,GAAG,OAAO,QAAQ,CAAC,EAAE,OAAO,CAAC,UAAwC,MAAM,CAAC,MAAM,IAAI;AAE5G,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,WAAW,KAAK,CAAC;AAAA,QAC/F,OAAO,EAAE,kBAA2B;AAAA,QACpC,OAAM;AAAA,QACN,+BAAC,SAAI,WAAU,uBACZ;AAAA,0BAAgB,IAAI,CAAC,YACpB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAEC,aAAa,IAAI,CAAC,CAAC,WAAW,aAAa,MAC1C;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU,0BAA0B,EAAE,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,QACzF,OAAO,kBAAkB,EAAE,UAAU,oBAAoB,gBAAgB,YAAY,YAAY,UAAU,CAAC;AAAA,QAC5G,OAAM;AAAA,QACN,+BAAC,SAAI,WAAU,uBAAsB,mBAAiB,WACnD;AAAA,wBAAc,IAAI,CAAC,YAClB,oBAAC,eAA6B,SAAkB,eAAe,UAA7C,QAAQ,EAA6C,CACxE;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WACF;AAAA;AAAA,MAfK;AAAA,IAgBP,CACD;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/GlobalDocumentView.d.ts

@@ -0,0 +1,9 @@
+import type { Comment } from "../../../types";
+interface Props {
+    comments: Comment[];
+    userId: number | null;
+    className: string;
+}
+export declare function GlobalDocumentView({ comments, userId, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GlobalDocumentView.d.ts.map

package/dist/components/CommentsPanel/components/GlobalDocumentView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalDocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAiBxE"}

package/dist/components/CommentsPanel/components/GlobalDocumentView.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@payloadcms/ui";
+import { useComments } from "../../../providers/CommentsProvider";
+import { groupCommentsByFieldPath } from "../utils/groupCommentsByFieldPath";
+import { FILTER_NO_COMMENTS_KEYS } from "../constants";
+import { FieldGroupSection } from "./FieldGroupSection";
+function GlobalDocumentView({ comments, userId, className }) {
+  const { t } = useTranslation();
+  const { filter, globalSlug } = useComments();
+  const fields = groupCommentsByFieldPath(comments);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
+    /* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: globalSlug ?? void 0 })
+  ] });
+}
+export {
+  GlobalDocumentView
+};
+//# sourceMappingURL=GlobalDocumentView.js.map

package/dist/components/CommentsPanel/components/GlobalDocumentView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function GlobalDocumentView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { filter, globalSlug } = useComments();\n\n  const fields = groupCommentsByFieldPath(comments);\n\n  return (\n    <div className={className}>\n      {comments.length === 0 && (\n        <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n          {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n        </p>\n      )}\n\n      <FieldGroupSection fields={fields} userId={userId} globalSlug={globalSlug ?? undefined} />\n    </div>\n  );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,mBAAmB,EAAE,UAAU,QAAQ,UAAU,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,WAAW,IAAI,YAAY;AAE3C,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF,oBAAC,qBAAkB,QAAgB,QAAgB,YAAY,cAAc,QAAW;AAAA,KAC1F;AAEJ;","names":[]}

package/dist/components/CommentsPanel/components/GlobalView.d.ts

@@ -0,0 +1,9 @@
+import type { Comment } from "../../../types/comment";
+interface Props {
+    comments: Comment[];
+    userId: number | null;
+    className: string;
+}
+export declare function GlobalView({ comments, userId, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=GlobalView.d.ts.map

package/dist/components/CommentsPanel/components/GlobalView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAStD,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAwDhE"}

package/dist/components/CommentsPanel/components/GlobalView.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocale, useTranslation } from "@payloadcms/ui";
+import { useComments } from "../../../providers/CommentsProvider";
+import { groupCommentsGlobally } from "../utils/groupCommentsGlobally";
+import { resolveEntityLabel } from "../utils/resolveEntityLabel";
+import { CollapsibleGroup } from "./CollapsibleGroup";
+import { FILTER_NO_COMMENTS_KEYS } from "../constants";
+import { FieldGroupSection } from "./FieldGroupSection";
+import { createCollapsibleGroupKey } from "../utils/createCollapsibleGroupKey";
+function GlobalView({ comments, userId, className }) {
+  const { t } = useTranslation();
+  const { documentTitles, filter, collectionLabels, globalLabels } = useComments();
+  const { code: locale } = useLocale();
+  const groupedComments = groupCommentsGlobally(comments);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
+    groupedComments.map((entry) => {
+      if (entry.type === "collection") {
+        const { slug: slug2, docs } = entry;
+        return /* @__PURE__ */ jsx(
+          CollapsibleGroup,
+          {
+            groupKey: slug2,
+            label: resolveEntityLabel(collectionLabels[slug2], locale, slug2),
+            level: "collection",
+            children: [...docs.entries()].map(([docId, fields2]) => {
+              const title = documentTitles[slug2]?.[String(docId)] ?? String(docId);
+              const documentId = Number(docId);
+              return /* @__PURE__ */ jsx(
+                CollapsibleGroup,
+                {
+                  groupKey: createCollapsibleGroupKey({ collectionSlug: slug2, documentId }),
+                  label: title,
+                  level: "document",
+                  children: /* @__PURE__ */ jsx(FieldGroupSection, { fields: fields2, userId, collectionSlug: slug2, documentId })
+                },
+                docId
+              );
+            })
+          },
+          slug2
+        );
+      }
+      const { slug, fields } = entry;
+      return /* @__PURE__ */ jsx(
+        CollapsibleGroup,
+        {
+          groupKey: slug,
+          label: resolveEntityLabel(globalLabels[slug], locale, slug),
+          level: "collection",
+          children: /* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: slug })
+        },
+        slug
+      );
+    })
+  ] });
+}
+export {
+  GlobalView
+};
+//# sourceMappingURL=GlobalView.js.map

package/dist/components/CommentsPanel/components/GlobalView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale, useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types/comment\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsGlobally } from \"../utils/groupCommentsGlobally\";\nimport { resolveEntityLabel } from \"../utils/resolveEntityLabel\";\nimport { CollapsibleGroup } from \"./CollapsibleGroup\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\nimport { createCollapsibleGroupKey } from \"../utils/createCollapsibleGroupKey\";\n\ninterface Props {\n  comments: Comment[];\n  userId: number | null;\n  className: string;\n}\n\nexport function GlobalView({ comments, userId, className }: Props) {\n  const { t } = useTranslation();\n  const { documentTitles, filter, collectionLabels, globalLabels } = useComments();\n  const { code: locale } = useLocale();\n  const groupedComments = groupCommentsGlobally(comments);\n\n  return (\n    <div className={className}>\n      {comments.length === 0 && (\n        <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n          {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n        </p>\n      )}\n\n      {groupedComments.map((entry) => {\n        if (entry.type === \"collection\") {\n          const { slug, docs } = entry;\n\n          return (\n            <CollapsibleGroup\n              key={slug}\n              groupKey={slug}\n              label={resolveEntityLabel(collectionLabels[slug], locale, slug)}\n              level=\"collection\">\n              {[...docs.entries()].map(([docId, fields]) => {\n                const title = documentTitles[slug]?.[String(docId)] ?? String(docId);\n                const documentId = Number(docId);\n\n                return (\n                  <CollapsibleGroup\n                    key={docId}\n                    groupKey={createCollapsibleGroupKey({ collectionSlug: slug, documentId })}\n                    label={title}\n                    level=\"document\">\n                    <FieldGroupSection fields={fields} userId={userId} collectionSlug={slug} documentId={documentId} />\n                  </CollapsibleGroup>\n                );\n              })}\n            </CollapsibleGroup>\n          );\n        }\n\n        const { slug, fields } = entry;\n\n        return (\n          <CollapsibleGroup\n            key={slug}\n            groupKey={slug}\n            label={resolveEntityLabel(globalLabels[slug], locale, slug)}\n            level=\"collection\">\n            <FieldGroupSection fields={fields} userId={userId} globalSlug={slug} />\n          </CollapsibleGroup>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAyBI,SAEI,KAFJ;AAvBJ,SAAS,WAAW,sBAAsB;AAE1C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAClC,SAAS,iCAAiC;AAQnC,SAAS,WAAW,EAAE,UAAU,QAAQ,UAAU,GAAU;AACjE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,gBAAgB,QAAQ,kBAAkB,aAAa,IAAI,YAAY;AAC/E,QAAM,EAAE,MAAM,OAAO,IAAI,UAAU;AACnC,QAAM,kBAAkB,sBAAsB,QAAQ;AAEtD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGD,gBAAgB,IAAI,CAAC,UAAU;AAC9B,UAAI,MAAM,SAAS,cAAc;AAC/B,cAAM,EAAE,MAAAA,OAAM,KAAK,IAAI;AAEvB,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,UAAUA;AAAA,YACV,OAAO,mBAAmB,iBAAiBA,KAAI,GAAG,QAAQA,KAAI;AAAA,YAC9D,OAAM;AAAA,YACL,WAAC,GAAG,KAAK,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,OAAOC,OAAM,MAAM;AAC5C,oBAAM,QAAQ,eAAeD,KAAI,IAAI,OAAO,KAAK,CAAC,KAAK,OAAO,KAAK;AACnE,oBAAM,aAAa,OAAO,KAAK;AAE/B,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,UAAU,0BAA0B,EAAE,gBAAgBA,OAAM,WAAW,CAAC;AAAA,kBACxE,OAAO;AAAA,kBACP,OAAM;AAAA,kBACN,8BAAC,qBAAkB,QAAQC,SAAQ,QAAgB,gBAAgBD,OAAM,YAAwB;AAAA;AAAA,gBAJ5F;AAAA,cAKP;AAAA,YAEJ,CAAC;AAAA;AAAA,UAjBIA;AAAA,QAkBP;AAAA,MAEJ;AAEA,YAAM,EAAE,MAAM,OAAO,IAAI;AAEzB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV,OAAO,mBAAmB,aAAa,IAAI,GAAG,QAAQ,IAAI;AAAA,UAC1D,OAAM;AAAA,UACN,8BAAC,qBAAkB,QAAgB,QAAgB,YAAY,MAAM;AAAA;AAAA,QAJhE;AAAA,MAKP;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":["slug","fields"]}

package/dist/components/CommentsPanel/constants.d.ts

@@ -0,0 +1,3 @@
+import type { FilterMode } from "../../types";
+export declare const FILTER_NO_COMMENTS_KEYS: Record<FilterMode, string>;
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/CommentsPanel/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/CommentsPanel/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAI9D,CAAC"}

package/dist/components/CommentsPanel/constants.js

@@ -0,0 +1,9 @@
+const FILTER_NO_COMMENTS_KEYS = {
+  open: "comments:noOpenComments",
+  resolved: "comments:noResolvedComments",
+  mentioned: "comments:noMentionedComments"
+};
+export {
+  FILTER_NO_COMMENTS_KEYS
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/CommentsPanel/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CommentsPanel/constants.ts"],"sourcesContent":["import type { FilterMode } from \"../../types\";\n\nexport const FILTER_NO_COMMENTS_KEYS: Record<FilterMode, string> = {\n  open: \"comments:noOpenComments\",\n  resolved: \"comments:noResolvedComments\",\n  mentioned: \"comments:noMentionedComments\",\n};\n"],"mappings":"AAEO,MAAM,0BAAsD;AAAA,EACjE,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AACb;","names":[]}