Split study layout and add notes drawer

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "libre-study",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "libre-study",
-      "version": "0.1.15",
+      "version": "0.1.16",
       "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.15",
+  "version": "0.1.16",
   "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.15"
+version = "0.1.16"
 dependencies = [
  "log",
  "rusqlite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "0.1.15"
+version = "0.1.16"
 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.15",
+  "version": "0.1.16",
   "identifier": "org.librestudy.desktop",
   "build": {
     "frontendDist": "../dist",

src/App.css

@@ -2,6 +2,7 @@
   display: grid;
   grid-template-columns: 58px minmax(0, 1fr);
   min-height: 100vh;
+  overflow: hidden;
   background: #ece9df;
   color: #202124;
 }
@@ -151,19 +152,40 @@
 .reader {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
-  gap: 16px;
+  gap: 10px;
   min-width: 0;
   height: 100vh;
-  padding: 18px;
+  padding: 18px 42px 18px 18px;
   box-sizing: border-box;
   transition: filter 160ms ease;
 }
 
 .top-bar {
   display: grid;
-  grid-template-columns: minmax(760px, 1.42fr) minmax(320px, 0.58fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 6px;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.bible-top-tools {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.study-top-tools {
+  display: flex;
   align-items: end;
+  min-width: 0;
+  padding: 0 12px 3px;
+  border: 1px solid #d4cdbd;
+  border-radius: 8px;
+  background: #fbf8ef;
+  color: #657061;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
 }
 
 .study-margin h2,
@@ -230,10 +252,10 @@ textarea:focus-visible {
 
 .page-controls {
   display: grid;
-  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr) minmax(120px, 0.9fr);
+  grid-template-columns: minmax(92px, 1fr) minmax(118px, 1.24fr) minmax(72px, 0.74fr) minmax(68px, 0.66fr) minmax(96px, 0.9fr);
   gap: 8px;
   align-items: end;
-  max-width: 960px;
+  max-width: none;
 }
 
 .page-controls label {
@@ -248,20 +270,16 @@ textarea:focus-visible {
 
 .study-desk {
   display: grid;
-  grid-template-columns: minmax(720px, 1fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 6px;
   min-height: 0;
 }
 
 .study-desk.page,
 .study-desk.study,
+.study-desk.notes,
 .study-desk.compare {
-  grid-template-columns: minmax(680px, 1160px);
-  justify-content: center;
-}
-
-.study-desk.notes {
-  grid-template-columns: minmax(760px, 1.42fr) minmax(320px, 0.58fr);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 
 .page-system,
@@ -282,13 +300,9 @@ textarea:focus-visible {
   perspective: 1400px;
 }
 
-.page-system.study,
-.page-system.notes {
-  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
-}
-
 .page-system.compare-system {
   display: block;
+  grid-column: 1 / -1;
 }
 
 .bible-page {
@@ -409,11 +423,11 @@ textarea:focus-visible {
 }
 
 .study-margin {
-  grid-column: 2;
-  grid-row: 1 / -1;
   min-width: 0;
-  border-left: 1px solid #e4dece;
+  border: 1px solid #d4cdbd;
+  border-radius: 8px;
   background: #fbf8ef;
+  box-shadow: 0 12px 30px rgba(44, 48, 42, 0.08);
 }
 
 .panel-header {
@@ -693,6 +707,49 @@ textarea:focus-visible {
   gap: 14px;
 }
 
+.notes-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 28;
+  display: grid;
+  grid-template-columns: 30px minmax(360px, 30vw);
+  width: min(540px, calc(100vw - 92px));
+  height: 100vh;
+  transform: translateX(calc(100% - 30px));
+  transition: transform 190ms ease, box-shadow 190ms ease;
+}
+
+.notes-drawer.open,
+.notes-drawer:hover,
+.notes-drawer:focus-within {
+  transform: translateX(0);
+  box-shadow: -18px 0 42px rgba(17, 20, 17, 0.24);
+}
+
+.notes-drawer-grip {
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 5px;
+  border-left: 1px solid #d1cab9;
+  border-right: 1px solid #3c4239;
+  background: #1f231f;
+  color: #f6f3eb;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0;
+  cursor: pointer;
+}
+
+.notes-drawer .notes-workspace {
+  border: 1px solid #d4cdbd;
+  border-right: 0;
+  border-radius: 8px 0 0 8px;
+  background: #fffef8;
+  box-shadow: none;
+}
+
 .session-manager {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;

src/App.tsx

@@ -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&apos;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&apos;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>
   )
 }