@flanksource/clicky-ui 0.3.10 → 0.3.12

package/dist/comments/CommentCard.cjs

@@ -13,6 +13,7 @@ const CommentMarkdown = require("./CommentMarkdown.cjs");
 const commentUtils = require("./comment-utils.cjs");
 const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiDotsVertical = require("../icons/components/UiDotsVertical.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const UiTrash = require("../icons/components/UiTrash.cjs");
 function StatusChip({
@@ -103,11 +104,19 @@ function RefChips({ comment }) {
 }
 function statusMenuItems(comment, config, isReply, opts) {
   const items = [];
+  if (opts.onMaximize) {
+    items.push({
+      label: "Maximize",
+      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.resolvedStatus) continue;
       const current = status.value === comment.status;
       items.push({
         label: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -138,7 +147,8 @@ function statusMenuItems(comment, config, isReply, opts) {
 function IconAction({
   icon,
   label,
-  onClick
+  onClick,
+  className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -147,8 +157,11 @@ function IconAction({
       onClick,
       "aria-label": label,
       title: label,
-      className: "rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-xs" })
+      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" })
     }
   );
 }
@@ -163,42 +176,55 @@ function CommentBody({
   onCollapse,
   onMaximize
 }) {
+  const [statusError, setStatusError] = react.useState("");
   const isReply = Boolean(comment.parentId);
   const date = timestampFormat.parseTimestamp(comment.createdAt);
+  const resolvedStatus = config.statuses.find(
+    (status) => status.value.toLowerCase() === "resolved" || status.label.toLowerCase() === "resolved"
+  );
+  const canResolve = !isReply && onUpdateStatus != null && resolvedStatus != null && comment.status !== resolvedStatus.value;
+  const updateStatus = async (status) => {
+    setStatusError("");
+    try {
+      await (onUpdateStatus == null ? void 0 : onUpdateStatus(status));
+    } catch (error) {
+      setStatusError(
+        error instanceof Error ? error.message : "Unexpected error"
+      );
+    }
+  };
   const menuItems = statusMenuItems(comment, config, isReply, {
-    ...onUpdateStatus ? { onUpdateStatus } : {},
+    ...onUpdateStatus ? { onUpdateStatus: (status) => void updateStatus(status) } : {},
     ...onDelete ? { onDelete } : {},
-    ...onCollapse ? { onCollapse } : {}
+    ...onCollapse ? { onCollapse } : {},
+    ...onMaximize ? { onMaximize } : {},
+    ...resolvedStatus ? { resolvedStatus: resolvedStatus.value } : {}
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx(CommentAuthor.CommentAuthorAvatar, { author: comment.author }),
-      !isReply && /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: comment.status, config, showLabel: true }),
-      !isReply && /* @__PURE__ */ jsxRuntime.jsx(FacetBadges, { comment, config }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
-        date && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            title: date.toLocaleString(),
-            className: "text-[10px] text-muted-foreground",
-            children: timestampFormat.formatRelativeTime(date)
-          }
-        ),
-        onReply && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onReply,
-            className: "rounded px-1.5 py-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground",
-            children: "Reply"
-          }
-        ),
-        onMaximize && /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: commentUtils.authorDisplayName(comment.author) }),
+          date && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              title: date.toLocaleString(),
+              className: "shrink-0 text-[10px] text-muted-foreground",
+              children: timestampFormat.formatRelativeTime(date)
+            }
+          )
+        ] }),
+        !isReply && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: /* @__PURE__ */ jsxRuntime.jsx(FacetBadges, { comment, config }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        canResolve && /* @__PURE__ */ jsxRuntime.jsx(
           IconAction,
           {
-            icon: UiFullscreen.UiFullscreen,
-            label: "Maximize",
-            onClick: onMaximize
+            icon: UiCheck.UiCheck,
+            label: "Resolve comment",
+            onClick: () => void updateStatus(resolvedStatus.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(
@@ -212,7 +238,7 @@ function CommentBody({
                 role: "button",
                 tabIndex: 0,
                 "aria-label": "Comment actions",
-                className: "rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100",
+                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" })
               }
             ),
@@ -221,7 +247,18 @@ function CommentBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[13px] leading-6", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsxRuntime.jsx(CommentMarkdown.CommentMarkdown, { text: comment.body }) }),
+    /* @__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(
+      "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
+        ]
+      }
+    ),
     !isReply && /* @__PURE__ */ jsxRuntime.jsx(
       ChecklistChips,
       {
@@ -229,7 +266,16 @@ function CommentBody({
         ...onChecklistToggle ? { onChecklistToggle } : {}
       }
     ),
-    !isReply && /* @__PURE__ */ jsxRuntime.jsx(RefChips, { comment })
+    !isReply && /* @__PURE__ */ jsxRuntime.jsx(RefChips, { comment }),
+    onReply && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReply,
+        className: "-ml-2 rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10",
+        children: "Reply"
+      }
+    )
   ] });
 }
 function CommentCard(props) {
@@ -279,7 +325,7 @@ function CommentCard(props) {
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(CommentAuthor.CommentAuthorAvatar, { author: comment.author, bare: true }),
-            !isReply && /* @__PURE__ */ jsxRuntime.jsx(StatusChip, { status: comment.status, config }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] font-semibold text-foreground", children: commentUtils.authorDisplayName(comment.author) }),
             !isReply && /* @__PURE__ */ jsxRuntime.jsx(FacetBadges, { comment, config, compact: true }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-foreground/80", children: commentUtils.truncatePlain(comment.body) }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -328,10 +374,10 @@ function CommentCard(props) {
         "data-comment-kind": isReply ? "reply" : "root",
         "data-comment-id": comment.id,
         className: utils.cn(
-          "group/comment rounded-xl bg-background px-3 py-3 text-xs",
-          !isReply && "border border-border shadow-sm",
+          "group/comment rounded-xl bg-background px-3.5 py-3 text-xs",
+          !isReply && "border border-border/80 shadow-sm transition-shadow hover:shadow-md",
           compact && "px-2.5 py-2.5",
-          isReply && "ml-4 border-l-2 border-l-border bg-muted/30 shadow-none"
+          isReply && "ml-4 border-l-2 border-l-border bg-muted/20 shadow-none"
         ),
         children: body
       }

package/dist/comments/CommentCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCard.cjs","sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Badge } from \"../data/Badge\";\nimport { Icon } from \"../data/Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport { UiClose, UiDotsVertical, UiFullscreen, UiTrash } from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport {\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n  truncatePlain,\n} from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentCardProps = {\n  comment: Comment;\n  config: CommentConfig;\n  /** Tighter padding for dense rails. */\n  compact?: boolean;\n  /** Render expanded on first mount. */\n  defaultExpanded?: boolean;\n  /** Custom body renderer; defaults to the lightweight CommentMarkdown. */\n  renderBody?: (body: string) => ReactNode;\n  /** Change this comment's status (roots only). */\n  onUpdateStatus?: (status: string) => void;\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Begin a reply to this comment. */\n  onReply?: () => void;\n  /** Advance the checklist item at `index` to its next status. */\n  onChecklistToggle?: (index: number) => void;\n};\n\nfunction StatusChip({\n  status,\n  config,\n  showLabel,\n}: {\n  status: string | undefined;\n  config: CommentConfig;\n  showLabel?: boolean;\n}) {\n  const cfg = resolveStatusConfig(config, status);\n  if (!cfg) return null;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(cfg.tone)}\n      size=\"xs\"\n      {...(cfg.icon ? { icon: cfg.icon } : {})}\n    >\n      {showLabel ? cfg.label : null}\n    </Badge>\n  );\n}\n\nfunction FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const facets = config.facets ?? [];\n  const chips = facets.flatMap((facet) => {\n    const value = comment.facets?.[facet.key];\n    const option = resolveFacetOption(facet, value);\n    if (!option) return [];\n    return [\n      <Badge\n        key={facet.key}\n        variant=\"soft\"\n        tone={toneToBadgeTone(option.tone)}\n        size=\"xs\"\n      >\n        {compact ? (option.short ?? option.label) : option.label}\n      </Badge>,\n    ];\n  });\n  return chips.length > 0 ? <>{chips}</> : null;\n}\n\nfunction ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist || comment.checklist.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, i) => {\n        const done = /done|complete|resolved/i.test(item.status);\n        const active = /progress|doing/i.test(item.status);\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(i)}\n            disabled={!onChecklistToggle}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] transition-opacity\",\n              onChecklistToggle && \"cursor-pointer hover:opacity-80\",\n              done\n                ? \"bg-green-100 text-green-800 line-through dark:bg-green-500/20 dark:text-green-300\"\n                : active\n                  ? \"bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300\"\n                  : \"bg-muted text-muted-foreground\",\n            )}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs || comment.refs.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, i) => (\n        <span\n          key={i}\n          className=\"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground\"\n        >\n          <span className=\"font-medium\">{group.label}:</span>\n          <span className={group.mono ? \"font-mono\" : undefined}>\n            {group.items.join(\", \")}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction statusMenuItems(\n  comment: Comment,\n  config: CommentConfig,\n  isReply: boolean,\n  opts: {\n    onUpdateStatus?: (status: string) => void;\n    onDelete?: () => void;\n    onCollapse?: () => void;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onCollapse) {\n    items.push({ label: \"Collapse\", icon: UiClose, onSelect: opts.onCollapse });\n  }\n  if (!isReply && opts.onUpdateStatus) {\n    for (const status of config.statuses) {\n      const current = status.value === comment.status;\n      items.push({\n        label: (\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1.5\",\n              current && \"font-semibold\",\n            )}\n          >\n            <StatusChip status={status.value} config={config} />\n            {status.label}\n          </span>\n        ),\n        onSelect: () => opts.onUpdateStatus?.(status.value),\n      });\n    }\n  }\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  return items;\n}\n\nfunction IconAction({\n  icon,\n  label,\n  onClick,\n}: {\n  icon: typeof UiClose;\n  label: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      title={label}\n      className=\"rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100\"\n    >\n      <Icon icon={icon} className=\"text-xs\" />\n    </button>\n  );\n}\n\nfunction CommentBody({\n  comment,\n  config,\n  renderBody,\n  onUpdateStatus,\n  onDelete,\n  onReply,\n  onChecklistToggle,\n  onCollapse,\n  onMaximize,\n}: CommentCardProps & { onCollapse?: () => void; onMaximize?: () => void }) {\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const menuItems = statusMenuItems(comment, config, isReply, {\n    ...(onUpdateStatus ? { onUpdateStatus } : {}),\n    ...(onDelete ? { onDelete } : {}),\n    ...(onCollapse ? { onCollapse } : {}),\n  });\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <CommentAuthorAvatar author={comment.author} />\n        {!isReply && (\n          <StatusChip status={comment.status} config={config} showLabel />\n        )}\n        {!isReply && <FacetBadges comment={comment} config={config} />}\n        <div className=\"ml-auto flex items-center gap-1\">\n          {date && (\n            <span\n              title={date.toLocaleString()}\n              className=\"text-[10px] text-muted-foreground\"\n            >\n              {formatRelativeTime(date)}\n            </span>\n          )}\n          {onReply && (\n            <button\n              type=\"button\"\n              onClick={onReply}\n              className=\"rounded px-1.5 py-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground\"\n            >\n              Reply\n            </button>\n          )}\n          {onMaximize && (\n            <IconAction\n              icon={UiFullscreen}\n              label=\"Maximize\"\n              onClick={onMaximize}\n            />\n          )}\n          {menuItems.length > 0 && (\n            <DropdownMenu\n              align=\"right\"\n              menuClassName=\"min-w-[150px]\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"text-[13px] leading-6\">\n        {renderBody ? (\n          renderBody(comment.body)\n        ) : (\n          <CommentMarkdown text={comment.body} />\n        )}\n      </div>\n      {!isReply && (\n        <ChecklistChips\n          comment={comment}\n          {...(onChecklistToggle ? { onChecklistToggle } : {})}\n        />\n      )}\n      {!isReply && <RefChips comment={comment} />}\n    </div>\n  );\n}\n\n/**\n * A single comment, collapsible between a compact one-line preview and a full\n * card. The full view can be maximized into a modal. Fully controlled — all\n * mutations are delegated to the supplied callbacks.\n */\nexport function CommentCard(props: CommentCardProps) {\n  const { comment, config, compact, defaultExpanded } = props;\n  const [expanded, setExpanded] = useState(defaultExpanded ?? false);\n  const [maximized, setMaximized] = useState(false);\n  const isReply = Boolean(comment.parentId);\n\n  const body = (\n    <CommentBody\n      {...props}\n      onMaximize={() => setMaximized(true)}\n      {...(expanded ? { onCollapse: () => setExpanded(false) } : {})}\n    />\n  );\n\n  const modal = (\n    <Modal\n      open={maximized}\n      onClose={() => setMaximized(false)}\n      title=\"Comment\"\n      size=\"lg\"\n    >\n      <CommentBody {...props} />\n    </Modal>\n  );\n\n  if (!expanded) {\n    return (\n      <>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={() => setExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              setExpanded(true);\n            }\n          }}\n          data-testid=\"comment-card\"\n          data-comment-kind={isReply ? \"reply\" : \"root\"}\n          data-comment-id={comment.id}\n          className={cn(\n            \"group/comment flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/50\",\n            !isReply && \"border border-border bg-background shadow-sm\",\n            isReply && \"ml-4 border-l-2 border-l-border bg-muted/30\",\n          )}\n        >\n          <CommentAuthorAvatar author={comment.author} bare />\n          {!isReply && <StatusChip status={comment.status} config={config} />}\n          {!isReply && (\n            <FacetBadges comment={comment} config={config} compact />\n          )}\n          <span className=\"min-w-0 flex-1 truncate text-[12px] text-foreground/80\">\n            {truncatePlain(comment.body)}\n          </span>\n          <span\n            role=\"presentation\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => e.stopPropagation()}\n          >\n            <DropdownMenu\n              align=\"right\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:opacity-100 group-hover/comment:opacity-70\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={[\n                { label: \"Expand\", onSelect: () => setExpanded(true) },\n                {\n                  label: \"Maximize\",\n                  icon: UiFullscreen,\n                  onSelect: () => setMaximized(true),\n                },\n              ]}\n            />\n          </span>\n        </div>\n        {modal}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-testid=\"comment-card\"\n        data-comment-kind={isReply ? \"reply\" : \"root\"}\n        data-comment-id={comment.id}\n        className={cn(\n          \"group/comment rounded-xl bg-background px-3 py-3 text-xs\",\n          !isReply && \"border border-border shadow-sm\",\n          compact && \"px-2.5 py-2.5\",\n          isReply && \"ml-4 border-l-2 border-l-border bg-muted/30 shadow-none\",\n        )}\n      >\n        {body}\n      </div>\n      {modal}\n    </>\n  );\n}\n"],"names":["resolveStatusConfig","jsx","Badge","toneToBadgeTone","resolveFacetOption","Fragment","cn","jsxs","UiClose","UiTrash","Icon","parseTimestamp","CommentAuthorAvatar","UiFullscreen","DropdownMenu","UiDotsVertical","CommentMarkdown","useState","Modal","truncatePlain"],"mappings":"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"}
+{"version":3,"file":"CommentCard.cjs","sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Badge } from \"../data/Badge\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport {\n  UiCheck,\n  UiClose,\n  UiDotsVertical,\n  UiFullscreen,\n  UiTrash,\n} from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport {\n  authorDisplayName,\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n  truncatePlain,\n} from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentCardProps = {\n  comment: Comment;\n  config: CommentConfig;\n  /** Tighter padding for dense rails. */\n  compact?: boolean;\n  /** Render expanded on first mount. */\n  defaultExpanded?: boolean;\n  /** Custom body renderer; defaults to the lightweight CommentMarkdown. */\n  renderBody?: (body: string) => ReactNode;\n  /** Change this comment's status (roots only). */\n  onUpdateStatus?: (status: string) => void | Promise<void>;\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Begin a reply to this comment. */\n  onReply?: () => void;\n  /** Advance the checklist item at `index` to its next status. */\n  onChecklistToggle?: (index: number) => void;\n};\n\nfunction StatusChip({\n  status,\n  config,\n  showLabel,\n}: {\n  status: string | undefined;\n  config: CommentConfig;\n  showLabel?: boolean;\n}) {\n  const cfg = resolveStatusConfig(config, status);\n  if (!cfg) return null;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(cfg.tone)}\n      size=\"xs\"\n      {...(cfg.icon ? { icon: cfg.icon } : {})}\n    >\n      {showLabel ? cfg.label : null}\n    </Badge>\n  );\n}\n\nfunction FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const facets = config.facets ?? [];\n  const chips = facets.flatMap((facet) => {\n    const value = comment.facets?.[facet.key];\n    const option = resolveFacetOption(facet, value);\n    if (!option) return [];\n    return [\n      <Badge\n        key={facet.key}\n        variant=\"soft\"\n        tone={toneToBadgeTone(option.tone)}\n        size=\"xs\"\n      >\n        {compact ? (option.short ?? option.label) : option.label}\n      </Badge>,\n    ];\n  });\n  return chips.length > 0 ? <>{chips}</> : null;\n}\n\nfunction ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist || comment.checklist.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, i) => {\n        const done = /done|complete|resolved/i.test(item.status);\n        const active = /progress|doing/i.test(item.status);\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(i)}\n            disabled={!onChecklistToggle}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] transition-opacity\",\n              onChecklistToggle && \"cursor-pointer hover:opacity-80\",\n              done\n                ? \"bg-green-100 text-green-800 line-through dark:bg-green-500/20 dark:text-green-300\"\n                : active\n                  ? \"bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300\"\n                  : \"bg-muted text-muted-foreground\",\n            )}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs || comment.refs.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, i) => (\n        <span\n          key={i}\n          className=\"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground\"\n        >\n          <span className=\"font-medium\">{group.label}:</span>\n          <span className={group.mono ? \"font-mono\" : undefined}>\n            {group.items.join(\", \")}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction statusMenuItems(\n  comment: Comment,\n  config: CommentConfig,\n  isReply: boolean,\n  opts: {\n    onUpdateStatus?: (status: string) => void;\n    onDelete?: () => void;\n    onCollapse?: () => void;\n    onMaximize?: () => void;\n    resolvedStatus?: string;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onMaximize) {\n    items.push({\n      label: \"Maximize\",\n      icon: UiFullscreen,\n      onSelect: opts.onMaximize,\n    });\n  }\n  if (opts.onCollapse) {\n    items.push({ label: \"Collapse\", icon: UiClose, onSelect: opts.onCollapse });\n  }\n  if (!isReply && opts.onUpdateStatus) {\n    for (const status of config.statuses) {\n      if (status.value === opts.resolvedStatus) continue;\n      const current = status.value === comment.status;\n      items.push({\n        label: (\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1.5\",\n              current && \"font-semibold\",\n            )}\n          >\n            <StatusChip status={status.value} config={config} />\n            {status.label}\n          </span>\n        ),\n        onSelect: () => opts.onUpdateStatus?.(status.value),\n      });\n    }\n  }\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  return items;\n}\n\nfunction IconAction({\n  icon,\n  label,\n  onClick,\n  className,\n}: {\n  icon: StaticIconComponent;\n  label: string;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      title={label}\n      className={cn(\n        \"rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        className,\n      )}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n\nfunction CommentBody({\n  comment,\n  config,\n  renderBody,\n  onUpdateStatus,\n  onDelete,\n  onReply,\n  onChecklistToggle,\n  onCollapse,\n  onMaximize,\n}: CommentCardProps & { onCollapse?: () => void; onMaximize?: () => void }) {\n  const [statusError, setStatusError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const resolvedStatus = config.statuses.find(\n    (status) =>\n      status.value.toLowerCase() === \"resolved\" ||\n      status.label.toLowerCase() === \"resolved\",\n  );\n  const canResolve =\n    !isReply &&\n    onUpdateStatus != null &&\n    resolvedStatus != null &&\n    comment.status !== resolvedStatus.value;\n  const updateStatus = async (status: string) => {\n    setStatusError(\"\");\n    try {\n      await onUpdateStatus?.(status);\n    } catch (error) {\n      setStatusError(\n        error instanceof Error ? error.message : \"Unexpected error\",\n      );\n    }\n  };\n  const menuItems = statusMenuItems(comment, config, isReply, {\n    ...(onUpdateStatus\n      ? { onUpdateStatus: (status) => void updateStatus(status) }\n      : {}),\n    ...(onDelete ? { onDelete } : {}),\n    ...(onCollapse ? { onCollapse } : {}),\n    ...(onMaximize ? { onMaximize } : {}),\n    ...(resolvedStatus ? { resolvedStatus: resolvedStatus.value } : {}),\n  });\n\n  return (\n    <div className=\"space-y-2.5\">\n      <div className=\"flex items-start gap-2.5\">\n        <CommentAuthorAvatar author={comment.author} />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex min-w-0 items-baseline gap-1.5\">\n            <span className=\"truncate text-xs font-semibold text-foreground\">\n              {authorDisplayName(comment.author)}\n            </span>\n            {date && (\n              <span\n                title={date.toLocaleString()}\n                className=\"shrink-0 text-[10px] text-muted-foreground\"\n              >\n                {formatRelativeTime(date)}\n              </span>\n            )}\n          </div>\n          {!isReply && (\n            <div className=\"mt-1 flex flex-wrap gap-1\">\n              <FacetBadges comment={comment} config={config} />\n            </div>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {canResolve && (\n            <IconAction\n              icon={UiCheck}\n              label=\"Resolve comment\"\n              onClick={() => void updateStatus(resolvedStatus.value)}\n              className=\"hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300\"\n            />\n          )}\n          {menuItems.length > 0 && (\n            <DropdownMenu\n              align=\"right\"\n              menuClassName=\"min-w-[150px]\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"text-[13px] leading-5 text-foreground\">\n        {renderBody ? (\n          renderBody(comment.body)\n        ) : (\n          <CommentMarkdown text={comment.body} />\n        )}\n      </div>\n      {statusError && (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive\"\n        >\n          Couldn't update comment: {statusError}\n        </div>\n      )}\n      {!isReply && (\n        <ChecklistChips\n          comment={comment}\n          {...(onChecklistToggle ? { onChecklistToggle } : {})}\n        />\n      )}\n      {!isReply && <RefChips comment={comment} />}\n      {onReply && (\n        <button\n          type=\"button\"\n          onClick={onReply}\n          className=\"-ml-2 rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10\"\n        >\n          Reply\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * A single comment, collapsible between a compact one-line preview and a full\n * card. The full view can be maximized into a modal. Fully controlled — all\n * mutations are delegated to the supplied callbacks.\n */\nexport function CommentCard(props: CommentCardProps) {\n  const { comment, config, compact, defaultExpanded } = props;\n  const [expanded, setExpanded] = useState(defaultExpanded ?? false);\n  const [maximized, setMaximized] = useState(false);\n  const isReply = Boolean(comment.parentId);\n\n  const body = (\n    <CommentBody\n      {...props}\n      onMaximize={() => setMaximized(true)}\n      {...(expanded ? { onCollapse: () => setExpanded(false) } : {})}\n    />\n  );\n\n  const modal = (\n    <Modal\n      open={maximized}\n      onClose={() => setMaximized(false)}\n      title=\"Comment\"\n      size=\"lg\"\n    >\n      <CommentBody {...props} />\n    </Modal>\n  );\n\n  if (!expanded) {\n    return (\n      <>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={() => setExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              setExpanded(true);\n            }\n          }}\n          data-testid=\"comment-card\"\n          data-comment-kind={isReply ? \"reply\" : \"root\"}\n          data-comment-id={comment.id}\n          className={cn(\n            \"group/comment flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/50\",\n            !isReply && \"border border-border bg-background shadow-sm\",\n            isReply && \"ml-4 border-l-2 border-l-border bg-muted/30\",\n          )}\n        >\n          <CommentAuthorAvatar author={comment.author} bare />\n          <span className=\"shrink-0 text-[11px] font-semibold text-foreground\">\n            {authorDisplayName(comment.author)}\n          </span>\n          {!isReply && (\n            <FacetBadges comment={comment} config={config} compact />\n          )}\n          <span className=\"min-w-0 flex-1 truncate text-[12px] text-foreground/80\">\n            {truncatePlain(comment.body)}\n          </span>\n          <span\n            role=\"presentation\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => e.stopPropagation()}\n          >\n            <DropdownMenu\n              align=\"right\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:opacity-100 group-hover/comment:opacity-70\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={[\n                { label: \"Expand\", onSelect: () => setExpanded(true) },\n                {\n                  label: \"Maximize\",\n                  icon: UiFullscreen,\n                  onSelect: () => setMaximized(true),\n                },\n              ]}\n            />\n          </span>\n        </div>\n        {modal}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-testid=\"comment-card\"\n        data-comment-kind={isReply ? \"reply\" : \"root\"}\n        data-comment-id={comment.id}\n        className={cn(\n          \"group/comment rounded-xl bg-background px-3.5 py-3 text-xs\",\n          !isReply &&\n            \"border border-border/80 shadow-sm transition-shadow hover:shadow-md\",\n          compact && \"px-2.5 py-2.5\",\n          isReply && \"ml-4 border-l-2 border-l-border bg-muted/20 shadow-none\",\n        )}\n      >\n        {body}\n      </div>\n      {modal}\n    </>\n  );\n}\n"],"names":["resolveStatusConfig","jsx","Badge","toneToBadgeTone","resolveFacetOption","Fragment","cn","jsxs","UiFullscreen","UiClose","UiTrash","Icon","useState","parseTimestamp","CommentAuthorAvatar","authorDisplayName","UiCheck","DropdownMenu","UiDotsVertical","CommentMarkdown","Modal","truncatePlain"],"mappings":"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"}

