Speed up the app, run production build, remove chunk ink, start App.jsx split
Performance: - Lazy-load pages, docx, and mammoth (initial JS 1,298 KB -> ~290 KB) - Gzip responses and cache hashed assets for a year - Memoize DrawCanvas strokes so ink isn't redrawn on every render - Precompute whole-Bible search index and defer the query while typing - Reload once if a lazy chunk is missing after a deploy Deployment: - setup.sh builds and runs one production server on APP_PORT (default 5173); --dev keeps the old Vite dev setup - Session cookie uses secure: 'auto' so login works behind any proxy Chunk editor: - Remove the Draw layout, Ink Notes panel, and ink in HTML export (existing inkStrokes data is left in saved projects) Refactor: - Move module-level helpers out of App.jsx into src/utils/* - Extract Bible reader state and logic into hooks/useBibleReader Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Opus 5.5 committed
1 parent
00932dee4a
commit
ade7f1af6f
20 files changed
+1314
-1252
No files matched your search
+1
-68
@@ -2,7 +2,6 @@ import { createPortal } from 'react-dom';
|
||||
import DOMPurify from 'dompurify';
|
||||
import { useApp } from '../context/AppContext.js';
|
||||
import { STUDY_TABS, COMMENTARY_OPTIONS, NT_BOOK_NUMBER, formatChunkReference, CrossRefChip } from '../utils/bibleUtils.jsx';
|
||||
import DrawCanvas from './DrawCanvas.jsx';
|
||||
|
||||
export default function StudyPage() {
|
||||
const {
|
||||
@@ -197,7 +196,6 @@ export default function StudyPage() {
|
||||
{[
|
||||
{ id: 'stacked', label: '☰ Stacked' },
|
||||
{ id: 'split', label: '◫ Split' },
|
||||
{ id: 'annotate', label: '✏ Draw' },
|
||||
].map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
@@ -243,29 +241,6 @@ export default function StudyPage() {
|
||||
|
||||
{selectedChunk ? (
|
||||
<div className="mt-6 space-y-6">
|
||||
{studyLayout === 'annotate' ? (
|
||||
<DrawCanvas
|
||||
strokes={selectedChunk.inkStrokes ?? []}
|
||||
onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
|
||||
onDone={() => setStudyLayout('stacked')}
|
||||
headerContent={
|
||||
<>
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</span>
|
||||
<span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
|
||||
{formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '–')}
|
||||
</span>
|
||||
</div>
|
||||
{selectedChunkVerses.map((verse) => (
|
||||
<p key={`${verse.chapter}-${verse.number}`} className="mb-1">
|
||||
<span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
|
||||
{verse.text}
|
||||
</p>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className={`space-y-6 ${studyLayout === 'split' ? 'lg:flex lg:items-start lg:gap-6 lg:space-y-0' : ''}`}>
|
||||
{/* Scripture */}
|
||||
<div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'scripture' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' ? 'lg:sticky lg:top-6 lg:flex-1 lg:basis-0 lg:min-w-0 lg:self-start' : ''}`}>
|
||||
@@ -515,47 +490,6 @@ export default function StudyPage() {
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
{/* Inline ink notes — collapsible, always available without switching to annotate mode */}
|
||||
<div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'notes' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' && activeStudyTab !== 'notes' ? 'hidden' : ''}`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCollapsedSections((c) => ({ ...c, inlineInk: !c.inlineInk }))}
|
||||
className="flex w-full items-center justify-between gap-2 text-left"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-slate-900">Ink Notes</h3>
|
||||
<p className="text-xs text-slate-500">Draw diagrams or handwritten notes for this chunk.</p>
|
||||
</div>
|
||||
<span className="text-slate-400">{collapsedSections.inlineInk ? '▸' : '▾'}</span>
|
||||
</button>
|
||||
{!collapsedSections.inlineInk && (
|
||||
<div className="mt-4">
|
||||
<DrawCanvas
|
||||
strokes={selectedChunk.inkStrokes ?? []}
|
||||
onStrokesChange={(s) => updateChunk(selectedChunk.id, { inkStrokes: s })}
|
||||
headerContent={
|
||||
selectedChunkVerses.length > 0 && (
|
||||
<>
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Scripture · draw on me</span>
|
||||
<span className="rounded-full bg-slate-200 px-2.5 py-0.5 text-xs font-semibold text-slate-600">
|
||||
{formatChunkReference(project, selectedChunkChapterIndex, selectedChunk, '–')}
|
||||
</span>
|
||||
</div>
|
||||
{selectedChunkVerses.map((verse) => (
|
||||
<p key={`${verse.chapter}-${verse.number}`} className="mb-1">
|
||||
<span className="font-semibold text-slate-900">{verse.chapter}:{verse.number}.</span>{' '}
|
||||
{verse.text}
|
||||
</p>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cross-references */}
|
||||
<div className={`rounded-3xl border border-slate-200 bg-slate-50 p-5 ${mobileStudyTab !== 'crossRefs' ? 'max-sm:hidden' : ''} ${studyLayout === 'split' && activeStudyTab !== 'crossRefs' ? 'hidden' : ''}`}>
|
||||
<button
|
||||
@@ -941,7 +875,6 @@ export default function StudyPage() {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
) : (
|
||||
@@ -955,7 +888,7 @@ export default function StudyPage() {
|
||||
</main>
|
||||
|
||||
{/* Prev / Next — fixed bottom bar, visible while scrolling long chunks */}
|
||||
{selectedChunk && studyLayout !== 'annotate' && (
|
||||
{selectedChunk && (
|
||||
<div className="fixed bottom-0 inset-x-0 z-20 border-t border-slate-200 bg-white/95 backdrop-blur-sm">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
|
||||
<button
|
||||
|
||||
Reference in new issue
Block a user