@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -8,11 +8,10 @@ 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 { useCurrentUserId, 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';
+import { useStack, useTranslate, 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({
@@ -22,17 +21,17 @@ function CommentCard({
   apiBasePath,
   resourceId,
   resourceType,
-  headers,
   components,
-  loc,
+  localization,
   infiniteKey,
   onReplyClick,
   allowPosting,
   allowEditing
 }) {
+  const t = useTranslate();
   const [isEditing, setIsEditing] = useState(false);
   const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
-  const config = { apiBaseURL, apiBasePath, headers };
+  const config = { apiBaseURL, apiBasePath };
   const updateMutation = useUpdateComment(config);
   const deleteMutation = useDeleteComment(config);
   const toggleLikeMutation = useToggleLike(config, {
@@ -50,7 +49,8 @@ function CommentCard({
     setIsEditing(false);
   };
   const handleDelete = async () => {
-    if (!window.confirm(loc.COMMENTS_DELETE_CONFIRM)) return;
+    const confirmMessage = localization?.COMMENTS_DELETE_CONFIRM ?? t("comments.thread.deleteConfirm", "Delete this comment?");
+    if (!window.confirm(confirmMessage)) return;
     await deleteMutation.mutateAsync(comment.id);
   };
   const handleLike = () => {
@@ -83,14 +83,14 @@ function CommentCard({
             /* @__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 }),
+            comment.editedAt && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground italic", children: localization?.COMMENTS_EDITED_BADGE ?? t("comments.thread.editedBadge", "(edited)") }),
             isPending && isOwn && /* @__PURE__ */ jsx(
               Badge,
               {
                 variant: "secondary",
                 className: "text-xs",
                 "data-testid": "pending-badge",
-                children: loc.COMMENTS_PENDING_BADGE
+                children: localization?.COMMENTS_PENDING_BADGE ?? t("comments.thread.pendingBadge", "Pending approval")
               }
             )
           ] }),
@@ -99,9 +99,9 @@ function CommentCard({
             {
               authorId: currentUserId ?? "",
               initialBody: comment.body,
-              submitLabel: loc.COMMENTS_SAVE_EDIT,
+              submitLabel: localization?.COMMENTS_SAVE_EDIT ?? t("comments.thread.saveEdit", "Save"),
               InputComponent: components?.Input,
-              localization: loc,
+              localization,
               onSubmit: handleEdit,
               onCancel: () => setIsEditing(false)
             }
@@ -114,7 +114,7 @@ function CommentCard({
                 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,
+                "aria-label": comment.isLikedByCurrentUser ? localization?.COMMENTS_UNLIKE_ARIA ?? t("comments.thread.unlikeAria", "Unlike") : localization?.COMMENTS_LIKE_ARIA ?? t("comments.thread.likeAria", "Like"),
                 "data-testid": "like-button",
                 children: [
                   /* @__PURE__ */ jsx(
@@ -137,7 +137,7 @@ function CommentCard({
                 "data-testid": "reply-button",
                 children: [
                   /* @__PURE__ */ jsx(MessageSquare, { className: "h-3.5 w-3.5 mr-1" }),
-                  loc.COMMENTS_REPLY_BUTTON
+                  localization?.COMMENTS_REPLY_BUTTON ?? t("comments.thread.replyButton", "Reply")
                 ]
               }
             ),
@@ -152,7 +152,7 @@ function CommentCard({
                   "data-testid": "edit-button",
                   children: [
                     /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5 mr-1" }),
-                    loc.COMMENTS_EDIT_BUTTON
+                    localization?.COMMENTS_EDIT_BUTTON ?? t("comments.thread.editButton", "Edit")
                   ]
                 }
               ),
@@ -167,7 +167,7 @@ function CommentCard({
                   "data-testid": "delete-button",
                   children: [
                     /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 mr-1" }),
-                    loc.COMMENTS_DELETE_BUTTON
+                    localization?.COMMENTS_DELETE_BUTTON ?? t("comments.thread.deleteButton", "Delete")
                   ]
                 }
               )
@@ -188,7 +188,6 @@ function CommentThreadInner({
   apiBasePath,
   currentUserId,
   loginHref,
-  headers,
   components,
   localization: localizationProp,
   pageSize: pageSizeProp,
@@ -196,18 +195,19 @@ function CommentThreadInner({
   allowEditing: allowEditingProp,
   sort: sortProp
 }) {
+  const t = useTranslate();
   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 sort = sortProp ?? overrides.defaultCommentSort ?? "desc";
-  const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+  const localization = { ...overrides.localization, ...localizationProp };
   const [replyingTo, setReplyingTo] = useState(null);
   const [expandedReplies, setExpandedReplies] = useState(
     /* @__PURE__ */ new Set()
   );
   const [replyOffsets, setReplyOffsets] = useState({});
-  const config = { apiBaseURL, apiBasePath, headers };
+  const config = { apiBaseURL, apiBasePath };
   const {
     comments,
     total,
@@ -254,7 +254,10 @@ function CommentThreadInner({
   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}` })
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm", children: (() => {
+        const title = localization?.COMMENTS_TITLE ?? t("comments.thread.title", "Comments");
+        return total === 0 ? title : `${total} ${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" }),
@@ -274,9 +277,8 @@ function CommentThreadInner({
           apiBasePath,
           resourceId,
           resourceType,
-          headers,
           components,
-          loc,
+          localization,
           infiniteKey: threadQueryKey,
           onReplyClick: (parentId) => {
             setReplyingTo(replyingTo === parentId ? null : parentId);
@@ -294,9 +296,8 @@ function CommentThreadInner({
           apiBaseURL,
           apiBasePath,
           currentUserId,
-          headers,
           components,
-          loc,
+          localization,
           expanded: expandedReplies.has(comment.id),
           replyCount: comment.replyCount,
           onToggle: () => {
@@ -327,15 +328,15 @@ function CommentThreadInner({
         {
           authorId: currentUserId,
           parentId: comment.id,
-          submitLabel: loc.COMMENTS_FORM_POST_REPLY,
+          submitLabel: localization?.COMMENTS_FORM_POST_REPLY ?? t("comments.form.postReply", "Post reply"),
           InputComponent: components?.Input,
-          localization: loc,
+          localization,
           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 }),
+    !isLoading && comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-4 text-center", children: localization?.COMMENTS_EMPTY ?? t("comments.thread.empty", "Be the first to comment.") }),
     hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
       Button,
       {
@@ -344,7 +345,7 @@ function CommentThreadInner({
         onClick: () => loadMore(),
         disabled: isLoadingMore,
         "data-testid": "load-more-comments",
-        children: isLoadingMore ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+        children: isLoadingMore ? localization?.COMMENTS_LOADING_MORE ?? t("comments.thread.loadingMore", "Loading\u2026") : localization?.COMMENTS_LOAD_MORE ?? t("comments.thread.loadMore", "Load more comments")
       }
     ) }),
     allowPosting && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -353,9 +354,9 @@ function CommentThreadInner({
         CommentForm,
         {
           authorId: currentUserId,
-          submitLabel: loc.COMMENTS_FORM_POST_COMMENT,
+          submitLabel: localization?.COMMENTS_FORM_POST_COMMENT ?? t("comments.form.postComment", "Post comment"),
           InputComponent: components?.Input,
-          localization: loc,
+          localization,
           onSubmit: handlePost
         }
       ) }) : /* @__PURE__ */ jsxs(
@@ -365,14 +366,17 @@ function CommentThreadInner({
           "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 }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: localization?.COMMENTS_LOGIN_PROMPT ?? t(
+              "comments.thread.loginPrompt",
+              "Please sign in to leave a comment."
+            ) }),
             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
+                children: localization?.COMMENTS_LOGIN_LINK ?? t("comments.thread.loginLink", "Sign in")
               }
             )
           ]
@@ -388,16 +392,16 @@ function RepliesSection({
   apiBaseURL,
   apiBasePath,
   currentUserId,
-  headers,
   components,
-  loc,
+  localization,
   expanded,
   replyCount,
   onToggle,
   onOffsetChange,
   allowEditing
 }) {
-  const config = { apiBaseURL, apiBasePath, headers };
+  const t = useTranslate();
+  const config = { apiBaseURL, apiBasePath };
   const [replyOffset, setReplyOffset] = useState(0);
   const [loadedReplies, setLoadedReplies] = useState([]);
   const {
@@ -461,7 +465,7 @@ function RepliesSection({
         "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 ? localization?.COMMENTS_HIDE_REPLIES ?? t("comments.thread.hideReplies", "Hide replies") : `${displayCount} ${displayCount === 1 ? localization?.COMMENTS_REPLIES_SINGULAR ?? t("comments.thread.repliesSingular", "reply") : localization?.COMMENTS_REPLIES_PLURAL ?? t("comments.thread.repliesPlural", "replies")}`
         ]
       }
     ),
@@ -480,9 +484,8 @@ function RepliesSection({
               apiBasePath,
               resourceId,
               resourceType,
-              headers,
               components,
-              loc,
+              localization,
               onReplyClick: () => {
               },
               allowPosting: false,
@@ -499,7 +502,7 @@ function RepliesSection({
               onClick: () => setReplyOffset((prev) => prev + REPLIES_PAGE_SIZE),
               disabled: isFetchingReplies,
               "data-testid": "load-more-replies",
-              children: isFetchingReplies ? loc.COMMENTS_LOADING_MORE : loc.COMMENTS_LOAD_MORE
+              children: isFetchingReplies ? localization?.COMMENTS_LOADING_MORE ?? t("comments.thread.loadingMore", "Loading\u2026") : localization?.COMMENTS_LOAD_MORE ?? t("comments.thread.loadMore", "Load more comments")
             }
           ) })
         ]
@@ -536,7 +539,16 @@ function CommentThreadSkeleton() {
   ] });
 }
 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 }) }) });
+  const { api, auth } = useStack();
+  const { currentUserId, isPending: isIdentityPending } = useCurrentUserId();
+  const resolvedProps = {
+    ...props,
+    apiBaseURL: api?.baseURL ?? "",
+    apiBasePath: api?.basePath ?? "",
+    currentUserId,
+    loginHref: props.loginHref ?? auth?.loginPath
+  };
+  return /* @__PURE__ */ jsx("div", { id: "comments", className: props.className, children: /* @__PURE__ */ jsx(WhenVisible, { fallback: /* @__PURE__ */ jsx(CommentThreadSkeleton, {}), rootMargin: "300px", children: isIdentityPending ? /* @__PURE__ */ jsx(CommentThreadSkeleton, {}) : /* @__PURE__ */ jsx(CommentThreadInner, { ...resolvedProps }) }) });
 }
 
 export { CommentThread };

package/dist/packages/stack/src/plugins/comments/client/components/pages/moderation-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');
 
@@ -29,36 +28,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 = 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;
-    }
+    overrides
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    ModerationPageInternal,
-    {
-      apiBaseURL: overrides.apiBaseURL,
-      apiBasePath: overrides.apiBasePath,
-      headers: overrides.headers,
-      localization: loc
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(ModerationPageInternal, { localization: overrides.localization }) });
 }
 
 exports.ModerationPageComponent = ModerationPageComponent;