@btst/stack 2.6.2 → 2.8.0

package/dist/packages/stack/src/plugins/comments/client/components/comment-thread.mjs

@@ -0,0 +1,538 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { WhenVisible } from '../../../../../../ui/src/components/when-visible.mjs';
+import { Avatar, AvatarImage, AvatarFallback } from '../../../../../../ui/src/components/avatar.mjs';
+import { Badge } from '../../../../../../ui/src/components/badge.mjs';
+import { Button } from '../../../../../../ui/src/components/button.mjs';
+import { Separator } from '../../../../../../ui/src/components/separator.mjs';
+import { MessageSquare, LogIn, Heart, Pencil, X, ChevronUp, ChevronDown } from 'lucide-react';
+import { formatDistanceToNow } from 'date-fns';
+import { getInitials } from '../utils.mjs';
+import { CommentForm } from './comment-form.mjs';
+import { useInfiniteComments, usePostComment, useUpdateComment, useDeleteComment, useToggleLike, useComments } from '../hooks/use-comments.mjs';
+import { COMMENTS_LOCALIZATION } from '../localization/index.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+
+const DEFAULT_RENDERER = ({ body }) => /* @__PURE__ */ jsx("p", { className: "text-sm whitespace-pre-wrap wrap-break-word", children: body });
+function CommentCard({
+  comment,
+  currentUserId,
+  apiBaseURL,
+  apiBasePath,
+  resourceId,
+  resourceType,
+  headers,
+  components,
+  loc,
+  infiniteKey,
+  onReplyClick,
+  allowPosting,
+  allowEditing
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
+  const config = { apiBaseURL, apiBasePath, headers };
+  const updateMutation = useUpdateComment(config);
+  const deleteMutation = useDeleteComment(config);
+  const toggleLikeMutation = useToggleLike(config, {
+    resourceId,
+    resourceType,
+    parentId: comment.parentId,
+    currentUserId,
+    infiniteKey
+  });
+  const isOwn = currentUserId && comment.authorId === currentUserId;
+  const isPending = comment.status === "pending";
+  const isApproved = comment.status === "approved";
+  const handleEdit = async (body) => {
+    await updateMutation.mutateAsync({ id: comment.id, body });
+    setIsEditing(false);
+  };
+  const handleDelete = async () => {
+    if (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;
+    await deleteMutation.mutateAsync(comment.id);
+  };
+  const handleLike = () => {
+    if (!currentUserId) return;
+    toggleLikeMutation.mutate({
+      commentId: comment.id,
+      authorId: currentUserId
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex gap-3 py-3",
+      "data-testid": "comment-card",
+      "data-comment-id": comment.id,
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 shrink-0 mt-0.5", children: [
+          comment.resolvedAvatarUrl && /* @__PURE__ */ jsx(
+            AvatarImage,
+            {
+              src: comment.resolvedAvatarUrl,
+              alt: comment.resolvedAuthorName
+            }
+          ),
+          /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(comment.resolvedAuthorName) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: comment.resolvedAuthorName }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatDistanceToNow(new Date(comment.createdAt), {
+              addSuffix: true
+            }) }),
+            comment.editedAt && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground italic", children: loc.COMMENTS_EDITED_BADGE }),
+            isPending && isOwn && /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "secondary",
+                className: "text-xs",
+                "data-testid": "pending-badge",
+                children: loc.COMMENTS_PENDING_BADGE
+              }
+            )
+          ] }),
+          isEditing ? /* @__PURE__ */ jsx(
+            CommentForm,
+            {
+              authorId: currentUserId ?? "",
+              initialBody: comment.body,
+              submitLabel: loc.COMMENTS_SAVE_EDIT,
+              InputComponent: components?.Input,
+              localization: loc,
+              onSubmit: handleEdit,
+              onCancel: () => setIsEditing(false)
+            }
+          ) : /* @__PURE__ */ jsx(Renderer, { body: comment.body }),
+          !isEditing && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-2", children: [
+            currentUserId && isApproved && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs gap-1",
+                onClick: handleLike,
+                "aria-label": comment.isLikedByCurrentUser ? loc.COMMENTS_UNLIKE_ARIA : loc.COMMENTS_LIKE_ARIA,
+                "data-testid": "like-button",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Heart,
+                    {
+                      className: `h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`
+                    }
+                  ),
+                  comment.likes > 0 && /* @__PURE__ */ jsx("span", { "data-testid": "like-count", children: comment.likes })
+                ]
+              }
+            ),
+            allowPosting && currentUserId && !comment.parentId && isApproved && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs",
+                onClick: () => onReplyClick(comment.id),
+                "data-testid": "reply-button",
+                children: [
+                  /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 mr-1" }),
+                  loc.COMMENTS_REPLY_BUTTON
+                ]
+              }
+            ),
+            isOwn && /* @__PURE__ */ jsxs(Fragment, { children: [
+              allowEditing && isApproved && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs",
+                  onClick: () => setIsEditing(true),
+                  "data-testid": "edit-button",
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5 mr-1" }),
+                    loc.COMMENTS_EDIT_BUTTON
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs text-destructive hover:text-destructive",
+                  onClick: handleDelete,
+                  disabled: deleteMutation.isPending,
+                  "data-testid": "delete-button",
+                  children: [
+                    /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 mr-1" }),
+                    loc.COMMENTS_DELETE_BUTTON
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const DEFAULT_PAGE_SIZE = 100;
+const REPLIES_PAGE_SIZE = 20;
+const OPTIMISTIC_ID_PREFIX = "optimistic-";
+function CommentThreadInner({
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  currentUserId,
+  loginHref,
+  headers,
+  components,
+  localization: localizationProp,
+  pageSize: pageSizeProp,
+  allowPosting: allowPostingProp,
+  allowEditing: allowEditingProp
+}) {
+  const overrides = usePluginOverrides("comments", {});
+  const pageSize = pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
+  const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
+  const allowEditing = allowEditingProp ?? overrides.allowEditing ?? true;
+  const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+  const [replyingTo, setReplyingTo] = useState(null);
+  const [expandedReplies, setExpandedReplies] = useState(
+    /* @__PURE__ */ new Set()
+  );
+  const [replyOffsets, setReplyOffsets] = useState({});
+  const config = { apiBaseURL, apiBasePath, headers };
+  const {
+    comments,
+    total,
+    isLoading,
+    loadMore,
+    hasMore,
+    isLoadingMore,
+    queryKey: threadQueryKey
+  } = useInfiniteComments(config, {
+    resourceId,
+    resourceType,
+    status: "approved",
+    parentId: null,
+    currentUserId,
+    pageSize
+  });
+  const postMutation = usePostComment(config, {
+    resourceId,
+    resourceType,
+    currentUserId,
+    infiniteKey: threadQueryKey,
+    pageSize
+  });
+  const handlePost = async (body) => {
+    if (!currentUserId) return;
+    await postMutation.mutateAsync({
+      body,
+      parentId: null
+    });
+  };
+  const handleReply = async (body, parentId) => {
+    if (!currentUserId) return;
+    await postMutation.mutateAsync({
+      body,
+      parentId,
+      limit: REPLIES_PAGE_SIZE,
+      offset: replyOffsets[parentId] ?? 0
+    });
+    setReplyingTo(null);
+    setExpandedReplies((prev) => new Set(prev).add(parentId));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", "data-testid": "comment-thread", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsx(MessageSquare, { className: "h-5 w-5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: total === 0 ? loc.COMMENTS_TITLE : `${total} ${loc.COMMENTS_TITLE}` })
+    ] }),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: [1, 2].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 py-3 animate-pulse", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-full rounded bg-muted" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-3/4 rounded bg-muted" })
+      ] })
+    ] }, i)) }),
+    !isLoading && comments.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: comments.map((comment) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        CommentCard,
+        {
+          comment,
+          currentUserId,
+          apiBaseURL,
+          apiBasePath,
+          resourceId,
+          resourceType,
+          headers,
+          components,
+          loc,
+          infiniteKey: threadQueryKey,
+          onReplyClick: (parentId) => {
+            setReplyingTo(replyingTo === parentId ? null : parentId);
+          },
+          allowPosting,
+          allowEditing
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RepliesSection,
+        {
+          parentId: comment.id,
+          resourceId,
+          resourceType,
+          apiBaseURL,
+          apiBasePath,
+          currentUserId,
+          headers,
+          components,
+          loc,
+          expanded: expandedReplies.has(comment.id),
+          replyCount: comment.replyCount,
+          onToggle: () => {
+            const isExpanded = expandedReplies.has(comment.id);
+            if (!isExpanded) {
+              setReplyOffsets((prev) => {
+                if ((prev[comment.id] ?? 0) === 0) return prev;
+                return { ...prev, [comment.id]: 0 };
+              });
+            }
+            setExpandedReplies((prev) => {
+              const next = new Set(prev);
+              next.has(comment.id) ? next.delete(comment.id) : next.add(comment.id);
+              return next;
+            });
+          },
+          onOffsetChange: (offset) => {
+            setReplyOffsets((prev) => {
+              if (prev[comment.id] === offset) return prev;
+              return { ...prev, [comment.id]: offset };
+            });
+          },
+          allowEditing
+        }
+      ),
+      allowPosting && replyingTo === comment.id && currentUserId && /* @__PURE__ */ jsx("div", { className: "pl-11 pb-3", children: /* @__PURE__ */ jsx(
+        CommentForm,
+        {
+          authorId: currentUserId,
+          parentId: comment.id,
+          submitLabel: loc.COMMENTS_FORM_POST_REPLY,
+          InputComponent: components?.Input,
+          localization: loc,
+          onSubmit: (body) => handleReply(body, comment.id),
+          onCancel: () => setReplyingTo(null)
+        }
+      ) })
+    ] }, comment.id)) }),
+    !isLoading && comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: loc.COMMENTS_EMPTY }),
+    hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => loadMore(),
+        disabled: isLoadingMore,
+        "data-testid": "load-more-comments",
+        children: isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+      }
+    ) }),
+    allowPosting && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, { className: "my-4" }),
+      currentUserId ? /* @__PURE__ */ jsx("div", { "data-testid": "comment-form-wrapper", children: /* @__PURE__ */ jsx(
+        CommentForm,
+        {
+          authorId: currentUserId,
+          submitLabel: loc.COMMENTS_FORM_POST_COMMENT,
+          InputComponent: components?.Input,
+          localization: loc,
+          onSubmit: handlePost
+        }
+      ) }) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-col items-center gap-3 py-6 text-center border rounded-lg bg-muted/30",
+          "data-testid": "login-prompt",
+          children: [
+            /* @__PURE__ */ jsx(LogIn, { className: "h-6 w-6 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: loc.COMMENTS_LOGIN_PROMPT }),
+            loginHref && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: loginHref,
+                className: "inline-flex items-center gap-1 text-sm font-medium text-primary underline underline-offset-4",
+                "data-testid": "login-link",
+                children: loc.COMMENTS_LOGIN_LINK
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function RepliesSection({
+  parentId,
+  resourceId,
+  resourceType,
+  apiBaseURL,
+  apiBasePath,
+  currentUserId,
+  headers,
+  components,
+  loc,
+  expanded,
+  replyCount,
+  onToggle,
+  onOffsetChange,
+  allowEditing
+}) {
+  const config = { apiBaseURL, apiBasePath, headers };
+  const [replyOffset, setReplyOffset] = useState(0);
+  const [loadedReplies, setLoadedReplies] = useState([]);
+  const {
+    comments: repliesPage,
+    total: repliesTotal,
+    isFetching: isFetchingReplies
+  } = useComments(
+    config,
+    {
+      resourceId,
+      resourceType,
+      parentId,
+      status: "approved",
+      currentUserId,
+      limit: REPLIES_PAGE_SIZE,
+      offset: replyOffset
+    },
+    { enabled: expanded }
+  );
+  useEffect(() => {
+    if (expanded) {
+      setReplyOffset(0);
+      setLoadedReplies([]);
+    }
+  }, [expanded, parentId]);
+  useEffect(() => {
+    onOffsetChange(replyOffset);
+  }, [onOffsetChange, replyOffset]);
+  useEffect(() => {
+    if (!expanded) return;
+    setLoadedReplies((prev) => {
+      const byId = new Map(prev.map((item) => [item.id, item]));
+      for (const reply of repliesPage) {
+        byId.set(reply.id, reply);
+      }
+      const currentPageIds = new Set(repliesPage.map((reply) => reply.id));
+      const currentPageRealReplies = repliesPage.filter(
+        (reply) => !reply.id.startsWith(OPTIMISTIC_ID_PREFIX)
+      );
+      return Array.from(byId.values()).filter((reply) => {
+        if (!reply.id.startsWith(OPTIMISTIC_ID_PREFIX)) return true;
+        if (currentPageIds.has(reply.id)) return true;
+        return !currentPageRealReplies.some(
+          (realReply) => realReply.parentId === reply.parentId && realReply.authorId === reply.authorId && realReply.body === reply.body
+        );
+      });
+    });
+  }, [expanded, repliesPage]);
+  if (replyCount === 0 && !expanded) return null;
+  const displayCount = expanded ? loadedReplies.length || replyCount : replyCount;
+  const effectiveReplyTotal = repliesTotal || replyCount;
+  const hasMoreReplies = loadedReplies.length < effectiveReplyTotal;
+  return /* @__PURE__ */ jsxs("div", { className: "pl-11", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: "h-7 px-2 text-xs mb-1",
+        onClick: onToggle,
+        "data-testid": expanded ? "hide-replies-button" : "show-replies-button",
+        children: [
+          expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3 mr-1" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 mr-1" }),
+          expanded ? loc.COMMENTS_HIDE_REPLIES : `${displayCount} ${displayCount === 1 ? loc.COMMENTS_REPLIES_SINGULAR : loc.COMMENTS_REPLIES_PLURAL}`
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "border-l-2 border-border pl-3 space-y-0",
+        "data-testid": "replies-list",
+        children: [
+          loadedReplies.map((reply) => /* @__PURE__ */ jsx(
+            CommentCard,
+            {
+              comment: reply,
+              currentUserId,
+              apiBaseURL,
+              apiBasePath,
+              resourceId,
+              resourceType,
+              headers,
+              components,
+              loc,
+              onReplyClick: () => {
+              },
+              allowPosting: false,
+              allowEditing
+            },
+            reply.id
+          )),
+          hasMoreReplies && /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-7 px-2 text-xs",
+              onClick: () => setReplyOffset((prev) => prev + REPLIES_PAGE_SIZE),
+              disabled: isFetchingReplies,
+              "data-testid": "load-more-replies",
+              children: isFetchingReplies ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function CommentThreadSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded bg-muted animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-24 rounded bg-muted animate-pulse" })
+    ] }),
+    [1, 2, 3].map((i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-3 py-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-muted shrink-0 mt-0.5 animate-pulse" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsx("div", { className: "h-3 w-14 rounded bg-muted animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-full rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-4/5 rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1 mt-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-7 w-12 rounded bg-muted animate-pulse" }),
+          /* @__PURE__ */ jsx("div", { className: "h-7 w-14 rounded bg-muted animate-pulse" })
+        ] })
+      ] })
+    ] }, i)),
+    /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-muted my-4" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-20 w-full rounded-md border bg-muted animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx("div", { className: "h-9 w-28 rounded-md bg-muted animate-pulse" }) })
+    ] })
+  ] });
+}
+function CommentThread(props) {
+  return /* @__PURE__ */ jsx("div", { id: "comments", className: props.className, children: /* @__PURE__ */ jsx(WhenVisible, { fallback: /* @__PURE__ */ jsx(CommentThreadSkeleton, {}), rootMargin: "300px", children: /* @__PURE__ */ jsx(CommentThreadInner, { ...props }) }) });
+}
+
+export { CommentThread };

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

