@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -10,14 +10,18 @@ import { Tabs, TabsList, TabsTrigger } from '../../../../../../../ui/src/compone
 import { Checkbox } from '../../../../../../../ui/src/components/checkbox.mjs';
 import { Avatar, AvatarImage, AvatarFallback } from '../../../../../../../ui/src/components/avatar.mjs';
 import { CheckCircle, Trash2, Eye, ShieldOff } from 'lucide-react';
-import { toast } from 'sonner';
 import { formatDistanceToNow } from 'date-fns';
+import { useTranslate, useNotify, useStack, CanAccess } from '@btst/stack/context';
+import { useListState } from '@btst/stack/client';
 import { useRegisterPageAIContext } from '@btst/stack/plugins/ai-chat/client/context';
 import { useSuspenseModerationComments, useUpdateCommentStatus, useDeleteComment } from '../../hooks/use-comments.mjs';
-import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
 import { getInitials } from '../../utils.mjs';
 import { Pagination } from '../shared/pagination.mjs';
 
+const LIST_STATE_SCHEMA = {
+  tab: { type: "string", default: "pending" },
+  page: { type: "number", default: 1 }
+};
 function StatusBadge({ status }) {
   const variants = {
     pending: "secondary",
@@ -26,21 +30,25 @@ function StatusBadge({ status }) {
   };
   return /* @__PURE__ */ jsx(Badge, { variant: variants[status], children: status });
 }
-function ModerationPage({
-  apiBaseURL,
-  apiBasePath,
-  headers,
-  localization: localizationProp
-}) {
-  const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
-  const [activeTab, setActiveTab] = useState("pending");
-  const [currentPage, setCurrentPage] = useState(1);
+function ModerationPage({ localization }) {
+  const t = useTranslate();
+  const notify = useNotify();
+  const { api } = useStack();
+  const [listState, setListState] = useListState(
+    "comments-moderation",
+    LIST_STATE_SCHEMA
+  );
+  const activeTab = listState.tab === "approved" || listState.tab === "spam" ? listState.tab : "pending";
+  const currentPage = Math.max(1, Math.floor(listState.page) || 1);
   const [selected, setSelected] = useState(/* @__PURE__ */ new Set());
   const [viewComment, setViewComment] = useState(
     null
   );
   const [deleteIds, setDeleteIds] = useState([]);
-  const config = { apiBaseURL, apiBasePath, headers };
+  const config = {
+    apiBaseURL: api?.baseURL ?? "",
+    apiBasePath: api?.basePath ?? ""
+  };
   const { comments, total, limit, offset, totalPages, refetch } = useSuspenseModerationComments(config, {
     status: activeTab,
     page: currentPage
@@ -78,35 +86,51 @@ ${comments.slice(0, 5).map(
   const handleApprove = async (id) => {
     try {
       await updateStatus.mutateAsync({ id, status: "approved" });
-      toast.success(loc.COMMENTS_MODERATION_TOAST_APPROVED);
+      notify.success(
+        localization?.COMMENTS_MODERATION_TOAST_APPROVED ?? t("comments.moderation.toastApproved", "Comment approved")
+      );
       await refetch();
     } catch {
-      toast.error(loc.COMMENTS_MODERATION_TOAST_APPROVE_ERROR);
+      notify.error(
+        localization?.COMMENTS_MODERATION_TOAST_APPROVE_ERROR ?? t(
+          "comments.moderation.toastApproveError",
+          "Failed to approve comment"
+        )
+      );
     }
   };
   const handleSpam = async (id) => {
     try {
       await updateStatus.mutateAsync({ id, status: "spam" });
-      toast.success(loc.COMMENTS_MODERATION_TOAST_SPAM);
+      notify.success(
+        localization?.COMMENTS_MODERATION_TOAST_SPAM ?? t("comments.moderation.toastSpam", "Marked as spam")
+      );
       await refetch();
     } catch {
-      toast.error(loc.COMMENTS_MODERATION_TOAST_SPAM_ERROR);
+      notify.error(
+        localization?.COMMENTS_MODERATION_TOAST_SPAM_ERROR ?? t("comments.moderation.toastSpamError", "Failed to update status")
+      );
     }
   };
   const handleDelete = async (ids) => {
     try {
       await Promise.all(ids.map((id) => deleteMutation.mutateAsync(id)));
-      toast.success(
-        ids.length === 1 ? loc.COMMENTS_MODERATION_TOAST_DELETED : loc.COMMENTS_MODERATION_TOAST_DELETED_PLURAL.replace(
-          "{n}",
-          String(ids.length)
-        )
+      notify.success(
+        ids.length === 1 ? localization?.COMMENTS_MODERATION_TOAST_DELETED ?? t("comments.moderation.toastDeleted", "Comment deleted") : (localization?.COMMENTS_MODERATION_TOAST_DELETED_PLURAL ?? t(
+          "comments.moderation.toastDeletedPlural",
+          "{n} comments deleted"
+        )).replace("{n}", String(ids.length))
       );
       setSelected(/* @__PURE__ */ new Set());
       setDeleteIds([]);
       await refetch();
     } catch {
-      toast.error(loc.COMMENTS_MODERATION_TOAST_DELETE_ERROR);
+      notify.error(
+        localization?.COMMENTS_MODERATION_TOAST_DELETE_ERROR ?? t(
+          "comments.moderation.toastDeleteError",
+          "Failed to delete comment(s)"
+        )
+      );
     }
   };
   const handleBulkApprove = async () => {
@@ -115,45 +139,46 @@ ${comments.slice(0, 5).map(
       await Promise.all(
         ids.map((id) => updateStatus.mutateAsync({ id, status: "approved" }))
       );
-      toast.success(
-        loc.COMMENTS_MODERATION_TOAST_BULK_APPROVED.replace(
-          "{n}",
-          String(ids.length)
-        )
+      notify.success(
+        (localization?.COMMENTS_MODERATION_TOAST_BULK_APPROVED ?? t("comments.moderation.toastBulkApproved", "{n} comment(s) approved")).replace("{n}", String(ids.length))
       );
       setSelected(/* @__PURE__ */ new Set());
       await refetch();
     } catch {
-      toast.error(loc.COMMENTS_MODERATION_TOAST_BULK_APPROVE_ERROR);
+      notify.error(
+        localization?.COMMENTS_MODERATION_TOAST_BULK_APPROVE_ERROR ?? t(
+          "comments.moderation.toastBulkApproveError",
+          "Failed to approve comments"
+        )
+      );
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", "data-testid": "moderation-page", children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: loc.COMMENTS_MODERATION_TITLE }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: loc.COMMENTS_MODERATION_DESCRIPTION })
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: localization?.COMMENTS_MODERATION_TITLE ?? t("comments.moderation.title", "Comment Moderation") }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mt-1", children: localization?.COMMENTS_MODERATION_DESCRIPTION ?? t(
+        "comments.moderation.description",
+        "Review and manage comments across all resources."
+      ) })
     ] }),
     /* @__PURE__ */ jsx(
       Tabs,
       {
         value: activeTab,
         onValueChange: (v) => {
-          setActiveTab(v);
-          setCurrentPage(1);
+          setListState({ tab: v, page: 1 });
           setSelected(/* @__PURE__ */ new Set());
         },
         children: /* @__PURE__ */ jsxs(TabsList, { children: [
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "pending", "data-testid": "tab-pending", children: loc.COMMENTS_MODERATION_TAB_PENDING }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "approved", "data-testid": "tab-approved", children: loc.COMMENTS_MODERATION_TAB_APPROVED }),
-          /* @__PURE__ */ jsx(TabsTrigger, { value: "spam", "data-testid": "tab-spam", children: loc.COMMENTS_MODERATION_TAB_SPAM })
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "pending", "data-testid": "tab-pending", children: localization?.COMMENTS_MODERATION_TAB_PENDING ?? t("comments.moderation.tabPending", "Pending") }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "approved", "data-testid": "tab-approved", children: localization?.COMMENTS_MODERATION_TAB_APPROVED ?? t("comments.moderation.tabApproved", "Approved") }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "spam", "data-testid": "tab-spam", children: localization?.COMMENTS_MODERATION_TAB_SPAM ?? t("comments.moderation.tabSpam", "Spam") })
         ] })
       }
     ),
     selected.size > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-3 bg-muted rounded-lg", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: loc.COMMENTS_MODERATION_SELECTED.replace(
