@flanksource/clicky-ui 0.3.30 → 0.3.32

package/dist/comments/CommentCard.cjs

@@ -3,227 +3,114 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const utils = require("../lib/utils.cjs");
-const Badge = require("../data/Badge.cjs");
 const Icon = require("../data/Icon.cjs");
 const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const CommentAuthor = require("./CommentAuthor.cjs");
+const CommentCardParts = require("./CommentCardParts.cjs");
 const CommentMarkdown = require("./CommentMarkdown.cjs");
 const commentUtils = require("./comment-utils.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
-const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
+const UiLock = require("../icons/components/UiLock.cjs");
+const UiRestart = require("../icons/components/UiRestart.cjs");
 const UiDotsVertical = require("../icons/components/UiDotsVertical.cjs");
-const UiThumbsUp = require("../icons/components/UiThumbsUp.cjs");
-const UiThumbsDown = require("../icons/components/UiThumbsDown.cjs");
-const UiClose = require("../icons/components/UiClose.cjs");
 const UiTrash = require("../icons/components/UiTrash.cjs");
-function completionStatus(config) {
-  for (const completionName of ["resolved", "closed"]) {
-    const status = config.statuses.find(
-      (candidate) => candidate.value.toLowerCase() === completionName || candidate.label.toLowerCase() === completionName
-    );
-    if (status) return status;
-  }
-  return void 0;
-}
-function completionActionLabel(status) {
-  return status.value.toLowerCase() === "closed" || status.label.toLowerCase() === "closed" ? "Close comment" : "Resolve comment";
-}
-function RatingChip({ rating }) {
-  if (!rating) return null;
-  const positive = rating === "positive";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Badge.Badge,
-    {
-      variant: "soft",
-      tone: positive ? "success" : "danger",
-      size: "xs",
-      icon: positive ? UiThumbsUp.UiThumbsUp : UiThumbsDown.UiThumbsDown,
-      children: positive ? "Positive rating" : "Negative rating"
-    }
-  );
-}
-function StatusChip({
-  status,
-  config,
-  showLabel
-}) {
-  const cfg = commentUtils.resolveStatusConfig(config, status);
-  if (!cfg) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Badge.Badge,
-    {
-      variant: "soft",
-      tone: commentUtils.toneToBadgeTone(cfg.tone),
-      size: "xs",
-      ...cfg.icon ? { icon: cfg.icon } : {},
-      children: showLabel ? cfg.label : null
-    }
-  );
-}
-function FacetBadges({
-  comment,
-  config,
-  compact
-}) {
-  const facets = config.facets ?? [];
-  const chips = facets.flatMap((facet) => {
-    var _a;
-    const value = (_a = comment.facets) == null ? void 0 : _a[facet.key];
-    const option = commentUtils.resolveFacetOption(facet, value);
-    if (!option) return [];
-    return [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Badge.Badge,
-        {
-          variant: "soft",
-          tone: commentUtils.toneToBadgeTone(option.tone),
-          size: "xs",
-          children: compact ? option.short ?? option.label : option.label
-        },
-        facet.key
-      )
-    ];
-  });
-  return chips.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: chips }) : null;
-}
-function ChecklistChips({
-  comment,
-  onChecklistToggle
-}) {
-  if (!comment.checklist || comment.checklist.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: comment.checklist.map((item, i) => {
-    const done = /done|complete|resolved/i.test(item.status);
-    const active = /progress|doing/i.test(item.status);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChecklistToggle == null ? void 0 : onChecklistToggle(i),
-        disabled: !onChecklistToggle,
-        className: utils.cn(
-          "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] transition-opacity",
-          onChecklistToggle && "cursor-pointer hover:opacity-80",
-          done ? "bg-green-100 text-green-800 line-through dark:bg-green-500/20 dark:text-green-300" : active ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300" : "bg-muted text-muted-foreground"
-        ),
-        children: item.label
-      },
-      i
-    );
-  }) });
-}
-function RefChips({ comment }) {
-  if (!comment.refs || comment.refs.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: comment.refs.map((group, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-          group.label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: group.mono ? "font-mono" : void 0, children: group.items.join(", ") })
-      ]
-    },
-    i
-  )) });
-}
-function statusMenuItems(comment, config, isReply, opts) {
+const UiCopy = require("../icons/components/UiCopy.cjs");
+const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
+function actionMenuItems(isReply, opts) {
   const items = [];
+  if (opts.onDelete) {
+    items.push({ label: "Delete", icon: UiTrash.UiTrash, onSelect: opts.onDelete });
+  }
+  if (!isReply) items.push(...opts.statusActions ?? []);
+  if (opts.onCopy) {
+    items.push({ label: "Copy", icon: UiCopy.UiCopy, onSelect: opts.onCopy });
+  }
   if (opts.onMaximize) {
     items.push({
-      label: "Maximize",
+      label: "Maximise",
       icon: UiFullscreen.UiFullscreen,
       onSelect: opts.onMaximize
     });
   }
-  if (opts.onCollapse) {
-    items.push({ label: "Collapse", icon: UiClose.UiClose, onSelect: opts.onCollapse });
-  }
-  if (!isReply && opts.onUpdateStatus) {
-    for (const status of config.statuses) {
-      if (status.value === opts.completionStatus) continue;
-      const current = status.value === comment.status;
-      items.push({
-        label: /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: utils.cn(
-              "inline-flex items-center gap-1.5",
-              current && "font-semibold"
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: status.value, config }),
-              status.label
-            ]
-          }
-        ),
-        onSelect: () => {
-          var _a;
-          return (_a = opts.onUpdateStatus) == null ? void 0 : _a.call(opts, status.value);
-        }
-      });
-    }
-  }
-  if (opts.onDelete) {
-    items.push({ label: "Delete", icon: UiTrash.UiTrash, onSelect: opts.onDelete });
-  }
   return items;
 }
