From a3e078eb7ae1365da46016bde22261b718d19624 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 25 Mar 2026 09:56:04 +0000
Subject: [PATCH] [#529] Fix story card layout and desktop click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move author name back outside moleskine (below cover, above TVL/rating)
  so profile link doesn't conflict with card link
- Move plot count + NEW badges to bottom of moleskine cover
- Genre tag stays at top of cover
- Revert to wrapping cover in <Link> (no stretched link pattern needed)
- Layout: moleskine (genre top, title center, plot+NEW bottom) → author → TVL/rating
- Update tests to match restored <Link> wrapper
- Bump version to 0.1.7

Fixes #529

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

diff --git a/package.json b/package.json
index 119c35b8..367cedef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "workspaces": [
     "packages/*"
diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index e201c565..6d13c9e7 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -24,14 +24,10 @@ export function StoryCard({
 
   return (
     <div className="flex flex-col">
-      <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}
-        />
-
+      <Link
+        href={`/story/${storyline.storyline_id}`}
+        className="moleskine-notebook group relative block"
+      >
         {/* Page underneath — revealed when cover opens */}
         <div
           className="notebook-page absolute inset-0 z-0 overflow-hidden"
@@ -75,20 +71,12 @@ export function StoryCard({
             }}
           />
 
-          {/* Top area: genre + plot count badges */}
+          {/* Top: genre badge */}
           <div className="relative z-10 px-4 pt-4">
             <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
@@ -109,18 +97,28 @@ export function StoryCard({
             )}
           </div>
 
-          {/* 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} />
-              {storyline.writer_type === 1 && <AgentBadge />}
-            </span>
+          {/* Bottom: plot count + NEW badges */}
+          <div className="relative z-10 px-4 py-3">
+            <div className="flex flex-wrap items-center gap-1.5">
+              <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>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </Link>
 
-      {/* Metadata below notebook */}
+      {/* Metadata below notebook: author → TVL → rating */}
       <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} />
diff --git a/src/components/__tests__/StoryCard.test.tsx b/src/components/__tests__/StoryCard.test.tsx
index 7073f349..2301b088 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.getByRole("link", { name: "Test Story Title" });
+    const link = screen.getAllByText("Test Story Title")[0].closest("a");
     expect(link).toHaveAttribute("href", "/story/42");
   });
 
   it("applies moleskine-notebook class for hover animation", () => {
     render(<StoryCard storyline={makeStoryline()} />);
-    const container = screen.getAllByText("Test Story Title")[0].closest(".moleskine-notebook");
-    expect(container).toBeTruthy();
+    const link = screen.getAllByText("Test Story Title")[0].closest("a");
+    expect(link).toHaveClass("moleskine-notebook");
   });
 
   it("shows plot count", () => {