@@ -0,0 +1,64 @@
+"use client";
+'use strict';
+
+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');
+
+const ModerationPageInternal = React.lazy(
+  () => import('./moderation-page.internal.cjs').then((m) => ({
+    default: m.ModerationPage
+  }))
+);
+function ModerationPageSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl mx-auto space-y-4 animate-pulse", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-64 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-72 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border h-64 bg-muted" })
+  ] });
+}
+function ModerationPageComponent() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/comments/moderation",
+      PageComponent: ModerationPageWrapper,
+      LoadingComponent: ModerationPageSkeleton,
+      onError: (error) => console.error("[btst/comments] Moderation error:", error)
+    }
+  );
+}
+function ModerationPageWrapper() {
+  const overrides = context.usePluginOverrides("comments");
+  const loc = { ...index.COMMENTS_LOCALIZATION, ...overrides.localization };
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "moderation",
+    context: {
+      path: "/comments/moderation",
+      isSSR: typeof window === "undefined"
+    },
+    overrides,
+    beforeRenderHook: (o, context) => {
+      if (o.onBeforeModerationPageRendered) {
+        return o.onBeforeModerationPageRendered(context);
+      }
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ModerationPageInternal,
+    {
+      apiBaseURL: overrides.apiBaseURL,
+      apiBasePath: overrides.apiBasePath,
+      headers: overrides.headers,
+      localization: loc
+    }
+  ) });
+}
+
+exports.ModerationPageComponent = ModerationPageComponent;