Split study layout and add notes drawer
This commit is contained in:
+222
-151
@@ -6,7 +6,7 @@ import {
|
||||
getLibraryState,
|
||||
searchVerses,
|
||||
} from './studyClient'
|
||||
import type { ReactNode } from 'react'
|
||||
import type { DragEvent, ReactNode } from 'react'
|
||||
import type { CommentaryEntry, DictionaryEntry, Verse } from './types'
|
||||
import './App.css'
|
||||
|
||||
@@ -218,6 +218,7 @@ function App() {
|
||||
const [aboutModalOpen, setAboutModalOpen] = useState(false)
|
||||
const [timelineModalOpen, setTimelineModalOpen] = useState(false)
|
||||
const [settingsModalOpen, setSettingsModalOpen] = useState(false)
|
||||
const [notesDrawerOpen, setNotesDrawerOpen] = useState(false)
|
||||
const [pageMotion, setPageMotion] = useState<PageMotion>('idle')
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('notes')
|
||||
const [query, setQuery] = useState('')
|
||||
@@ -728,6 +729,19 @@ function App() {
|
||||
patchActiveSession({ noteDraft: value })
|
||||
}
|
||||
|
||||
function appendNoteClip(value: string) {
|
||||
const clip = value.trim()
|
||||
if (!clip) return
|
||||
const nextValue = noteDraft.trim() ? `${noteDraft.trim()}\n\n${clip}` : clip
|
||||
updateNoteDraft(nextValue)
|
||||
}
|
||||
|
||||
function startTextDrag(event: DragEvent<HTMLElement>, value: string) {
|
||||
event.dataTransfer.setData('text/plain', value)
|
||||
event.dataTransfer.effectAllowed = 'copy'
|
||||
setNotesDrawerOpen(true)
|
||||
}
|
||||
|
||||
function renameActiveSession(title: string) {
|
||||
patchActiveSession({ title })
|
||||
}
|
||||
@@ -1022,7 +1036,13 @@ function App() {
|
||||
commentaryEntries.length ? (
|
||||
<div className="commentary-list">
|
||||
{commentaryEntries.map((entry) => (
|
||||
<section key={entry.id}>
|
||||
<section
|
||||
key={entry.id}
|
||||
draggable
|
||||
onDragStart={(event) =>
|
||||
startTextDrag(event, `${entry.reference}\n${entry.text}\n- ${entry.source}`)
|
||||
}
|
||||
>
|
||||
<h3>{entry.reference}</h3>
|
||||
<p>{entry.text}</p>
|
||||
<small>{entry.source}</small>
|
||||
@@ -1073,7 +1093,18 @@ function App() {
|
||||
dictionaryEntries.length ? (
|
||||
<div className="dictionary-list">
|
||||
{dictionaryEntries.slice(0, 6).map((entry) => (
|
||||
<section key={entry.id}>
|
||||
<section
|
||||
key={entry.id}
|
||||
draggable
|
||||
onDragStart={(event) =>
|
||||
startTextDrag(
|
||||
event,
|
||||
`${entry.term}\n${entry.definitions
|
||||
.map((definition) => `${definition.sourceName}: ${definition.text}`)
|
||||
.join('\n\n')}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
<h3>{entry.term}</h3>
|
||||
{entry.definitions.slice(0, 2).map((definition) => (
|
||||
<p key={`${entry.id}-${definition.source}`}>
|
||||
@@ -1108,6 +1139,8 @@ function App() {
|
||||
<p
|
||||
key={verse.id}
|
||||
className={verse.id === selectedVerse.id ? 'page-verse selected' : 'page-verse'}
|
||||
draggable
|
||||
onDragStart={(event) => startTextDrag(event, `${reference(verse)} ${verse.text}`)}
|
||||
onClick={() => selectVerse(verse)}
|
||||
>
|
||||
<sup>{verse.verse}</sup>
|
||||
@@ -1220,6 +1253,8 @@ function App() {
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => recordFootnote(note.reference, note.text)}
|
||||
draggable
|
||||
onDragStart={(event) => startTextDrag(event, `${note.reference} ${note.text}`)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
@@ -1629,6 +1664,93 @@ function App() {
|
||||
)
|
||||
}
|
||||
|
||||
function renderNotesDrawer() {
|
||||
if (!selectedVerse) return null
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={notesDrawerOpen ? 'notes-drawer open' : 'notes-drawer'}
|
||||
aria-label="Notes drawer"
|
||||
onMouseEnter={() => setNotesDrawerOpen(true)}
|
||||
onMouseLeave={() => setNotesDrawerOpen(false)}
|
||||
onDragEnter={(event) => {
|
||||
event.preventDefault()
|
||||
setNotesDrawerOpen(true)
|
||||
}}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault()
|
||||
appendNoteClip(event.dataTransfer.getData('text/plain'))
|
||||
setNotesDrawerOpen(true)
|
||||
}}
|
||||
>
|
||||
<div className="notes-drawer-grip" aria-hidden="true">
|
||||
<span>N</span>
|
||||
<span>O</span>
|
||||
<span>T</span>
|
||||
<span>E</span>
|
||||
<span>S</span>
|
||||
</div>
|
||||
<div className="notes-workspace">
|
||||
<header>
|
||||
<span className="eyebrow">Notes</span>
|
||||
<h2>Study Notes</h2>
|
||||
</header>
|
||||
<textarea
|
||||
value={noteDraft}
|
||||
onChange={(event) => updateNoteDraft(event.target.value)}
|
||||
placeholder="Write sermon notes, study observations, or drag clippings here later."
|
||||
/>
|
||||
<div className="tag-editor">
|
||||
<input
|
||||
value={tagInput}
|
||||
onChange={(event) => setTagInput(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
addTag().catch((reason) => setError(String(reason)))
|
||||
}
|
||||
}}
|
||||
placeholder="prophecy, sermon, doctrine"
|
||||
/>
|
||||
<button type="button" onClick={() => addTag().catch((reason) => setError(String(reason)))}>
|
||||
Tag verse
|
||||
</button>
|
||||
</div>
|
||||
<div className="reader-tags">
|
||||
{selectedVerse.tags.map((tag) => (
|
||||
<span key={tag.id} style={{ backgroundColor: tag.color }}>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="notes-quick-panels">
|
||||
<button
|
||||
type="button"
|
||||
className="note-helper"
|
||||
onClick={() => setTimelineModalOpen(true)}
|
||||
aria-label="Open study timeline"
|
||||
>
|
||||
<span className="note-helper-figure" aria-hidden="true">
|
||||
<span className="helper-head" />
|
||||
<span className="helper-body" />
|
||||
<span className="helper-notebook" />
|
||||
<span className="helper-pencil" />
|
||||
</span>
|
||||
<span>
|
||||
<strong>Study timeline</strong>
|
||||
<small>{activeSession?.timeline.length ?? 0} events recorded</small>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" className="note-placeholder">
|
||||
<strong>Study tools</strong>
|
||||
<small>Placeholder</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className={railOpen ? 'app-shell menu-open' : 'app-shell'}>
|
||||
<aside
|
||||
@@ -1678,89 +1800,94 @@ function App() {
|
||||
) : selectedVerse ? (
|
||||
<>
|
||||
<header className="top-bar">
|
||||
<div className="page-controls" aria-label="Page selectors">
|
||||
<label>
|
||||
Translation
|
||||
<select value="kjv-eng-kjv2006" onChange={() => null}>
|
||||
<option value="kjv-eng-kjv2006">KJV</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Book
|
||||
<select
|
||||
value={selectedVerse.book}
|
||||
onChange={(event) => jumpTo(event.target.value, 1, 1)}
|
||||
>
|
||||
{books.map((book) => (
|
||||
<option key={book} value={book}>
|
||||
{book}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Chapter
|
||||
<select
|
||||
value={selectedVerse.chapter}
|
||||
onChange={(event) =>
|
||||
jumpTo(selectedVerse.book, Number(event.target.value), 1)
|
||||
}
|
||||
>
|
||||
{chapters.map((chapter) => (
|
||||
<option key={chapter} value={chapter}>
|
||||
{chapter}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Verse
|
||||
<select
|
||||
value={selectedVerse.verse}
|
||||
onChange={(event) =>
|
||||
jumpTo(
|
||||
selectedVerse.book,
|
||||
selectedVerse.chapter,
|
||||
Number(event.target.value),
|
||||
)
|
||||
}
|
||||
>
|
||||
{verseNumbers.map((verse) => (
|
||||
<option key={verse} value={verse}>
|
||||
{verse}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Strong's
|
||||
<select
|
||||
value={strongDisplay}
|
||||
onChange={(event) =>
|
||||
setStrongDisplayMode(event.target.value as StrongDisplayMode)
|
||||
}
|
||||
>
|
||||
<option value="off">Off</option>
|
||||
<option value="highlight">Highlight</option>
|
||||
<option value="numbers">Numbers</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="bible-top-tools">
|
||||
<div className="page-controls" aria-label="Page selectors">
|
||||
<label>
|
||||
Translation
|
||||
<select value="kjv-eng-kjv2006" onChange={() => null}>
|
||||
<option value="kjv-eng-kjv2006">KJV</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Book
|
||||
<select
|
||||
value={selectedVerse.book}
|
||||
onChange={(event) => jumpTo(event.target.value, 1, 1)}
|
||||
>
|
||||
{books.map((book) => (
|
||||
<option key={book} value={book}>
|
||||
{book}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Chapter
|
||||
<select
|
||||
value={selectedVerse.chapter}
|
||||
onChange={(event) =>
|
||||
jumpTo(selectedVerse.book, Number(event.target.value), 1)
|
||||
}
|
||||
>
|
||||
{chapters.map((chapter) => (
|
||||
<option key={chapter} value={chapter}>
|
||||
{chapter}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Verse
|
||||
<select
|
||||
value={selectedVerse.verse}
|
||||
onChange={(event) =>
|
||||
jumpTo(
|
||||
selectedVerse.book,
|
||||
selectedVerse.chapter,
|
||||
Number(event.target.value),
|
||||
)
|
||||
}
|
||||
>
|
||||
{verseNumbers.map((verse) => (
|
||||
<option key={verse} value={verse}>
|
||||
{verse}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Strong's
|
||||
<select
|
||||
value={strongDisplay}
|
||||
onChange={(event) =>
|
||||
setStrongDisplayMode(event.target.value as StrongDisplayMode)
|
||||
}
|
||||
>
|
||||
<option value="off">Off</option>
|
||||
<option value="highlight">Highlight</option>
|
||||
<option value="numbers">Numbers</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<form
|
||||
className="search-box"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
runSearch().catch((reason) => setError(String(reason)))
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="search"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder='Search KJV, reference, or Strong's'
|
||||
/>
|
||||
<button type="submit">Go</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="study-top-tools" aria-label="Study margin tools">
|
||||
<span>Study margin tools</span>
|
||||
</div>
|
||||
<form
|
||||
className="search-box"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
runSearch().catch((reason) => setError(String(reason)))
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id="search"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder='Search KJV, reference, or Strong's'
|
||||
/>
|
||||
<button type="submit">Go</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<div className={`study-desk ${viewMode}`}>
|
||||
@@ -1784,73 +1911,16 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`page-system ${viewMode} ${pageMotion}`}>
|
||||
{renderBiblePage('KJV')}
|
||||
{viewMode !== 'page' ? renderStudyMargin() : null}
|
||||
{renderFootnoteStrip()}
|
||||
{renderPageTurner()}
|
||||
{renderBookTabs()}
|
||||
</div>
|
||||
<>
|
||||
<div className={`page-system ${viewMode} ${pageMotion}`}>
|
||||
{renderBiblePage('KJV')}
|
||||
{renderFootnoteStrip()}
|
||||
{renderPageTurner()}
|
||||
{renderBookTabs()}
|
||||
</div>
|
||||
{renderStudyMargin()}
|
||||
</>
|
||||
)}
|
||||
|
||||
{viewMode === 'notes' ? (
|
||||
<aside className="notes-workspace" aria-label="Notes workspace">
|
||||
<header>
|
||||
<span className="eyebrow">Notes</span>
|
||||
<h2>Study Notes</h2>
|
||||
</header>
|
||||
<textarea
|
||||
value={noteDraft}
|
||||
onChange={(event) => updateNoteDraft(event.target.value)}
|
||||
placeholder="Write sermon notes, study observations, or drag clippings here later."
|
||||
/>
|
||||
<div className="tag-editor">
|
||||
<input
|
||||
value={tagInput}
|
||||
onChange={(event) => setTagInput(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
addTag().catch((reason) => setError(String(reason)))
|
||||
}
|
||||
}}
|
||||
placeholder="prophecy, sermon, doctrine"
|
||||
/>
|
||||
<button type="button" onClick={() => addTag().catch((reason) => setError(String(reason)))}>
|
||||
Tag verse
|
||||
</button>
|
||||
</div>
|
||||
<div className="reader-tags">
|
||||
{selectedVerse.tags.map((tag) => (
|
||||
<span key={tag.id} style={{ backgroundColor: tag.color }}>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="notes-quick-panels">
|
||||
<button
|
||||
type="button"
|
||||
className="note-helper"
|
||||
onClick={() => setTimelineModalOpen(true)}
|
||||
aria-label="Open study timeline"
|
||||
>
|
||||
<span className="note-helper-figure" aria-hidden="true">
|
||||
<span className="helper-head" />
|
||||
<span className="helper-body" />
|
||||
<span className="helper-notebook" />
|
||||
<span className="helper-pencil" />
|
||||
</span>
|
||||
<span>
|
||||
<strong>Study timeline</strong>
|
||||
<small>{activeSession?.timeline.length ?? 0} events recorded</small>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" className="note-placeholder">
|
||||
<strong>Study tools</strong>
|
||||
<small>Placeholder</small>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -1861,6 +1931,7 @@ function App() {
|
||||
{renderAboutModal()}
|
||||
{renderSettingsModal()}
|
||||
{renderTimelineModal()}
|
||||
{renderNotesDrawer()}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user