-        "{n}",
-        String(selected.size)
-      ) }),
-      activeTab !== "approved" && /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: (localization?.COMMENTS_MODERATION_SELECTED ?? t("comments.moderation.selected", "{n} selected")).replace("{n}", String(selected.size)) }),
+      activeTab !== "approved" && /* @__PURE__ */ jsx(CanAccess, { resource: "comments:comment", action: "moderate", children: /* @__PURE__ */ jsxs(
         Button,
         {
           size: "sm",
@@ -162,11 +187,11 @@ ${comments.slice(0, 5).map(
           disabled: updateStatus.isPending,
           children: [
             /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 mr-1" }),
-            loc.COMMENTS_MODERATION_APPROVE_SELECTED
+            localization?.COMMENTS_MODERATION_APPROVE_SELECTED ?? t("comments.moderation.approveSelected", "Approve selected")
           ]
         }
-      ),
-      /* @__PURE__ */ jsxs(
+      ) }),
+      /* @__PURE__ */ jsx(CanAccess, { resource: "comments:comment", action: "delete", children: /* @__PURE__ */ jsxs(
         Button,
         {
           size: "sm",
@@ -175,14 +200,14 @@ ${comments.slice(0, 5).map(
           onClick: () => setDeleteIds([...selected]),
           children: [
             /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-1" }),
-            loc.COMMENTS_MODERATION_DELETE_SELECTED
+            localization?.COMMENTS_MODERATION_DELETE_SELECTED ?? t("comments.moderation.deleteSelected", "Delete selected")
           ]
         }
-      )
+      ) })
     ] }),
     comments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-16 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(CheckCircle, { className: "h-8 w-8" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm", children: loc.COMMENTS_MODERATION_EMPTY.replace("{status}", activeTab) })
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: (localization?.COMMENTS_MODERATION_EMPTY ?? t("comments.moderation.empty", "No {status} comments.")).replace("{status}", activeTab) })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
         /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
