@local-civics/hub-ui 0.1.255 → 0.1.256

package/dist/index.mjs

@@ -6858,11 +6858,12 @@ const formatDate$1 = (value) => {
 };
 const CommentsCard = (props) => {
   const comments = props.comments || [];
-  const total = comments.length;
-  const needsAttention = comments.filter((c) => c.requireValidation && (!c.resolvedAt || c.needsSubmission)).length;
+  const needsValidation = comments.filter((c) => c.requireValidation && !c.resolvedAt).length;
+  const needsSubmission = comments.filter((c) => c.requireValidation && !!c.resolvedAt && c.needsSubmission).length;
   const resolved = comments.filter((c) => !!c.resolvedAt && !c.needsSubmission).length;
+  const open = needsValidation + needsSubmission;
   const recent = [...comments].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()).slice(0, RECENT_COUNT);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col overflow-hidden rounded-2xl border border-mint-400/20 bg-white shadow-[0_4px_20px_rgba(88,214,141,0.12)]" }, /* @__PURE__ */ React.createElement("div", { className: "h-1 bg-gradient-to-r from-mint-400 to-sky-blue-400" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-9 w-9 items-center justify-center rounded-[10px] bg-mint-400/15" }, /* @__PURE__ */ React.createElement(IconMessageCircle, { size: 18, stroke: 2, className: "text-mint-400" })), /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "Comments"), needsAttention > 0 && /* @__PURE__ */ React.createElement(Pill, { label: `${needsAttention} need attention`, accent: "gold" })), props.onViewAll && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 flex-col overflow-hidden rounded-2xl border border-mint-400/20 bg-white shadow-[0_4px_20px_rgba(88,214,141,0.12)]" }, /* @__PURE__ */ React.createElement("div", { className: "h-1 bg-gradient-to-r from-mint-400 to-sky-blue-400" }), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-9 w-9 items-center justify-center rounded-[10px] bg-mint-400/15" }, /* @__PURE__ */ React.createElement(IconMessageCircle, { size: 18, stroke: 2, className: "text-mint-400" })), /* @__PURE__ */ React.createElement("div", { className: "text-sm font-bold text-dark-blue-400" }, "Comments"), open > 0 && /* @__PURE__ */ React.createElement(Pill, { label: `${open} open`, accent: "gold" })), props.onViewAll && /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -6870,7 +6871,7 @@ const CommentsCard = (props) => {
       className: "shrink-0 text-xs font-bold text-sky-blue-400 hover:underline"
     },
     "View All \u2192"
