Render KJV footnotes and lemma margin line

src/App.tsx

@@ -118,6 +118,11 @@ function App() {
   const pageRange = pageVerses.length
     ? `${reference(pageVerses[0])} - ${reference(pageVerses[pageVerses.length - 1])}`
     : 'No page loaded'
+  const selectedFootnotes = selectedVerse?.footnotes ?? []
+  const pageFootnotes = useMemo(
+    () => pageVerses.flatMap((verse) => verse.footnotes ?? []),
+    [pageVerses],
+  )
   const books = useMemo(
     () => Array.from(new Set(libraryVerses.map((verse) => verse.book))),
     [libraryVerses],
@@ -266,6 +271,30 @@ function App() {
     return parts.length ? parts : verse.text
   }
 
+  function renderOriginalLanguageLine() {
+    if (!selectedVerse?.strongs.length) return null
+
+    return (
+      <section className="original-language-verse" aria-label="Original language lemma line">
+        <h3>Lemma Line</h3>
+        <p>
+          {selectedVerse.strongs.map((entry) => (
+            <button
+              key={`${entry.strong}-${entry.position}-lemma`}
+              type="button"
+              className={entry.strong === selectedStrongEntry?.strong ? 'lemma-token active' : 'lemma-token'}
+              title={`${entry.surface}: ${entry.strong}`}
+              onClick={() => setSelectedStrong(entry.strong)}
+            >
+              <span>{entry.lemma || entry.surface}</span>
+              <small>{entry.strong}</small>
+            </button>
+          ))}
+        </p>
+      </section>
+    )
+  }
+
   function renderBiblePage(label = 'KJV') {
     if (!selectedVerse) return null
     return (
@@ -309,6 +338,7 @@ function App() {
           <span>{selectedVerse.strongs.length} links</span>
         </div>
         <p className="margin-reference">{reference(selectedVerse)}</p>
+        {renderOriginalLanguageLine()}
         <div className="linked-word-list" aria-label="Linked Strong's words">
           {selectedVerse.strongs.map((entry) => (
             <button
@@ -341,6 +371,27 @@ function App() {
     )
   }
 
+  function renderFootnoteStrip() {
+    const visibleFootnotes = selectedFootnotes.length ? selectedFootnotes : pageFootnotes.slice(0, 4)
+    return (
+      <section className="footnote-strip">
+        <strong>Footnotes</strong>
+        {visibleFootnotes.length ? (
+          <div className="footnote-list">
+            {visibleFootnotes.map((note) => (
+              <p key={note.id}>
+                <span>{note.reference}</span>
+                {note.text}
+              </p>
+            ))}
+          </div>
+        ) : (
+          <span>No footnotes for the selected verse.</span>
+        )}
+      </section>
+    )
+  }
+
   return (
     <main className="app-shell">
       <aside className="tool-rail" aria-label="Main tools">
@@ -472,10 +523,7 @@ function App() {
                 <div className={`page-system ${viewMode}`}>
                   {renderBiblePage('KJV')}
                   {viewMode !== 'page' ? renderStudyMargin() : null}
-                  <section className="footnote-strip">
-                    <strong>Footnotes</strong>
-                    <span>Dynamic translation notes and cross references will appear here.</span>
-                  </section>
+                  {renderFootnoteStrip()}
                 </div>
               )}