@@ -191,14 +216,14 @@ ${comments.slice(0, 5).map(
             {
               checked: selected.size === comments.length && comments.length > 0,
               onCheckedChange: toggleSelectAll,
-              "aria-label": loc.COMMENTS_MODERATION_SELECT_ALL
+              "aria-label": localization?.COMMENTS_MODERATION_SELECT_ALL ?? t("comments.moderation.selectAll", "Select all")
             }
           ) }),
-          /* @__PURE__ */ jsx(TableHead, { children: loc.COMMENTS_MODERATION_COL_AUTHOR }),
-          /* @__PURE__ */ jsx(TableHead, { children: loc.COMMENTS_MODERATION_COL_COMMENT }),
-          /* @__PURE__ */ jsx(TableHead, { children: loc.COMMENTS_MODERATION_COL_RESOURCE }),
-          /* @__PURE__ */ jsx(TableHead, { children: loc.COMMENTS_MODERATION_COL_DATE }),
-          /* @__PURE__ */ jsx(TableHead, { className: "w-36", children: loc.COMMENTS_MODERATION_COL_ACTIONS })
+          /* @__PURE__ */ jsx(TableHead, { children: localization?.COMMENTS_MODERATION_COL_AUTHOR ?? t("comments.moderation.colAuthor", "Author") }),
+          /* @__PURE__ */ jsx(TableHead, { children: localization?.COMMENTS_MODERATION_COL_COMMENT ?? t("comments.moderation.colComment", "Comment") }),
+          /* @__PURE__ */ jsx(TableHead, { children: localization?.COMMENTS_MODERATION_COL_RESOURCE ?? t("comments.moderation.colResource", "Resource") }),
+          /* @__PURE__ */ jsx(TableHead, { children: localization?.COMMENTS_MODERATION_COL_DATE ?? t("comments.moderation.colDate", "Date") }),
+          /* @__PURE__ */ jsx(TableHead, { className: "w-36", children: localization?.COMMENTS_MODERATION_COL_ACTIONS ?? t("comments.moderation.colActions", "Actions") })
         ] }) }),
         /* @__PURE__ */ jsx(TableBody, { children: comments.map((comment) => /* @__PURE__ */ jsxs(
           TableRow,
@@ -211,7 +236,7 @@ ${comments.slice(0, 5).map(
                 {
                   checked: selected.has(comment.id),
                   onCheckedChange: () => toggleSelect(comment.id),
-                  "aria-label": loc.COMMENTS_MODERATION_SELECT_ONE
+                  "aria-label": localization?.COMMENTS_MODERATION_SELECT_ONE ?? t("comments.moderation.selectOne", "Select comment")
                 }
               ) }),
               /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -237,48 +262,78 @@ ${comments.slice(0, 5).map(
                     variant: "ghost",
                     size: "icon",
                     className: "h-7 w-7",
-                    title: loc.COMMENTS_MODERATION_ACTION_VIEW,
+                    title: localization?.COMMENTS_MODERATION_ACTION_VIEW ?? t("comments.moderation.actionView", "View"),
                     onClick: () => setViewComment(comment),
                     "data-testid": "view-button",
                     children: /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
                   }
                 ),
                 activeTab !== "approved" && /* @__PURE__ */ jsx(
-                  Button,
+                  CanAccess,
                   {
-                    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__ */ jsx(CheckCircle, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "moderate",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-7 w-7 text-green-600 hover:text-green-700",
+                        title: localization?.COMMENTS_MODERATION_ACTION_APPROVE ?? t(
+                          "comments.moderation.actionApprove",
+                          "Approve"
+                        ),
+                        onClick: () => handleApprove(comment.id),
+                        disabled: updateStatus.isPending,
+                        "data-testid": "approve-button",
+                        children: /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 ),
                 activeTab !== "spam" && /* @__PURE__ */ jsx(
-                  Button,
+                  CanAccess,
                   {
-                    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__ */ jsx(ShieldOff, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "moderate",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-7 w-7 text-orange-500 hover:text-orange-600",
+                        title: localization?.COMMENTS_MODERATION_ACTION_SPAM ?? t(
+                          "comments.moderation.actionSpam",
+                          "Mark as spam"
+                        ),
+                        onClick: () => handleSpam(comment.id),
+                        disabled: updateStatus.isPending,
+                        "data-testid": "spam-button",
+                        children: /* @__PURE__ */ jsx(ShieldOff, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Button,
+                  CanAccess,
                   {
-                    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__ */ jsx(Trash2, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "delete",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-7 w-7 text-destructive hover:text-destructive",
+                        title: localization?.COMMENTS_MODERATION_ACTION_DELETE ?? t("comments.moderation.actionDelete", "Delete"),
+                        onClick: () => setDeleteIds([comment.id]),
+                        "data-testid": "delete-button",
+                        children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 )
               ] }) })
@@ -292,7 +347,7 @@ ${comments.slice(0, 5).map(
         {
           currentPage,
           totalPages,
-          onPageChange: setCurrentPage,
+          onPageChange: (p) => setListState({ page: p }),
           total,
           limit,
           offset
@@ -300,7 +355,7 @@ ${comments.slice(0, 5).map(
       )
     ] }),
     /* @__PURE__ */ jsx(Dialog, { open: !!viewComment, onOpenChange: () => setViewComment(null), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl", children: [
-      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: loc.COMMENTS_MODERATION_DIALOG_TITLE }) }),
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: localization?.COMMENTS_MODERATION_DIALOG_TITLE ?? t("comments.moderation.dialogTitle", "Comment Details") }) }),
       viewComment && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10", children: [
