From 268117af9f44abd3c67186916ec30b72f5c8bb2e Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Fri, 27 Mar 2026 16:48:28 +0000
Subject: [PATCH] [#298] Fix Reading Mode button position and add book icon

Move ReadingModeWrapper inline with the Genesis/date header on the
story page and inline with the chapter title on the chapter detail
page. Add an open-book SVG icon next to the "Reading Mode" label.
Button now sits in the same row as content headers instead of in a
separate right-aligned block above.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../story/[storylineId]/[plotIndex]/page.tsx  | 32 +++++++++---------
 src/app/story/[storylineId]/page.tsx          | 33 ++++++++++---------
 src/components/ReadingMode.tsx                |  6 +++-
 3 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/src/app/story/[storylineId]/[plotIndex]/page.tsx b/src/app/story/[storylineId]/[plotIndex]/page.tsx
index 2749d0b5..0d77059b 100644
--- a/src/app/story/[storylineId]/[plotIndex]/page.tsx
+++ b/src/app/story/[storylineId]/[plotIndex]/page.tsx
@@ -103,23 +103,23 @@ export default async function PlotDetailPage({ params }: { params: Params }) {
         <span className="text-foreground">{chapterTitle}</span>
       </nav>
 
-      {/* Reading mode + Chapter header */}
-      <div className="mb-4 flex justify-end">
-        <ReadingModeWrapper
-          storylineId={sid}
-          storylineTitle={sl.title}
-          chapters={allPlots.map((ap) => ({
-            plotIndex: ap.plot_index,
-            title: ap.title || (ap.plot_index === 0 ? "Genesis" : `Chapter ${ap.plot_index}`),
-            content: ap.content,
-          }))}
-          initialPlotIndex={pidx}
-        />
-      </div>
+      {/* Chapter header with inline reading mode */}
       <header className="border-border mb-8 border-b pb-4">
-        <h1 className="text-accent text-xl font-bold tracking-tight">
-          {chapterTitle}
-        </h1>
+        <div className="flex items-center gap-3">
+          <h1 className="text-accent flex-1 text-xl font-bold tracking-tight">
+            {chapterTitle}
+          </h1>
+          <ReadingModeWrapper
+            storylineId={sid}
+            storylineTitle={sl.title}
+            chapters={allPlots.map((ap) => ({
+              plotIndex: ap.plot_index,
+              title: ap.title || (ap.plot_index === 0 ? "Genesis" : `Chapter ${ap.plot_index}`),
+              content: ap.content,
+            }))}
+            initialPlotIndex={pidx}
+          />
+        </div>
         <div className="text-muted mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs">
           <span>
             by{" "}
diff --git a/src/app/story/[storylineId]/page.tsx b/src/app/story/[storylineId]/page.tsx
index c2731ebb..662ab1d8 100644
--- a/src/app/story/[storylineId]/page.tsx
+++ b/src/app/story/[storylineId]/page.tsx
@@ -151,19 +151,21 @@ export default async function StoryPage({ params }: { params: Params }) {
         <main>
           {genesis ? (
             <>
-              <div className="mb-4 flex justify-end">
-                <ReadingModeWrapper
-                  storylineId={id}
-                  storylineTitle={sl.title}
-                  chapters={plots.map((p) => ({
-                    plotIndex: p.plot_index,
-                    title: p.title || (p.plot_index === 0 ? "Genesis" : `Chapter ${p.plot_index}`),
-                    content: p.content,
-                  }))}
-                  initialPlotIndex={0}
-                />
-              </div>
-              <GenesisSection plot={genesis} />
+              <GenesisSection
+                plot={genesis}
+                readingMode={
+                  <ReadingModeWrapper
+                    storylineId={id}
+                    storylineTitle={sl.title}
+                    chapters={plots.map((p) => ({
+                      plotIndex: p.plot_index,
+                      title: p.title || (p.plot_index === 0 ? "Genesis" : `Chapter ${p.plot_index}`),
+                      content: p.content,
+                    }))}
+                    initialPlotIndex={0}
+                  />
+                }
+              />
               {chapters.length > 0 && (
                 <a
                   href={`/story/${id}/1`}
@@ -314,11 +316,11 @@ function StoryHeader({
   );
 }
 
-function GenesisSection({ plot }: { plot: Plot }) {
+function GenesisSection({ plot, readingMode }: { plot: Plot; readingMode?: React.ReactNode }) {
   return (
     <section id="genesis">
       <ViewTracker storylineId={plot.storyline_id} plotIndex={0} />
-      <div className="text-muted mb-3 flex items-baseline gap-3 text-xs">
+      <div className="text-muted mb-3 flex items-center gap-3 text-xs">
         <span className="text-accent-dim font-medium">Genesis</span>
         {plot.block_timestamp && (
           <time dateTime={plot.block_timestamp}>
@@ -329,6 +331,7 @@ function GenesisSection({ plot }: { plot: Plot }) {
             })}
           </time>
         )}
+        {readingMode && <span className="ml-auto">{readingMode}</span>}
       </div>
       {plot.content ? (
         <StoryContent content={plot.content} />
diff --git a/src/components/ReadingMode.tsx b/src/components/ReadingMode.tsx
index 96461342..d1257c7a 100644
--- a/src/components/ReadingMode.tsx
+++ b/src/components/ReadingMode.tsx
@@ -200,8 +200,12 @@ export function ReadingModeButton({ onClick }: { onClick: () => void }) {
   return (
     <button
       onClick={onClick}
-      className="border-border text-muted hover:text-accent hover:border-accent rounded border px-3 py-1.5 text-[11px] font-medium transition-colors"
+      className="border-border text-muted hover:text-accent hover:border-accent flex items-center gap-1.5 rounded border px-3 py-1.5 text-[11px] font-medium transition-colors"
     >
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+      </svg>
       Reading Mode
     </button>
   );