-function IconAction({
-  icon,
-  label,
-  onClick,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      "aria-label": label,
-      title: label,
-      className: utils.cn(
-        "rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-sm" })
-    }
-  );
-}
 function CommentBody({
   comment,
   config,
   renderBody,
   onUpdateStatus,
+  onClose,
   onDelete,
+  onCopy,
   onReply,
   onChecklistToggle,
-  onCollapse,
   onMaximize
 }) {
-  const [statusError, setStatusError] = react.useState("");
+  const [actionError, setActionError] = react.useState("");
   const isReply = Boolean(comment.parentId);
   const date = timestampFormat.parseTimestamp(comment.createdAt);
-  const completion = completionStatus(config);
-  const canComplete = !isReply && onUpdateStatus != null && completion != null && commentUtils.isUnresolved(config, comment.status);
+  const resolved = commentUtils.statusForCommentStage(config, "resolved");
+  const active = commentUtils.statusForCommentStage(config, "active");
+  const closed = commentUtils.statusForCommentStage(config, "closed");
+  const stage = commentUtils.resolveCommentStage(config, comment.status);
   const updateStatus = async (status) => {
-    setStatusError("");
+    setActionError("");
     try {
       await (onUpdateStatus == null ? void 0 : onUpdateStatus(status));
     } catch (error) {
-      setStatusError(
-        error instanceof Error ? error.message : "Unexpected error"
+      setActionError(
+        `Couldn't update comment: ${error instanceof Error ? error.message : "Unexpected error"}`
       );
     }
   };
-  const menuItems = statusMenuItems(comment, config, isReply, {
-    ...onUpdateStatus ? { onUpdateStatus: (status) => void updateStatus(status) } : {},
+  const close = async () => {
+    setActionError("");
+    try {
+      await (onClose == null ? void 0 : onClose());
+    } catch (error) {
+      setActionError(
+        `Couldn't close comment: ${error instanceof Error ? error.message : "Unexpected error"}`
+      );
+    }
+  };
+  const copy = async () => {
+    setActionError("");
+    try {
+      await (onCopy == null ? void 0 : onCopy());
+    } catch (error) {
+      setActionError(
+        `Couldn't copy comment: ${error instanceof Error ? error.message : "Unexpected error"}`
+      );
+    }
+  };
+  const menuItems = actionMenuItems(isReply, {
     ...onDelete ? { onDelete } : {},
-    ...onCollapse ? { onCollapse } : {},
-    ...onMaximize ? { onMaximize } : {},
-    ...completion ? { completionStatus: completion.value } : {}
+    statusActions: [
+      ...stage === "active" && onUpdateStatus && resolved ? [
+        {
+          label: "Resolve",
+          icon: UiCheck.UiCheck,
+          onSelect: () => void updateStatus(resolved.value)
+        }
+      ] : [],
+      ...stage === "resolved" && onClose && closed ? [
+        {
+          label: "Close",
+          icon: UiLock.UiLock,
+          onSelect: () => void close()
+        }
+      ] : [],
+      ...(stage === "resolved" || stage === "closed") && onUpdateStatus && active ? [
+        {
+          label: "Reopen",
+          icon: UiRestart.UiRestart,
+          onSelect: () => void updateStatus(active.value)
+        }
+      ] : []
+    ],
+    ...onCopy ? { onCopy: () => void copy() } : {},
+    ...onMaximize ? { onMaximize } : {}
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
@@ -241,60 +128,47 @@ function CommentBody({
           )
         ] }),
         !isReply && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-wrap gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RatingChip, { rating: comment.rating }),
-          /* @__PURE__ */ jsxRuntime.jsx(FacetBadges, { comment, config })
+          /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.StatusChip, { comment, config }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.RatingChip, { rating: comment.rating }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.FacetBadges, { comment, config })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-        canComplete && /* @__PURE__ */ jsxRuntime.jsx(
-          IconAction,
-          {
-            icon: UiCheck.UiCheck,
-            label: completionActionLabel(completion),
-            onClick: () => void updateStatus(completion.value),
-            className: "hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300"
-          }
-        ),
-        menuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu.DropdownMenu,
-          {
-            align: "right",
-            menuClassName: "min-w-[150px]",
-            trigger: /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                role: "button",
-                tabIndex: 0,
-                "aria-label": "Comment actions",
-                className: "inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiDotsVertical.UiDotsVertical, className: "text-sm" })
-              }
-            ),
-            items: menuItems
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-0.5", children: menuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenu.DropdownMenu,
+        {
+          align: "right",
+          menuClassName: "min-w-[150px]",
+          trigger: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Comment actions",
+              className: "inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiDotsVertical.UiDotsVertical, className: "text-sm" })
+            }
+          ),
+          items: menuItems
+        }
+      ) })
     ] }),
     comment.body.trim() && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] leading-5 text-foreground", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsxRuntime.jsx(CommentMarkdown.CommentMarkdown, { text: comment.body }) }),
