@btst/stack 2.6.2 → 2.8.0

package/dist/packages/stack/src/plugins/comments/client/components/pages/moderation-page.internal.cjs

@@ -0,0 +1,426 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const table = require('../../../../../../../ui/src/components/table.cjs');
+const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
+const alertDialog = require('../../../../../../../ui/src/components/alert-dialog.cjs');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const badge = require('../../../../../../../ui/src/components/badge.cjs');
+const tabs = require('../../../../../../../ui/src/components/tabs.cjs');
+const checkbox = require('../../../../../../../ui/src/components/checkbox.cjs');
+const avatar = require('../../../../../../../ui/src/components/avatar.cjs');
+const LucideIcons = require('lucide-react');
+const sonner = require('sonner');
+const dateFns = require('date-fns');
+const context = require('@btst/stack/plugins/ai-chat/client/context');
+const useComments = require('../../hooks/use-comments.cjs');
+const index = require('../../localization/index.cjs');
+const utils = require('../../utils.cjs');
+const pagination = require('../shared/pagination.cjs');
+
+function StatusBadge({ status }) {
+  const variants = {
+    pending: "secondary",
+    approved: "default",
+    spam: "destructive"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: variants[status], children: status });
+}
+function ModerationPage({
+  apiBaseURL,
+  apiBasePath,
+  headers,
+  localization: localizationProp
+}) {
+  const loc = { ...index.COMMENTS_LOCALIZATION, ...localizationProp };
+  const [activeTab, setActiveTab] = React.useState("pending");
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [selected, setSelected] = React.useState(/* @__PURE__ */ new Set());
+  const [viewComment, setViewComment] = React.useState(
+    null
+  );
+  const [deleteIds, setDeleteIds] = React.useState([]);
+  const config = { apiBaseURL, apiBasePath, headers };
+  const { comments, total, limit, offset, totalPages, refetch } = useComments.useSuspenseModerationComments(config, {
+    status: activeTab,
+    page: currentPage
+  });
+  const updateStatus = useComments.useUpdateCommentStatus(config);
+  const deleteMutation = useComments.useDeleteComment(config);
+  context.useRegisterPageAIContext({
+    routeName: "comments-moderation",
+    pageDescription: `${total} ${activeTab} comments in the moderation queue.
+
+Top ${activeTab} comments:
+${comments.slice(0, 5).map(
+      (c) => `- "${c.body.slice(0, 80)}${c.body.length > 80 ? "\u2026" : ""}" by ${c.resolvedAuthorName} on ${c.resourceType}/${c.resourceId}`
+    ).join("\n")}`,
+    suggestions: [
+      "Approve all safe-looking comments",
+      "Flag spam comments",
+      "Summarize today's discussion"
+    ]
+  });
+  const toggleSelect = (id) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+  const toggleSelectAll = () => {
+    if (selected.size === comments.length) {
+      setSelected(/* @__PURE__ */ new Set());
+    } else {
+      setSelected(new Set(comments.map((c) => c.id)));
+    }
+  };
+  const handleApprove = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "approved" });
+      sonner.toast.success(loc.COMMENTS_MODERATION_TOAST_APPROVED);
+      await refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_MODERATION_TOAST_APPROVE_ERROR);
+    }
+  };
+  const handleSpam = async (id) => {
+    try {
+      await updateStatus.mutateAsync({ id, status: "spam" });
+      sonner.toast.success(loc.COMMENTS_MODERATION_TOAST_SPAM);
+      await refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_MODERATION_TOAST_SPAM_ERROR);
+    }
+  };
+  const handleDelete = async (ids) => {
+    try {
+      await Promise.all(ids.map((id) => deleteMutation.mutateAsync(id)));
+      sonner.toast.success(
+        ids.length === 1 ? loc.COMMENTS_MODERATION_TOAST_DELETED : loc.COMMENTS_MODERATION_TOAST_DELETED_PLURAL.replace(
+          "{n}",
+          String(ids.length)
+        )
+      );
+      setSelected(/* @__PURE__ */ new Set());
+      setDeleteIds([]);
+      await refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_MODERATION_TOAST_DELETE_ERROR);
+    }
+  };
+  const handleBulkApprove = async () => {
+    const ids = [...selected];
+    try {
+      await Promise.all(
+        ids.map((id) => updateStatus.mutateAsync({ id, status: "approved" }))
+      );
+      sonner.toast.success(
+        loc.COMMENTS_MODERATION_TOAST_BULK_APPROVED.replace(
+          "{n}",
+          String(ids.length)
+        )
+      );
+      setSelected(/* @__PURE__ */ new Set());
+      await refetch();
+    } catch {
+      sonner.toast.error(loc.COMMENTS_MODERATION_TOAST_BULK_APPROVE_ERROR);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", "data-testid": "moderation-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: loc.COMMENTS_MODERATION_TITLE }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm mt-1", children: loc.COMMENTS_MODERATION_DESCRIPTION })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs,
+      {
+        value: activeTab,
+        onValueChange: (v) => {
+          setActiveTab(v);
+          setCurrentPage(1);
+          setSelected(/* @__PURE__ */ new Set());
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "pending", "data-testid": "tab-pending", children: loc.COMMENTS_MODERATION_TAB_PENDING }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "approved", "data-testid": "tab-approved", children: loc.COMMENTS_MODERATION_TAB_APPROVED }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "spam", "data-testid": "tab-spam", children: loc.COMMENTS_MODERATION_TAB_SPAM })
+        ] })
+      }
+    ),
+    selected.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-3 bg-muted rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: loc.COMMENTS_MODERATION_SELECTED.replace(
+        "{n}",
+        String(selected.size)
+      ) }),
+      activeTab !== "approved" && /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: handleBulkApprove,
+          disabled: updateStatus.isPending,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-4 w-4 mr-1" }),
+            loc.COMMENTS_MODERATION_APPROVE_SELECTED
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        button.Button,
+        {
+          size: "sm",
+          variant: "outline",
+          className: "text-destructive border-destructive hover:bg-destructive hover:text-destructive-foreground",
+          onClick: () => setDeleteIds([...selected]),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 mr-1" }),
+            loc.COMMENTS_MODERATION_DELETE_SELECTED
+          ]
+        }
+      )
+    ] }),
+    comments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-16 text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-8 w-8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: loc.COMMENTS_MODERATION_EMPTY.replace("{status}", activeTab) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+            checkbox.Checkbox,
+            {
+              checked: selected.size === comments.length && comments.length > 0,
+              onCheckedChange: toggleSelectAll,
+              "aria-label": loc.COMMENTS_MODERATION_SELECT_ALL
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.COMMENTS_MODERATION_COL_AUTHOR }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.COMMENTS_MODERATION_COL_COMMENT }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.COMMENTS_MODERATION_COL_RESOURCE }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: loc.COMMENTS_MODERATION_COL_DATE }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-36", children: loc.COMMENTS_MODERATION_COL_ACTIONS })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs(
+          table.TableRow,
+          {
+            "data-testid": "moderation-row",
+            "data-comment-id": comment.id,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                checkbox.Checkbox,
+                {
+                  checked: selected.has(comment.id),
+                  onCheckedChange: () => toggleSelect(comment.id),
+                  "aria-label": loc.COMMENTS_MODERATION_SELECT_ONE
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-7 w-7", children: [
+                  comment.resolvedAvatarUrl && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: comment.resolvedAvatarUrl }),
+                  /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-xs", children: utils.getInitials(comment.resolvedAuthorName) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate max-w-[100px]", children: comment.resolvedAuthorName })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground max-w-xs truncate", children: comment.body }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                comment.resourceType,
+                "/",
+                comment.resourceId
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-xs text-muted-foreground whitespace-nowrap", children: dateFns.formatDistanceToNow(new Date(comment.createdAt), {
+                addSuffix: true
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    title: loc.COMMENTS_MODERATION_ACTION_VIEW,
+                    onClick: () => setViewComment(comment),
+                    "data-testid": "view-button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "h-4 w-4" })
+                  }
+                ),
+                activeTab !== "approved" && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 text-green-600 hover:text-green-700",
+                    title: loc.COMMENTS_MODERATION_ACTION_APPROVE,
+                    onClick: () => handleApprove(comment.id),
+                    disabled: updateStatus.isPending,
+                    "data-testid": "approve-button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-4 w-4" })
+                  }
+                ),
+                activeTab !== "spam" && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 text-orange-500 hover:text-orange-600",
+                    title: loc.COMMENTS_MODERATION_ACTION_SPAM,
+                    onClick: () => handleSpam(comment.id),
+                    disabled: updateStatus.isPending,
+                    "data-testid": "spam-button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ShieldOff, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 text-destructive hover:text-destructive",
+                    title: loc.COMMENTS_MODERATION_ACTION_DELETE,
+                    onClick: () => setDeleteIds([comment.id]),
+                    "data-testid": "delete-button",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" })
+                  }
+                )
+              ] }) })
+            ]
+          },
+          comment.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        pagination.Pagination,
+        {
+          currentPage,
+          totalPages,
+          onPageChange: setCurrentPage,
+          total,
+          limit,
+          offset
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: !!viewComment, onOpenChange: () => setViewComment(null), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: loc.COMMENTS_MODERATION_DIALOG_TITLE }) }),
+      viewComment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-10 w-10", children: [
+            viewComment.resolvedAvatarUrl && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: viewComment.resolvedAvatarUrl }),
+            /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { children: utils.getInitials(viewComment.resolvedAuthorName) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-sm", children: viewComment.resolvedAuthorName }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: new Date(viewComment.createdAt).toLocaleString() })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status: viewComment.status })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_RESOURCE }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-xs", children: [
+              viewComment.resourceType,
+              "/",
+              viewComment.resourceId
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_LIKES }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: viewComment.likes })
+          ] }),
+          viewComment.parentId && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_REPLY_TO }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-xs", children: viewComment.parentId })
+          ] }),
+          viewComment.editedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_EDITED }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: new Date(viewComment.editedAt).toLocaleString() })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-xs mb-1", children: loc.COMMENTS_MODERATION_DIALOG_BODY }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 bg-muted rounded-lg text-sm whitespace-pre-wrap break-words", children: viewComment.body })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+          viewComment.status !== "approved" && /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              size: "sm",
+              onClick: async () => {
+                await handleApprove(viewComment.id);
+                setViewComment(null);
+              },
+              disabled: updateStatus.isPending,
+              "data-testid": "dialog-approve-button",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-4 w-4 mr-1" }),
+                loc.COMMENTS_MODERATION_DIALOG_APPROVE
+              ]
+            }
+          ),
+          viewComment.status !== "spam" && /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              size: "sm",
+              variant: "outline",
+              onClick: async () => {
+                await handleSpam(viewComment.id);
+                setViewComment(null);
+              },
+              disabled: updateStatus.isPending,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ShieldOff, { className: "h-4 w-4 mr-1" }),
+                loc.COMMENTS_MODERATION_DIALOG_MARK_SPAM
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              size: "sm",
+              variant: "destructive",
+              onClick: () => {
+                setDeleteIds([viewComment.id]);
+                setViewComment(null);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 mr-1" }),
+                loc.COMMENTS_MODERATION_DIALOG_DELETE
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      alertDialog.AlertDialog,
+      {
+        open: deleteIds.length > 0,
+        onOpenChange: (open) => !open && setDeleteIds([]),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: deleteIds.length === 1 ? loc.COMMENTS_MODERATION_DELETE_TITLE_SINGULAR : loc.COMMENTS_MODERATION_DELETE_TITLE_PLURAL.replace(
+              "{n}",
+              String(deleteIds.length)
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: deleteIds.length === 1 ? loc.COMMENTS_MODERATION_DELETE_DESCRIPTION_SINGULAR : loc.COMMENTS_MODERATION_DELETE_DESCRIPTION_PLURAL })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: loc.COMMENTS_MODERATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              alertDialog.AlertDialogAction,
+              {
+                className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                onClick: () => handleDelete(deleteIds),
+                "data-testid": "confirm-delete-button",
+                children: deleteMutation.isPending ? loc.COMMENTS_MODERATION_DELETE_DELETING : loc.COMMENTS_MODERATION_DELETE_CONFIRM
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+exports.ModerationPage = ModerationPage;