@@ -315,7 +370,7 @@ ${comments.slice(0, 5).map(
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 text-sm", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_RESOURCE }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_RESOURCE ?? t("comments.moderation.dialogResource", "Resource") }),
             /* @__PURE__ */ jsxs("p", { className: "font-mono text-xs", children: [
               viewComment.resourceType,
               "/",
@@ -323,68 +378,92 @@ ${comments.slice(0, 5).map(
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_LIKES }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_LIKES ?? t("comments.moderation.dialogLikes", "Likes") }),
             /* @__PURE__ */ jsx("p", { children: viewComment.likes })
           ] }),
           viewComment.parentId && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_REPLY_TO }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_REPLY_TO ?? t("comments.moderation.dialogReplyTo", "Reply to") }),
             /* @__PURE__ */ jsx("p", { className: "font-mono text-xs", children: viewComment.parentId })
           ] }),
           viewComment.editedAt && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: loc.COMMENTS_MODERATION_DIALOG_EDITED }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_EDITED ?? t("comments.moderation.dialogEdited", "Edited") }),
             /* @__PURE__ */ jsx("p", { className: "text-xs", children: new Date(viewComment.editedAt).toLocaleString() })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-1", children: loc.COMMENTS_MODERATION_DIALOG_BODY }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs mb-1", children: localization?.COMMENTS_MODERATION_DIALOG_BODY ?? t("comments.moderation.dialogBody", "Body") }),
           /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted rounded-lg text-sm whitespace-pre-wrap break-words", children: viewComment.body })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
