@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

package/src/plugins/comments/client/components/pages/moderation-page.internal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import {
 	Table,
 	TableBody,
@@ -36,13 +36,9 @@ import {
 } from "@workspace/ui/components/avatar";
 import { CheckCircle, ShieldOff, Trash2, Eye } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
-import {
-	CanAccess,
-	useNotify,
-	useStack,
-	useTranslate,
-} from "@btst/stack/context";
-import { useListState, type ListStateSchema } from "@btst/stack/client";
+import { PermissionAccess, useNotify, useTranslate } from "@btst/stack/context";
+import type { PermissionRequest } from "@btst/stack/authorization";
+import { useListState } from "@btst/stack/client/hooks";
 import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
 import type { SerializedComment, CommentStatus } from "../../../types";
 import {
@@ -53,17 +49,31 @@ import {
 import type { CommentsLocalization } from "../../localization";
 import { getInitials } from "../../utils";
 import { Pagination } from "../shared/pagination";
+import { commentsPermissions } from "../../../permissions";
+import {
+	MODERATION_LIST_STATE_SCHEMA,
+	resolveModerationStatus,
+} from "./moderation-state";
 
 interface ModerationPageProps {
 	localization?: Partial<CommentsLocalization>;
 }
 
-// URL-synced moderation queue state: tab + page survive reloads and are
-// undoable with the back button (discrete changes default to push history).
-const LIST_STATE_SCHEMA = {
-	tab: { type: "string", default: "pending" },
-	page: { type: "number", default: 1 },
-} as const satisfies ListStateSchema;
+function PermissionAccessAll({
+	permissions,
+	children,
+}: {
+	permissions: readonly PermissionRequest[];
+	children: ReactNode;
+}) {
+	const [permission, ...rest] = permissions;
+	if (!permission) return <>{children}</>;
+	return (
+		<PermissionAccess permission={permission}>
+			<PermissionAccessAll permissions={rest}>{children}</PermissionAccessAll>
+		</PermissionAccess>
+	);
+}
 
 function StatusBadge({ status }: { status: CommentStatus }) {
 	const variants: Record<
@@ -80,18 +90,13 @@ function StatusBadge({ status }: { status: CommentStatus }) {
 export function ModerationPage({ localization }: ModerationPageProps) {
 	const t = useTranslate();
 	const notify = useNotify();
-	const { api } = useStack();
-
 	const [listState, setListState] = useListState(
 		"comments-moderation",
-		LIST_STATE_SCHEMA,
+		MODERATION_LIST_STATE_SCHEMA,
 	);
 	// Bound the URL-sourced values: unknown tabs fall back to "pending",
 	// pages clamp to >= 1 so a mangled URL cannot produce an invalid query.
-	const activeTab: CommentStatus =
-		listState.tab === "approved" || listState.tab === "spam"
-			? listState.tab
-			: "pending";
+	const activeTab = resolveModerationStatus(listState.tab);
 	const currentPage = Math.max(1, Math.floor(listState.page) || 1);
 
 	const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -100,19 +105,29 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 	);
 	const [deleteIds, setDeleteIds] = useState<string[]>([]);
 
-	const config = {
-		apiBaseURL: api?.baseURL ?? "",
-		apiBasePath: api?.basePath ?? "",
-	};
-
 	const { comments, total, limit, offset, totalPages, refetch } =
-		useSuspenseModerationComments(config, {
+		useSuspenseModerationComments({
 			status: activeTab,
 			page: currentPage,
 		});
+	const selectedComments = comments.filter((comment) =>
+		selected.has(comment.id),
+	);
+	const hasResolvedSelection =
+		selected.size > 0 && selectedComments.length === selected.size;
+	const deleteComments = comments.filter((comment) =>
+		deleteIds.includes(comment.id),
+	);
+	const hasResolvedDeleteScope =
+		deleteIds.length > 0 && deleteComments.length === deleteIds.length;
+
+	useEffect(() => {
+		setSelected(new Set());
+		setDeleteIds([]);
+	}, [activeTab, currentPage]);
 
-	const updateStatus = useUpdateCommentStatus(config);
-	const deleteMutation = useDeleteComment(config);
+	const updateStatus = useUpdateCommentStatus();
+	const deleteMutation = useDeleteComment();
 
 	// Register AI context with pending comment previews
 	useRegisterPageAIContext({
@@ -212,7 +227,7 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 	};
 
 	const handleBulkApprove = async () => {
-		const ids = [...selected];
+		const ids = selectedComments.map((comment) => comment.id);
 		try {
 			await Promise.all(
 				ids.map((id) => updateStatus.mutateAsync({ id, status: "approved" })),
@@ -276,7 +291,7 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 			</Tabs>
 
 			{/* Bulk actions toolbar */}
-			{selected.size > 0 && (
+			{hasResolvedSelection && (
 				<div className="flex items-center gap-2 p-3 bg-muted rounded-lg">
 					<span className="text-sm text-muted-foreground">
 						{(
@@ -285,7 +300,17 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 						).replace("{n}", String(selected.size))}
 					</span>
 					{activeTab !== "approved" && (
-						<CanAccess resource="comments:comment" action="moderate">
+						<PermissionAccessAll
+							permissions={selectedComments.map((comment) =>
+								commentsPermissions.comment.moderate({
+									commentId: comment.id,
+									resourceId: comment.resourceId,
+									resourceType: comment.resourceType,
+									currentStatus: comment.status,
+									nextStatus: "approved",
+								}),
+							)}
+						>
 							<Button
 								size="sm"
 								variant="outline"
@@ -296,20 +321,29 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 								{localization?.COMMENTS_MODERATION_APPROVE_SELECTED ??
 									t("comments.moderation.approveSelected", "Approve selected")}
 							</Button>
-						</CanAccess>
+						</PermissionAccessAll>
 					)}
-					<CanAccess resource="comments:comment" action="delete">
+					<PermissionAccessAll
+						permissions={selectedComments.map((comment) =>
+							commentsPermissions.comment.delete({
+								commentId: comment.id,
+								authorId: comment.authorId,
+							}),
+						)}
+					>
 						<Button
 							size="sm"
 							variant="outline"
 							className="text-destructive border-destructive hover:bg-destructive hover:text-destructive-foreground"
-							onClick={() => setDeleteIds([...selected])}
+							onClick={() =>
+								setDeleteIds(selectedComments.map((comment) => comment.id))
+							}
 						>
 							<Trash2 className="h-4 w-4 mr-1" />
 							{localization?.COMMENTS_MODERATION_DELETE_SELECTED ??
 								t("comments.moderation.deleteSelected", "Delete selected")}
 						</Button>
-					</CanAccess>
+					</PermissionAccessAll>
 				</div>
 			)}
 
@@ -426,10 +460,14 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 													<Eye className="h-4 w-4" />
 												</Button>
 												{activeTab !== "approved" && (
-													<CanAccess
-														resource="comments:comment"
-														action="moderate"
-														params={{ id: comment.id }}
+													<PermissionAccess
+														permission={commentsPermissions.comment.moderate({
+															commentId: comment.id,
+															resourceId: comment.resourceId,
+															resourceType: comment.resourceType,
+															currentStatus: comment.status,
+															nextStatus: "approved",
+														})}
 													>
 														<Button
 															variant="ghost"
@@ -448,13 +486,17 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 														>
 															<CheckCircle className="h-4 w-4" />
 														</Button>
-													</CanAccess>
+													</PermissionAccess>
 												)}
 												{activeTab !== "spam" && (
-													<CanAccess
-														resource="comments:comment"
-														action="moderate"
-														params={{ id: comment.id }}
+													<PermissionAccess
+														permission={commentsPermissions.comment.moderate({
+															commentId: comment.id,
+															resourceId: comment.resourceId,
+															resourceType: comment.resourceType,
+															currentStatus: comment.status,
+															nextStatus: "spam",
+														})}
 													>
 														<Button
 															variant="ghost"
@@ -473,12 +515,13 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 														>
 															<ShieldOff className="h-4 w-4" />
 														</Button>
-													</CanAccess>
+													</PermissionAccess>
 												)}
-												<CanAccess
-													resource="comments:comment"
-													action="delete"
-													params={{ id: comment.id }}
+												<PermissionAccess
+													permission={commentsPermissions.comment.delete({
+														commentId: comment.id,
+														authorId: comment.authorId,
+													})}
 												>
 													<Button
 														variant="ghost"
@@ -493,7 +536,7 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 													>
 														<Trash2 className="h-4 w-4" />
 													</Button>
-												</CanAccess>
+												</PermissionAccess>
 											</div>
 										</TableCell>
 									</TableRow>
@@ -504,7 +547,10 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 					<Pagination
 						currentPage={currentPage}
 						totalPages={totalPages}
-						onPageChange={(p) => setListState({ page: p })}
+						onPageChange={(p) => {
+							setListState({ page: p });
+							setSelected(new Set());
+						}}
 						total={total}
 						limit={limit}
 						offset={offset}
@@ -594,10 +640,14 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 
 							<div className="flex justify-end gap-2">
 								{viewComment.status !== "approved" && (
-									<CanAccess
-										resource="comments:comment"
-										action="moderate"
-										params={{ id: viewComment.id }}
+									<PermissionAccess
+										permission={commentsPermissions.comment.moderate({
+											commentId: viewComment.id,
+											resourceId: viewComment.resourceId,
+											resourceType: viewComment.resourceType,
+											currentStatus: viewComment.status,
+											nextStatus: "approved",
+										})}
 									>
 										<Button
 											size="sm"
@@ -612,13 +662,17 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 											{localization?.COMMENTS_MODERATION_DIALOG_APPROVE ??
 												t("comments.moderation.dialogApprove", "Approve")}
 										</Button>
-									</CanAccess>
+									</PermissionAccess>
 								)}
 								{viewComment.status !== "spam" && (
-									<CanAccess
-										resource="comments:comment"
-										action="moderate"
-										params={{ id: viewComment.id }}
+									<PermissionAccess
+										permission={commentsPermissions.comment.moderate({
+											commentId: viewComment.id,
+											resourceId: viewComment.resourceId,
+											resourceType: viewComment.resourceType,
+											currentStatus: viewComment.status,
+											nextStatus: "spam",
+										})}
 									>
 										<Button
 											size="sm"
@@ -633,12 +687,13 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 											{localization?.COMMENTS_MODERATION_DIALOG_MARK_SPAM ??
 												t("comments.moderation.dialogMarkSpam", "Mark spam")}
 										</Button>
-									</CanAccess>
+									</PermissionAccess>
 								)}
-								<CanAccess
-									resource="comments:comment"
-									action="delete"
-									params={{ id: viewComment.id }}
+								<PermissionAccess
+									permission={commentsPermissions.comment.delete({
+										commentId: viewComment.id,
+										authorId: viewComment.authorId,
+									})}
 								>
 									<Button
 										size="sm"
@@ -652,7 +707,7 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 										{localization?.COMMENTS_MODERATION_DIALOG_DELETE ??
 											t("comments.moderation.dialogDelete", "Delete")}
 									</Button>
-								</CanAccess>
+								</PermissionAccess>
 							</div>
 						</div>
 					)}
@@ -661,7 +716,7 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 
 			{/* Delete confirmation dialog */}
 			<AlertDialog
-				open={deleteIds.length > 0}
+				open={hasResolvedDeleteScope}
 				onOpenChange={(open) => !open && setDeleteIds([])}
 			>
 				<AlertDialogContent>
@@ -700,17 +755,28 @@ export function ModerationPage({ localization }: ModerationPageProps) {
 							{localization?.COMMENTS_MODERATION_DELETE_CANCEL ??
 								t("comments.moderation.deleteCancel", "Cancel")}
 						</AlertDialogCancel>
-						<AlertDialogAction
-							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-							onClick={() => handleDelete(deleteIds)}
-							data-testid="confirm-delete-button"
+						<PermissionAccessAll
+							permissions={deleteComments.map((comment) =>
+								commentsPermissions.comment.delete({
+									commentId: comment.id,
+									authorId: comment.authorId,
+								}),
+							)}
 						>
-							{deleteMutation.isPending
-								? (localization?.COMMENTS_MODERATION_DELETE_DELETING ??
-									t("comments.moderation.deleteDeleting", "Deleting…"))
-								: (localization?.COMMENTS_MODERATION_DELETE_CONFIRM ??
-									t("comments.moderation.deleteConfirm", "Delete"))}
-						</AlertDialogAction>
+							<AlertDialogAction
+								className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+								onClick={() =>
+									handleDelete(deleteComments.map((comment) => comment.id))
+								}
+								data-testid="confirm-delete-button"
+							>
+								{deleteMutation.isPending
+									? (localization?.COMMENTS_MODERATION_DELETE_DELETING ??
+										t("comments.moderation.deleteDeleting", "Deleting…"))
+									: (localization?.COMMENTS_MODERATION_DELETE_CONFIRM ??
+										t("comments.moderation.deleteConfirm", "Delete"))}
+							</AlertDialogAction>
+						</PermissionAccessAll>
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>

package/src/plugins/comments/client/components/pages/moderation-page.tsx

@@ -1,11 +1,18 @@
 "use client";
 
 import { lazy } from "react";
+import { useListState } from "@btst/stack/client/hooks";
 import { ComposedRoute } from "@btst/stack/client/components";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { CommentsPluginOverrides } from "../../overrides";
+import { COMMENTS_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { PageWrapper } from "../shared/page-wrapper";
+import { commentsPermissions } from "../../../permissions";
+import {
+	MODERATION_LIST_STATE_SCHEMA,
+	resolveModerationStatus,
+} from "./moderation-state";
 
 const ModerationPageInternal = lazy(() =>
 	import("./moderation-page.internal").then((m) => ({
@@ -25,12 +32,20 @@ function ModerationPageSkeleton() {
 }
 
 export function ModerationPageComponent() {
+	const [listState] = useListState(
+		"comments-moderation",
+		MODERATION_LIST_STATE_SCHEMA,
+	);
+	const status = resolveModerationStatus(listState.tab);
 	return (
 		<ComposedRoute
 			path="/comments/moderation"
 			PageComponent={ModerationPageWrapper}
 			LoadingComponent={ModerationPageSkeleton}
-			permission={{ resource: "comments:comment", action: "moderate" }}
+			permission={commentsPermissions.thread.read({
+				scope: "moderation",
+				status,
+			})}
 			onError={(error) =>
 				console.error("[btst/comments] Moderation error:", error)
 			}
@@ -39,7 +54,8 @@ export function ModerationPageComponent() {
 }
 
 function ModerationPageWrapper() {
-	const overrides = usePluginOverrides<CommentsPluginOverrides>("comments");
+	const overrides =
+		usePluginOverrides<CommentsPluginOverrides>(COMMENTS_PLUGIN_ID);
 
 	useRouteLifecycle({
 		routeName: "moderation",

package/src/plugins/comments/client/components/pages/moderation-state.ts

@@ -0,0 +1,13 @@
+import type { ListStateSchema } from "@btst/stack/client";
+import type { CommentStatus } from "../../../types";
+
+/** URL-backed state shared by the moderation route gate and queue UI. */
+export const MODERATION_LIST_STATE_SCHEMA = {
+	tab: { type: "string", default: "pending" },
+	page: { type: "number", default: 1 },
+} as const satisfies ListStateSchema;
+
+/** Normalize an untrusted URL tab to a schema-backed moderation status. */
+export function resolveModerationStatus(tab: string): CommentStatus {
+	return tab === "approved" || tab === "spam" ? tab : "pending";
+}

package/src/plugins/comments/client/components/pages/my-comments-page.internal.tsx

@@ -28,8 +28,9 @@ import {
 } from "@workspace/ui/components/avatar";
 import { Trash2, ExternalLink, LogIn, MessageSquareOff } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
-import { useNotify, useStack, useTranslate } from "@btst/stack/context";
-import { useListState, type ListStateSchema } from "@btst/stack/client";
+import { PermissionAccess, useNotify, useTranslate } from "@btst/stack/context";
+import { useListState, type ListStateSchema } from "@btst/stack/client/hooks";
+import { PermissionRouteAccess } from "@btst/stack/client/components";
 import type { CommentsPluginOverrides } from "../../overrides";
 import { PaginationControls } from "@workspace/ui/components/pagination-controls";
 import type { SerializedComment, CommentStatus } from "../../../types";
@@ -39,6 +40,7 @@ import {
 } from "../../hooks/use-comments";
 import type { CommentsLocalization } from "../../localization";
 import { getInitials, useCurrentUserId } from "../../utils";
+import { commentsPermissions } from "../../../permissions";
 
 const PAGE_LIMIT = 20;
 
@@ -92,7 +94,6 @@ export function UserCommentsPage({
 	localization,
 }: UserCommentsPageProps) {
 	const t = useTranslate();
-	const { api } = useStack();
 	const { currentUserId: resolvedUserId, isPending: isIdentityPending } =
 		useCurrentUserId();
 
@@ -131,27 +132,28 @@ export function UserCommentsPage({
 	}
 
 	return (
-		<UserCommentsList
-			apiBaseURL={api?.baseURL ?? ""}
-			apiBasePath={api?.basePath ?? ""}
-			currentUserId={resolvedUserId}
-			resourceLinks={resourceLinks}
-			localization={localization}
-		/>
+		<PermissionRouteAccess
+			permission={commentsPermissions.thread.read({
+				scope: "own",
+				authorId: resolvedUserId,
+			})}
+		>
+			<UserCommentsList
+				currentUserId={resolvedUserId}
+				resourceLinks={resourceLinks}
+				localization={localization}
+			/>
+		</PermissionRouteAccess>
 	);
 }
 
 // ─── List (suspense boundary is in ComposedRoute) ─────────────────────────────
 
 function UserCommentsList({
-	apiBaseURL,
-	apiBasePath,
 	currentUserId,
 	resourceLinks,
 	localization,
 }: {
-	apiBaseURL: string;
-	apiBasePath: string;
 	currentUserId: string;
 	resourceLinks?: CommentsPluginOverrides["resourceLinks"];
 	localization?: Partial<CommentsLocalization>;
@@ -168,17 +170,16 @@ function UserCommentsList({
 
 	const [deleteId, setDeleteId] = useState<string | null>(null);
 
-	const config = { apiBaseURL, apiBasePath };
 	const offset = (page - 1) * PAGE_LIMIT;
 
-	const { comments, total, refetch } = useSuspenseComments(config, {
+	const { comments, total, refetch } = useSuspenseComments({
 		authorId: currentUserId,
 		sort: "desc",
 		limit: PAGE_LIMIT,
 		offset,
 	});
 
-	const deleteMutation = useDeleteComment(config);
+	const deleteMutation = useDeleteComment();
 
 	const totalPages = Math.max(1, Math.ceil(total / PAGE_LIMIT));
 
@@ -413,20 +414,27 @@ function CommentRow({
 			</TableCell>
 
 			<TableCell>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="h-7 w-7 text-muted-foreground hover:text-destructive"
-					onClick={onDelete}
-					disabled={isDeleting}
-					data-testid="my-comment-delete-button"
+				<PermissionAccess
+					permission={commentsPermissions.comment.delete({
+						commentId: comment.id,
+						authorId: comment.authorId,
+					})}
 				>
-					<Trash2 className="h-4 w-4" />
-					<span className="sr-only">
-						{localization?.COMMENTS_MY_DELETE_BUTTON_SR ??
-							t("comments.my.deleteButtonSr", "Delete comment")}
-					</span>
-				</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 text-muted-foreground hover:text-destructive"
+						onClick={onDelete}
+						disabled={isDeleting}
+						data-testid="my-comment-delete-button"
+					>
+						<Trash2 className="h-4 w-4" />
+						<span className="sr-only">
+							{localization?.COMMENTS_MY_DELETE_BUTTON_SR ??
+								t("comments.my.deleteButtonSr", "Delete comment")}
+						</span>
+					</Button>
+				</PermissionAccess>
 			</TableCell>
 		</TableRow>
 	);

package/src/plugins/comments/client/components/pages/my-comments-page.tsx

@@ -4,6 +4,7 @@ import { lazy } from "react";
 import { ComposedRoute } from "@btst/stack/client/components";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { CommentsPluginOverrides } from "../../overrides";
+import { COMMENTS_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { PageWrapper } from "../shared/page-wrapper";
 
@@ -37,7 +38,8 @@ export function UserCommentsPageComponent() {
 }
 
 function UserCommentsPageWrapper() {
-	const overrides = usePluginOverrides<CommentsPluginOverrides>("comments");
+	const overrides =
+		usePluginOverrides<CommentsPluginOverrides>(COMMENTS_PLUGIN_ID);
 
 	useRouteLifecycle({
 		routeName: "userComments",