nate/study-bible-project
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resizable right column in the Study stage; start on the chosen page without a flash
Build and Push Docker Image / build-and-push (push) Failing after 20s
Details

Browse Source 
The Study stage's right column has a drag handle (mouse, arrow keys, double-click
or Home to reset); the width is remembered per device. The app now starts on the
user's chosen home page from the first render instead of showing My Studies
first. Tests wait on page headings so a lazily loaded page can't be confused
with hidden text from the previous one.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 5.5 committed 2026-09-29 11:01:56 -04:00
1 parent 8c4f54e033
commit 7a010fcda8
5 files changed
+226 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/StudyPage.jsx
+14 -2
View File
@@ -6,6 +6,7 @@ import { useApp } from '../context/AppContext.js';
import { useCrossRefs } from '../hooks/useCrossRefs.js';
import { useStudyResources } from '../hooks/useStudyResources.js';
import { useWordStudy } from '../hooks/useWordStudy.js';
import { useResizableWidth } from '../hooks/useResizableWidth.js';
import { formatChunkReference, getChunkVerseEntries } from '../utils/bibleUtils.jsx';
import StudioShell from '../components/study/StudioShell.jsx';
import OutlineRail from '../components/study/OutlineRail.jsx';
@@ -33,6 +34,11 @@ export default function StudyPage() {
const verses = selectedChunk ? getChunkVerseEntries(project, chapterIndex, selectedChunk) : [];
const globalIndex = allChunks.findIndex((c) => c.id === selectedChunk?.id);
// The right column's width can be dragged (remembered on this device)
const gridRef = useRef(null);
const rightPanelRef = useRef(null);
const rightPanel = useResizableWidth({ storageKey: 'study-right-width', containerRef: gridRef });
const [tab, setTab] = useResourceTab();
const [openWordId, setOpenWordId] = useState(null);
useEffect(() => { setOpenWordId(null); }, [selectedChunk?.id]);
@@ -79,7 +85,8 @@ export default function StudyPage() {
return (
<StudioShell stage="study" fixedHeight>
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_28rem] lg:overflow-hidden xl:grid-cols-[16rem_minmax(0,1fr)_32rem]">
<div ref={gridRef} style={rightPanel.width ? { '--study-right': `${rightPanel.width}px` } : undefined}
className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:grid lg:grid-cols-[15rem_minmax(0,1fr)_var(--study-right,28rem)] lg:overflow-hidden xl:grid-cols-[16rem_minmax(0,1fr)_var(--study-right,32rem)]">
<aside className="hidden min-h-0 border-r border-[var(--r-line)] bg-[var(--r-bar)] lg:block">
<OutlineRail project={project} selectedId={selectedChunk?.id} onSelect={select} onEditOutline={() => setCurrentPage('setup')} />
</aside>
@@ -114,7 +121,12 @@ export default function StudyPage() {
)}
</main>
<aside className="flex min-h-0 flex-col gap-3 border-t border-[var(--r-line)] bg-[var(--r-bar)] p-3 lg:border-l lg:border-t-0">
<aside ref={rightPanelRef} className="relative flex min-h-0 flex-col gap-3 border-t border-[var(--r-line)] bg-[var(--r-bar)] p-3 lg:border-l lg:border-t-0">
{/* Drag handle on the column's left edge (wide screens only) */}
<div {...rightPanel.handleProps(rightPanelRef)}
className="group absolute -left-1.5 top-0 z-20 hidden h-full w-3 cursor-col-resize touch-none select-none focus:outline-none lg:block">
<span className="mx-auto block h-full w-px bg-transparent transition group-hover:w-0.5 group-hover:bg-[var(--r-accent)] group-focus-visible:w-0.5 group-focus-visible:bg-[var(--r-accent)]" />
</div>
{selectedChunk && chapter && (
<>
<section aria-label="Notes" className="flex min-h-[22rem] flex-col overflow-hidden rounded-2xl border border-[var(--r-line)] bg-[var(--r-bg)] lg:min-h-0 lg:flex-[11]">