-          viewComment.status !== "approved" && /* @__PURE__ */ jsxs(
-            Button,
+          viewComment.status !== "approved" && /* @__PURE__ */ jsx(
+            CanAccess,
             {
-              size: "sm",
-              onClick: async () => {
-                await handleApprove(viewComment.id);
-                setViewComment(null);
-              },
-              disabled: updateStatus.isPending,
-              "data-testid": "dialog-approve-button",
-              children: [
-                /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 mr-1" }),
-                loc.COMMENTS_MODERATION_DIALOG_APPROVE
-              ]
+              resource: "comments:comment",
+              action: "moderate",
+              params: { id: viewComment.id },
+              children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  onClick: async () => {
+                    await handleApprove(viewComment.id);
+                    setViewComment(null);
+                  },
+                  disabled: updateStatus.isPending,
+                  "data-testid": "dialog-approve-button",
+                  children: [
+                    /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 mr-1" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_APPROVE ?? t("comments.moderation.dialogApprove", "Approve")
+                  ]
+                }
+              )
             }
           ),
-          viewComment.status !== "spam" && /* @__PURE__ */ jsxs(
-            Button,
+          viewComment.status !== "spam" && /* @__PURE__ */ jsx(
+            CanAccess,
             {
-              size: "sm",
-              variant: "outline",
-              onClick: async () => {
-                await handleSpam(viewComment.id);
-                setViewComment(null);
-              },
-              disabled: updateStatus.isPending,
-              children: [
-                /* @__PURE__ */ jsx(ShieldOff, { className: "h-4 w-4 mr-1" }),
-                loc.COMMENTS_MODERATION_DIALOG_MARK_SPAM
-              ]
+              resource: "comments:comment",
+              action: "moderate",
+              params: { id: viewComment.id },
+              children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  variant: "outline",
+                  onClick: async () => {
+                    await handleSpam(viewComment.id);
+                    setViewComment(null);
+                  },
+                  disabled: updateStatus.isPending,
+                  children: [
+                    /* @__PURE__ */ jsx(ShieldOff, { className: "h-4 w-4 mr-1" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_MARK_SPAM ?? t("comments.moderation.dialogMarkSpam", "Mark spam")
+                  ]
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsxs(
-            Button,
+          /* @__PURE__ */ jsx(
+            CanAccess,
             {
-              size: "sm",
-              variant: "destructive",
-              onClick: () => {
-                setDeleteIds([viewComment.id]);
-                setViewComment(null);
-              },
-              children: [
-                /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-1" }),
-                loc.COMMENTS_MODERATION_DIALOG_DELETE
-              ]
+              resource: "comments:comment",
+              action: "delete",
+              params: { id: viewComment.id },
+              children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "sm",
+                  variant: "destructive",
+                  onClick: () => {
+                    setDeleteIds([viewComment.id]);
+                    setViewComment(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-1" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_DELETE ?? t("comments.moderation.dialogDelete", "Delete")
+                  ]
+                }
+              )
             }
           )
         ] })
@@ -397,21 +476,30 @@ ${comments.slice(0, 5).map(
         onOpenChange: (open) => !open && setDeleteIds([]),
         children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
           /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-            /* @__PURE__ */ jsx(AlertDialogTitle, { children: deleteIds.length === 1 ? loc.COMMENTS_MODERATION_DELETE_TITLE_SINGULAR : loc.COMMENTS_MODERATION_DELETE_TITLE_PLURAL.replace(
-              "{n}",
-              String(deleteIds.length)
-            ) }),
-            /* @__PURE__ */ jsx(AlertDialogDescription, { children: deleteIds.length === 1 ? loc.COMMENTS_MODERATION_DELETE_DESCRIPTION_SINGULAR : loc.COMMENTS_MODERATION_DELETE_DESCRIPTION_PLURAL })
+            /* @__PURE__ */ jsx(AlertDialogTitle, { children: deleteIds.length === 1 ? localization?.COMMENTS_MODERATION_DELETE_TITLE_SINGULAR ?? t(
+              "comments.moderation.deleteTitleSingular",
+              "Delete comment?"
+            ) : (localization?.COMMENTS_MODERATION_DELETE_TITLE_PLURAL ?? t(
+              "comments.moderation.deleteTitlePlural",
+              "Delete {n} comments?"
+            )).replace("{n}", String(deleteIds.length)) }),
+            /* @__PURE__ */ jsx(AlertDialogDescription, { children: deleteIds.length === 1 ? localization?.COMMENTS_MODERATION_DELETE_DESCRIPTION_SINGULAR ?? t(
+              "comments.moderation.deleteDescriptionSingular",
+              "This action cannot be undone. The comment will be permanently deleted."
+            ) : localization?.COMMENTS_MODERATION_DELETE_DESCRIPTION_PLURAL ?? t(
+              "comments.moderation.deleteDescriptionPlural",
+              "This action cannot be undone. The comments will be permanently deleted."
+            ) })
           ] }),
           /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsx(AlertDialogCancel, { children: loc.COMMENTS_MODERATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization?.COMMENTS_MODERATION_DELETE_CANCEL ?? t("comments.moderation.deleteCancel", "Cancel") }),
             /* @__PURE__ */ jsx(
               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
+                children: deleteMutation.isPending ? localization?.COMMENTS_MODERATION_DELETE_DELETING ?? t("comments.moderation.deleteDeleting", "Deleting\u2026") : localization?.COMMENTS_MODERATION_DELETE_CONFIRM ?? t("comments.moderation.deleteConfirm", "Delete")
               }
             )
           ] })

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

