Add Bible page reader prototype

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.1.3 - 2026-07-12
+
+- Phase 1 page-reader prototype: replaced the sidebar-first app with a Bible-page study desk.
+- Added view modes for Bible page, Bible plus study margin, and Bible plus explicit notes workspace.
+- Added a two-column page display, dynamic study margin, notes workspace, and footnote strip.
+- Kept pages as dynamic verse chunks that can cross chapter boundaries.
+
 ## 0.1.2 - 2026-07-12
 
 - Wired Libre Study to import the LibreBible Strong's dictionary package alongside KJV Strong's links.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "libre-study",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "libre-study",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "dependencies": {
         "@tauri-apps/api": "^2.11.1",
         "react": "^19.2.7",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "libre-study",
   "private": true,
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1",

src-tauri/Cargo.lock

@@ -77,7 +77,7 @@ checksum = "2a4385e2e34eb35d6b3efe798b9eb88096925d87726c0798709bf56d9ed84af3"
 
 [[package]]
 name = "app"
-version = "0.1.2"
+version = "0.1.3"
 dependencies = [
  "log",
  "rusqlite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.1.2"
+version = "0.1.3"
 description = "A Tauri App"
 authors = ["you"]
 license = ""

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Libre Study",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "identifier": "org.librestudy.desktop",
   "build": {
     "frontendDist": "../dist",

src/App.css

@@ -1,93 +1,91 @@
 .app-shell {
   display: grid;
-  grid-template-columns: 360px minmax(0, 1fr);
+  grid-template-columns: 58px minmax(0, 1fr);
   min-height: 100vh;
-  background: #f7f7f4;
+  background: #ece9df;
   color: #202124;
 }
 
-.sidebar {
+.tool-rail {
   display: flex;
   flex-direction: column;
-  gap: 22px;
+  gap: 12px;
-  min-height: 100vh;
-  padding: 24px;
-  background: #20231f;
-  color: #f6f3eb;
-  border-right: 1px solid #d8d5cb;
-  box-sizing: border-box;
-}
-
-.brand-block {
-  display: flex;
-  gap: 14px;
   align-items: center;
+  padding: 18px 10px;
+  background: #1f231f;
+  border-right: 1px solid #d1cab9;
 }
 
 .brand-mark {
   display: grid;
   place-items: center;
-  flex: 0 0 44px;
+  width: 42px;
-  width: 44px;
+  height: 42px;
-  height: 44px;
   border-radius: 8px;
   background: #d6a84f;
   color: #161711;
   font-weight: 800;
-  font-size: 16px;
+  font-size: 15px;
 }
 
-.brand-block h1,
+.tool-rail button {
-.reader h2,
+  width: 38px;
-.panel h3,
+  height: 38px;
-.strong-entry h4 {
+  padding: 0;
+  border-color: #3c4239;
+  background: #2c302a;
+  color: #f6f3eb;
+}
+
+.reader {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 16px;
+  min-width: 0;
+  height: 100vh;
+  padding: 18px;
+  box-sizing: border-box;
+}
+
+.top-bar {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) minmax(320px, 520px);
+  gap: 18px;
+  align-items: end;
+}
+
+.version-block h1,
+.study-margin h2,
+.notes-workspace h2,
+.strong-focus h4 {
   margin: 0;
   letter-spacing: 0;
 }
 
-.brand-block h1 {
+.version-block h1 {
-  color: #ffffff;
+  margin-top: 3px;
-  font-size: 22px;
+  font-size: 24px;
-  line-height: 1.1;
+  line-height: 1.15;
 }
 
-.brand-block p,
+.eyebrow {
-.empty-text,
+  color: #657061;
-.result small,
-.panel-note,
-.translit {
-  margin: 0;
-  color: #a9ada3;
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.search-box,
-.tag-filter,
-.result-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.search-box label,
-.section-title {
-  color: #d9d4c4;
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: 0;
   text-transform: uppercase;
 }
 
-.search-row,
+.search-box {
-.tag-editor {
+  display: grid;
-  display: flex;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
 }
 
-input {
+input,
-  min-width: 0;
+textarea {
   width: 100%;
+  min-width: 0;
   border: 1px solid #bdb8aa;
   border-radius: 6px;
   padding: 10px 12px;
@@ -98,6 +96,12 @@ input {
   box-sizing: border-box;
 }
 
+textarea {
+  min-height: 420px;
+  resize: none;
+  line-height: 1.5;
+}
+
 button {
   border: 1px solid transparent;
   border-radius: 6px;
@@ -111,120 +115,145 @@ button {
 }
 
 button:focus-visible,
-input:focus-visible {
+input:focus-visible,
+textarea:focus-visible {
   outline: 2px solid #5d7f71;
   outline-offset: 2px;
 }
 
-.tag-list,
+.study-desk {
-.reader-tags {
+  display: grid;
-  display: flex;
+  grid-template-columns: minmax(520px, 1.3fr) minmax(220px, 0.38fr) minmax(320px, 0.7fr);
-  flex-wrap: wrap;
+  gap: 16px;
-  gap: 8px;
-}
-
-.tag-chip {
-  padding: 6px 9px;
-  background: transparent;
-  color: #f6f3eb;
-  border: 1px solid #5d7f71;
-  font-size: 12px;
-}
-
-.result-list {
   min-height: 0;
-  overflow: auto;
-  padding-right: 4px;
 }
 
-.result {
+.study-desk.page {
-  display: flex;
+  grid-template-columns: minmax(680px, 980px);
-  flex-direction: column;
+  justify-content: center;
-  gap: 4px;
-  width: 100%;
-  padding: 12px;
-  text-align: left;
-  background: #2c302a;
-  color: #f8f5ed;
-  border: 1px solid #3d4339;
 }
 
-.result.active {
+.study-desk.study {
-  border-color: #d6a84f;
+  grid-template-columns: minmax(560px, 1fr) minmax(260px, 360px);
-  background: #363b33;
 }
 
-.result span {
+.study-desk.notes {
-  font-weight: 800;
+  grid-template-columns: minmax(520px, 1.3fr) minmax(220px, 0.38fr) minmax(320px, 0.7fr);
 }
 
-.reader {
+.bible-page,
-  display: flex;
+.study-margin,
-  flex-direction: column;
+.notes-workspace,
-  gap: 22px;
+.footnote-strip,
-  padding: 30px;
-  min-width: 0;
-  box-sizing: border-box;
-}
-
-.reader-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 20px;
-  align-items: flex-start;
-}
-
-.eyebrow {
-  color: #657061;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.reader h2 {
-  margin-top: 4px;
-  color: #202124;
-  font-size: 34px;
-  line-height: 1.1;
-}
-
-.reader-tags span {
-  border-radius: 999px;
-  color: white;
-  font-size: 12px;
-  font-weight: 700;
-  padding: 5px 9px;
-}
-
-.verse-card,
-.panel,
 .status-panel {
-  border: 1px solid #dad6cc;
+  border: 1px solid #d4cdbd;
   border-radius: 8px;
-  background: #fffef9;
+  background: #fffef8;
   box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
 }
 
-.verse-card {
+.bible-page {
-  padding: 30px;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  min-height: 0;
+  padding: 26px 30px;
 }
 
-.verse-card p {
+.bible-page header,
-  margin: 0;
+.bible-page footer {
-  color: #1f211e;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+  color: #6b675d;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.bible-page footer {
+  padding-top: 16px;
+  border-top: 1px solid #e8e2d4;
+  text-transform: none;
+}
+
+.bible-page footer span {
+  color: #6b675d;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.page-columns {
+  column-count: 2;
+  column-gap: 34px;
+  column-rule: 1px solid #eee7d8;
+  overflow: hidden;
+  padding: 22px 0;
   font-family: Georgia, 'Times New Roman', serif;
-  font-size: 31px;
+}
-  line-height: 1.55;
+
+.page-verse {
+  break-inside: avoid;
+  margin: 0 0 9px;
+  padding: 3px 4px;
+  color: #1f211e;
+  font-size: 18px;
+  line-height: 1.58;
+  cursor: pointer;
+}
+
+.page-verse.selected {
+  border-radius: 5px;
+  background: #f4ecd8;
+}
+
+.page-verse sup {
+  margin-right: 5px;
+  color: #8a6d2e;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: 10px;
+  font-weight: 800;
+}
+
+.study-margin,
+.notes-workspace {
+  min-height: 0;
+  overflow: auto;
+  padding: 16px;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e0d6;
+}
+
+.panel-header h2,
+.notes-workspace h2 {
+  font-size: 18px;
+}
+
+.panel-header span,
+.margin-reference,
+.translit {
+  color: #657061;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.margin-reference {
+  margin: 12px 0;
+  font-weight: 800;
 }
 
 .linked-word-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 22px;
+  margin: 0 0 14px;
-  padding-top: 18px;
-  border-top: 1px solid #e4e0d6;
 }
 
 .word-link {
@@ -249,55 +278,16 @@ input:focus-visible {
   background: #e7f0eb;
 }
 
-.study-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
-  gap: 18px;
-  align-items: start;
-}
-
-.panel {
-  padding: 18px;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #e4e0d6;
-}
-
-.panel h3 {
-  color: #2a2d28;
-  font-size: 18px;
-}
-
-.panel-header span {
-  color: #657061;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.strong-list {
-  display: grid;
-  gap: 12px;
-  padding-top: 14px;
-}
-
 .strong-focus {
   display: grid;
   gap: 9px;
-  margin-top: 14px;
   padding: 16px;
   border: 1px solid #b9cabf;
   border-radius: 8px;
   background: #eef6f1;
 }
 
-.strong-focus div,
+.strong-focus div {
-.strong-entry div {
   display: flex;
   justify-content: space-between;
   gap: 12px;
@@ -307,7 +297,6 @@ input:focus-visible {
 }
 
 .strong-focus h4 {
-  margin: 0;
   color: #1f211e;
   font-size: 22px;
 }
@@ -326,62 +315,82 @@ input:focus-visible {
   color: #ffffff;
 }
 
-.strong-entry {
+.notes-workspace {
-  border: 1px solid #e4e0d6;
+  display: flex;
-  border-radius: 8px;
+  flex-direction: column;
-  padding: 14px;
+  gap: 14px;
-  background: #fbfaf4;
-  cursor: pointer;
 }
 
-.strong-entry.active {
+.tag-editor,
-  border-color: #2f6f5e;
+.reader-tags {
-  background: #f3faf6;
+  display: flex;
+  gap: 8px;
 }
 
-.strong-entry h4 {
+.reader-tags {
-  margin-top: 8px;
+  flex-wrap: wrap;
-  color: #1f211e;
-  font-size: 18px;
 }
 
-.strong-entry p {
+.reader-tags span {
-  margin: 8px 0 0;
+  border-radius: 999px;
-  color: #3f443d;
+  color: white;
-  font-size: 14px;
+  font-size: 12px;
-  line-height: 1.5;
+  font-weight: 700;
-}
+  padding: 5px 9px;
-
-.tag-editor {
-  margin-top: 16px;
-}
-
-.panel-note {
-  margin-top: 14px;
-  color: #657061;
 }
 
+.footnote-strip,
 .status-panel {
-  padding: 28px;
+  padding: 14px 18px;
   color: #3f443d;
 }
 
+.footnote-strip {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-height: 46px;
+}
+
+.footnote-strip span {
+  color: #657061;
+}
+
 .status-panel.error {
   border-color: #b42318;
   color: #b42318;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1200px) {
-  .app-shell,
+  .study-desk {
-  .study-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .reader {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .bible-page {
+    min-height: 760px;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell {
     grid-template-columns: 1fr;
   }
 
-  .sidebar {
+  .tool-rail {
-    min-height: auto;
+    flex-direction: row;
+    justify-content: flex-start;
   }
 
-  .reader-header {
+  .top-bar {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+  }
+
+  .page-columns {
+    column-count: 1;
   }
 }

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { addTagToVerse, getLibraryState, searchVerses } from './studyClient'
-import type { Tag, Verse } from './types'
+import type { Verse } from './types'
 import './App.css'
 
 const tagColors = ['#2f6f5e', '#735c0f', '#8a3ffc', '#b42318', '#245ba7']
@@ -10,12 +10,13 @@ function reference(verse: Verse) {
 }
 
 function App() {
+  const [viewMode, setViewMode] = useState<'page' | 'study' | 'notes'>('notes')
   const [query, setQuery] = useState('')
   const [verses, setVerses] = useState<Verse[]>([])
-  const [tags, setTags] = useState<Tag[]>([])
   const [selectedId, setSelectedId] = useState<number | null>(null)
   const [selectedStrong, setSelectedStrong] = useState<string | null>(null)
   const [tagInput, setTagInput] = useState('')
+  const [noteDraft, setNoteDraft] = useState('')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
@@ -23,7 +24,6 @@ function App() {
     setError(null)
     const state = await getLibraryState()
     setVerses(state.verses)
-    setTags(state.tags)
     setSelectedId((current) => current ?? state.verses[0]?.id ?? null)
   }
 
@@ -46,10 +46,6 @@ function App() {
     setVerses((current) =>
       current.map((verse) => (verse.id === updated.id ? updated : verse)),
     )
-    setTags((current) => {
-      const exists = current.some((tag) => tag.label.toLowerCase() === label.toLowerCase())
-      return exists ? current : [...current, updated.tags[updated.tags.length - 1]]
-    })
     setTagInput('')
   }
 
@@ -70,7 +66,15 @@ function App() {
       selectedVerse.strongs[0]
     )
   }, [selectedStrong, selectedVerse])
-  const visibleVerses = useMemo(() => verses.slice(0, 250), [verses])
+  const pageVerses = useMemo(() => {
+    if (!selectedVerse) return []
+    const selectedIndex = verses.findIndex((verse) => verse.id === selectedVerse.id)
+    const start = Math.max(0, selectedIndex)
+    return verses.slice(start, start + 34)
+  }, [selectedVerse, verses])
+  const pageRange = pageVerses.length
+    ? `${reference(pageVerses[0])} - ${reference(pageVerses[pageVerses.length - 1])}`
+    : 'No page loaded'
 
   function searchStrong(strong: string) {
     setQuery(strong)
@@ -80,74 +84,11 @@ function App() {
 
   return (
     <main className="app-shell">
-      <aside className="sidebar">
+      <aside className="tool-rail" aria-label="Main tools">
-        <div className="brand-block">
+        <span className="brand-mark">LS</span>
-          <span className="brand-mark">LS</span>
+        <button type="button" title="Bible page" onClick={() => setViewMode('page')}>B</button>
-          <div>
+        <button type="button" title="Study margin" onClick={() => setViewMode('study')}>M</button>
-            <h1>Libre Study</h1>
+        <button type="button" title="Notes workspace" onClick={() => setViewMode('notes')}>N</button>
-            <p>KJV with Strong's-linked study data</p>
-          </div>
-        </div>
-
-        <form
-          className="search-box"
-          onSubmit={(event) => {
-            event.preventDefault()
-            runSearch().catch((reason) => setError(String(reason)))
-          }}
-        >
-          <label htmlFor="search">Search</label>
-          <div className="search-row">
-            <input
-              id="search"
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder='faith, "kingdom", G4102'
-            />
-            <button type="submit">Go</button>
-          </div>
-        </form>
-
-        <section className="tag-filter">
-          <div className="section-title">Tags</div>
-          <div className="tag-list">
-            {tags.length === 0 ? (
-              <span className="empty-text">No tags yet</span>
-            ) : (
-              tags.map((tag) => (
-                <button
-                  key={tag.id}
-                  className="tag-chip"
-                  type="button"
-                  style={{ borderColor: tag.color }}
-                  onClick={() => {
-                    setQuery(`tag:${tag.label}`)
-                    runSearch(`tag:${tag.label}`).catch((reason) => setError(String(reason)))
-                  }}
-                >
-                  {tag.label}
-                </button>
-              ))
-            )}
-          </div>
-        </section>
-
-        <section className="result-list" aria-label="Search results">
-          <div className="section-title">
-            {verses.length} verses{verses.length > visibleVerses.length ? `, showing ${visibleVerses.length}` : ''}
-          </div>
-          {visibleVerses.map((verse) => (
-            <button
-              key={verse.id}
-              className={verse.id === selectedVerse?.id ? 'result active' : 'result'}
-              type="button"
-              onClick={() => setSelectedId(verse.id)}
-            >
-              <span>{reference(verse)}</span>
-              <small>{verse.text}</small>
-            </button>
-          ))}
-        </section>
       </aside>
 
       <section className="reader">
@@ -157,43 +98,90 @@ function App() {
           <div className="status-panel error">{error}</div>
         ) : selectedVerse ? (
           <>
-            <header className="reader-header">
+            <header className="top-bar">
-              <div>
+              <div className="version-block">
                 <span className="eyebrow">King James Version</span>
-                <h2>{reference(selectedVerse)}</h2>
+                <h1>{pageRange}</h1>
-              </div>
-              <div className="reader-tags">
-                {selectedVerse.tags.map((tag) => (
-                  <span key={tag.id} style={{ backgroundColor: tag.color }}>
-                    {tag.label}
-                  </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&apos;s'
+                />
+                <button type="submit">Go</button>
+              </form>
             </header>
 
-            <article className="verse-card">
+            <div className={`study-desk ${viewMode}`}>
-              <p>{selectedVerse.text}</p>
+              <article className="bible-page" aria-label="Bible page">
-              <div className="linked-word-list" aria-label="Linked Strong's words">
+                <header>
-                {selectedVerse.strongs.map((entry) => (
+                  <span>KJV</span>
+                  <strong>{reference(selectedVerse)}</strong>
+                  <span>{verses.length} verses loaded</span>
+                </header>
+                <div className="page-columns">
+                  {pageVerses.map((verse) => (
+                    <p
+                      key={verse.id}
+                      className={verse.id === selectedVerse.id ? 'page-verse selected' : 'page-verse'}
+                      onClick={() => setSelectedId(verse.id)}
+                    >
+                      <sup>{verse.verse}</sup>
+                      {verse.text}
+                    </p>
+                  ))}
+                </div>
+                <footer>
                   <button
-                    key={`${entry.strong}-${entry.position}`}
-                    className={entry.strong === selectedStrongEntry?.strong ? 'word-link active' : 'word-link'}
                     type="button"
-                    title={`${entry.surface}: ${entry.strong}`}
+                    onClick={() => {
-                    onClick={() => setSelectedStrong(entry.strong)}
+                      const index = verses.findIndex((verse) => verse.id === selectedVerse.id)
+                      setSelectedId(verses[Math.max(0, index - 34)]?.id ?? selectedVerse.id)
+                    }}
                   >
-                    <span>{entry.surface}</span>
+                    Previous page
-                    <small>{entry.strong}</small>
                   </button>
-                ))}
+                  <span>{pageRange}</span>
-              </div>
+                  <button
-            </article>
+                    type="button"
+                    onClick={() => {
+                      const index = verses.findIndex((verse) => verse.id === selectedVerse.id)
+                      setSelectedId(verses[Math.min(verses.length - 1, index + 34)]?.id ?? selectedVerse.id)
+                    }}
+                  >
+                    Next page
+                  </button>
+                </footer>
+              </article>
 
-            <div className="study-grid">
+              {viewMode !== 'page' ? (
-              <section className="panel">
+              <aside className="study-margin" aria-label="Study margin">
                 <div className="panel-header">
-                  <h3>Strong's Links</h3>
+                  <h2>Study Margin</h2>
-                  <span>{selectedVerse.strongs.length}</span>
+                  <span>{selectedVerse.strongs.length} links</span>
+                </div>
+                <p className="margin-reference">{reference(selectedVerse)}</p>
+                <div className="linked-word-list" aria-label="Linked Strong's words">
+                  {selectedVerse.strongs.map((entry) => (
+                    <button
+                      key={`${entry.strong}-${entry.position}`}
+                      className={entry.strong === selectedStrongEntry?.strong ? 'word-link active' : 'word-link'}
+                      type="button"
+                      title={`${entry.surface}: ${entry.strong}`}
+                      onClick={() => setSelectedStrong(entry.strong)}
+                    >
+                      <span>{entry.surface}</span>
+                      <small>{entry.strong}</small>
+                    </button>
+                  ))}
                 </div>
                 {selectedStrongEntry ? (
                   <article className="strong-focus">
@@ -209,29 +197,20 @@ function App() {
                     </button>
                   </article>
                 ) : null}
-                <div className="strong-list">
+              </aside>
-                  {selectedVerse.strongs.map((entry) => (
+              ) : null}
-                    <article
-                      key={`${entry.strong}-${entry.position}`}
-                      className={entry.strong === selectedStrongEntry?.strong ? 'strong-entry active' : 'strong-entry'}
-                      onClick={() => setSelectedStrong(entry.strong)}
-                    >
-                      <div>
-                        <strong>{entry.strong}</strong>
-                        <span>{entry.surface}</span>
-                      </div>
-                      <h4>{entry.lemma}</h4>
-                      <p className="translit">{entry.transliteration}</p>
-                      <p>{entry.definition}</p>
-                    </article>
-                  ))}
-                </div>
-              </section>
 
-              <section className="panel">
+              {viewMode === 'notes' ? (
-                <div className="panel-header">
+              <aside className="notes-workspace" aria-label="Notes workspace">
-                  <h3>Tag This Verse</h3>
+                <header>
-                </div>
+                  <span className="eyebrow">Notes</span>
+                  <h2>Study Notes</h2>
+                </header>
+                <textarea
+                  value={noteDraft}
+                  onChange={(event) => setNoteDraft(event.target.value)}
+                  placeholder="Write sermon notes, study observations, or drag clippings here later."
+                />
                 <div className="tag-editor">
                   <input
                     value={tagInput}
@@ -244,15 +223,24 @@ function App() {
                     placeholder="prophecy, sermon, doctrine"
                   />
                   <button type="button" onClick={() => addTag().catch((reason) => setError(String(reason)))}>
-                    Add
+                    Tag verse
                   </button>
                 </div>
-                <p className="panel-note">
+                <div className="reader-tags">
-                  This is backed by the local SQLite database. Notes, highlights, saved
+                  {selectedVerse.tags.map((tag) => (
-                  searches, and import tools can sit on this same foundation.
+                    <span key={tag.id} style={{ backgroundColor: tag.color }}>
-                </p>
+                      {tag.label}
-              </section>
+                    </span>
+                  ))}
+                </div>
+              </aside>
+              ) : null}
             </div>
+
+            <section className="footnote-strip">
+              <strong>Footnotes</strong>
+              <span>Dynamic translation notes and cross references will appear here.</span>
+            </section>
           </>
         ) : (
           <div className="status-panel">No verses matched that search.</div>