-  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-3 gap-2 border-b border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(StatCell$1, { label: "Total", value: total }), /* @__PURE__ */ React.createElement(StatCell$1, { label: "Needs Attention", value: needsAttention }), /* @__PURE__ */ React.createElement(StatCell$1, { label: "Resolved", value: resolved })), /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 p-4" }, /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, recent.length === 0 && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "No comments yet."), recent.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2.5" }, recent.map((c) => /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-3 gap-2 border-b border-slate-100 px-4 py-3" }, /* @__PURE__ */ React.createElement(StatCell$1, { label: "Needs validation", value: needsValidation }), /* @__PURE__ */ React.createElement(StatCell$1, { label: "Needs submission", value: needsSubmission }), /* @__PURE__ */ React.createElement(StatCell$1, { label: "Resolved", value: resolved })), /* @__PURE__ */ React.createElement("div", { className: "relative flex-1 p-4" }, /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, recent.length === 0 && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "No comments yet."), recent.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2.5" }, recent.map((c) => /* @__PURE__ */ React.createElement(
     CommentRow,
     {
       key: c.commentId,
@@ -6884,8 +6885,8 @@ const StatCell$1 = (props) => /* @__PURE__ */ React.createElement("div", { class
 const CommentRow = (props) => {
   const c = props.comment;
   const resolved = !!c.resolvedAt;
-  const materialLabel = c.badgeName || c.lessonName;
-  const onClick = c.badgeId && props.onBadgeClick ? () => props.onBadgeClick(c.badgeId) : c.lessonId && props.onLessonClick ? () => props.onLessonClick(c.lessonId) : void 0;
+  const materialLabel = c.lessonName || c.badgeName;
+  const onClick = c.lessonId && props.onLessonClick ? () => props.onLessonClick(c.lessonId) : c.badgeId && props.onBadgeClick ? () => props.onBadgeClick(c.badgeId) : void 0;
   return /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-slate-100 bg-slate-50 p-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, onClick ? /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -6897,15 +6898,15 @@ const CommentRow = (props) => {
   ) : /* @__PURE__ */ React.createElement("span", { className: "text-xs font-bold text-dark-blue-400" }, materialLabel || "General"), (c.badgeId || c.lessonId) && /* @__PURE__ */ React.createElement(
     "span",
     {
-      className: `rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${c.badgeId ? "bg-mint-400/15 text-dark-blue-400" : "bg-gold-400/15 text-dark-blue-400"}`
+      className: `rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${c.lessonId ? "bg-gold-400/15 text-dark-blue-400" : "bg-mint-400/15 text-dark-blue-400"}`
     },
-    c.badgeId ? "Badge" : "Lesson"
+    c.lessonId ? "Lesson" : "Badge"
   )), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 text-[10.5px] text-slate-400" }, formatDate$1(c.createdAt))), /* @__PURE__ */ React.createElement("p", { className: "mt-1.5 line-clamp-2 text-xs text-slate-600" }, c.commentText), c.requireValidation && /* @__PURE__ */ React.createElement(
     "span",
     {
       className: `mt-2 inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${!resolved ? "bg-gold-100 text-dark-blue-400" : c.needsSubmission ? "bg-sky-blue-400/15 text-dark-blue-400" : "bg-mint-100 text-dark-blue-400"}`
     },
-    !resolved ? "Needs Validation" : c.needsSubmission ? "Needs Submission" : "Resolved"
+    !resolved ? "Needs validation" : c.needsSubmission ? "Needs submission" : "Resolved"
   ));
 };
 
@@ -7298,18 +7299,18 @@ const formatDate = (iso) => {
 };
 const CommentCard = (props) => {
   const { comment } = props;
-  const target = comment.badgeId ? {
-    label: comment.badgeName || "Badge",
-    kind: "badge",
-    onClick: props.onBadgeClick ? () => props.onBadgeClick(comment.badgeId) : void 0
-  } : comment.lessonId ? {
+  const target = comment.lessonId ? {
     label: comment.lessonName || "Lesson",
     kind: "lesson",
     onClick: props.onLessonClick ? () => props.onLessonClick(comment.lessonId) : void 0
+  } : comment.badgeId ? {
+    label: comment.badgeName || "Badge",
+    kind: "badge",
+    onClick: props.onBadgeClick ? () => props.onBadgeClick(comment.badgeId) : void 0
   } : { label: "General", kind: "general", onClick: void 0 };
   const needsAttention = comment.requireValidation && !comment.resolvedAt;
   const actionLabel = needsAttention && target.kind === "badge" ? "Resubmit this badge" : target.kind === "badge" ? "View this badge" : target.kind === "lesson" ? "View this lesson" : void 0;
-  return /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl border bg-white p-4 ${needsAttention ? "border-gold-400/40" : "border-slate-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-extrabold text-dark-blue-400" }, target.label), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-400" }, comment.commenterName && /* @__PURE__ */ React.createElement("span", null, "Commenter: ", comment.commenterName), comment.commenterName && comment.createdAt && /* @__PURE__ */ React.createElement("span", null, "\xB7"), comment.createdAt && /* @__PURE__ */ React.createElement("span", null, formatDate(comment.createdAt)))), comment.requireValidation && (!comment.resolvedAt ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs attention") : comment.needsSubmission ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs submission") : /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center gap-1 rounded-full bg-mint-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, /* @__PURE__ */ React.createElement(IconCheck, { size: 11, stroke: 3, className: "text-mint-400" }), "Resolved"))), /* @__PURE__ */ React.createElement("p", { className: "mt-2.5 text-xs text-slate-600" }, comment.commentText), actionLabel && target.onClick && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: `rounded-2xl border bg-white p-4 ${needsAttention ? "border-gold-400/40" : "border-slate-200"}` }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-extrabold text-dark-blue-400" }, target.label), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-400" }, comment.commenterName && /* @__PURE__ */ React.createElement("span", null, "Commenter: ", comment.commenterName), comment.commenterName && comment.createdAt && /* @__PURE__ */ React.createElement("span", null, "\xB7"), comment.createdAt && /* @__PURE__ */ React.createElement("span", null, formatDate(comment.createdAt)))), comment.requireValidation && (!comment.resolvedAt ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-gold-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs validation") : comment.needsSubmission ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 rounded-full bg-sky-blue-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, "Needs submission") : /* @__PURE__ */ React.createElement("span", { className: "flex shrink-0 items-center gap-1 rounded-full bg-mint-400/15 px-2.5 py-1 text-[10px] font-bold text-dark-blue-400" }, /* @__PURE__ */ React.createElement(IconCheck, { size: 11, stroke: 3, className: "text-mint-400" }), "Resolved"))), /* @__PURE__ */ React.createElement("p", { className: "mt-2.5 text-xs text-slate-600" }, comment.commentText), actionLabel && target.onClick && /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",