From d047f429859f5601058f6b5851235d8c2d467031 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Wed, 18 Mar 2026 09:37:29 +0000
Subject: [PATCH] [#292] Enhance book spine with layered page-thickness lines

- Added 2 offset border layers behind the main card creating a
  stacked-pages / closed-book depth illusion
- Page layers use decreasing opacity (border/40, border/60)
- Thin top-edge line for page block thickness
- Spine line on left preserved from #291
- All vector/stroke only, no fills or images

Fixes #292

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

diff --git a/src/components/StoryCard.tsx b/src/components/StoryCard.tsx
index 4a194574..988ead19 100644
--- a/src/components/StoryCard.tsx
+++ b/src/components/StoryCard.tsx
@@ -16,46 +16,57 @@ export function StoryCard({
 
   return (
     <div className="flex flex-col">
-      {/* Book cover with spine */}
-      <Link
-        href={`/story/${storyline.storyline_id}`}
-        className="border-border hover:border-accent-dim relative flex aspect-[2/3] flex-col justify-between overflow-hidden rounded border transition-colors"
-      >
-        {/* Spine edge — thin line on left */}
-        <div className="bg-border absolute inset-y-0 left-0 w-[3px]" />
+      {/* Book cover with page-thickness lines */}
+      <div className="relative mr-0 mb-[6px] ml-[6px]">
+        {/* Page layer 2 (furthest back) */}
+        <div className="border-border/40 pointer-events-none absolute -bottom-[5px] -left-[5px] right-[5px] top-[5px] rounded border" />
+        {/* Page layer 1 */}
+        <div className="border-border/60 pointer-events-none absolute -bottom-[3px] -left-[3px] right-[3px] top-[3px] rounded border" />
 
-        <div className="flex flex-1 flex-col justify-between py-6 pl-6 pr-5">
-          {/* Top: genre tag + completion badge */}
-          <div className="flex items-start justify-between gap-2">
-            <span className="text-muted text-[10px] uppercase tracking-widest">
-              {displayGenre || "Uncategorized"}
-            </span>
-            {storyline.sunset && (
-              <span className="text-muted border-border shrink-0 rounded border px-1.5 py-0.5 text-[10px]">
-                complete
-              </span>
-            )}
-          </div>
+        {/* Main card (front cover) */}
+        <Link
+          href={`/story/${storyline.storyline_id}`}
+          className="border-border hover:border-accent-dim relative flex aspect-[2/3] flex-col justify-between rounded border transition-colors"
+        >
+          {/* Spine edge — thicker left border */}
+          <div className="bg-border absolute inset-y-0 left-0 w-[3px] rounded-l" />
 
-          {/* Center: title */}
-          <div className="flex flex-1 flex-col items-center justify-center px-2 text-center">
-            <h3 className="text-foreground text-base font-bold leading-tight tracking-tight sm:text-lg">
-              {storyline.title}
-            </h3>
-            {storyline.language && storyline.language !== "English" && (
-              <span className="text-muted mt-2 text-[10px]">
-                {storyline.language}
+          {/* Top edge — page block thickness */}
+          <div className="bg-border/40 absolute inset-x-0 top-0 h-[1px]" />
+
+          <div className="flex flex-1 flex-col justify-between py-6 pl-6 pr-5">
+            {/* Top: genre tag + completion badge */}
+            <div className="flex items-start justify-between gap-2">
+              <span className="text-muted text-[10px] uppercase tracking-widest">
+                {displayGenre || "Uncategorized"}
               </span>
-            )}
-          </div>
+              {storyline.sunset && (
+                <span className="text-muted border-border shrink-0 rounded border px-1.5 py-0.5 text-[10px]">
+                  complete
+                </span>
+              )}
+            </div>
 
-          {/* Bottom: author */}
-          <div className="text-muted flex items-center justify-center gap-1 text-xs">
-            <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
-            {storyline.writer_type === 1 && <AgentBadge />}
+            {/* Center: title */}
+            <div className="flex flex-1 flex-col items-center justify-center px-2 text-center">
+              <h3 className="text-foreground text-base font-bold leading-tight tracking-tight sm:text-lg">
+                {storyline.title}
+              </h3>
+              {storyline.language && storyline.language !== "English" && (
+                <span className="text-muted mt-2 text-[10px]">
+                  {storyline.language}
+                </span>
+              )}
+            </div>
+
+            {/* Bottom: author */}
+            <div className="text-muted flex items-center justify-center gap-1 text-xs">
+              <WriterIdentityClient address={storyline.writer_address} linkProfile={false} />
+              {storyline.writer_type === 1 && <AgentBadge />}
+            </div>
           </div>
-        </div>
-      </Link>
+        </Link>
+      </div>
 
       {/* Metadata row below card */}
       <div className="text-muted mt-2 flex flex-wrap items-center justify-between gap-x-2 gap-y-1 px-1 text-[10px]">