From 73e7c7ed2081a848f02600d7ff3903dc0b839141 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 25 Mar 2026 08:00:42 +0000
Subject: [PATCH 1/3] [#518] Fix home page story card layout

- Move author name inside moleskine cover (bottom area, no nested links)
- Move plot count inside as compact badge next to genre tag
- Move NEW indicator inside cover as badge
- Reduce metadata below card to only TVL and rating
- Bump version to 0.1.2

Fixes #518

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json                 |  2 +-
 src/components/StoryCard.tsx | 29 +++++++++++++++++------------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 1114e099..446dee14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index d45ddc49..aeea777e 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -71,12 +71,20 @@ export function StoryCard({
             }}
           />
 
-          {/* Top area: genre badge */}
+          {/* Top area: genre + plot count badges */}
           <div className="relative z-10 px-4 pt-4">
-            <div className="flex items-start justify-between gap-2">
+            <div className="flex flex-wrap items-start gap-1.5">
               <span className="rounded-sm bg-[var(--accent)]/10 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-widest text-[var(--accent)]">
                 {displayGenre || "Uncategorized"}
               </span>
+              <span className="rounded-sm border border-[var(--border)] px-1.5 py-0.5 text-[9px] text-[var(--text-muted)]">
+                {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
+              </span>
+              {isNew && (
+                <span className="rounded-sm bg-[var(--accent)]/10 px-1.5 py-0.5 text-[9px] font-bold text-[var(--accent)]">
+                  NEW
+                </span>
+              )}
               {storyline.sunset && (
                 <span className="rounded-sm border border-[var(--border)] px-1.5 py-0.5 text-[9px] text-[var(--text-muted)]">
                   complete
@@ -97,26 +105,23 @@ export function StoryCard({
             )}
           </div>
 
-          {/* Bottom spacer (author shown below card with profile link) */}
-          <div className="relative z-10 px-4 py-3" />
+          {/* Bottom: author name inside cover */}
+          <div className="relative z-10 px-4 py-3 text-[10px] text-[var(--text-muted)]">
+            <span className="inline-flex items-center gap-1">
+              <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
+              {storyline.writer_type === 1 && <AgentBadge />}
+            </span>
+          </div>
         </div>
       </Link>
 
       {/* Metadata below notebook */}
       <div className="mt-2.5 flex flex-col gap-0.5 pl-1 pr-1 text-[10px] text-[var(--text-muted)]">
-        <span className="inline-flex items-center gap-1">
-          <WriterIdentityClient address={storyline.writer_address} />
-          {storyline.writer_type === 1 && <AgentBadge />}
-        </span>
         {storyline.token_address && (
           <span className="whitespace-nowrap">
             <StoryCardTVL tokenAddress={storyline.token_address} />
           </span>
         )}
-        <span className="whitespace-nowrap">
-          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"} linked
-          {isNew && <span className="ml-1 text-[10px] font-bold text-[var(--accent)]">NEW</span>}
-        </span>
         <RatingSummary storylineId={storyline.storyline_id} />
       </div>
     </div>

From c1062625241442c6bd905983b772abcd2d76d5bc Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 25 Mar 2026 08:03:46 +0000
Subject: [PATCH 2/3] [#518] Fix: use stretched link pattern to keep author
 profile clickable

Restructured card to avoid nested <a> tags:
- Card wrapper changed from <Link> to <div> with a stretched <Link> overlay (z-30)
- Author section at z-40 so WriterIdentityClient profile link is clickable above the overlay
- Re-enabled linkProfile={true} (default) on WriterIdentityClient

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/StoryCard.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index aeea777e..e201c565 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -24,10 +24,14 @@ export function StoryCard({
 
   return (
     <div className="flex flex-col">
-      <Link
-        href={`/story/${storyline.storyline_id}`}
-        className="moleskine-notebook group relative block"
-      >
+      <div className="moleskine-notebook group relative block">
+        {/* Stretched link — makes the whole card clickable */}
+        <Link
+          href={`/story/${storyline.storyline_id}`}
+          className="absolute inset-0 z-30"
+          aria-label={storyline.title}
+        />
+
         {/* Page underneath — revealed when cover opens */}
         <div
           className="notebook-page absolute inset-0 z-0 overflow-hidden"
@@ -105,15 +109,15 @@ export function StoryCard({
             )}
           </div>
 
-          {/* Bottom: author name inside cover */}
-          <div className="relative z-10 px-4 py-3 text-[10px] text-[var(--text-muted)]">
+          {/* Bottom: author name inside cover — z-40 so profile link sits above card link */}
+          <div className="relative z-40 px-4 py-3 text-[10px] text-[var(--text-muted)]">
             <span className="inline-flex items-center gap-1">
-              <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
+              <WriterIdentityClient address={storyline.writer_address} />
               {storyline.writer_type === 1 && <AgentBadge />}
             </span>
           </div>
         </div>
-      </Link>
+      </div>
 
       {/* Metadata below notebook */}
       <div className="mt-2.5 flex flex-col gap-0.5 pl-1 pr-1 text-[10px] text-[var(--text-muted)]">

From 08aa675fb30e55b2589bd628d6f7cbdc04c4ca3d Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 25 Mar 2026 08:09:15 +0000
Subject: [PATCH 3/3] [#518] Fix tests for stretched link pattern

Update StoryCard tests to match new card structure:
- Use getByRole('link') instead of closest('a') for story link test
- Use closest('.moleskine-notebook') for class test

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/__tests__/StoryCard.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/__tests__/StoryCard.test.tsx b/src/components/__tests__/StoryCard.test.tsx
index 2301b088..7073f349 100644
--- a/src/components/__tests__/StoryCard.test.tsx
+++ b/src/components/__tests__/StoryCard.test.tsx
@@ -69,14 +69,14 @@ describe("StoryCard", () => {
 
   it("links to correct story page", () => {
     render(<StoryCard storyline={makeStoryline({ storyline_id: 42 })} />);
-    const link = screen.getAllByText("Test Story Title")[0].closest("a");
+    const link = screen.getByRole("link", { name: "Test Story Title" });
     expect(link).toHaveAttribute("href", "/story/42");
   });
 
   it("applies moleskine-notebook class for hover animation", () => {
     render(<StoryCard storyline={makeStoryline()} />);
-    const link = screen.getAllByText("Test Story Title")[0].closest("a");
-    expect(link).toHaveClass("moleskine-notebook");
+    const container = screen.getAllByText("Test Story Title")[0].closest(".moleskine-notebook");
+    expect(container).toBeTruthy();
   });
 
   it("shows plot count", () => {