Skip to content

Fix Reading Mode button position and add book icon #604

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
realproject7 merged 1 commit into from
Mar 27, 2026
Merged

Fix Reading Mode button position and add book icon #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions src/app/story/[storylineId]/[plotIndex]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{" "}
Expand Down
33 changes: 18 additions & 15 deletions src/app/story/[storylineId]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}
Expand Down Expand Up @@ -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}>
Expand All @@ -329,6 +331,7 @@ function GenesisSection({ plot }: { plot: Plot }) {
})}
</time>
)}
{readingMode && <span className="ml-auto">{readingMode}</span>}
</div>
{plot.content ? (
<StoryContent content={plot.content} />
Expand Down
6 changes: 5 additions & 1 deletion src/components/ReadingMode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

export function ReadingMode({
storylineId,

Check warning on line 21 in src/components/ReadingMode.tsx

View workflow job for this annotation

GitHub Actions / lint-and-typecheck 

'storylineId' is defined but never used
storylineTitle,
chapters,
initialChapterIndex,
Expand Down Expand Up @@ -200,8 +200,12 @@
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>
);
Expand Down
Loading