-    statusError && /* @__PURE__ */ jsxRuntime.jsxs(
+    actionError && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         role: "alert",
         className: "rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive",
-        children: [
-          "Couldn't update comment: ",
-          statusError
-        ]
+        children: actionError
       }
     ),
     !isReply && /* @__PURE__ */ jsxRuntime.jsx(
-      ChecklistChips,
+      CommentCardParts.ChecklistChips,
       {
         comment,
         ...onChecklistToggle ? { onChecklistToggle } : {}
       }
     ),
-    !isReply && /* @__PURE__ */ jsxRuntime.jsx(RefChips, { comment }),
+    !isReply && /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.RefChips, { comment }),
     onReply && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -307,31 +181,41 @@ function CommentBody({
   ] });
 }
 function CommentCard(props) {
-  const { comment, config, compact, defaultExpanded, onMaximize } = props;
+  const { comment, config, compact, defaultExpanded } = props;
   const [expanded, setExpanded] = react.useState(defaultExpanded ?? false);
-  const [collapsedStatusError, setCollapsedStatusError] = react.useState("");
+  const [collapsedActionError, setCollapsedActionError] = react.useState("");
   const isReply = Boolean(comment.parentId);
-  const completion = completionStatus(config);
-  const canComplete = !isReply && props.onUpdateStatus != null && completion != null && commentUtils.isUnresolved(config, comment.status);
-  const completeCollapsed = async () => {
-    var _a;
-    if (!completion) return;
-    setCollapsedStatusError("");
+  const body = /* @__PURE__ */ jsxRuntime.jsx(CommentBody, { ...props });
+  async function runCollapsedAction(action) {
+    var _a, _b;
+    setCollapsedActionError("");
     try {
-      await ((_a = props.onUpdateStatus) == null ? void 0 : _a.call(props, completion.value));
+      if (action === "close") {
+        await ((_a = props.onClose) == null ? void 0 : _a.call(props));
+        return;
+      }
+      const next = commentUtils.statusForCommentStage(
+        config,
+        action === "resolve" ? "resolved" : "active"
+      );
+      if (next) await ((_b = props.onUpdateStatus) == null ? void 0 : _b.call(props, next.value));
     } catch (error) {
-      setCollapsedStatusError(
-        error instanceof Error ? error.message : "Unexpected error"
+      setCollapsedActionError(
+        `${action === "close" ? "Couldn't close comment" : "Couldn't update comment"}: ${error instanceof Error ? error.message : "Unexpected error"}`
       );
     }
-  };
-  const body = /* @__PURE__ */ jsxRuntime.jsx(
-    CommentBody,
-    {
-      ...props,
-      ...expanded ? { onCollapse: () => setExpanded(false) } : {}
+  }
+  async function copyCollapsed() {
+    var _a;
+    setCollapsedActionError("");
+    try {
+      await ((_a = props.onCopy) == null ? void 0 : _a.call(props));
+    } catch (error) {
+      setCollapsedActionError(
+        `Couldn't copy comment: ${error instanceof Error ? error.message : "Unexpected error"}`
+      );
     }
-  );
+  }
   if (!expanded) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -358,27 +242,11 @@ function CommentCard(props) {
             /* @__PURE__ */ jsxRuntime.jsx(CommentAuthor.CommentAuthorAvatar, { author: comment.author, bare: true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] font-semibold text-foreground", children: commentUtils.authorDisplayName(comment.author) }),
             !isReply && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RatingChip, { rating: comment.rating }),
-              /* @__PURE__ */ jsxRuntime.jsx(FacetBadges, { comment, config, compact: true })
+              /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.StatusChip, { comment, config }),
+              /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.RatingChip, { rating: comment.rating }),
+              /* @__PURE__ */ jsxRuntime.jsx(CommentCardParts.FacetBadges, { comment, config, compact: true })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-foreground/80", children: comment.body.trim() ? commentUtils.truncatePlain(comment.body) : comment.rating === "positive" ? "Positive rating" : comment.rating === "negative" ? "Negative rating" : "Empty comment" }),
-            canComplete && /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                role: "presentation",
-                onClick: (e) => e.stopPropagation(),
-                onKeyDown: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  IconAction,
-                  {
-                    icon: UiCheck.UiCheck,
-                    label: completionActionLabel(completion),
-                    onClick: () => void completeCollapsed(),
-                    className: "hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300"
-                  }
-                )
-              }
-            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -399,16 +267,34 @@ function CommentCard(props) {
                         children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiDotsVertical.UiDotsVertical, className: "text-sm" })
                       }
                     ),
