From ed14f0cefff6004b60dd6ee1700cb65cc81c9f1d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 21:35:48 +0000
Subject: [PATCH 1/2] [#189] Add per-plot comment system with pagination

CommentSection component:
- Wallet signature auth for posting (not a transaction)
- 20 comments per page with "Show more" pagination
- Each comment: truncated address, content, relative timestamp
- Rate limit handled server-side (1 per address per plot per minute)
- Max 1000 chars, live counter
- Connect wallet prompt for unauthenticated users

Integrated into:
- Story page (genesis plot comments)
- Plot detail pages (per-chapter comments)

Fixes #189

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../story/[storylineId]/[plotIndex]/page.tsx  |   4 +
 src/app/story/[storylineId]/page.tsx          |   6 +-
 src/components/CommentSection.tsx             | 191 ++++++++++++++++++
 3 files changed, 200 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CommentSection.tsx

diff --git a/src/app/story/[storylineId]/[plotIndex]/page.tsx b/src/app/story/[storylineId]/[plotIndex]/page.tsx
index e257082b..8329d024 100644
--- a/src/app/story/[storylineId]/[plotIndex]/page.tsx
+++ b/src/app/story/[storylineId]/[plotIndex]/page.tsx
@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { createServerClient, type Storyline, type Plot } from "../../../../../lib/supabase";
 import { truncateAddress } from "../../../../../lib/utils";
 import { ViewTracker } from "../../../../components/ViewCount";
+import { CommentSection } from "../../../../components/CommentSection";
 import Link from "next/link";
 
 type Params = Promise<{ storylineId: string; plotIndex: string }>;
@@ -126,6 +127,9 @@ export default async function PlotDetailPage({ params }: { params: Params }) {
         </p>
       )}
 
