create-feedbax 0.2.0 → 0.2.2

package/template/src/public-post-detail.tsx

@@ -1,16 +1,24 @@
+import { submissionIntent } from "./submission-intent";
+import { PostHistory } from "./components/post-history";
+import { ImageAttachments, ImageGallery } from "./components/image-attachments";
+import { FollowPostButton } from "./components/follow-post-button";
+import {
+  useConnectedIdentity,
+  ConnectedSignInPrompt,
+} from "./components/connected-identity-provider";
 import { configuredTurnstileSiteKey } from "./turnstile-configuration";
 import type { Comment, CommentThreadPage, PublicPost } from "@feedbax/feedback";
 import type { PortalFeatures } from "@feedbax/config";
-import {
-  Empty,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@feedbax/ui/components/empty";
 import { Skeleton } from "@feedbax/ui/components/skeleton";
 import { Button } from "@feedbax/ui/components/button";
 import { Textarea } from "@feedbax/ui/components/textarea";
-import { ArrowLeft, MessageCircle } from "lucide-react";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@feedbax/ui/components/tabs";
+import { ArrowLeft } from "lucide-react";
 import {
   type FormEvent,
   type ReactNode,
@@ -24,6 +32,7 @@ import { PostStatusBadge, PostTypeBadge } from "./post-badges";
 import { formatPublicDate } from "./public-date";
 import feedbax from "./feedbax";
 import { VoteToggle } from "./vote-toggle";
+import { mergeCommentThreads } from "./comment-thread-page";
 import type { PortalCommentRequest } from "./portal-comments";
 import { isValidCommentEmail } from "./comment-profile";
 import {
@@ -42,10 +51,14 @@ export type ConfirmedPortalComment = CreatedComment & {
 export function PublicPostDetail({
   post,
   display = "page",
+  published = true,
   summaryActions,
   summaryMarker,
   features = feedbax.features,
   comments = emptyCommentPage,
+  commentsLoading = false,
+  commentsLoadError = false,
+  retryComments,
   loadMore,
   submitComment,
   mutateComment,
@@ -53,10 +66,14 @@ export function PublicPostDetail({
 }: {
   post: PublicPost;
   display?: "overlay" | "page";
+  published?: boolean;
   summaryActions?: ReactNode;
   summaryMarker?: ReactNode;
   features?: PortalFeatures;
   comments?: CommentThreadPage;
+  commentsLoading?: boolean;
+  commentsLoadError?: boolean;
+  retryComments?: () => void;
   loadMore?: () => Promise<void>;
   submitComment?: (
     input: PortalCommentRequest,
@@ -75,6 +92,11 @@ export function PublicPostDetail({
   const detailsHeadingId = `${id}-post-details-heading`;
   const [localComments, setLocalComments] = useState(comments.items);
   const [commentError, setCommentError] = useState<string>();
+  const [images, setImages] = useState<
+    import("@feedbax/feedback").ImageAttachment[]
+  >([]);
+  const [uploading, setUploading] = useState(false);
+  const [submittingComment, setSubmittingComment] = useState(false);
   const [replyingTo, setReplyingTo] = useState<string>();
   const [editingComment, setEditingComment] = useState<{
     id: string;
@@ -84,12 +106,27 @@ export function PublicPostDetail({
     Record<string, StoredCommentCapability>
   >({});
   const turnstileContainer = useRef<HTMLDivElement>(null);
+  const composerInput = useRef<HTMLTextAreaElement>(null);
   const turnstileWidget = useRef<string | undefined>(undefined);
   const { completeProfile, ready: profileReady } = useDeviceProfile();
+  const identity = useConnectedIdentity();
+  const canComment = identity.enabled
+    ? Boolean(identity.displayName)
+    : Boolean(completeProfile);
 
   useEffect(() => {
     setLocalComments((current) =>
-      mergeConfirmedComments(current, comments.items),
+      mergeCommentThreads(
+        comments.items,
+        current
+          .map((thread) => ({
+            ...thread,
+            comments: thread.comments.filter((comment) =>
+              comment.id.startsWith("optimistic-"),
+            ),
+          }))
+          .filter((thread) => thread.comments.length > 0),
+      ),
     );
   }, [comments.items]);
 
@@ -151,36 +188,53 @@ export function PublicPostDetail({
   async function createComment(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (!submitComment) return;
-    const form = new FormData(event.currentTarget);
+    const composer = event.currentTarget;
+    const form = new FormData(composer);
     const body = String(form.get("body") ?? "").trim();
     const profile = completeProfile;
-    if (!profile || !isValidCommentEmail(profile.email)) {
+    if (
+      !canComment ||
+      (!identity.enabled && (!profile || !isValidCommentEmail(profile.email)))
+    ) {
       setCommentError(
         "Add a display name and valid email to your Device Profile before commenting.",
       );
       return;
     }
-    if (!body) return;
+    if (!body || uploading || submittingComment) return;
+    setSubmittingComment(true);
     const optimisticId = `optimistic-${crypto.randomUUID()}`;
     const discussionId = replyingTo ?? optimisticId;
     const optimistic: CreatedComment = {
       id: optimisticId,
       discussionId,
       body,
-      author: { kind: "participant", displayName: profile.name },
+      author: {
+        kind: "participant",
+        displayName: identity.enabled ? identity.displayName! : profile!.name,
+      },
       createdAt: new Date(),
     };
     setCommentError(undefined);
     setLocalComments((current) => addComment(current, optimistic));
-    event.currentTarget.reset();
-    setReplyingTo(undefined);
     try {
       const turnstileToken = form.get("cf-turnstile-response");
+      const intent = await submissionIntent(sessionStorage, {
+        kind: "comment",
+        slug: post.slug,
+        discussionId: replyingTo ?? null,
+        body,
+        imageIds: images.map((image) => image.id),
+        session: identity.sessionKey ?? "browser",
+        displayName: identity.enabled ? identity.displayName : profile?.name,
+      });
       const confirmed = await submitComment({
+        submissionKey: intent.key,
         slug: post.slug,
+        ...(images.length ? { imageIds: images.map((image) => image.id) } : {}),
         body,
-        displayName: profile.name,
-        email: profile.email,
+        displayName: identity.enabled ? identity.displayName! : profile!.name,
+        email: identity.enabled ? "" : profile!.email,
         ...(replyingTo ? { discussionId: replyingTo } : {}),
         ...(turnstileToken ? { turnstileToken: String(turnstileToken) } : {}),
         ...(sessionStorage.getItem("feedbax:participation-pass")
@@ -191,9 +245,6 @@ export function PublicPostDetail({
             }
           : {}),
       });
-      setLocalComments((current) =>
-        replaceComment(current, optimisticId, confirmed),
-      );
       if (confirmed.commentCapability && confirmed.commentCapabilityExpiresAt)
         setCommentCapabilities(
           saveCommentCapability(
@@ -203,6 +254,13 @@ export function PublicPostDetail({
             confirmed.commentCapabilityExpiresAt,
           ),
         );
+      intent.complete();
+      composer.reset();
+      setReplyingTo(undefined);
+      setImages([]);
+      setLocalComments((current) =>
+        replaceComment(current, optimisticId, confirmed),
+      );
     } catch (error) {
       setLocalComments((current) => removeComment(current, optimisticId));
       setCommentError(
@@ -210,6 +268,8 @@ export function PublicPostDetail({
           ? error.message
           : "Comment could not be saved. Try again.",
       );
+    } finally {
+      setSubmittingComment(false);
     }
   }
 
@@ -274,13 +334,30 @@ export function PublicPostDetail({
           </div>
           <h1 id={headingId}>{post.title}</h1>
           <p className="feedback-detail-description">{post.description}</p>
-          {post.teamResponse ? (
+          {post.images?.length &&
+          !published &&
+          identity.enabled &&
+          !identity.displayName ? (
+            <Button
+              nativeButton={false}
+              render={<a href="/internal/identity/start" />}
+              variant="outline"
+              size="sm"
+            >
+              Sign in to view images
+            </Button>
+          ) : (
+            <ImageGallery images={post.images} />
+          )}
+          {post.teamResponse || post.releaseNotesUrl ? (
             <section
               className="border-l-4 border-primary bg-muted/50 p-4"
               aria-label="Product Team response"
             >
               <h2 className="text-sm font-semibold">Product Team response</h2>
-              <p className="mt-2 whitespace-pre-wrap">{post.teamResponse}</p>
+              {post.teamResponse ? (
+                <p className="mt-2 whitespace-pre-wrap">{post.teamResponse}</p>
+              ) : null}
               {post.releaseNotesUrl ? (
                 <a
                   className="mt-3 inline-block text-sm font-medium underline underline-offset-4"
@@ -294,224 +371,335 @@ export function PublicPostDetail({
           {summaryActions ? (
             <div className="post-detail-summary-actions">{summaryActions}</div>
           ) : null}
-          {features.voting && post.voteCount !== undefined ? (
-            <div className="post-detail-engagement">
+          <div className="post-detail-engagement flex flex-wrap items-center gap-3">
+            {features.voting && post.voteCount !== undefined ? (
               <VoteToggle post={post} />
-            </div>
-          ) : null}
-          {features.comments ? (
-            <section
-              className="post-detail-comments"
-              aria-labelledby={commentsHeadingId}
-            >
-              <h2 id={commentsHeadingId}>Comments</h2>
-              {localComments.length === 0 ? (
-                <Empty className="post-detail-comments-empty">
-                  <EmptyHeader>
-                    <EmptyMedia variant="icon">
-                      <MessageCircle aria-hidden="true" />
-                    </EmptyMedia>
-                    <EmptyTitle>No comments yet</EmptyTitle>
-                  </EmptyHeader>
-                </Empty>
-              ) : (
-                <div className="comment-threads">
-                  {localComments.map((thread) => (
-                    <article className="comment-thread" key={thread.id}>
-                      {thread.comments.map((comment, index) => {
-                        const canChange = Boolean(
-                          mutateComment && commentCapabilities[comment.id],
-                        );
-                        const canReply = Boolean(
-                          index === 0 && submitComment && completeProfile,
-                        );
-                        return (
-                          <div
-                            className="comment"
-                            data-reply={index > 0 || undefined}
-                            key={comment.id}
-                          >
-                            <header className="comment-header">
-                              <div className="comment-author">
-                                <strong>{comment.author.displayName}</strong>
-                                {comment.author.kind === "participant" ? (
-                                  <span>Unverified</span>
-                                ) : null}
-                              </div>
-                              <time dateTime={comment.createdAt.toISOString()}>
-                                {formatPublicDate(comment.createdAt, "long")}
-                              </time>
-                            </header>
-                            {editingComment?.id === comment.id ? (
-                              <form
-                                className="mt-3 space-y-2"
-                                aria-label="Edit Comment"
-                                onSubmit={(event) => {
-                                  event.preventDefault();
-                                  void changeComment(
-                                    "edit",
-                                    { ...comment, discussionId: thread.id },
-                                    editingComment.body,
-                                  );
-                                }}
-                              >
-                                <Textarea
-                                  aria-label="Comment text"
-                                  value={editingComment.body}
-                                  onChange={(event) =>
-                                    setEditingComment({
-                                      id: comment.id,
-                                      body: event.target.value,
-                                    })
-                                  }
-                                  required
-                                />
-                                <div className="flex gap-2">
-                                  <Button size="sm" type="submit">
-                                    Save
-                                  </Button>
-                                  <Button
-                                    size="sm"
-                                    type="button"
-                                    variant="ghost"
-                                    onClick={() => setEditingComment(undefined)}
-                                  >
-                                    Cancel
-                                  </Button>
-                                </div>
-                              </form>
-                            ) : (
-                              <p className="comment-body">{comment.body}</p>
-                            )}
-                            {canChange || canReply ? (
-                              <div
-                                className="comment-actions"
-                                role="group"
-                                aria-label={`Comment actions by ${comment.author.displayName}`}
-                              >
-                                {canReply ? (
-                                  <Button
-                                    type="button"
-                                    size="sm"
-                                    variant="ghost"
-                                    onClick={() => setReplyingTo(thread.id)}
-                                  >
-                                    Reply
-                                  </Button>
-                                ) : null}
-                                {canChange ? (
-                                  <>
-                                    <Button
-                                      type="button"
-                                      size="sm"
-                                      variant="ghost"
-                                      onClick={() =>
-                                        setEditingComment({
-                                          id: comment.id,
-                                          body: comment.body,
-                                        })
-                                      }
-                                    >
-                                      Edit
-                                    </Button>
-                                    <Button
-                                      type="button"
-                                      size="sm"
-                                      variant="ghost"
-                                      className="text-destructive hover:text-destructive"
-                                      onClick={() =>
-                                        void changeComment("delete", {
-                                          ...comment,
-                                          discussionId: thread.id,
-                                        })
-                                      }
-                                    >
-                                      Delete
-                                    </Button>
-                                  </>
-                                ) : null}
-                              </div>
-                            ) : null}
-                          </div>
-                        );
-                      })}
-                    </article>
-                  ))}
-                </div>
-              )}
-              {submitComment && profileReady && completeProfile ? (
-                <form
-                  className="comment-composer"
-                  aria-label="Comment composer"
-                  onSubmit={createComment}
+            ) : null}
+            {published ? <FollowPostButton slug={post.slug} /> : null}
+          </div>
+          <Tabs
+            defaultValue={features.comments ? "comments" : "activities"}
+            className="gap-5"
+          >
+            {published && feedbax.history ? (
+              <TabsList
+                variant="line"
+                activateOnFocus
+                aria-label="Post discussion"
+                className="h-10 gap-4 border-b p-0"
+              >
+                {features.comments ? (
+                  <TabsTrigger value="comments" className="px-1 text-sm">
+                    Comments
+                  </TabsTrigger>
+                ) : null}
+                <TabsTrigger value="activities" className="px-1 text-sm">
+                  Activities
+                </TabsTrigger>
+              </TabsList>
+            ) : null}
+            {features.comments ? (
+              <TabsContent value="comments" keepMounted>
+                <section
+                  className={
+                    published && feedbax.history
+                      ? "post-detail-comments post-detail-comments-tab"
+                      : "post-detail-comments"
+                  }
+                  aria-labelledby={commentsHeadingId}
                 >
-                  <label
-                    className="comment-composer-label"
-                    htmlFor={`${id}-comment-body`}
+                  <h2
+                    id={commentsHeadingId}
+                    className={
+                      published && feedbax.history ? "sr-only" : undefined
+                    }
                   >
-                    {replyingTo ? "Write a reply" : "Add a comment"}
-                  </label>
-                  <p className="comment-composer-hint">
-                    Your display name is public. Your email is used only to
-                    unlock commenting and is never shown.
-                  </p>
-                  <Textarea
-                    className="comment-composer-input"
-                    id={`${id}-comment-body`}
-                    name="body"
-                    rows={4}
-                    placeholder="Share context, an example, or a question…"
-                    required
-                  />
-                  {turnstileSiteKey &&
-                  !sessionStorage.getItem("feedbax:participation-pass") ? (
-                    <div
-                      ref={(element) => {
-                        turnstileContainer.current = element;
-                        if (
-                          element &&
-                          window.turnstile &&
-                          !turnstileWidget.current
-                        )
-                          turnstileWidget.current = window.turnstile.render(
-                            element,
-                            { sitekey: turnstileSiteKey },
-                          );
-                      }}
-                      className="cf-turnstile"
-                      data-sitekey={turnstileSiteKey}
-                    />
+                    Comments
+                  </h2>
+                  {submitComment &&
+                  (identity.enabled ? identity.ready : profileReady) &&
+                  canComment ? (
+                    <form
+                      className="comment-composer"
+                      aria-label="Comment composer"
+                      onSubmit={createComment}
+                    >
+                      <label
+                        className="comment-composer-label"
+                        htmlFor={`${id}-comment-body`}
+                      >
+                        {replyingTo ? "Write a reply" : "Add a comment"}
+                      </label>
+                      <p className="comment-composer-hint">
+                        {identity.enabled
+                          ? `Posting as ${identity.displayName}.`
+                          : "Your name is public. Your email stays private."}
+                      </p>
+                      <Textarea
+                        ref={composerInput}
+                        className="comment-composer-input"
+                        id={`${id}-comment-body`}
+                        name="body"
+                        rows={3}
+                        placeholder="Share context, an example, or a question…"
+                        required
+                      />
+                      {turnstileSiteKey &&
+                      !sessionStorage.getItem("feedbax:participation-pass") ? (
+                        <div
+                          ref={(element) => {
+                            turnstileContainer.current = element;
+                            if (
+                              element &&
+                              window.turnstile &&
+                              !turnstileWidget.current
+                            )
+                              turnstileWidget.current = window.turnstile.render(
+                                element,
+                                { sitekey: turnstileSiteKey },
+                              );
+                          }}
+                          className="cf-turnstile"
+                          data-sitekey={turnstileSiteKey}
+                        />
+                      ) : null}
+                      <ImageAttachments
+                        value={images}
+                        onChange={setImages}
+                        onUploadingChange={setUploading}
+                      />
+                      <div className="comment-composer-actions">
+                        <Button
+                          type="submit"
+                          disabled={uploading || submittingComment}
+                        >
+                          {submittingComment
+                            ? "Posting…"
+                            : replyingTo
+                              ? "Post reply"
+                              : "Post comment"}
+                        </Button>
+                        {replyingTo ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => setReplyingTo(undefined)}
+                          >
+                            Cancel reply
+                          </Button>
+                        ) : null}
+                      </div>
+                    </form>
+                  ) : submitComment && identity.enabled ? (
+                    <ConnectedSignInPrompt />
+                  ) : submitComment ? (
+                    <DeviceProfilePrompt purpose="comment" />
                   ) : null}
-                  <div className="comment-composer-actions">
-                    <Button type="submit">
-                      {replyingTo ? "Post reply" : "Post comment"}
-                    </Button>
-                    {replyingTo ? (
+                  {commentError ? <p role="alert">{commentError}</p> : null}
+                  <div
+                    className="post-detail-thread-list"
+                    role="region"
+                    aria-label="Comment threads"
+                    tabIndex={localComments.length ? 0 : undefined}
+                  >
+                    {commentsLoading && localComments.length === 0 ? (
+                      <PostCommentsSkeleton />
+                    ) : commentsLoadError &&
+                      localComments.length ===
+                        0 ? null : localComments.length === 0 ? (
+                      <p className="py-5 text-sm text-muted-foreground">
+                        No comments yet
+                      </p>
+                    ) : (
+                      <div className="comment-threads">
+                        {localComments.map((thread) => (
+                          <article className="comment-thread" key={thread.id}>
+                            {thread.comments.map((comment, index) => {
+                              const canChange = Boolean(
+                                mutateComment &&
+                                commentCapabilities[comment.id],
+                              );
+                              const canReply = Boolean(
+                                index === 0 && submitComment && canComment,
+                              );
+                              return (
+                                <div
+                                  className="comment"
+                                  data-reply={index > 0 || undefined}
+                                  key={comment.id}
+                                >
+                                  <header className="comment-header">
+                                    <div className="comment-author">
+                                      <strong>
+                                        {comment.author.displayName}
+                                      </strong>
+                                      {comment.author.kind === "participant" ? (
+                                        <span>
+                                          {comment.author.verified
+                                            ? "Verified"
+                                            : "Unverified"}
+                                        </span>
+                                      ) : null}
+                                    </div>
+                                    <time
+                                      dateTime={comment.createdAt.toISOString()}
+                                    >
+                                      {formatPublicDate(
+                                        comment.createdAt,
+                                        "long",
+                                      )}
+                                    </time>
+                                  </header>
+                                  {editingComment?.id === comment.id ? (
+                                    <form
+                                      className="mt-3 space-y-2"
+                                      aria-label="Edit Comment"
+                                      onSubmit={(event) => {
+                                        event.preventDefault();
+                                        void changeComment(
+                                          "edit",
+                                          {
+                                            ...comment,
+                                            discussionId: thread.id,
+                                          },
+                                          editingComment.body,
+                                        );
+                                      }}
+                                    >
+                                      <Textarea
+                                        aria-label="Comment text"
+                                        value={editingComment.body}
+                                        onChange={(event) =>
+                                          setEditingComment({
+                                            id: comment.id,
+                                            body: event.target.value,
+                                          })
+                                        }
+                                        required
+                                      />
+                                      <div className="flex gap-2">
+                                        <Button size="sm" type="submit">
+                                          Save
+                                        </Button>
+                                        <Button
+                                          size="sm"
+                                          type="button"
+                                          variant="ghost"
+                                          onClick={() =>
+                                            setEditingComment(undefined)
+                                          }
+                                        >
+                                          Cancel
+                                        </Button>
+                                      </div>
+                                    </form>
+                                  ) : (
+                                    <>
+                                      <p className="comment-body">
+                                        {comment.body}
+                                      </p>
+                                      <ImageGallery images={comment.images} />
+                                    </>
+                                  )}
+                                  {canChange || canReply ? (
+                                    <div
+                                      className="comment-actions"
+                                      role="group"
+                                      aria-label={`Comment actions by ${comment.author.displayName}`}
+                                    >
+                                      {canReply ? (
+                                        <Button
+                                          type="button"
+                                          size="sm"
+                                          variant="ghost"
+                                          onClick={() => {
+                                            setReplyingTo(thread.id);
+                                            composerInput.current?.focus();
+                                          }}
+                                        >
+                                          Reply
+                                        </Button>
+                                      ) : null}
+                                      {canChange ? (
+                                        <>
+                                          <Button
+                                            type="button"
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() =>
+                                              setEditingComment({
+                                                id: comment.id,
+                                                body: comment.body,
+                                              })
+                                            }
+                                          >
+                                            Edit
+                                          </Button>
+                                          <Button
+                                            type="button"
+                                            size="sm"
+                                            variant="ghost"
+                                            className="text-destructive hover:text-destructive"
+                                            onClick={() =>
+                                              void changeComment("delete", {
+                                                ...comment,
+                                                discussionId: thread.id,
+                                              })
+                                            }
+                                          >
+                                            Delete
+                                          </Button>
+                                        </>
+                                      ) : null}
+                                    </div>
+                                  ) : null}
+                                </div>
+                              );
+                            })}
+                          </article>
+                        ))}
+                      </div>
+                    )}
+                    {commentsLoadError ? (
+                      <div className="space-y-3 py-4">
+                        <p
+                          role="alert"
+                          className="text-sm text-muted-foreground"
+                        >
+                          Comments could not be loaded.
+                        </p>
+                        {retryComments ? (
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            onClick={retryComments}
+                          >
+                            Retry Comments
+                          </Button>
+                        ) : null}
+                      </div>
+                    ) : null}
+                    {loadMore ? (
                       <Button
                         type="button"
-                        variant="ghost"
-                        onClick={() => setReplyingTo(undefined)}
+                        variant="outline"
+                        disabled={commentsLoading}
+                        onClick={() => void loadMore()}
                       >
-                        Cancel reply
+                        {commentsLoading ? "Loading Comments…" : "Load more"}
                       </Button>
                     ) : null}
                   </div>
-                </form>
-              ) : submitComment ? (
-                <DeviceProfilePrompt purpose="comment" />
-              ) : null}
-              {commentError ? <p role="alert">{commentError}</p> : null}
-              {loadMore ? (
-                <button
-                  type="button"
-                  className="button"
-                  onClick={() => void loadMore()}
-                >
-                  Load more
-                </button>
-              ) : null}
-            </section>
-          ) : null}
+                </section>
+              </TabsContent>
+            ) : null}
+            {published && feedbax.history ? (
+              <TabsContent value="activities" keepMounted>
+                <PostHistory slug={post.slug} />
+              </TabsContent>
+            ) : null}
+          </Tabs>
         </div>
         <aside
           className="post-detail-sidebar"
@@ -552,39 +740,37 @@ export function PublicPostDetail({
   );
 }
 
-export function PublicPostDetailSkeleton() {
+function PostCommentsSkeleton() {
   return (
-    <main
-      className="feedback-detail post-detail-skeleton"
-      aria-label="Loading Post details"
+    <div
+      role="status"
+      aria-label="Loading Comments"
       aria-busy="true"
+      className="space-y-5 py-6"
     >
-      <div aria-hidden="true">
-        <Skeleton className="post-detail-skeleton-back" />
-        <article>
-          <Skeleton className="post-detail-skeleton-meta" />
-          <Skeleton className="post-detail-skeleton-title" />
-          <Skeleton className="post-detail-skeleton-copy" />
-          <Skeleton className="post-detail-skeleton-copy post-detail-skeleton-copy-short" />
-        </article>
+      <span className="sr-only">Loading Comments…</span>
+      <div aria-hidden="true" className="space-y-4">
+        {[0, 1].map((row) => (
+          <div key={row} className="space-y-3">
+            <Skeleton className="h-3 w-24" />
+            <Skeleton className="h-3 w-full" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+        ))}
       </div>
-      <span className="sr-only">Loading Post details…</span>
-    </main>
+    </div>
   );
 }
 
+export { PublicPostDetailSkeleton } from "./public-post-detail-skeleton";
+
 function addComment(
   threads: CommentThreadPage["items"],
   comment: CreatedComment,
 ) {
-  const existing = threads.find((thread) => thread.id === comment.discussionId);
-  return existing
-    ? threads.map((thread) =>
-        thread.id === comment.discussionId
-          ? { ...thread, comments: [...thread.comments, comment] }
-          : thread,
-      )
-    : [...threads, { id: comment.discussionId, comments: [comment] }];
+  return mergeCommentThreads(threads, [
+    { id: comment.discussionId, comments: [comment] },
+  ]);
 }
 
 function removeComment(threads: CommentThreadPage["items"], commentId: string) {
@@ -604,26 +790,6 @@ function replaceComment(
   return addComment(removeComment(threads, optimisticId), confirmed);
 }
 
-function mergeConfirmedComments(
-  current: CommentThreadPage["items"],
-  confirmed: CommentThreadPage["items"],
-) {
-  const merged = new Map(current.map((thread) => [thread.id, thread]));
-  for (const thread of confirmed) {
-    const existing = merged.get(thread.id);
-    if (!existing) {
-      merged.set(thread.id, thread);
-      continue;
-    }
-    const comments = new Map(
-      existing.comments.map((comment) => [comment.id, comment]),
-    );
-    for (const comment of thread.comments) comments.set(comment.id, comment);
-    merged.set(thread.id, { ...existing, comments: [...comments.values()] });
-  }
-  return [...merged.values()];
-}
-
 interface StoredCommentCapability {
   capability: string;
   expiresAt: number;