-                    items: [
-                      { label: "Expand", onSelect: () => setExpanded(true) },
-                      ...onMaximize ? [
-                        {
-                          label: "Maximize",
-                          icon: UiFullscreen.UiFullscreen,
-                          onSelect: onMaximize
-                        }
-                      ] : []
-                    ]
+                    items: actionMenuItems(isReply, {
+                      ...props.onDelete ? { onDelete: props.onDelete } : {},
+                      statusActions: [
+                        ...commentUtils.resolveCommentStage(config, comment.status) === "active" && props.onUpdateStatus && commentUtils.statusForCommentStage(config, "resolved") ? [
+                          {
+                            label: "Resolve",
+                            icon: UiCheck.UiCheck,
+                            onSelect: () => void runCollapsedAction("resolve")
+                          }
+                        ] : [],
+                        ...commentUtils.resolveCommentStage(config, comment.status) === "resolved" && props.onClose && commentUtils.statusForCommentStage(config, "closed") ? [
+                          {
+                            label: "Close",
+                            icon: UiLock.UiLock,
+                            onSelect: () => void runCollapsedAction("close")
+                          }
+                        ] : [],
+                        ...(commentUtils.resolveCommentStage(config, comment.status) === "resolved" || commentUtils.resolveCommentStage(config, comment.status) === "closed") && props.onUpdateStatus && commentUtils.statusForCommentStage(config, "active") ? [
+                          {
+                            label: "Reopen",
+                            icon: UiRestart.UiRestart,
+                            onSelect: () => void runCollapsedAction("reopen")
+                          }
+                        ] : []
+                      ],
+                      ...props.onCopy ? { onCopy: () => void copyCollapsed() } : {},
+                      ...props.onMaximize ? { onMaximize: props.onMaximize } : {}
+                    })
                   }
                 )
               }
@@ -416,15 +302,12 @@ function CommentCard(props) {
           ]
         }
       ),
-      collapsedStatusError && /* @__PURE__ */ jsxRuntime.jsxs(
+      collapsedActionError && /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           role: "alert",
           className: "rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive",
-          children: [
-            "Couldn't update comment: ",
-            collapsedStatusError
-          ]
+          children: collapsedActionError
         }
       )
     ] });