+      {/* Comments */}
+      <CommentSection storylineId={sid} plotIndex={pidx} />
+
       {/* Navigation */}
       <nav className="border-border mt-10 flex items-center justify-between border-t pt-6">
         {prevIndex !== null ? (
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 5bde3141..bbcda4d6 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -16,6 +16,7 @@ import Link from "next/link";
 import { AgentBadge } from "../../../components/AgentBadge";
 import { WriterIdentity } from "../../../components/WriterIdentity";
 import { ViewCount, ViewTracker } from "../../../components/ViewCount";
+import { CommentSection } from "../../../components/CommentSection";
 
 type Params = Promise<{ storylineId: string }>;
 
@@ -134,7 +135,10 @@ export default async function StoryPage({ params }: { params: Params }) {
         {/* Story content — genesis + table of contents */}
         <main>
           {genesis ? (
-            <GenesisSection plot={genesis} />
+            <>
+              <GenesisSection plot={genesis} />
+              <CommentSection storylineId={id} plotIndex={0} />
+            </>
           ) : (
             <p className="text-muted text-sm">No plots yet.</p>
           )}
diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx
new file mode 100644
index 00000000..457bb329
--- /dev/null
+++ b/src/components/CommentSection.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useAccount, useSignMessage } from "wagmi";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { truncateAddress } from "../../lib/utils";
+import { ConnectWallet } from "./ConnectWallet";
+
+interface Comment {
+  id: number;
+  storyline_id: number;
+  plot_index: number;
+  commenter_address: string;
+  content: string;
+  created_at: string;
+}
+
+interface CommentsResponse {
+  comments: Comment[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+const PAGE_SIZE = 20;
+
+function relativeTime(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function CommentSection({
+  storylineId,
+  plotIndex,
+}: {
+  storylineId: number;
+  plotIndex: number;
+}) {
+  const { address, isConnected } = useAccount();
+  const { signMessageAsync } = useSignMessage();
+  const queryClient = useQueryClient();
+
+  const [page, setPage] = useState(1);
+  const [content, setContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const queryKey = ["comments", storylineId, plotIndex, page];
+
+  const { data, isLoading } = useQuery<CommentsResponse>({
+    queryKey,
+    queryFn: async () => {
+      const res = await fetch(
+        `/api/comments?storylineId=${storylineId}&plotIndex=${plotIndex}&page=${page}&limit=${PAGE_SIZE}`,
+      );
+      if (!res.ok) throw new Error("Failed to load comments");
+      return res.json();
+    },
+    staleTime: 30000,
+  });
+
+  const comments = data?.comments ?? [];
+  const total = data?.total ?? 0;
+  const hasMore = page * PAGE_SIZE < total;
+
+  const handleSubmit = useCallback(async () => {
+    if (!address || !content.trim()) return;
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      const trimmed = content.trim();
+      const message = `Comment on storyline ${storylineId} plot ${plotIndex}: ${trimmed}`;
+      const signature = await signMessageAsync({ message });
+
+      const res = await fetch("/api/comments", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          storylineId,
+          plotIndex,
+          content: trimmed,
+          address,
+          signature,
+          message,
+        }),
+      });
+
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error || `Error ${res.status}`);
+      }
+
+      setContent("");
+      setPage(1);
+      queryClient.invalidateQueries({ queryKey: ["comments", storylineId, plotIndex] });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to post comment");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [address, content, storylineId, plotIndex, signMessageAsync, queryClient]);
+
+  return (
+    <section className="border-border mt-8 border-t pt-6">
+      <h3 className="text-foreground mb-4 text-sm font-semibold">
+        Comments {total > 0 && <span className="text-muted font-normal">({total})</span>}
+      </h3>
+
+      {/* Comment input */}
+      {isConnected ? (
+        <div className="mb-6">
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value.slice(0, 1000))}
+            disabled={submitting}
+            rows={3}
+            placeholder="Write a comment..."
+            className="border-border bg-surface text-foreground placeholder:text-muted w-full resize-y rounded border px-3 py-2 text-sm leading-relaxed focus:border-accent focus:outline-none disabled:opacity-50"
+          />
+          <div className="mt-2 flex items-center justify-between">
+            <span className="text-muted text-xs">{content.length} / 1,000 chars</span>
+            <button
+              onClick={handleSubmit}
+              disabled={submitting || !content.trim()}
+              className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-1.5 text-xs font-medium transition-colors disabled:opacity-50"
+            >
+              {submitting ? "Signing..." : "Post Comment"}
+            </button>
+          </div>
+          {error && (
+            <p className="text-error mt-2 text-xs">{error}</p>
+          )}
+        </div>
+      ) : (
+        <div className="mb-6 flex items-center gap-3">
+          <span className="text-muted text-xs">Connect wallet to comment</span>
+          <ConnectWallet />
+        </div>
+      )}
+
+      {/* Comment list */}
+      {isLoading && comments.length === 0 && (
+        <p className="text-muted text-xs">Loading comments...</p>
+      )}
+
+      {!isLoading && comments.length === 0 && (
+        <p className="text-muted text-xs">No comments yet. Be the first!</p>
+      )}
+
+      <div className="space-y-4">
+        {comments.map((c) => (
+          <div key={c.id} className="text-sm">
+            <div className="flex items-baseline gap-2">
+              <span className="text-foreground text-xs font-medium">
+                {truncateAddress(c.commenter_address)}
+              </span>
+              <span className="text-muted text-[10px]">
+                {relativeTime(c.created_at)}
+              </span>
+            </div>
+            <p className="text-foreground mt-0.5 text-xs leading-relaxed">
+              {c.content}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {/* Show more */}
+      {hasMore && (
+        <button
+          onClick={() => setPage((p) => p + 1)}
+          className="text-muted hover:text-accent mt-4 text-xs transition-colors"
+        >
+          Show more comments
+        </button>
+      )}
+    </section>
+  );
+}

From 43bc33aa2d54c6ac4ca8cb4acb09f9fcb7397c18 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 21:37:49 +0000
Subject: [PATCH 2/2] [#189] Fix Show more to accumulate comments across pages

First page fetched via useQuery, additional pages appended to
extraComments state on "Show more" click. New comments reset
accumulated pages and refetch. Addresses T2a review feedback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/CommentSection.tsx | 47 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx
index 457bb329..d5fd1ebe 100644
--- a/src/components/CommentSection.tsx
+++ b/src/components/CommentSection.tsx
@@ -50,18 +50,18 @@ export function CommentSection({
   const { signMessageAsync } = useSignMessage();
   const queryClient = useQueryClient();
 
-  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(1);
+  const [extraComments, setExtraComments] = useState<Comment[]>([]);
   const [content, setContent] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-
-  const queryKey = ["comments", storylineId, plotIndex, page];
+  const [loadingMore, setLoadingMore] = useState(false);
 
   const { data, isLoading } = useQuery<CommentsResponse>({
-    queryKey,
+    queryKey: ["comments", storylineId, plotIndex],
     queryFn: async () => {
       const res = await fetch(
-        `/api/comments?storylineId=${storylineId}&plotIndex=${plotIndex}&page=${page}&limit=${PAGE_SIZE}`,
+        `/api/comments?storylineId=${storylineId}&plotIndex=${plotIndex}&page=1&limit=${PAGE_SIZE}`,
       );
       if (!res.ok) throw new Error("Failed to load comments");
       return res.json();
@@ -69,9 +69,26 @@ export function CommentSection({
     staleTime: 30000,
   });
 
-  const comments = data?.comments ?? [];
+  const firstPageComments = data?.comments ?? [];
   const total = data?.total ?? 0;
-  const hasMore = page * PAGE_SIZE < total;
+  const allComments = [...firstPageComments, ...extraComments];
+  const hasMore = pages * PAGE_SIZE < total;
+
+  const loadMore = useCallback(async () => {
+    const nextPage = pages + 1;
+    setLoadingMore(true);
+    try {
+      const res = await fetch(
+        `/api/comments?storylineId=${storylineId}&plotIndex=${plotIndex}&page=${nextPage}&limit=${PAGE_SIZE}`,
+      );
+      if (!res.ok) throw new Error("Failed to load comments");
+      const resp: CommentsResponse = await res.json();
+      setExtraComments((prev) => [...prev, ...resp.comments]);
+      setPages(nextPage);
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [pages, storylineId, plotIndex]);
 
   const handleSubmit = useCallback(async () => {
     if (!address || !content.trim()) return;
@@ -103,7 +120,8 @@ export function CommentSection({
       }
 
       setContent("");
-      setPage(1);
+      setExtraComments([]);
+      setPages(1);
       queryClient.invalidateQueries({ queryKey: ["comments", storylineId, plotIndex] });
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to post comment");
@@ -151,16 +169,16 @@ export function CommentSection({
       )}
 
       {/* Comment list */}
-      {isLoading && comments.length === 0 && (
+      {isLoading && allComments.length === 0 && (
         <p className="text-muted text-xs">Loading comments...</p>
       )}
 
-      {!isLoading && comments.length === 0 && (
+      {!isLoading && allComments.length === 0 && (
         <p className="text-muted text-xs">No comments yet. Be the first!</p>
       )}
 
       <div className="space-y-4">
-        {comments.map((c) => (
+        {allComments.map((c) => (
           <div key={c.id} className="text-sm">
             <div className="flex items-baseline gap-2">
               <span className="text-foreground text-xs font-medium">
@@ -180,10 +198,11 @@ export function CommentSection({
       {/* Show more */}
       {hasMore && (
         <button
-          onClick={() => setPage((p) => p + 1)}
-          className="text-muted hover:text-accent mt-4 text-xs transition-colors"
+          onClick={loadMore}
+          disabled={loadingMore}
+          className="text-muted hover:text-accent mt-4 text-xs transition-colors disabled:opacity-50"
         >
-          Show more comments
+          {loadingMore ? "Loading..." : "Show more comments"}
         </button>
       )}
     </section>