@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -12,14 +12,18 @@ 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 context = require('@btst/stack/context');
+const client = require('@btst/stack/client');
+const context$1 = 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');
 
+const LIST_STATE_SCHEMA = {
+  tab: { type: "string", default: "pending" },
+  page: { type: "number", default: 1 }
+};
 function StatusBadge({ status }) {
   const variants = {
     pending: "secondary",
@@ -28,28 +32,32 @@ function StatusBadge({ status }) {
   };
   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);
+function ModerationPage({ localization }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { api } = context.useStack();
+  const [listState, setListState] = client.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] = React.useState(/* @__PURE__ */ new Set());
   const [viewComment, setViewComment] = React.useState(
     null
   );
   const [deleteIds, setDeleteIds] = React.useState([]);
-  const config = { apiBaseURL, apiBasePath, headers };
+  const config = {
+    apiBaseURL: api?.baseURL ?? "",
+    apiBasePath: api?.basePath ?? ""
+  };
   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({
+  context$1.useRegisterPageAIContext({
     routeName: "comments-moderation",
     pageDescription: `${total} ${activeTab} comments in the moderation queue.
 
@@ -80,35 +88,51 @@ ${comments.slice(0, 5).map(
   const handleApprove = async (id) => {
     try {
       await updateStatus.mutateAsync({ id, status: "approved" });
-      sonner.toast.success(loc.COMMENTS_MODERATION_TOAST_APPROVED);
+      notify.success(
+        localization?.COMMENTS_MODERATION_TOAST_APPROVED ?? t("comments.moderation.toastApproved", "Comment approved")
+      );
       await refetch();
     } catch {
-      sonner.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" });
-      sonner.toast.success(loc.COMMENTS_MODERATION_TOAST_SPAM);
+      notify.success(
+        localization?.COMMENTS_MODERATION_TOAST_SPAM ?? t("comments.moderation.toastSpam", "Marked as spam")
+      );
       await refetch();
     } catch {
-      sonner.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)));
-      sonner.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 {
-      sonner.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 () => {
@@ -117,45 +141,46 @@ ${comments.slice(0, 5).map(
       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)
-        )
+      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 {
-      sonner.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__ */ 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("h1", { className: "text-2xl font-bold", children: localization?.COMMENTS_MODERATION_TITLE ?? t("comments.moderation.title", "Comment Moderation") }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       tabs.Tabs,
       {
         value: activeTab,
         onValueChange: (v) => {
-          setActiveTab(v);
-          setCurrentPage(1);
+          setListState({ tab: v, page: 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 })
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "pending", "data-testid": "tab-pending", children: localization?.COMMENTS_MODERATION_TAB_PENDING ?? t("comments.moderation.tabPending", "Pending") }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "approved", "data-testid": "tab-approved", children: localization?.COMMENTS_MODERATION_TAB_APPROVED ?? t("comments.moderation.tabApproved", "Approved") }),
+          /* @__PURE__ */ jsxRuntime.jsx(tabs.TabsTrigger, { value: "spam", "data-testid": "tab-spam", children: localization?.COMMENTS_MODERATION_TAB_SPAM ?? t("comments.moderation.tabSpam", "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(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(context.CanAccess, { resource: "comments:comment", action: "moderate", children: /* @__PURE__ */ jsxRuntime.jsxs(
         button.Button,
         {
           size: "sm",
@@ -164,11 +189,11 @@ ${comments.slice(0, 5).map(
           disabled: updateStatus.isPending,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.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__ */ jsxRuntime.jsxs(
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(context.CanAccess, { resource: "comments:comment", action: "delete", children: /* @__PURE__ */ jsxRuntime.jsxs(
         button.Button,
         {
           size: "sm",
@@ -177,14 +202,14 @@ ${comments.slice(0, 5).map(
           onClick: () => setDeleteIds([...selected]),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.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__ */ 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.jsx("p", { className: "text-sm", children: (localization?.COMMENTS_MODERATION_EMPTY ?? t("comments.moderation.empty", "No {status} comments.")).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: [
@@ -193,14 +218,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__ */ 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.TableHead, { children: localization?.COMMENTS_MODERATION_COL_AUTHOR ?? t("comments.moderation.colAuthor", "Author") }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.COMMENTS_MODERATION_COL_COMMENT ?? t("comments.moderation.colComment", "Comment") }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.COMMENTS_MODERATION_COL_RESOURCE ?? t("comments.moderation.colResource", "Resource") }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.COMMENTS_MODERATION_COL_DATE ?? t("comments.moderation.colDate", "Date") }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-36", children: localization?.COMMENTS_MODERATION_COL_ACTIONS ?? t("comments.moderation.colActions", "Actions") })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsxs(
           table.TableRow,
@@ -213,7 +238,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__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -239,48 +264,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__ */ jsxRuntime.jsx(LucideIcons.Eye, { className: "h-4 w-4" })
                   }
                 ),
                 activeTab !== "approved" && /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
+                  context.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__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "moderate",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.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__ */ jsxRuntime.jsx(LucideIcons.CheckCircle, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 ),
                 activeTab !== "spam" && /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
+                  context.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__ */ jsxRuntime.jsx(LucideIcons.ShieldOff, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "moderate",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.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__ */ jsxRuntime.jsx(LucideIcons.ShieldOff, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  button.Button,
+                  context.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__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" })
+                    resource: "comments:comment",
+                    action: "delete",
+                    params: { id: comment.id },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      button.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__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4" })
+                      }
+                    )
                   }
                 )
               ] }) })
@@ -294,7 +349,7 @@ ${comments.slice(0, 5).map(
         {
           currentPage,
           totalPages,
-          onPageChange: setCurrentPage,
+          onPageChange: (p) => setListState({ page: p }),
           total,
           limit,
           offset
@@ -302,7 +357,7 @@ ${comments.slice(0, 5).map(
       )
     ] }),
     /* @__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 }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: localization?.COMMENTS_MODERATION_DIALOG_TITLE ?? t("comments.moderation.dialogTitle", "Comment Details") }) }),
       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: [
@@ -317,7 +372,7 @@ ${comments.slice(0, 5).map(
         ] }),
         /* @__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.jsx("p", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_RESOURCE ?? t("comments.moderation.dialogResource", "Resource") }),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-mono text-xs", children: [
               viewComment.resourceType,
               "/",
@@ -325,68 +380,92 @@ ${comments.slice(0, 5).map(
             ] })
           ] }),
           /* @__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", { className: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_LIKES ?? t("comments.moderation.dialogLikes", "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: "text-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_REPLY_TO ?? t("comments.moderation.dialogReplyTo", "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-muted-foreground text-xs", children: localization?.COMMENTS_MODERATION_DIALOG_EDITED ?? t("comments.moderation.dialogEdited", "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("p", { className: "text-muted-foreground text-xs mb-1", children: localization?.COMMENTS_MODERATION_DIALOG_BODY ?? t("comments.moderation.dialogBody", "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,
+          viewComment.status !== "approved" && /* @__PURE__ */ jsxRuntime.jsx(
+            context.CanAccess,
             {
-              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
-              ]
+              resource: "comments:comment",
+              action: "moderate",
+              params: { id: viewComment.id },
+              children: /* @__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" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_APPROVE ?? t("comments.moderation.dialogApprove", "Approve")
+                  ]
+                }
+              )
             }
           ),
-          viewComment.status !== "spam" && /* @__PURE__ */ jsxRuntime.jsxs(
-            button.Button,
+          viewComment.status !== "spam" && /* @__PURE__ */ jsxRuntime.jsx(
+            context.CanAccess,
             {
-              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
-              ]
+              resource: "comments:comment",
+              action: "moderate",
+              params: { id: viewComment.id },
+              children: /* @__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" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_MARK_SPAM ?? t("comments.moderation.dialogMarkSpam", "Mark spam")
+                  ]
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            button.Button,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            context.CanAccess,
             {
-              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
-              ]
+              resource: "comments:comment",
+              action: "delete",
+              params: { id: viewComment.id },
+              children: /* @__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" }),
+                    localization?.COMMENTS_MODERATION_DIALOG_DELETE ?? t("comments.moderation.dialogDelete", "Delete")
+                  ]
+                }
+              )
             }
           )
         ] })
@@ -399,21 +478,30 @@ ${comments.slice(0, 5).map(
         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.jsx(alertDialog.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__ */ jsxRuntime.jsx(alertDialog.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__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: loc.COMMENTS_MODERATION_DELETE_CANCEL }),
+            /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.COMMENTS_MODERATION_DELETE_CANCEL ?? t("comments.moderation.deleteCancel", "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
+                children: deleteMutation.isPending ? localization?.COMMENTS_MODERATION_DELETE_DELETING ?? t("comments.moderation.deleteDeleting", "Deleting\u2026") : localization?.COMMENTS_MODERATION_DELETE_CONFIRM ?? t("comments.moderation.deleteConfirm", "Delete")
               }
             )
           ] })