gracepress/libre-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish Bible desk navigation and margin

Browse Source
This commit is contained in:
Jason
2026-07-15 19:09:39 -05:00
parent c4a7f7edf1
commit 21b1710675
4 changed files with 484 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+3
View File
@@ -2,6 +2,9 @@
## Unreleased
- Made Bible book and chapter strips dynamically fit the available space with arrow paging while keeping the current book/chapter centered.
- Reordered the study margin around verse notes, lemma text, linked English text, definitions, and translation notes, with a settings control for changing that order.
- Moved audio controls into the study stack and enlarged/color-coded the stack book tabs.
- Moved the main menu from the fixed left rail into a compact top-left hamburger popover and reclaimed the unused right-side reader padding.
- Completed Phase 9 Bible desk layout by replacing the 50/50 reader/resource split with a resizable Bible page, verse-focused margin, and tabbed study stack.
- Added verse-anchored margin notes with markers, translation/context anchors, visible verse markers, and export metadata in JSON, Markdown, HTML, and CSV.
src/App.css
+124 -56
View File
@@ -425,22 +425,24 @@ textarea:focus-visible {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 0;
gap: 3px;
max-width: 100%;
max-height: 18px;
min-height: 25px;
overflow: hidden;
white-space: nowrap;
}
.chapter-tabs button {
min-width: 0;
min-height: 0;
padding: 0 3px;
border: 0;
border-radius: 0;
background: transparent;
flex: 0 0 auto;
min-width: 28px;
min-height: 22px;
padding: 2px 6px;
border: 1px solid #dfd6c2;
border-radius: 5px;
background: #fbf8ef;
color: #6f5a24;
font-size: 10px;
font-size: 12px;
font-weight: 800;
line-height: 1.1;
text-decoration: none;
box-shadow: none;
@@ -449,11 +451,23 @@ textarea:focus-visible {
.chapter-tabs button.active,
.chapter-tabs button:hover,
.chapter-tabs button:focus-visible {
background: transparent;
background: #d6a84f;
color: #151510;
text-decoration: underline;
text-decoration-color: #d6a84f;
text-underline-offset: 2px;
text-decoration: none;
}
.chapter-tabs .tab-scroll-button {
min-width: 24px;
padding: 2px 5px;
background: #fffef8;
color: #657061;
font-size: 14px;
}
.chapter-tabs .tab-scroll-button:disabled,
.book-tabs .tab-scroll-button:disabled {
opacity: 0.32;
cursor: default;
}
.page-columns {
@@ -818,9 +832,7 @@ textarea:focus-visible {
.dictionary-card,
.map-card,
.audio-card,
.margin-note-card,
.compact-commentary-card,
.margin-stack-links {
.margin-note-card {
grid-column: 1 / -1;
}
@@ -828,8 +840,7 @@ textarea:focus-visible {
background: #fffdf8;
}
.marker-row,
.margin-stack-links div {
.marker-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
@@ -860,20 +871,6 @@ textarea:focus-visible {
font-size: 13px;
}
.compact-commentary-card p {
margin: 0;
color: #3f443d;
font-size: 12px;
line-height: 1.42;
}
.compact-commentary-card button,
.margin-stack-links button {
justify-self: start;
border-color: #d8cfbf;
background: #fbf8ef;
}
.commentary-list,
.dictionary-list {
display: grid;
@@ -1134,19 +1131,19 @@ textarea:focus-visible {
}
.study-stack.pinned {
grid-template-columns: 42px minmax(0, 1fr);
grid-template-columns: 58px minmax(0, 1fr);
}
.study-stack.unpinned {
position: relative;
z-index: 18;
width: 44px;
width: 58px;
}
.study-stack.unpinned .study-stack-panel {
position: fixed;
top: 0;
right: 44px;
right: 58px;
width: min(560px, calc(100vw - 104px));
height: 100vh;
box-shadow: -18px 0 42px rgba(17, 20, 17, 0.24);
@@ -1154,7 +1151,7 @@ textarea:focus-visible {
.study-stack-tabs {
display: grid;
grid-auto-rows: minmax(42px, auto);
grid-auto-rows: minmax(54px, auto);
gap: 0;
align-content: start;
min-height: 0;
@@ -1166,14 +1163,14 @@ textarea:focus-visible {
.study-stack-tabs button {
width: 100%;
min-height: 42px;
padding: 5px 3px;
min-height: 54px;
padding: 7px 4px;
border: 0;
border-bottom: 1px solid #3c4239;
border-radius: 0;
background: #252b25;
color: #f6f3eb;
font-size: 10px;
font-size: 12px;
line-height: 1.05;
writing-mode: vertical-rl;
text-orientation: mixed;
@@ -1190,6 +1187,41 @@ textarea:focus-visible {
font-weight: 900;
}
.study-stack-tabs .stack-tab-notebook {
background: #2f6f5e;
}
.study-stack-tabs .stack-tab-dictionary {
background: #735c0f;
}
.study-stack-tabs .stack-tab-lexicon {
background: #245ba7;
}
.study-stack-tabs .stack-tab-atlas {
background: #6a7b34;
}
.study-stack-tabs .stack-tab-commentary {
background: #8b4f2f;
}
.study-stack-tabs .stack-tab-audio {
background: #6e4f8f;
}
.study-stack-tabs .stack-tab-search {
background: #5b6570;
}
.study-stack-tabs button.active,
.study-stack-tabs button:hover,
.study-stack-tabs button:focus-visible {
filter: brightness(1.18) saturate(1.08);
outline: none;
}
.study-stack-panel {
min-width: 0;
min-height: 0;
@@ -1630,12 +1662,12 @@ textarea:focus-visible {
}
.book-tabs {
display: grid;
display: flex;
grid-column: 1;
grid-template-columns: repeat(24, minmax(0, 1fr));
gap: 3px;
gap: 5px;
align-items: flex-start;
padding: 0 16px 10px;
justify-content: center;
padding: 0 14px 10px;
overflow: hidden;
background: #ece9df;
}
@@ -1649,28 +1681,29 @@ textarea:focus-visible {
}
.book-tabs button {
min-width: 0;
height: 30px;
padding: 4px 3px;
flex: 0 0 auto;
min-width: 52px;
height: 34px;
padding: 5px 8px;
border-color: #c8bea9;
border-top: 0;
border-radius: 0 0 7px 7px;
background: #efe4c9;
color: #4c422f;
font-size: 10px;
font-size: 12px;
font-weight: 800;
line-height: 1.05;
white-space: normal;
overflow-wrap: anywhere;
white-space: nowrap;
box-shadow: 0 5px 10px rgba(44, 48, 42, 0.08);
}
.book-tabs button:nth-child(4n + 2) {
height: 34px;
}
.book-tabs button:nth-child(4n + 3) {
height: 27px;
.book-tabs .tab-scroll-button {
min-width: 30px;
height: 31px;
padding: 4px 6px;
background: #fbf8ef;
color: #657061;
font-size: 16px;
}
.book-tabs button:hover,
@@ -1858,6 +1891,39 @@ textarea:focus-visible {
padding: 0;
}
.margin-order-list {
display: grid;
gap: 6px;
}
.margin-order-list div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px;
align-items: center;
padding: 6px;
border: 1px solid #ded6c7;
border-radius: 6px;
background: #fbf8ef;
}
.margin-order-list span {
min-width: 0;
overflow: hidden;
color: #3f443d;
font-size: 12px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.margin-order-list button {
min-height: 26px;
padding: 4px 7px;
border-color: #d8cfbf;
background: #fffef8;
}
.checkbox-row {
display: flex !important;
gap: 9px !important;
@@ -1977,6 +2043,7 @@ textarea:focus-visible {
.theme-dark .original-language-verse,
.theme-dark .english-strong-line,
.theme-dark .resource-card,
.theme-dark .margin-order-list div,
.theme-dark .place-list section,
.theme-dark .route-list span,
.theme-dark .audio-controls .secondary-button {
@@ -2044,7 +2111,8 @@ textarea:focus-visible {
.theme-dark .session-facts dt,
.theme-dark .about-list dt,
.theme-dark .modal-section label,
.theme-dark .page-controls label {
.theme-dark .page-controls label,
.theme-dark .margin-order-list span {
color: #aaa996;
}
src/App.tsx
+334 -237
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef, useState } from 'react'
import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
import {
addTagToVerse,
getCommentaryForVerse,
@@ -44,6 +44,7 @@ import type {
import type {
StrongDisplayMode,
HostedUser,
MarginPanelId,
SessionNote,
StudyBook,
StudySession,
@@ -60,11 +61,55 @@ const pageSize = 34
const nextcloudSettingsKey = 'libre-study.nextcloud-export.v1'
type PageMotion = 'idle' | 'turn-forward' | 'turn-back'
type DeskResizeTarget = 'bible-margin' | 'margin-stack'
type WindowedItems<T> = {
items: T[]
start: number
canMoveBack: boolean
canMoveForward: boolean
}
function reference(verse: Verse) {
return `${verse.book} ${verse.chapter}:${verse.verse}`
}
function centeredWindow<T>(items: T[], activeIndex: number, visibleCount: number, offset = 0): WindowedItems<T> {
if (!items.length) return { items: [], start: 0, canMoveBack: false, canMoveForward: false }
const safeVisibleCount = Math.max(1, Math.min(visibleCount, items.length))
const maxStart = Math.max(0, items.length - safeVisibleCount)
const centeredStart = activeIndex - Math.floor(safeVisibleCount / 2)
const start = Math.min(maxStart, Math.max(0, centeredStart + offset))
return {
items: items.slice(start, start + safeVisibleCount),
start,
canMoveBack: start > 0,
canMoveForward: start < maxStart,
}
}
function useMeasuredTabCapacity(minItemWidth: number, reservedWidth: number, fallbackCount: number) {
const ref = useRef<HTMLDivElement | null>(null)
const [visibleCount, setVisibleCount] = useState(fallbackCount)
useEffect(() => {
const element = ref.current
if (!element) return
const measure = () => {
const available = Math.max(0, element.clientWidth - reservedWidth)
setVisibleCount(Math.max(1, Math.floor(available / minItemWidth)))
}
measure()
const observer = new ResizeObserver(measure)
observer.observe(element)
return () => observer.disconnect()
}, [fallbackCount, minItemWidth, reservedWidth])
return { ref, visibleCount }
}
function verseAnchor(verse: Verse, translationId: string, endVerse = verse.verse): VerseAnchor {
const startVerse = Math.min(verse.verse, endVerse)
const finalVerse = Math.max(verse.verse, endVerse)
@@ -181,6 +226,14 @@ function abbreviateBook(book: string) {
return abbreviations[book] ?? book.slice(0, 4)
}
const marginPanelLabels: Record<MarginPanelId, string> = {
'margin-note': 'Margin Note',
original: 'Hebrew/Greek Lemma Line',
linked: 'English Linked Text',
definition: 'Definition',
'study-notes': 'Translation Study Notes',
}
function dictionaryTermsForVerse(verse: Verse) {
const stopWords = new Set([
'a',
@@ -250,6 +303,8 @@ function App() {
const [selectedId, setSelectedId] = useState<number | null>(null)
const [hoveredId, setHoveredId] = useState<number | null>(null)
const [pageStartId, setPageStartId] = useState<number | null>(null)
const [bookTabOffset, setBookTabOffset] = useState(0)
const [chapterTabOffset, setChapterTabOffset] = useState(0)
const [selectedStrong, setSelectedStrong] = useState<string | null>(null)
const [strongDisplay, setStrongDisplay] = useState<StrongDisplayMode>('highlight')
const [tagInput, setTagInput] = useState('')
@@ -293,6 +348,13 @@ function App() {
const [marginColumnPercent, setMarginColumnPercent] = useState(20)
const [studyStackPinned, setStudyStackPinned] = useState(true)
const [activeStudyBook, setActiveStudyBook] = useState<StudyBook>('notebook')
const [marginPanelOrder, setMarginPanelOrder] = useState<MarginPanelId[]>([
'margin-note',
'original',
'linked',
'definition',
'study-notes',
])
const [commentaryEntries, setCommentaryEntries] = useState<CommentaryEntry[]>([])
const [dictionaryEntries, setDictionaryEntries] = useState<DictionaryEntry[]>([])
const [mapContext, setMapContext] = useState<MapContext>({
@@ -327,6 +389,8 @@ function App() {
const audioQueueIndexRef = useRef(0)
const hydratedNoteChapters = useRef(new Set<string>())
const workspaceHydrated = useRef(false)
const bookTabCapacity = useMeasuredTabCapacity(58, 72, 8)
const chapterTabCapacity = useMeasuredTabCapacity(34, 58, 10)
function applyStudySettings(settings?: Partial<StudySettings>) {
if (!settings) return
@@ -352,6 +416,7 @@ function App() {
setMarginColumnPercent(settings.marginColumnPercent ?? 20)
setStudyStackPinned(settings.studyStackPinned ?? true)
setActiveStudyBook(settings.activeStudyBook ?? 'notebook')
setMarginPanelOrder(settings.marginPanelOrder ?? ['margin-note', 'original', 'linked', 'definition', 'study-notes'])
setThemeMode(settings.themeMode ?? 'light')
}
@@ -505,6 +570,7 @@ function App() {
marginColumnPercent,
studyStackPinned,
activeStudyBook,
marginPanelOrder,
themeMode,
}),
[
@@ -519,6 +585,7 @@ function App() {
linkedCollapsed,
linkedFontSize,
marginColumnPercent,
marginPanelOrder,
notesPinned,
originalCollapsed,
showCommentaryPanel,
@@ -664,6 +731,14 @@ function App() {
[activeSession?.baseTranslation, translations],
)
useEffect(() => {
setBookTabOffset(0)
}, [selectedVerse?.book])
useEffect(() => {
setChapterTabOffset(0)
}, [selectedVerse?.book, selectedVerse?.chapter])
useEffect(() => {
let cancelled = false
@@ -916,16 +991,12 @@ function App() {
() => Array.from(new Set(libraryVerses.map((verse) => verse.book))),
[libraryVerses],
)
const visibleBookTabs = useMemo(() => {
if (!selectedVerse || !books.length) return []
const visibleCount = 24
const visibleBookTabs = useMemo<WindowedItems<string>>(() => {
if (!selectedVerse || !books.length) return centeredWindow([], 0, 0)
const selectedIndex = Math.max(0, books.indexOf(selectedVerse.book))
const halfWindow = Math.floor(visibleCount / 2)
const maxStart = Math.max(0, books.length - visibleCount)
const start = Math.min(Math.max(0, selectedIndex - halfWindow), maxStart)
return books.slice(start, start + visibleCount)
}, [books, selectedVerse])
return centeredWindow(books, selectedIndex, bookTabCapacity.visibleCount, bookTabOffset)
}, [bookTabCapacity.visibleCount, bookTabOffset, books, selectedVerse])
const chapters = useMemo(() => {
if (!selectedVerse) return []
return Array.from(
@@ -936,6 +1007,12 @@ function App() {
),
)
}, [libraryVerses, selectedVerse])
const visibleChapterTabs = useMemo<WindowedItems<number>>(() => {
if (!selectedVerse || !chapters.length) return centeredWindow([], 0, 0)
const selectedIndex = Math.max(0, chapters.indexOf(selectedVerse.chapter))
return centeredWindow(chapters, selectedIndex, chapterTabCapacity.visibleCount, chapterTabOffset)
}, [chapterTabCapacity.visibleCount, chapterTabOffset, chapters, selectedVerse])
const verseNumbers = useMemo(() => {
if (!selectedVerse) return []
return libraryVerses
@@ -1112,6 +1189,19 @@ function App() {
recordDisplaySetting(`Theme: ${nextThemeMode}`)
}
function moveMarginPanel(panel: MarginPanelId, direction: -1 | 1) {
setMarginPanelOrder((current) => {
const index = current.indexOf(panel)
const nextIndex = index + direction
if (index < 0 || nextIndex < 0 || nextIndex >= current.length) return current
const next = [...current]
const [item] = next.splice(index, 1)
next.splice(nextIndex, 0, item)
recordDisplaySetting(`Moved ${marginPanelLabels[panel]} ${direction < 0 ? 'up' : 'down'}`)
return next
})
}
function toggleStudyStackPinned(nextPinned = !studyStackPinned) {
setStudyStackPinned(nextPinned)
setNotesDrawerOpen(nextPinned)
@@ -1867,126 +1957,6 @@ function App() {
)
}
function renderAudioSection() {
if (activeSession?.audioEnabled === false) {
return (
<article className="resource-card audio-card">
<header className="margin-section-header">
<button type="button" className="collapse-button">Audio Bible</button>
<span>Off</span>
</header>
<p className="resource-disabled">Audio Bible is disabled for this session.</p>
</article>
)
}
const selectedSegment = audioContext?.selectedSegment ?? null
const chapterSegments = audioContext?.chapterPlaylist?.segments ?? []
const selectedIndex = selectedSegment
? Math.max(0, chapterSegments.findIndex((segment) => segment.id === selectedSegment.id))
: 0
return (
<article className="resource-card audio-card" aria-label="Audio Bible">
<header
className="margin-section-header"
role="button"
tabIndex={0}
onClick={() => {
setAudioCollapsed((current) => !current)
recordDisplaySetting('Toggled audio Bible accordion')
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
setAudioCollapsed((current) => !current)
recordDisplaySetting('Toggled audio Bible accordion')
}
}}
>
<button type="button" className="collapse-button">Audio Bible</button>
<span>
{audioResourcesLoading
? 'Loading'
: audioContext
? audioContext.shortTitle
: 'None'}
</span>
</header>
{!audioCollapsed && audioContext && selectedSegment ? (
<>
<div className="audio-controls">
<button
type="button"
onClick={() => playAudioQueue([selectedSegment]).catch((reason) => setAudioStatus(String(reason)))}
>
Play verse
</button>
<button
type="button"
onClick={() =>
playAudioQueue(chapterSegments, 0).catch((reason) => setAudioStatus(String(reason)))
}
>
Play chapter
</button>
<button
type="button"
onClick={() =>
playAudioQueue(chapterSegments, selectedIndex).catch((reason) => setAudioStatus(String(reason)))
}
>
From verse
</button>
<button type="button" className="secondary-button" onClick={stopAudio}>
Stop
</button>
</div>
<div className="audio-sliders">
<label>
Volume
<input
type="range"
min="0"
max="1"
step="0.05"
value={audioVolume}
onChange={(event) => setAudioVolume(Number(event.target.value))}
/>
<span>{Math.round(audioVolume * 100)}%</span>
</label>
<label>
Speed
<select
value={audioSpeed}
onChange={(event) => setAudioSpeed(Number(event.target.value))}
>
<option value="0.75">0.75x</option>
<option value="1">1x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</label>
</div>
<p className="audio-status">
<strong>{audioPlayingSegmentId ? 'Playing' : 'Status'}</strong>
<span>{audioStatus}</span>
</p>
<p className="map-attribution">{audioContext.attribution}</p>
<audio ref={audioRef} preload="none" onEnded={handleAudioEnded} />
</>
) : !audioCollapsed ? (
<p className="resource-disabled">
{audioResourcesLoading
? 'Loading audio metadata...'
: 'No audio package is attached to this translation yet.'}
</p>
) : null}
</article>
)
}
function renderMarginNoteEditor() {
if (!selectedVerse) return null
const markers = selectedMarginNote?.markers ?? []
@@ -2020,32 +1990,6 @@ function App() {
)
}
function renderCompactCommentarySection() {
if (!showCommentaryPanel) return null
const firstEntry = commentaryEntries[0]
return (
<article className="resource-card compact-commentary-card" aria-label="Verse commentary summary">
<header className="margin-section-header">
<button type="button" className="collapse-button">Commentary</button>
<span>{commentaryEntries.length ? 'Ready' : marginResourcesLoading ? 'Loading' : 'None'}</span>
</header>
{firstEntry ? (
<>
<p>{firstEntry.text.slice(0, 220)}{firstEntry.text.length > 220 ? '...' : ''}</p>
<button type="button" onClick={() => setActiveStudyBook('commentary')}>
Open commentary book
</button>
</>
) : (
<p className="resource-disabled">
{marginResourcesLoading ? 'Loading commentary...' : 'No commentary matched this verse.'}
</p>
)}
</article>
)
}
function renderNotebookBook() {
if (!selectedVerse) return null
@@ -2246,6 +2190,108 @@ function App() {
)
}
function renderAudioBook() {
if (activeSession?.audioEnabled === false) {
return (
<section className="stack-book audio-book" aria-label="Audio Bible">
<header>
<div>
<span className="eyebrow">Audio</span>
<h2>Audio Bible</h2>
</div>
<span>Off</span>
</header>
<p className="resource-disabled">Audio Bible is disabled for this session.</p>
</section>
)
}
const selectedSegment = audioContext?.selectedSegment ?? null
const chapterSegments = audioContext?.chapterPlaylist?.segments ?? []
const selectedIndex = selectedSegment
? Math.max(0, chapterSegments.findIndex((segment) => segment.id === selectedSegment.id))
: 0
return (
<section className="stack-book audio-book" aria-label="Audio Bible">
<header>
<div>
<span className="eyebrow">Audio</span>
<h2>{audioContext?.title ?? 'Audio Bible'}</h2>
</div>
<span>{audioResourcesLoading ? 'Loading' : audioContext?.shortTitle ?? 'None'}</span>
</header>
{audioContext && selectedSegment ? (
<>
<div className="audio-controls">
<button
type="button"
onClick={() => playAudioQueue([selectedSegment]).catch((reason) => setAudioStatus(String(reason)))}
>
Play verse
</button>
<button
type="button"
onClick={() => playAudioQueue(chapterSegments, 0).catch((reason) => setAudioStatus(String(reason)))}
>
Play chapter
</button>
<button
type="button"
onClick={() =>
playAudioQueue(chapterSegments, selectedIndex).catch((reason) => setAudioStatus(String(reason)))
}
>
From verse
</button>
<button type="button" className="secondary-button" onClick={stopAudio}>
Stop
</button>
</div>
<div className="audio-sliders">
<label>
Volume
<input
type="range"
min="0"
max="1"
step="0.05"
value={audioVolume}
onChange={(event) => setAudioVolume(Number(event.target.value))}
/>
<span>{Math.round(audioVolume * 100)}%</span>
</label>
<label>
Speed
<select
value={audioSpeed}
onChange={(event) => setAudioSpeed(Number(event.target.value))}
>
<option value="0.75">0.75x</option>
<option value="1">1x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</label>
</div>
<p className="audio-status">
<strong>{audioPlayingSegmentId ? 'Playing' : 'Status'}</strong>
<span>{audioStatus}</span>
</p>
<p className="map-attribution">{audioContext.attribution}</p>
</>
) : (
<p className="resource-disabled">
{audioResourcesLoading
? 'Loading audio metadata...'
: 'No audio package is attached to this translation yet.'}
</p>
)}
</section>
)
}
function renderSearchBook() {
return (
<section className="stack-book search-book" aria-label="Search results">
@@ -2301,6 +2347,8 @@ function App() {
return renderAtlasBook()
case 'commentary':
return renderCommentaryBook()
case 'audio':
return renderAudioBook()
case 'search':
return renderSearchBook()
case 'notebook':
@@ -2316,6 +2364,7 @@ function App() {
{ id: 'lexicon', label: 'Lex' },
{ id: 'atlas', label: 'Atlas' },
{ id: 'commentary', label: 'Comm' },
{ id: 'audio', label: 'Audio' },
{ id: 'search', label: 'Search' },
]
@@ -2355,7 +2404,10 @@ function App() {
<button
key={book.id}
type="button"
className={book.id === activeStudyBook ? 'active' : ''}
className={[
`stack-tab-${book.id}`,
book.id === activeStudyBook ? 'active' : '',
].filter(Boolean).join(' ')}
onClick={() => {
setActiveStudyBook(book.id)
if (!studyStackPinned) setNotesDrawerOpen(true)
@@ -2461,18 +2513,35 @@ function App() {
</button>
<div className="page-position">
<span>{pageRange}</span>
<div className="chapter-tabs" aria-label="Chapter selector">
{chapters.map((chapter) => (
<div ref={chapterTabCapacity.ref} className="chapter-tabs" aria-label="Chapter selector">
<button
type="button"
className="tab-scroll-button"
disabled={!visibleChapterTabs.canMoveBack}
aria-label="Show previous chapters"
onClick={() => setChapterTabOffset((current) => current - Math.max(1, chapterTabCapacity.visibleCount - 2))}
>
‹
</button>
{visibleChapterTabs.items.map((chapter) => (
<button
key={chapter}
type="button"
className={chapter === selectedVerse?.chapter ? 'active' : ''}
style={{ fontSize: `${Math.max(8, Math.min(11, 13 - chapters.length / 20))}px` }}
onClick={() => selectedVerse && jumpTo(selectedVerse.book, chapter, 1)}
>
{chapter}
</button>
))}
<button
type="button"
className="tab-scroll-button"
disabled={!visibleChapterTabs.canMoveForward}
aria-label="Show next chapters"
onClick={() => setChapterTabOffset((current) => current + Math.max(1, chapterTabCapacity.visibleCount - 2))}
>
›
</button>
</div>
</div>
<button type="button" onClick={() => shiftPage(1)}>
@@ -2484,6 +2553,59 @@ function App() {
function renderStudyMargin() {
if (!selectedVerse) return null
const marginPanels: Record<MarginPanelId, ReactNode> = {
'margin-note': renderMarginNoteEditor(),
original: activeSession?.strongsEnabled === false ? null : renderOriginalLanguageLine(),
linked: activeSession?.strongsEnabled === false ? null : renderLinkedEnglishLine(),
definition:
activeSession?.strongsEnabled === false || !showDefinitionPanel || !selectedStrongEntry ? null : (
<article className="strong-focus" aria-label="Strong's definition">
<header
className="margin-section-header"
role="button"
tabIndex={0}
onClick={() => {
setDefinitionCollapsed((current) => !current)
recordDisplaySetting('Toggled Strong definition accordion')
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
setDefinitionCollapsed((current) => !current)
recordDisplaySetting('Toggled Strong definition accordion')
}
}}
>
<button
type="button"
className="collapse-button"
>
Definition
</button>
<span>{selectedStrongEntry.language}</span>
</header>
{!definitionCollapsed ? (
<>
<div>
<strong>{selectedStrongEntry.strong}</strong>
<span>{selectedStrongEntry.language}</span>
</div>
<h4>{selectedStrongEntry.lemma}</h4>
<p className="translit">{selectedStrongEntry.transliteration}</p>
{selectedStrongEntry.pronunciation ? (
<p className="pronunciation">Pronunciation: {selectedStrongEntry.pronunciation}</p>
) : null}
<p>{selectedStrongEntry.definition}</p>
<button type="button" onClick={() => setActiveStudyBook('lexicon')}>
Open lexicon book
</button>
</>
) : null}
</article>
),
'study-notes': renderStudyNotesSection(),
}
return (
<aside className="study-margin" aria-label="Study margin">
<div className="panel-header">
@@ -2497,82 +2619,11 @@ function App() {
<p className="margin-reference">{reference(selectedVerse)}</p>
{activeSession?.strongsEnabled === false ? (
<p className="resource-disabled">Strong's links are disabled for this session.</p>
) : (
<div className="margin-resource-grid">
{renderOriginalLanguageLine()}
{renderLinkedEnglishLine()}
{showDefinitionPanel && selectedStrongEntry ? (
<article className="strong-focus" aria-label="Strong's definition">
<header
className="margin-section-header"
role="button"
tabIndex={0}
onClick={() => {
setDefinitionCollapsed((current) => !current)
recordDisplaySetting('Toggled Strong definition accordion')
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
setDefinitionCollapsed((current) => !current)
recordDisplaySetting('Toggled Strong definition accordion')
}
}}
>
<button
type="button"
className="collapse-button"
>
Definition
</button>
<span>{selectedStrongEntry.language}</span>
</header>
{!definitionCollapsed ? (
<>
<div>
<strong>{selectedStrongEntry.strong}</strong>
<span>{selectedStrongEntry.language}</span>
</div>
<h4>{selectedStrongEntry.lemma}</h4>
<p className="translit">{selectedStrongEntry.transliteration}</p>
{selectedStrongEntry.pronunciation ? (
<p className="pronunciation">Pronunciation: {selectedStrongEntry.pronunciation}</p>
) : null}
<p>{selectedStrongEntry.definition}</p>
<button type="button" onClick={() => setActiveStudyBook('lexicon')}>
Open lexicon book
</button>
</>
) : null}
</article>
) : null}
</div>
)}
) : null}
<div className="margin-resource-grid">
{renderMarginNoteEditor()}
{renderStudyNotesSection()}
{renderAudioSection()}
{renderCompactCommentarySection()}
<article className="resource-card margin-stack-links" aria-label="Study stack routes">
<header className="margin-section-header">
<button type="button" className="collapse-button">Study Books</button>
<span>Stack</span>
</header>
<div>
<button type="button" onClick={() => setActiveStudyBook('dictionary')}>
Dictionary
</button>
<button type="button" onClick={() => setActiveStudyBook('atlas')}>
Atlas
</button>
<button type="button" onClick={() => setActiveStudyBook('commentary')}>
Commentary
</button>
<button type="button" onClick={() => setActiveStudyBook('search')}>
Search
</button>
</div>
</article>
{marginPanelOrder.map((panel) => (
<Fragment key={panel}>{marginPanels[panel]}</Fragment>
))}
</div>
</aside>
)
@@ -2625,8 +2676,17 @@ function App() {
if (!selectedVerse) return null
return (
<nav className={`book-tabs ${pageMotion}`} aria-label="Bible book tabs">
{visibleBookTabs.map((book) => (
<nav ref={bookTabCapacity.ref} className={`book-tabs ${pageMotion}`} aria-label="Bible book tabs">
<button
type="button"
className="tab-scroll-button"
disabled={!visibleBookTabs.canMoveBack}
aria-label="Show previous books"
onClick={() => setBookTabOffset((current) => current - Math.max(1, bookTabCapacity.visibleCount - 2))}
>
‹
</button>
{visibleBookTabs.items.map((book) => (
<button
key={book}
type="button"
@@ -2637,6 +2697,15 @@ function App() {
{abbreviateBook(book)}
</button>
))}
<button
type="button"
className="tab-scroll-button"
disabled={!visibleBookTabs.canMoveForward}
aria-label="Show next books"
onClick={() => setBookTabOffset((current) => current + Math.max(1, bookTabCapacity.visibleCount - 2))}
>
›
</button>
</nav>
)
}
@@ -3220,6 +3289,33 @@ function App() {
Show dictionary
</label>
</section>
<section className="modal-section">
<h3>Margin Order</h3>
<div className="margin-order-list">
{marginPanelOrder.map((panel, index) => (
<div key={panel}>
<span>{marginPanelLabels[panel]}</span>
<button
type="button"
disabled={index === 0}
onClick={() => moveMarginPanel(panel, -1)}
aria-label={`Move ${marginPanelLabels[panel]} up`}
>
Up
</button>
<button
type="button"
disabled={index === marginPanelOrder.length - 1}
onClick={() => moveMarginPanel(panel, 1)}
aria-label={`Move ${marginPanelLabels[panel]} down`}
>
Down
</button>
</div>
))}
</div>
</section>
</div>
</section>
</div>
@@ -3229,7 +3325,7 @@ function App() {
const stackColumnPercent = Math.max(24, 100 - bibleColumnPercent - marginColumnPercent)
const pinnedDeskTemplate = `${bibleColumnPercent}fr 6px ${marginColumnPercent}fr 6px ${stackColumnPercent}fr`
const expandedBiblePercent = (bibleColumnPercent / (bibleColumnPercent + marginColumnPercent)) * 100
const unpinnedDeskTemplate = `${expandedBiblePercent}fr 6px ${100 - expandedBiblePercent}fr 44px`
const unpinnedDeskTemplate = `${expandedBiblePercent}fr 6px ${100 - expandedBiblePercent}fr 58px`
const deskTemplate = studyStackPinned ? pinnedDeskTemplate : unpinnedDeskTemplate
if (authRequired && getAuthClient().enabled) {
@@ -3445,6 +3541,7 @@ function App() {
{renderAboutModal()}
{renderSettingsModal()}
{renderTimelineModal()}
<audio ref={audioRef} preload="none" onEnded={handleAudioEnded} />
{railOpen ? (
<div className="menu-popover-backdrop" role="presentation" onMouseDown={() => setRailOpen(false)}>
<section
src/workspace.ts
+23 -1
View File
@@ -88,10 +88,20 @@ export type StudySettings = {
marginColumnPercent: number
studyStackPinned: boolean
activeStudyBook: StudyBook
marginPanelOrder: MarginPanelId[]
themeMode: ThemeMode
}
export type StudyBook = 'notebook' | 'dictionary' | 'lexicon' | 'atlas' | 'commentary' | 'search'
export type StudyBook = 'notebook' | 'dictionary' | 'lexicon' | 'atlas' | 'commentary' | 'audio' | 'search'
export type MarginPanelId = 'margin-note' | 'original' | 'linked' | 'definition' | 'study-notes'
export const defaultMarginPanelOrder: MarginPanelId[] = [
'margin-note',
'original',
'linked',
'definition',
'study-notes',
]
export type WorkspaceSnapshot = {
schemaVersion: number
@@ -151,6 +161,7 @@ export function defaultStudySettings(): StudySettings {
marginColumnPercent: 20,
studyStackPinned: true,
activeStudyBook: 'notebook',
marginPanelOrder: defaultMarginPanelOrder,
themeMode: 'light',
}
}
@@ -193,9 +204,20 @@ export function normalizeStudySettings(settings?: Partial<StudySettings> | null)
return {
...defaultStudySettings(),
...(settings ?? {}),
marginPanelOrder: normalizeMarginPanelOrder(settings?.marginPanelOrder),
}
}
function normalizeMarginPanelOrder(order?: MarginPanelId[] | null): MarginPanelId[] {
if (!Array.isArray(order)) return defaultMarginPanelOrder
const known = new Set(defaultMarginPanelOrder)
const next = order.filter((panel): panel is MarginPanelId => known.has(panel))
for (const panel of defaultMarginPanelOrder) {
if (!next.includes(panel)) next.push(panel)
}
return next
}
export function normalizeSessions(sessions?: StudySession[] | null): StudySession[] {
const source = Array.isArray(sessions) && sessions.length ? sessions : [createSession('KJV Study Session')]