From 2eca74844b5875297abd001f665fe4bae12b1a09 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 23:01:18 +0100
Subject: [PATCH 1/2] [#775] Redesign storyline header: Writer label + cleaner
 layout

- Change "by" to "Writer" prefix for author line
- Split header into 3 clear sections: Title, Writer (with AgentBadge),
  Stats+Badges (plots, views, rating, genre, language)
- Tighter spacing and better visual grouping
- Mobile-friendly with flex-wrap

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index 4b066268..b511770d 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -260,20 +260,25 @@ function StoryHeader({
 }) {
   return (
     <header className="border-border border-b pb-6">
+      {/* Title */}
       <h1 className="font-body text-2xl font-bold tracking-tight text-accent">
         {storyline.title}
       </h1>
-      <div className="text-muted mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs">
-        <span>
-          by{" "}
-          <Suspense fallback={<span className="text-foreground">{truncateAddress(storyline.writer_address)}</span>}>
-            <WriterIdentity address={storyline.writer_address} />
-          </Suspense>
-        </span>
-        <span>
-          {storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}
-        </span>
+
+      {/* Writer */}
+      <div className="mt-2 flex items-center gap-1.5 text-xs text-muted">
+        <span>Writer</span>
+        <Suspense fallback={<span className="text-foreground font-medium">{truncateAddress(storyline.writer_address)}</span>}>
+          <WriterIdentity address={storyline.writer_address} />
+        </Suspense>
+        {storyline.writer_type === 1 && <AgentBadge />}
+      </div>
+
+      {/* Stats + Badges */}
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-muted">
+        <span>{storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}</span>
         <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+        <RatingSummary storylineId={storyline.storyline_id} />
         {storyline.genre && (
           <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
             {storyline.genre}
@@ -284,8 +289,6 @@ function StoryHeader({
             {storyline.language}
           </span>
         )}
-        {storyline.writer_type === 1 && <AgentBadge />}
-        <RatingSummary storylineId={storyline.storyline_id} />
       </div>
 
       {priceInfo && (

From 78a22762945d5f20aad031deec4820348e85e1c0 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Thu, 2 Apr 2026 23:04:02 +0100
Subject: [PATCH 2/2] [#775] Fix T2a review: split stats, badges, and rating
 into distinct sections

- Stats row: plots + views
- Badges row: genre + language
- Rating: separate section below

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/story/[storylineId]/page.tsx | 34 ++++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index b511770d..b64929e5 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -274,21 +274,31 @@ function StoryHeader({
         {storyline.writer_type === 1 && <AgentBadge />}
       </div>
 
-      {/* Stats + Badges */}
-      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs text-muted">
+      {/* Stats */}
+      <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted">
         <span>{storyline.plot_count} {storyline.plot_count === 1 ? "plot" : "plots"}</span>
         <ViewCount storylineId={storyline.storyline_id} initialCount={storyline.view_count} />
+      </div>
+
+      {/* Badges */}
+      {(storyline.genre || (storyline.language && storyline.language !== "English")) && (
+        <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+          {storyline.genre && (
+            <span className="border-border rounded border px-1.5 py-0.5 text-[10px] text-muted">
+              {storyline.genre}
+            </span>
+          )}
+          {storyline.language && storyline.language !== "English" && (
+            <span className="border-border rounded border px-1.5 py-0.5 text-[10px] text-muted">
+              {storyline.language}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Rating */}
+      <div className="mt-1.5">
         <RatingSummary storylineId={storyline.storyline_id} />
-        {storyline.genre && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.genre}
-          </span>
-        )}
-        {storyline.language && storyline.language !== "English" && (
-          <span className="border-border rounded border px-1.5 py-0.5 text-[10px]">
-            {storyline.language}
-          </span>
-        )}
       </div>
 
       {priceInfo && (