create-feedbax 0.2.0 → 0.2.1

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

@@ -1,16 +1,16 @@
+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 { ArrowLeft } from "lucide-react";
 import {
   type FormEvent,
   type ReactNode,
@@ -24,6 +24,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 +43,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 +58,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 +84,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 +98,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]);
 
@@ -154,20 +183,27 @@ export function PublicPostDetail({
     const form = new FormData(event.currentTarget);
     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);
@@ -178,9 +214,10 @@ export function PublicPostDetail({
       const turnstileToken = form.get("cf-turnstile-response");
       const confirmed = await submitComment({
         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,6 +228,7 @@ export function PublicPostDetail({
             }
           : {}),
       });
+      setImages([]);
       setLocalComments((current) =>
         replaceComment(current, optimisticId, confirmed),
       );
@@ -210,6 +248,8 @@ export function PublicPostDetail({
           ? error.message
           : "Comment could not be saved. Try again.",
       );
+    } finally {
+      setSubmittingComment(false);
     }
   }
 
@@ -274,6 +314,21 @@ export function PublicPostDetail({
           </div>
           <h1 id={headingId}>{post.title}</h1>
           <p className="feedback-detail-description">{post.description}</p>
+          {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 ? (
             <section
               className="border-l-4 border-primary bg-muted/50 p-4"
@@ -294,152 +349,21 @@ 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}
+            ) : null}
+            {published ? <FollowPostButton slug={post.slug} /> : null}
+          </div>
           {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 ? (
+              {submitComment &&
+              (identity.enabled ? identity.ready : profileReady) &&
+              canComment ? (
                 <form
                   className="comment-composer"
                   aria-label="Comment composer"
@@ -452,14 +376,16 @@ export function PublicPostDetail({
                     {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.
+                    {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={4}
+                    rows={3}
                     placeholder="Share context, an example, or a question…"
                     required
                   />
@@ -482,9 +408,21 @@ export function PublicPostDetail({
                       data-sitekey={turnstileSiteKey}
                     />
                   ) : null}
+                  <ImageAttachments
+                    value={images}
+                    onChange={setImages}
+                    onUploadingChange={setUploading}
+                  />
                   <div className="comment-composer-actions">
-                    <Button type="submit">
-                      {replyingTo ? "Post reply" : "Post comment"}
+                    <Button
+                      type="submit"
+                      disabled={uploading || submittingComment}
+                    >
+                      {submittingComment
+                        ? "Posting…"
+                        : replyingTo
+                          ? "Post reply"
+                          : "Post comment"}
                     </Button>
                     {replyingTo ? (
                       <Button
@@ -497,19 +435,193 @@ export function PublicPostDetail({
                     ) : null}
                   </div>
                 </form>
+              ) : submitComment && identity.enabled ? (
+                <ConnectedSignInPrompt />
               ) : 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}
+              <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="outline"
+                    disabled={commentsLoading}
+                    onClick={() => void loadMore()}
+                  >
+                    {commentsLoading ? "Loading Comments…" : "Load more"}
+                  </Button>
+                ) : null}
+              </div>
             </section>
           ) : null}
         </div>
@@ -552,39 +664,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 +714,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;