nmemmertandClaude Sonnet 5.5
31abee0695
Build and Push Docker Image / build-and-push (push) Successful in 4m15s
Studies now move through a stage bar in the reader's themes. Outline splits chunks by clicking between verses (join merges notes) and suggests chunks from section headings. Study is three panes: outline, passage with an Observe / Interpret / Apply accordion, and commentary / word study / cross-refs / people & places for the chunk; original words are added by clicking them in the interlinear. Script drafts an outline from notes; Export holds files and the share link. Home, Import and the Pronunciation guide are restyled. Study projects are BSB only. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
32 lines
1.7 KiB
React
32 lines
1.7 KiB
React
// Themed page frame for pages that aren't part of a study project (Home, Import):
|
|
// slim top bar with a title, optional back button, and actions on the right.
|
|
import { useApp } from '../../context/AppContext.js';
|
|
import { themeVars, READER_THEMES } from '../reader/readerThemes.js';
|
|
import { ChevronLeft } from '../reader/icons.jsx';
|
|
import AuthStatus from '../AuthStatus.jsx';
|
|
|
|
const THEME_ORDER = ['paper', 'sepia', 'dark'];
|
|
|
|
export default function PageShell({ title, onBack, actions, maxWidth = 'max-w-6xl', children }) {
|
|
const { readerTheme, setReaderTheme } = useApp();
|
|
const cycle = () => setReaderTheme(THEME_ORDER[(THEME_ORDER.indexOf(readerTheme) + 1) % THEME_ORDER.length]);
|
|
return (
|
|
<div className="min-h-screen bg-[var(--r-bg)] font-sans text-[var(--r-text)]" style={themeVars(readerTheme)}>
|
|
<div className="sticky top-0 z-30 border-b border-[var(--r-line)] bg-[var(--r-bar)]">
|
|
<div className={`mx-auto flex min-h-[3rem] ${maxWidth} flex-wrap items-center gap-2 px-3 py-1.5`}>
|
|
{onBack && (
|
|
<button type="button" onClick={onBack} aria-label="Back" className="flex h-9 w-9 items-center justify-center rounded-lg text-[var(--r-sub)] hover:bg-black/5"><ChevronLeft /></button>
|
|
)}
|
|
<h1 className="text-base font-medium">{title}</h1>
|
|
<div className="ml-auto flex flex-wrap items-center gap-1.5">
|
|
{actions}
|
|
<button type="button" onClick={cycle} className="rounded-lg px-2 py-1.5 text-xs text-[var(--r-sub)] hover:bg-black/5" title="Change theme">{READER_THEMES[readerTheme]?.label}</button>
|
|
<AuthStatus themed />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|