@@ -3,7 +3,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { lazy } from 'react';
 import { ComposedRoute } from '@btst/stack/client/components';
 import { usePluginOverrides } from '@btst/stack/context';
-import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
 import { PageWrapper } from '../shared/page-wrapper.mjs';
 
@@ -27,36 +26,22 @@ function ModerationPageComponent() {
       path: "/comments/moderation",
       PageComponent: ModerationPageWrapper,
       LoadingComponent: ModerationPageSkeleton,
+      permission: { resource: "comments:comment", action: "moderate" },
       onError: (error) => console.error("[btst/comments] Moderation error:", error)
     }
   );
 }
 function ModerationPageWrapper() {
   const overrides = usePluginOverrides("comments");
-  const loc = { ...COMMENTS_LOCALIZATION, ...overrides.localization };
   useRouteLifecycle({
     routeName: "moderation",
     context: {
       path: "/comments/moderation",
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (o, context) => {
-      if (o.onBeforeModerationPageRendered) {
-        return o.onBeforeModerationPageRendered(context);
-      }
-      return true;
-    }
+    overrides
   });
-  return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(
-    ModerationPageInternal,
-    {
-      apiBaseURL: overrides.apiBaseURL,
-      apiBasePath: overrides.apiBasePath,
-      headers: overrides.headers,
-      localization: loc
-    }
-  ) });
+  return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(ModerationPageInternal, { localization: overrides.localization }) });
 }
 
 export { ModerationPageComponent };

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

@@ -5,7 +5,6 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const components = require('@btst/stack/client/components');
 const context = require('@btst/stack/context');
-const index = require('../../localization/index.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
 
@@ -34,31 +33,19 @@ function UserCommentsPageComponent() {
 }
 function UserCommentsPageWrapper() {
   const overrides = context.usePluginOverrides("comments");
-  const loc = { ...index.COMMENTS_LOCALIZATION, ...overrides.localization };
   useRouteLifecycle.useRouteLifecycle({
     routeName: "userComments",
     context: {
       path: "/comments",
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (o, context) => {
-      if (o.onBeforeUserCommentsPageRendered) {
-        const result = o.onBeforeUserCommentsPageRendered(context);
-        return result === false ? false : true;
-      }
-      return true;
-    }
+    overrides
   });
   return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
     UserCommentsPageInternal,
     {
-      apiBaseURL: overrides.apiBaseURL,
-      apiBasePath: overrides.apiBasePath,
-      headers: overrides.headers,
-      currentUserId: overrides.currentUserId,
       resourceLinks: overrides.resourceLinks,
-      localization: loc
+      localization: overrides.localization
     }
   ) });
 }