@btst/stack 3.0.0-rc.1 → 3.0.0-rc.3

package/src/plugins/comments/client/components/comment-count.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { MessageSquare } from "lucide-react";
-import { useStack } from "@btst/stack/context";
+import { PermissionAccess } from "@btst/stack/context";
 import { useCommentCount } from "../hooks/use-comments";
+import { commentsPermissions } from "../../permissions";
 
 export interface CommentCountProps {
 	resourceId: string;
@@ -31,11 +32,43 @@ export function CommentCount({
 	status = "approved",
 	className,
 }: CommentCountProps) {
-	const { api } = useStack();
-	const { count, isLoading } = useCommentCount(
-		{ apiBaseURL: api?.baseURL ?? "", apiBasePath: api?.basePath ?? "" },
-		{ resourceId, resourceType, status },
+	const permission =
+		status === "approved"
+			? commentsPermissions.thread.read({
+					scope: "public",
+					resourceId,
+					resourceType,
+				})
+			: commentsPermissions.thread.read({
+					scope: "moderation",
+					status,
+					resourceId,
+					resourceType,
+				});
+	return (
+		<PermissionAccess permission={permission}>
+			<CommentCountValue
+				resourceId={resourceId}
+				resourceType={resourceType}
+				status={status}
+				className={className}
+			/>
+		</PermissionAccess>
 	);
+}
+
+function CommentCountValue({
+	resourceId,
+	resourceType,
+	status,
+	className,
+}: Required<Pick<CommentCountProps, "resourceId" | "resourceType" | "status">> &
+	Pick<CommentCountProps, "className">) {
+	const { count, isLoading } = useCommentCount({
+		resourceId,
+		resourceType,
+		status,
+	});
 
 	if (isLoading) {
 		return (

package/src/plugins/comments/client/components/comment-thread.tsx

@@ -33,11 +33,15 @@ import {
 } from "../hooks/use-comments";
 import type { CommentsLocalization } from "../localization";
 import {
+	PermissionAccess,
+	useNotify,
 	usePluginOverrides,
 	useStack,
 	useTranslate,
 } from "@btst/stack/context";
 import type { CommentsPluginOverrides } from "../overrides";
+import { COMMENTS_PLUGIN_ID } from "../constants";
+import { commentsPermissions } from "../../permissions";
 
 /** Custom input component props */
 export interface CommentInputProps {
@@ -69,6 +73,11 @@ export interface CommentThreadProps {
 	className?: string;
 	/** Localization strings — defaults to English */
 	localization?: Partial<CommentsLocalization>;
+	/**
+	 * Sign-in URL for unauthenticated users in this thread.
+	 * Overrides the `loginPath` from the nearest `StackProvider`.
+	 */
+	loginHref?: string;
 	/**
 	 * Number of top-level comments to load per page.
 	 * Clicking "Load more" fetches the next page. Default: 10.
@@ -100,10 +109,7 @@ export interface CommentThreadProps {
 }
 
 type ResolvedCommentThreadProps = CommentThreadProps & {
-	apiBaseURL: string;
-	apiBasePath: string;
 	currentUserId?: string;
-	loginHref?: string;
 };
 
 const DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (
@@ -115,8 +121,6 @@ const DEFAULT_RENDERER: ComponentType<CommentRendererProps> = ({ body }) => (
 function CommentCard({
 	comment,
 	currentUserId,
-	apiBaseURL,
-	apiBasePath,
 	resourceId,
 	resourceType,
 	components,
@@ -128,8 +132,6 @@ function CommentCard({
 }: {
 	comment: SerializedComment;
 	currentUserId?: string;
-	apiBaseURL: string;
-	apiBasePath: string;
 	resourceId: string;
 	resourceType: string;
 	components?: CommentComponents;
@@ -142,14 +144,14 @@ function CommentCard({
 	allowEditing: boolean;
 }) {
 	const t = useTranslate();
+	const notify = useNotify();
+	const { auth } = useStack();
 	const [isEditing, setIsEditing] = useState(false);
 	const Renderer = components?.Renderer ?? DEFAULT_RENDERER;
 
-	const config = { apiBaseURL, apiBasePath };
-
-	const updateMutation = useUpdateComment(config);
-	const deleteMutation = useDeleteComment(config);
-	const toggleLikeMutation = useToggleLike(config, {
+	const updateMutation = useUpdateComment();
+	const deleteMutation = useDeleteComment();
+	const toggleLikeMutation = useToggleLike({
 		resourceId,
 		resourceType,
 		parentId: comment.parentId,
@@ -171,15 +173,19 @@ function CommentCard({
 			localization?.COMMENTS_DELETE_CONFIRM ??
 			t("comments.thread.deleteConfirm", "Delete this comment?");
 		if (!window.confirm(confirmMessage)) return;
-		await deleteMutation.mutateAsync(comment.id);
+		try {
+			await deleteMutation.mutateAsync(comment.id);
+		} catch {
+			notify.error(
+				localization?.COMMENTS_THREAD_TOAST_DELETE_ERROR ??
+					t("comments.thread.toastDeleteError", "Failed to delete comment"),
+			);
+		}
 	};
 
 	const handleLike = () => {
 		if (!currentUserId) return;
-		toggleLikeMutation.mutate({
-			commentId: comment.id,
-			authorId: currentUserId,
-		});
+		toggleLikeMutation.mutate({ commentId: comment.id });
 	};
 
 	return (
@@ -248,61 +254,89 @@ function CommentCard({
 				{!isEditing && (
 					<div className="flex items-center gap-1 mt-2">
 						{currentUserId && isApproved && (
-							<Button
-								variant="ghost"
-								size="sm"
-								className="h-7 px-2 text-xs gap-1"
-								onClick={handleLike}
-								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"
+							<PermissionAccess
+								permission={commentsPermissions.comment.react({
+									commentId: comment.id,
+									status: comment.status,
+								})}
 							>
-								<Heart
-									className={`h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`}
-								/>
-								{comment.likes > 0 && (
-									<span data-testid="like-count">{comment.likes}</span>
-								)}
-							</Button>
+								<Button
+									variant="ghost"
+									size="sm"
+									className="h-7 px-2 text-xs gap-1"
+									onClick={handleLike}
+									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"
+								>
+									<Heart
+										className={`h-3.5 w-3.5 ${comment.isLikedByCurrentUser ? "fill-current text-red-500" : ""}`}
+									/>
+									{comment.likes > 0 && (
+										<span data-testid="like-count">{comment.likes}</span>
+									)}
+								</Button>
+							</PermissionAccess>
 						)}
 
 						{allowPosting &&
 							currentUserId &&
 							!comment.parentId &&
 							isApproved && (
-								<Button
-									variant="ghost"
-									size="sm"
-									className="h-7 px-2 text-xs"
-									onClick={() => onReplyClick(comment.id)}
-									data-testid="reply-button"
+								<PermissionAccess
+									permission={commentsPermissions.thread.createComment({
+										resourceId,
+										resourceType,
+										parentId: comment.id,
+									})}
 								>
-									<MessageSquare className="h-3.5 w-3.5 mr-1" />
-									{localization?.COMMENTS_REPLY_BUTTON ??
-										t("comments.thread.replyButton", "Reply")}
-								</Button>
-							)}
-
-						{isOwn && (
-							<>
-								{allowEditing && isApproved && (
 									<Button
 										variant="ghost"
 										size="sm"
 										className="h-7 px-2 text-xs"
-										onClick={() => setIsEditing(true)}
-										data-testid="edit-button"
+										onClick={() => onReplyClick(comment.id)}
+										data-testid="reply-button"
 									>
-										<Pencil className="h-3.5 w-3.5 mr-1" />
-										{localization?.COMMENTS_EDIT_BUTTON ??
-											t("comments.thread.editButton", "Edit")}
+										<MessageSquare className="h-3.5 w-3.5 mr-1" />
+										{localization?.COMMENTS_REPLY_BUTTON ??
+											t("comments.thread.replyButton", "Reply")}
 									</Button>
-								)}
+								</PermissionAccess>
+							)}
+
+						{allowEditing && isApproved && (isOwn || auth) && (
+							<PermissionAccess
+								permission={commentsPermissions.comment.edit({
+									commentId: comment.id,
+									authorId: comment.authorId,
+									status: comment.status,
+								})}
+							>
+								<Button
+									variant="ghost"
+									size="sm"
+									className="h-7 px-2 text-xs"
+									onClick={() => setIsEditing(true)}
+									data-testid="edit-button"
+								>
+									<Pencil className="h-3.5 w-3.5 mr-1" />
+									{localization?.COMMENTS_EDIT_BUTTON ??
+										t("comments.thread.editButton", "Edit")}
+								</Button>
+							</PermissionAccess>
+						)}
+						{(isOwn || auth) && (
+							<PermissionAccess
+								permission={commentsPermissions.comment.delete({
+									commentId: comment.id,
+									authorId: comment.authorId,
+								})}
+							>
 								<Button
 									variant="ghost"
 									size="sm"
@@ -315,7 +349,7 @@ function CommentCard({
 									{localization?.COMMENTS_DELETE_BUTTON ??
 										t("comments.thread.deleteButton", "Delete")}
 								</Button>
-							</>
+							</PermissionAccess>
 						)}
 					</div>
 				)}
@@ -333,8 +367,6 @@ const OPTIMISTIC_ID_PREFIX = "optimistic-";
 function CommentThreadInner({
 	resourceId,
 	resourceType,
-	apiBaseURL,
-	apiBasePath,
 	currentUserId,
 	loginHref,
 	components,
@@ -348,7 +380,7 @@ function CommentThreadInner({
 	const overrides = usePluginOverrides<
 		CommentsPluginOverrides,
 		Partial<CommentsPluginOverrides>
-	>("comments", {});
+	>(COMMENTS_PLUGIN_ID, {});
 	const pageSize =
 		pageSizeProp ?? overrides.defaultCommentPageSize ?? DEFAULT_PAGE_SIZE;
 	const allowPosting = allowPostingProp ?? overrides.allowPosting ?? true;
@@ -363,8 +395,6 @@ function CommentThreadInner({
 	);
 	const [replyOffsets, setReplyOffsets] = useState<Record<string, number>>({});
 
-	const config = { apiBaseURL, apiBasePath };
-
 	const {
 		comments,
 		total,
@@ -373,7 +403,7 @@ function CommentThreadInner({
 		hasMore,
 		isLoadingMore,
 		queryKey: threadQueryKey,
-	} = useInfiniteComments(config, {
+	} = useInfiniteComments({
 		resourceId,
 		resourceType,
 		status: "approved",
@@ -383,7 +413,7 @@ function CommentThreadInner({
 		pageSize,
 	});
 
-	const postMutation = usePostComment(config, {
+	const postMutation = usePostComment({
 		resourceId,
 		resourceType,
 		currentUserId,
@@ -448,8 +478,6 @@ function CommentThreadInner({
 							<CommentCard
 								comment={comment}
 								currentUserId={currentUserId}
-								apiBaseURL={apiBaseURL}
-								apiBasePath={apiBasePath}
 								resourceId={resourceId}
 								resourceType={resourceType}
 								components={components}
@@ -467,8 +495,6 @@ function CommentThreadInner({
 								parentId={comment.id}
 								resourceId={resourceId}
 								resourceType={resourceType}
-								apiBaseURL={apiBaseURL}
-								apiBasePath={apiBasePath}
 								currentUserId={currentUserId}
 								components={components}
 								localization={localization}
@@ -501,18 +527,26 @@ function CommentThreadInner({
 
 							{allowPosting && replyingTo === comment.id && currentUserId && (
 								<div className="pl-11 pb-3">
-									<CommentForm
-										authorId={currentUserId}
-										parentId={comment.id}
-										submitLabel={
-											localization?.COMMENTS_FORM_POST_REPLY ??
-											t("comments.form.postReply", "Post reply")
-										}
-										InputComponent={components?.Input}
-										localization={localization}
-										onSubmit={(body) => handleReply(body, comment.id)}
-										onCancel={() => setReplyingTo(null)}
-									/>
+									<PermissionAccess
+										permission={commentsPermissions.thread.createComment({
+											resourceId,
+											resourceType,
+											parentId: comment.id,
+										})}
+									>
+										<CommentForm
+											authorId={currentUserId}
+											parentId={comment.id}
+											submitLabel={
+												localization?.COMMENTS_FORM_POST_REPLY ??
+												t("comments.form.postReply", "Post reply")
+											}
+											InputComponent={components?.Input}
+											localization={localization}
+											onSubmit={(body) => handleReply(body, comment.id)}
+											onCancel={() => setReplyingTo(null)}
+										/>
+									</PermissionAccess>
 								</div>
 							)}
 						</div>
@@ -551,16 +585,24 @@ function CommentThreadInner({
 
 					{currentUserId ? (
 						<div data-testid="comment-form-wrapper">
-							<CommentForm
-								authorId={currentUserId}
-								submitLabel={
-									localization?.COMMENTS_FORM_POST_COMMENT ??
-									t("comments.form.postComment", "Post comment")
-								}
-								InputComponent={components?.Input}
-								localization={localization}
-								onSubmit={handlePost}
-							/>
+							<PermissionAccess
+								permission={commentsPermissions.thread.createComment({
+									resourceId,
+									resourceType,
+									parentId: null,
+								})}
+							>
+								<CommentForm
+									authorId={currentUserId}
+									submitLabel={
+										localization?.COMMENTS_FORM_POST_COMMENT ??
+										t("comments.form.postComment", "Post comment")
+									}
+									InputComponent={components?.Input}
+									localization={localization}
+									onSubmit={handlePost}
+								/>
+							</PermissionAccess>
 						</div>
 					) : (
 						<div
@@ -599,8 +641,6 @@ function RepliesSection({
 	parentId,
 	resourceId,
 	resourceType,
-	apiBaseURL,
-	apiBasePath,
 	currentUserId,
 	components,
 	localization,
@@ -613,8 +653,6 @@ function RepliesSection({
 	parentId: string;
 	resourceId: string;
 	resourceType: string;
-	apiBaseURL: string;
-	apiBasePath: string;
 	currentUserId?: string;
 	components?: CommentComponents;
 	localization?: Partial<CommentsLocalization>;
@@ -626,7 +664,6 @@ function RepliesSection({
 	allowEditing: boolean;
 }) {
 	const t = useTranslate();
-	const config = { apiBaseURL, apiBasePath };
 	const [replyOffset, setReplyOffset] = useState(0);
 	const [loadedReplies, setLoadedReplies] = useState<SerializedComment[]>([]);
 	// Only fetch reply bodies once the section is expanded.
@@ -635,7 +672,6 @@ function RepliesSection({
 		total: repliesTotal,
 		isFetching: isFetchingReplies,
 	} = useComments(
-		config,
 		{
 			resourceId,
 			resourceType,
@@ -739,8 +775,6 @@ function RepliesSection({
 							key={reply.id}
 							comment={reply}
 							currentUserId={currentUserId}
-							apiBaseURL={apiBaseURL}
-							apiBasePath={apiBasePath}
 							resourceId={resourceId}
 							resourceType={resourceType}
 							components={components}
@@ -782,7 +816,8 @@ function RepliesSection({
  * Embeddable threaded comment section.
  *
  * Lazy-mounts when the component scrolls into the viewport (via WhenVisible).
- * Uses the top-level StackProvider API and auth configuration.
+ * Resolves data transport through the Comments plugin endpoint and identity /
+ * sign-in behavior through the StackProvider auth service.
  *
  * @example
  * ```tsx
@@ -835,25 +870,32 @@ function CommentThreadSkeleton() {
 }
 
 export function CommentThread(props: CommentThreadProps) {
-	const { api, auth } = useStack();
+	const { auth } = useStack();
 	const { currentUserId, isPending: isIdentityPending } = useCurrentUserId();
 	const resolvedProps: ResolvedCommentThreadProps = {
 		...props,
-		apiBaseURL: api?.baseURL ?? "",
-		apiBasePath: api?.basePath ?? "",
 		currentUserId,
-		loginHref: auth?.loginPath,
+		loginHref: props.loginHref ?? auth?.loginPath,
 	};
 
 	return (
 		<div id="comments" className={props.className}>
-			<WhenVisible fallback={<CommentThreadSkeleton />} rootMargin="300px">
-				{isIdentityPending ? (
-					<CommentThreadSkeleton />
-				) : (
-					<CommentThreadInner {...resolvedProps} />
-				)}
-			</WhenVisible>
+			<PermissionAccess
+				permission={commentsPermissions.thread.read({
+					scope: "public",
+					resourceId: props.resourceId,
+					resourceType: props.resourceType,
+				})}
+				loading={<CommentThreadSkeleton />}
+			>
+				<WhenVisible fallback={<CommentThreadSkeleton />} rootMargin="300px">
+					{isIdentityPending ? (
+						<CommentThreadSkeleton />
+					) : (
+						<CommentThreadInner {...resolvedProps} />
+					)}
+				</WhenVisible>
+			</PermissionAccess>
 		</div>
 	);
 }