@btst/stack 2.7.0 → 2.8.1

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

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

package/dist/packages/stack/src/plugins/comments/client/components/pages/my-comments-page.internal.mjs

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

package/dist/packages/stack/src/plugins/comments/client/components/pages/my-comments-page.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { usePluginOverrides } from '@btst/stack/context';
+import { COMMENTS_LOCALIZATION } from '../../localization/index.mjs';
+import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+
+const UserCommentsPageInternal = lazy(
+  () => import('./my-comments-page.internal.mjs').then((m) => ({
+    default: m.UserCommentsPage
+  }))
+);
+function UserCommentsPageSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto space-y-4 animate-pulse", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-8 w-48 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "h-4 w-64 rounded bg-muted" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border h-96 bg-muted" })
+  ] });
+}
+function UserCommentsPageComponent() {
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/comments",
+      PageComponent: UserCommentsPageWrapper,
+      LoadingComponent: UserCommentsPageSkeleton,
+      onError: (error) => console.error("[btst/comments] User Comments error:", error)
+    }
+  );
+}
+function UserCommentsPageWrapper() {
+  const overrides = usePluginOverrides("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 /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(
+    UserCommentsPageInternal,
+    {
+      apiBaseURL: overrides.apiBaseURL,
+      apiBasePath: overrides.apiBasePath,
+      headers: overrides.headers,
+      currentUserId: overrides.currentUserId,
+      resourceLinks: overrides.resourceLinks,
+      localization: loc
+    }
+  ) });
+}
+
+export { UserCommentsPageComponent };

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

@@ -0,0 +1,86 @@
+"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 utils = require('../../utils.cjs');
+
+const ResourceCommentsPageInternal = React.lazy(
+  () => import('./resource-comments-page.internal.cjs').then((m) => ({
+    default: m.ResourceCommentsPage
+  }))
+);
+function ResourceCommentsSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl mx-auto space-y-4 animate-pulse", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-48 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-64 rounded bg-muted" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border h-32 bg-muted" })
+  ] });
+}
+function ResourceCommentsPageComponent({
+  resourceId,
+  resourceType
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/comments/${resourceType}/${resourceId}`,
+      PageComponent: () => /* @__PURE__ */ jsxRuntime.jsx(
+        ResourceCommentsPageWrapper,
+        {
+          resourceId,
+          resourceType
+        }
+      ),
+      LoadingComponent: ResourceCommentsSkeleton,
+      onError: (error) => console.error("[btst/comments] Resource comments error:", error)
+    }
+  );
+}
+function ResourceCommentsPageWrapper({
+  resourceId,
+  resourceType
+}) {
+  const overrides = context.usePluginOverrides("comments");
+  const loc = { ...index.COMMENTS_LOCALIZATION, ...overrides.localization };
+  const resolvedUserId = utils.useResolvedCurrentUserId(overrides.currentUserId);
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "resourceComments",
+    context: {
+      path: `/comments/${resourceType}/${resourceId}`,
+      params: { resourceId, resourceType },
+      isSSR: typeof window === "undefined"
+    },
+    overrides,
+    beforeRenderHook: (o, context) => {
+      if (o.onBeforeResourceCommentsRendered) {
+        return o.onBeforeResourceCommentsRendered(
+          resourceType,
+          resourceId,
+          context
+        );
+      }
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ResourceCommentsPageInternal,
+    {
+      resourceId,
+      resourceType,
+      apiBaseURL: overrides.apiBaseURL,
+      apiBasePath: overrides.apiBasePath,
+      headers: overrides.headers,
+      currentUserId: resolvedUserId,
+      loginHref: overrides.loginHref,
+      localization: loc
+    }
+  ) });
+}
+
+exports.ResourceCommentsPageComponent = ResourceCommentsPageComponent;