@btst/stack 2.6.2 → 2.8.0

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

@@ -0,0 +1,367 @@
+"use client";
+
+import { useState } from "react";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@workspace/ui/components/table";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@workspace/ui/components/alert-dialog";
+import { Button } from "@workspace/ui/components/button";
+import { Badge } from "@workspace/ui/components/badge";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@workspace/ui/components/avatar";
+import { Trash2, ExternalLink, LogIn, MessageSquareOff } from "lucide-react";
+import { toast } from "sonner";
+import { formatDistanceToNow } from "date-fns";
+import type { CommentsPluginOverrides } from "../../overrides";
+import { PaginationControls } from "@workspace/ui/components/pagination-controls";
+import type { SerializedComment, CommentStatus } from "../../../types";
+import {
+	useSuspenseComments,
+	useDeleteComment,
+} from "../../hooks/use-comments";
+import {
+	COMMENTS_LOCALIZATION,
+	type CommentsLocalization,
+} from "../../localization";
+import { getInitials, useResolvedCurrentUserId } from "../../utils";
+
+const PAGE_LIMIT = 20;
+
+interface UserCommentsPageProps {
+	apiBaseURL: string;
+	apiBasePath: string;
+	headers?: HeadersInit;
+	currentUserId?: CommentsPluginOverrides["currentUserId"];
+	resourceLinks?: CommentsPluginOverrides["resourceLinks"];
+	localization?: CommentsLocalization;
+}
+
+function StatusBadge({
+	status,
+	loc,
+}: {
+	status: CommentStatus;
+	loc: CommentsLocalization;
+}) {
+	if (status === "approved") {
+		return (
+			<Badge variant="outline" className="text-green-700 border-green-300">
+				{loc.COMMENTS_MY_STATUS_APPROVED}
+			</Badge>
+		);
+	}
+	if (status === "pending") {
+		return (
+			<Badge variant="outline" className="text-yellow-700 border-yellow-300">
+				{loc.COMMENTS_MY_STATUS_PENDING}
+			</Badge>
+		);
+	}
+	return (
+		<Badge variant="outline" className="text-red-700 border-red-300">
+			{loc.COMMENTS_MY_STATUS_SPAM}
+		</Badge>
+	);
+}
+
+// ─── Main export ──────────────────────────────────────────────────────────────
+
+export function UserCommentsPage({
+	apiBaseURL,
+	apiBasePath,
+	headers,
+	currentUserId: currentUserIdProp,
+	resourceLinks,
+	localization: localizationProp,
+}: UserCommentsPageProps) {
+	const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+	const resolvedUserId = useResolvedCurrentUserId(currentUserIdProp);
+
+	if (!resolvedUserId) {
+		return (
+			<div
+				className="flex flex-col items-center justify-center gap-4 py-20 text-center"
+				data-testid="my-comments-login-prompt"
+			>
+				<LogIn className="h-10 w-10 text-muted-foreground" />
+				<p className="text-lg font-medium">{loc.COMMENTS_MY_LOGIN_TITLE}</p>
+				<p className="text-sm text-muted-foreground">
+					{loc.COMMENTS_MY_LOGIN_DESCRIPTION}
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<UserCommentsList
+			apiBaseURL={apiBaseURL}
+			apiBasePath={apiBasePath}
+			headers={headers}
+			currentUserId={resolvedUserId}
+			resourceLinks={resourceLinks}
+			loc={loc}
+		/>
+	);
+}
+
+// ─── List (suspense boundary is in ComposedRoute) ─────────────────────────────
+
+function UserCommentsList({
+	apiBaseURL,
+	apiBasePath,
+	headers,
+	currentUserId,
+	resourceLinks,
+	loc,
+}: {
+	apiBaseURL: string;
+	apiBasePath: string;
+	headers?: HeadersInit;
+	currentUserId: string;
+	resourceLinks?: CommentsPluginOverrides["resourceLinks"];
+	loc: CommentsLocalization;
+}) {
+	const [page, setPage] = useState(1);
+	const [deleteId, setDeleteId] = useState<string | null>(null);
+
+	const config = { apiBaseURL, apiBasePath, headers };
+	const offset = (page - 1) * PAGE_LIMIT;
+
+	const { comments, total, refetch } = useSuspenseComments(config, {
+		authorId: currentUserId,
+		sort: "desc",
+		limit: PAGE_LIMIT,
+		offset,
+	});
+
+	const deleteMutation = useDeleteComment(config);
+
+	const totalPages = Math.max(1, Math.ceil(total / PAGE_LIMIT));
+
+	const handleDelete = async () => {
+		if (!deleteId) return;
+		try {
+			await deleteMutation.mutateAsync(deleteId);
+			toast.success(loc.COMMENTS_MY_TOAST_DELETED);
+			refetch();
+		} catch {
+			toast.error(loc.COMMENTS_MY_TOAST_DELETE_ERROR);
+		} finally {
+			setDeleteId(null);
+		}
+	};
+
+	if (comments.length === 0 && page === 1) {
+		return (
+			<div
+				className="flex flex-col items-center justify-center gap-4 py-20 text-center"
+				data-testid="my-comments-empty"
+			>
+				<MessageSquareOff className="h-10 w-10 text-muted-foreground" />
+				<p className="text-lg font-medium">{loc.COMMENTS_MY_EMPTY_TITLE}</p>
+				<p className="text-sm text-muted-foreground">
+					{loc.COMMENTS_MY_EMPTY_DESCRIPTION}
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<div data-testid="my-comments-page" className="space-y-4">
+			<div>
+				<h1 className="text-2xl font-bold tracking-tight">
+					{loc.COMMENTS_MY_PAGE_TITLE}
+				</h1>
+				<p className="text-sm text-muted-foreground mt-1">
+					{total} {loc.COMMENTS_MY_COL_COMMENT.toLowerCase()}
+					{total !== 1 ? "s" : ""}
+				</p>
+			</div>
+
+			<div
+				className="rounded-lg border overflow-hidden"
+				data-testid="my-comments-list"
+			>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead className="w-10" />
+							<TableHead>{loc.COMMENTS_MY_COL_COMMENT}</TableHead>
+							<TableHead className="hidden sm:table-cell w-32">
+								{loc.COMMENTS_MY_COL_RESOURCE}
+							</TableHead>
+							<TableHead className="w-28">
+								{loc.COMMENTS_MY_COL_STATUS}
+							</TableHead>
+							<TableHead className="hidden md:table-cell w-36">
+								{loc.COMMENTS_MY_COL_DATE}
+							</TableHead>
+							<TableHead className="w-16" />
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{comments.map((comment) => (
+							<CommentRow
+								key={comment.id}
+								comment={comment}
+								resourceLinks={resourceLinks}
+								loc={loc}
+								onDelete={() => setDeleteId(comment.id)}
+								isDeleting={deleteMutation.isPending && deleteId === comment.id}
+							/>
+						))}
+					</TableBody>
+				</Table>
+
+				<PaginationControls
+					currentPage={page}
+					totalPages={totalPages}
+					total={total}
+					limit={PAGE_LIMIT}
+					offset={offset}
+					onPageChange={(p) => {
+						setPage(p);
+						window.scrollTo({ top: 0, behavior: "smooth" });
+					}}
+				/>
+			</div>
+
+			<AlertDialog
+				open={!!deleteId}
+				onOpenChange={(open) => !open && setDeleteId(null)}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>{loc.COMMENTS_MY_DELETE_TITLE}</AlertDialogTitle>
+						<AlertDialogDescription>
+							{loc.COMMENTS_MY_DELETE_DESCRIPTION}
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							{loc.COMMENTS_MY_DELETE_CANCEL}
+						</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDelete}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							{loc.COMMENTS_MY_DELETE_CONFIRM}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</div>
+	);
+}
+
+// ─── Row ──────────────────────────────────────────────────────────────────────
+
+function CommentRow({
+	comment,
+	resourceLinks,
+	loc,
+	onDelete,
+	isDeleting,
+}: {
+	comment: SerializedComment;
+	resourceLinks?: CommentsPluginOverrides["resourceLinks"];
+	loc: CommentsLocalization;
+	onDelete: () => void;
+	isDeleting: boolean;
+}) {
+	const resourceUrlBase = resourceLinks?.[comment.resourceType]?.(
+		comment.resourceId,
+	);
+	const resourceUrl = resourceUrlBase
+		? `${resourceUrlBase}#comments`
+		: undefined;
+
+	return (
+		<TableRow data-testid="my-comment-row">
+			<TableCell>
+				<Avatar className="h-7 w-7">
+					{comment.resolvedAvatarUrl && (
+						<AvatarImage
+							src={comment.resolvedAvatarUrl}
+							alt={comment.resolvedAuthorName}
+						/>
+					)}
+					<AvatarFallback className="text-xs">
+						{getInitials(comment.resolvedAuthorName)}
+					</AvatarFallback>
+				</Avatar>
+			</TableCell>
+
+			<TableCell className="max-w-xs">
+				<p className="text-sm line-clamp-2">{comment.body}</p>
+				{comment.parentId && (
+					<span className="text-xs text-muted-foreground mt-0.5 block">
+						{loc.COMMENTS_MY_REPLY_INDICATOR}
+					</span>
+				)}
+			</TableCell>
+
+			<TableCell className="hidden sm:table-cell">
+				<div className="flex flex-col gap-0.5">
+					<span className="text-xs font-medium text-muted-foreground capitalize">
+						{comment.resourceType.replace(/-/g, " ")}
+					</span>
+					{resourceUrl ? (
+						<a
+							href={resourceUrl}
+							className="text-xs text-primary hover:underline inline-flex items-center gap-1"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							{loc.COMMENTS_MY_VIEW_LINK}
+							<ExternalLink className="h-3 w-3" />
+						</a>
+					) : (
+						<span className="text-xs text-muted-foreground truncate max-w-[100px]">
+							{comment.resourceId}
+						</span>
+					)}
+				</div>
+			</TableCell>
+
+			<TableCell>
+				<StatusBadge status={comment.status} loc={loc} />
+			</TableCell>
+
+			<TableCell className="hidden md:table-cell text-xs text-muted-foreground">
+				{formatDistanceToNow(new Date(comment.createdAt), { addSuffix: true })}
+			</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"
+				>
+					<Trash2 className="h-4 w-4" />
+					<span className="sr-only">{loc.COMMENTS_MY_DELETE_BUTTON_SR}</span>
+				</Button>
+			</TableCell>
+		</TableRow>
+	);
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { CommentsPluginOverrides } from "../../overrides";
+import { COMMENTS_LOCALIZATION } from "../../localization";
+import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
+import { PageWrapper } from "../shared/page-wrapper";
+
+const UserCommentsPageInternal = lazy(() =>
+	import("./my-comments-page.internal").then((m) => ({
+		default: m.UserCommentsPage,
+	})),
+);
+
+function UserCommentsPageSkeleton() {
+	return (
+		<div className="w-full max-w-3xl mx-auto space-y-4 animate-pulse">
+			<div className="h-8 w-48 rounded bg-muted" />
+			<div className="h-4 w-64 rounded bg-muted" />
+			<div className="rounded-lg border h-96 bg-muted" />
+		</div>
+	);
+}
+
+export function UserCommentsPageComponent() {
+	return (
+		<ComposedRoute
+			path="/comments"
+			PageComponent={UserCommentsPageWrapper}
+			LoadingComponent={UserCommentsPageSkeleton}
+			onError={(error) =>
+				console.error("[btst/comments] User Comments error:", error)
+			}
+		/>
+	);
+}
+
+function UserCommentsPageWrapper() {
+	const overrides = usePluginOverrides<CommentsPluginOverrides>("comments");
+	const loc = { ...COMMENTS_LOCALIZATION, ...overrides.localization };
+
+	useRouteLifecycle({
+		routeName: "userComments",
+		context: {
+			path: "/comments",
+			isSSR: typeof window === "undefined",
+		},
+		overrides,
+		beforeRenderHook: (o, context) => {
+			if (o.onBeforeUserCommentsPageRendered) {
+				const result = o.onBeforeUserCommentsPageRendered(context);
+				return result === false ? false : true;
+			}
+			return true;
+		},
+	});
+
+	return (
+		<PageWrapper>
+			<UserCommentsPageInternal
+				apiBaseURL={overrides.apiBaseURL}
+				apiBasePath={overrides.apiBasePath}
+				headers={overrides.headers as HeadersInit | undefined}
+				currentUserId={overrides.currentUserId}
+				resourceLinks={overrides.resourceLinks}
+				localization={loc}
+			/>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,225 @@
+"use client";
+
+import type { SerializedComment } from "../../../types";
+import {
+	useSuspenseComments,
+	useUpdateCommentStatus,
+	useDeleteComment,
+} from "../../hooks/use-comments";
+import { CommentThread } from "../comment-thread";
+import { Button } from "@workspace/ui/components/button";
+import { Badge } from "@workspace/ui/components/badge";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "@workspace/ui/components/avatar";
+import { CheckCircle, ShieldOff, Trash2 } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { toast } from "sonner";
+import {
+	COMMENTS_LOCALIZATION,
+	type CommentsLocalization,
+} from "../../localization";
+import { getInitials } from "../../utils";
+
+interface ResourceCommentsPageProps {
+	resourceId: string;
+	resourceType: string;
+	apiBaseURL: string;
+	apiBasePath: string;
+	headers?: HeadersInit;
+	currentUserId?: string;
+	loginHref?: string;
+	localization?: CommentsLocalization;
+}
+
+export function ResourceCommentsPage({
+	resourceId,
+	resourceType,
+	apiBaseURL,
+	apiBasePath,
+	headers,
+	currentUserId,
+	loginHref,
+	localization: localizationProp,
+}: ResourceCommentsPageProps) {
+	const loc = { ...COMMENTS_LOCALIZATION, ...localizationProp };
+	const config = { apiBaseURL, apiBasePath, headers };
+
+	const {
+		comments: pendingComments,
+		total: pendingTotal,
+		refetch,
+	} = useSuspenseComments(config, {
+		resourceId,
+		resourceType,
+		status: "pending",
+	});
+
+	const updateStatus = useUpdateCommentStatus(config);
+	const deleteMutation = useDeleteComment(config);
+
+	const handleApprove = async (id: string) => {
+		try {
+			await updateStatus.mutateAsync({ id, status: "approved" });
+			toast.success(loc.COMMENTS_RESOURCE_TOAST_APPROVED);
+			refetch();
+		} catch {
+			toast.error(loc.COMMENTS_RESOURCE_TOAST_APPROVE_ERROR);
+		}
+	};
+
+	const handleSpam = async (id: string) => {
+		try {
+			await updateStatus.mutateAsync({ id, status: "spam" });
+			toast.success(loc.COMMENTS_RESOURCE_TOAST_SPAM);
+			refetch();
+		} catch {
+			toast.error(loc.COMMENTS_RESOURCE_TOAST_SPAM_ERROR);
+		}
+	};
+
+	const handleDelete = async (id: string) => {
+		if (!window.confirm(loc.COMMENTS_RESOURCE_DELETE_CONFIRM)) return;
+		try {
+			await deleteMutation.mutateAsync(id);
+			toast.success(loc.COMMENTS_RESOURCE_TOAST_DELETED);
+			refetch();
+		} catch {
+			toast.error(loc.COMMENTS_RESOURCE_TOAST_DELETE_ERROR);
+		}
+	};
+
+	return (
+		<div
+			className="w-full max-w-3xl space-y-8"
+			data-testid="resource-comments-page"
+		>
+			<div>
+				<h1 className="text-2xl font-bold">{loc.COMMENTS_RESOURCE_TITLE}</h1>
+				<p className="text-muted-foreground text-sm mt-1">
+					{resourceType}/{resourceId}
+				</p>
+			</div>
+
+			{pendingTotal > 0 && (
+				<div className="space-y-3">
+					<h2 className="text-base font-semibold flex items-center gap-2">
+						{loc.COMMENTS_RESOURCE_PENDING_SECTION}
+						<Badge variant="secondary">{pendingTotal}</Badge>
+					</h2>
+					<div className="divide-y divide-border rounded-lg border">
+						{pendingComments.map((comment) => (
+							<PendingCommentRow
+								key={comment.id}
+								comment={comment}
+								loc={loc}
+								onApprove={() => handleApprove(comment.id)}
+								onSpam={() => handleSpam(comment.id)}
+								onDelete={() => handleDelete(comment.id)}
+								isUpdating={updateStatus.isPending}
+								isDeleting={deleteMutation.isPending}
+							/>
+						))}
+					</div>
+				</div>
+			)}
+
+			<div>
+				<h2 className="text-base font-semibold mb-4">
+					{loc.COMMENTS_RESOURCE_THREAD_SECTION}
+				</h2>
+				<CommentThread
+					resourceId={resourceId}
+					resourceType={resourceType}
+					apiBaseURL={apiBaseURL}
+					apiBasePath={apiBasePath}
+					headers={headers}
+					currentUserId={currentUserId}
+					loginHref={loginHref}
+					localization={loc}
+				/>
+			</div>
+		</div>
+	);
+}
+
+function PendingCommentRow({
+	comment,
+	loc,
+	onApprove,
+	onSpam,
+	onDelete,
+	isUpdating,
+	isDeleting,
+}: {
+	comment: SerializedComment;
+	loc: CommentsLocalization;
+	onApprove: () => void;
+	onSpam: () => void;
+	onDelete: () => void;
+	isUpdating: boolean;
+	isDeleting: boolean;
+}) {
+	return (
+		<div className="flex gap-3 p-4" data-testid="pending-comment-row">
+			<Avatar className="h-8 w-8 shrink-0 mt-0.5">
+				{comment.resolvedAvatarUrl && (
+					<AvatarImage src={comment.resolvedAvatarUrl} />
+				)}
+				<AvatarFallback className="text-xs">
+					{getInitials(comment.resolvedAuthorName)}
+				</AvatarFallback>
+			</Avatar>
+			<div className="flex-1 min-w-0">
+				<div className="flex items-center gap-2 mb-1">
+					<span className="text-sm font-medium">
+						{comment.resolvedAuthorName}
+					</span>
+					<span className="text-xs text-muted-foreground">
+						{formatDistanceToNow(new Date(comment.createdAt), {
+							addSuffix: true,
+						})}
+					</span>
+				</div>
+				<p className="text-sm whitespace-pre-wrap break-words">
+					{comment.body}
+				</p>
+				<div className="flex gap-1 mt-2">
+					<Button
+						size="sm"
+						variant="outline"
+						className="h-7 text-xs text-green-600 border-green-200 hover:bg-green-50"
+						onClick={onApprove}
+						disabled={isUpdating}
+						data-testid="approve-button"
+					>
+						<CheckCircle className="h-3.5 w-3.5 mr-1" />
+						{loc.COMMENTS_RESOURCE_ACTION_APPROVE}
+					</Button>
+					<Button
+						size="sm"
+						variant="outline"
+						className="h-7 text-xs text-orange-500 border-orange-200 hover:bg-orange-50"
+						onClick={onSpam}
+						disabled={isUpdating}
+					>
+						<ShieldOff className="h-3.5 w-3.5 mr-1" />
+						{loc.COMMENTS_RESOURCE_ACTION_SPAM}
+					</Button>
+					<Button
+						size="sm"
+						variant="outline"
+						className="h-7 text-xs text-destructive border-destructive/30 hover:bg-destructive/5"
+						onClick={onDelete}
+						disabled={isDeleting}
+					>
+						<Trash2 className="h-3.5 w-3.5 mr-1" />
+						{loc.COMMENTS_RESOURCE_ACTION_DELETE}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}