package/dist/comments/CommentCard.d.ts

@@ -10,7 +10,7 @@ export type CommentCardProps = {
     /** Custom body renderer; defaults to the lightweight CommentMarkdown. */
     renderBody?: (body: string) => ReactNode;
     /** Change this comment's status (roots only). */
-    onUpdateStatus?: (status: string) => void;
+    onUpdateStatus?: (status: string) => void | Promise<void>;
     /** Delete this comment. */
     onDelete?: () => void;
     /** Begin a reply to this comment. */

package/dist/comments/CommentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCard.d.ts","sourceRoot":"","sources":["../../src/comments/CommentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBjD,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAmQF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0GlD"}
+{"version":3,"file":"CommentCard.d.ts","sourceRoot":"","sources":["../../src/comments/CommentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BjD,OAAO,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;IACtB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC;IACzC,iDAAiD;IACjD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AA4TF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA6GlD"}

package/dist/comments/CommentCard.js

@@ -8,9 +8,10 @@ import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { parseTimestamp, formatRelativeTime } from "../data/cells/timestamp-format.js";
 import { CommentAuthorAvatar } from "./CommentAuthor.js";
 import { CommentMarkdown } from "./CommentMarkdown.js";
-import { truncatePlain, resolveStatusConfig, toneToBadgeTone, resolveFacetOption } from "./comment-utils.js";
+import { authorDisplayName, truncatePlain, resolveFacetOption, toneToBadgeTone, resolveStatusConfig } from "./comment-utils.js";
 import { UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiDotsVertical } from "../icons/components/UiDotsVertical.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiTrash } from "../icons/components/UiTrash.js";
 function StatusChip({
@@ -101,11 +102,19 @@ function RefChips({ comment }) {
 }
 function statusMenuItems(comment, config, isReply, opts) {
   const items = [];
+  if (opts.onMaximize) {
+    items.push({
+      label: "Maximize",
+      icon: UiFullscreen,
+      onSelect: opts.onMaximize
+    });
+  }
   if (opts.onCollapse) {
     items.push({ label: "Collapse", icon: UiClose, onSelect: opts.onCollapse });
   }
   if (!isReply && opts.onUpdateStatus) {
     for (const status of config.statuses) {
+      if (status.value === opts.resolvedStatus) continue;
       const current = status.value === comment.status;
       items.push({
         label: /* @__PURE__ */ jsxs(
@@ -136,7 +145,8 @@ function statusMenuItems(comment, config, isReply, opts) {
 function IconAction({
   icon,
   label,
-  onClick
+  onClick,
+  className
 }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -145,8 +155,11 @@ function IconAction({
       onClick,
       "aria-label": label,
       title: label,
-      className: "rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100",
-      children: /* @__PURE__ */ jsx(Icon, { icon, className: "text-xs" })
+      className: cn(
+        "rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { icon, className: "text-sm" })
     }
   );
 }
@@ -161,42 +174,55 @@ function CommentBody({
   onCollapse,
   onMaximize
 }) {
+  const [statusError, setStatusError] = useState("");
   const isReply = Boolean(comment.parentId);
   const date = parseTimestamp(comment.createdAt);
+  const resolvedStatus = config.statuses.find(
+    (status) => status.value.toLowerCase() === "resolved" || status.label.toLowerCase() === "resolved"
+  );
+  const canResolve = !isReply && onUpdateStatus != null && resolvedStatus != null && comment.status !== resolvedStatus.value;
+  const updateStatus = async (status) => {
+    setStatusError("");
+    try {
+      await (onUpdateStatus == null ? void 0 : onUpdateStatus(status));
+    } catch (error) {
+      setStatusError(
+        error instanceof Error ? error.message : "Unexpected error"
+      );
+    }
+  };
   const menuItems = statusMenuItems(comment, config, isReply, {
-    ...onUpdateStatus ? { onUpdateStatus } : {},
+    ...onUpdateStatus ? { onUpdateStatus: (status) => void updateStatus(status) } : {},
     ...onDelete ? { onDelete } : {},
-    ...onCollapse ? { onCollapse } : {}
+    ...onCollapse ? { onCollapse } : {},
+    ...onMaximize ? { onMaximize } : {},
+    ...resolvedStatus ? { resolvedStatus: resolvedStatus.value } : {}
   });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ jsx(CommentAuthorAvatar, { author: comment.author }),
-      !isReply && /* @__PURE__ */ jsx(StatusChip, { status: comment.status, config, showLabel: true }),
-      !isReply && /* @__PURE__ */ jsx(FacetBadges, { comment, config }),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
-        date && /* @__PURE__ */ jsx(
-          "span",
-          {
-            title: date.toLocaleString(),
-            className: "text-[10px] text-muted-foreground",
-            children: formatRelativeTime(date)
-          }
-        ),
-        onReply && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onReply,
-            className: "rounded px-1.5 py-1 text-[10px] text-muted-foreground hover:bg-muted hover:text-foreground",
-            children: "Reply"
-          }
-        ),
-        onMaximize && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-semibold text-foreground", children: authorDisplayName(comment.author) }),
+          date && /* @__PURE__ */ jsx(
+            "span",
+            {
+              title: date.toLocaleString(),
+              className: "shrink-0 text-[10px] text-muted-foreground",
+              children: formatRelativeTime(date)
+            }
+          )
+        ] }),
+        !isReply && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: /* @__PURE__ */ jsx(FacetBadges, { comment, config }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        canResolve && /* @__PURE__ */ jsx(
           IconAction,
           {
-            icon: UiFullscreen,
-            label: "Maximize",
-            onClick: onMaximize
+            icon: UiCheck,
+            label: "Resolve comment",
+            onClick: () => void updateStatus(resolvedStatus.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__ */ jsx(
@@ -210,7 +236,7 @@ function CommentBody({
                 role: "button",
                 tabIndex: 0,
                 "aria-label": "Comment actions",
-                className: "rounded p-1 text-muted-foreground opacity-70 hover:bg-muted hover:opacity-100",
+                className: "inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                 children: /* @__PURE__ */ jsx(Icon, { icon: UiDotsVertical, className: "text-sm" })
               }
             ),
@@ -219,7 +245,18 @@ function CommentBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "text-[13px] leading-6", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsx(CommentMarkdown, { text: comment.body }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-[13px] leading-5 text-foreground", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsx(CommentMarkdown, { text: comment.body }) }),
+    statusError && /* @__PURE__ */ jsxs(
+      "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
+        ]
+      }
+    ),
     !isReply && /* @__PURE__ */ jsx(
       ChecklistChips,
       {
@@ -227,7 +264,16 @@ function CommentBody({
         ...onChecklistToggle ? { onChecklistToggle } : {}
       }
     ),
-    !isReply && /* @__PURE__ */ jsx(RefChips, { comment })
+    !isReply && /* @__PURE__ */ jsx(RefChips, { comment }),
+    onReply && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReply,
+        className: "-ml-2 rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10",
+        children: "Reply"
+      }
+    )
   ] });
 }
 function CommentCard(props) {
@@ -277,7 +323,7 @@ function CommentCard(props) {
           ),
           children: [
             /* @__PURE__ */ jsx(CommentAuthorAvatar, { author: comment.author, bare: true }),
-            !isReply && /* @__PURE__ */ jsx(StatusChip, { status: comment.status, config }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] font-semibold text-foreground", children: authorDisplayName(comment.author) }),
             !isReply && /* @__PURE__ */ jsx(FacetBadges, { comment, config, compact: true }),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-foreground/80", children: truncatePlain(comment.body) }),
             /* @__PURE__ */ jsx(
@@ -326,10 +372,10 @@ function CommentCard(props) {
         "data-comment-kind": isReply ? "reply" : "root",
         "data-comment-id": comment.id,
         className: cn(
-          "group/comment rounded-xl bg-background px-3 py-3 text-xs",
-          !isReply && "border border-border shadow-sm",
+          "group/comment rounded-xl bg-background px-3.5 py-3 text-xs",
+          !isReply && "border border-border/80 shadow-sm transition-shadow hover:shadow-md",
           compact && "px-2.5 py-2.5",
-          isReply && "ml-4 border-l-2 border-l-border bg-muted/30 shadow-none"
+          isReply && "ml-4 border-l-2 border-l-border bg-muted/20 shadow-none"
         ),
         children: body
       }