Polish study layout controls

package-lock.json

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

src-tauri/Cargo.toml

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

src/App.css

@@ -161,12 +161,11 @@
 
 .top-bar {
   display: grid;
-  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.1fr) minmax(300px, 0.65fr);
+  grid-template-columns: minmax(760px, 1.42fr) minmax(320px, 0.58fr);
-  gap: 14px;
+  gap: 6px;
   align-items: end;
 }
 
-.version-block h1,
 .study-margin h2,
 .notes-workspace h2,
 .strong-focus h4 {
@@ -174,12 +173,6 @@
   letter-spacing: 0;
 }
 
-.version-block h1 {
-  margin-top: 3px;
-  font-size: 24px;
-  line-height: 1.15;
-}
-
 .eyebrow {
   color: #657061;
   font-size: 12px;
@@ -240,6 +233,7 @@ textarea:focus-visible {
   grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr) minmax(120px, 0.9fr);
   gap: 8px;
   align-items: end;
+  max-width: 960px;
 }
 
 .page-controls label {
@@ -255,7 +249,7 @@ textarea:focus-visible {
 .study-desk {
   display: grid;
   grid-template-columns: minmax(720px, 1fr);
-  gap: 16px;
+  gap: 6px;
   min-height: 0;
 }
 
@@ -466,6 +460,17 @@ textarea:focus-visible {
   gap: 8px;
   align-items: center;
   justify-content: space-between;
+  margin: -6px -6px 2px;
+  padding: 7px 8px;
+  border-radius: 5px;
+  background: #f5efe1;
+  cursor: pointer;
+}
+
+.margin-section-header:hover,
+.margin-section-header:focus-visible {
+  background: #efe5d0;
+  outline: none;
 }
 
 .collapse-button,
@@ -480,8 +485,10 @@ textarea:focus-visible {
 }
 
 .collapse-button {
+  flex: 1;
   padding: 0;
   text-align: left;
+  cursor: pointer;
 }
 
 .collapse-button::before {
@@ -736,6 +743,34 @@ textarea:focus-visible {
   text-align: left;
 }
 
+.notes-quick-panels {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+  margin-top: auto;
+}
+
+.notes-quick-panels .note-helper {
+  margin-top: 0;
+}
+
+.note-placeholder {
+  display: grid;
+  align-content: center;
+  gap: 4px;
+  width: 100%;
+  padding: 12px;
+  border-color: #ded6c7;
+  background: #fbf8ef;
+  color: #202124;
+  text-align: left;
+}
+
+.note-placeholder small {
+  color: #657061;
+  font-size: 12px;
+}
+
 .note-helper strong,
 .note-helper small {
   display: block;

src/App.tsx

@@ -758,15 +758,32 @@ function App() {
 
     return (
       <section className="original-language-verse" aria-label="Original language lemma line">
-        <header className="margin-section-header">
+        <header
+          className="margin-section-header"
+          role="button"
+          tabIndex={0}
+          onClick={() => setOriginalCollapsed((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              setOriginalCollapsed((current) => !current)
+            }
+          }}
+        >
           <button
             type="button"
             className="collapse-button"
-            onClick={() => setOriginalCollapsed((current) => !current)}
           >
             {isHebrew ? 'Hebrew Lemma Line' : 'Greek Lemma Line'}
           </button>
-          <button type="button" className="mini-settings" onClick={() => setSettingsModalOpen(true)}>
+          <button
+            type="button"
+            className="mini-settings"
+            onClick={(event) => {
+              event.stopPropagation()
+              setSettingsModalOpen(true)
+            }}
+          >
             Aa
           </button>
         </header>
@@ -801,15 +818,32 @@ function App() {
 
     return (
       <section className="english-strong-line" aria-label="English Strong's line">
-        <header className="margin-section-header">
+        <header
+          className="margin-section-header"
+          role="button"
+          tabIndex={0}
+          onClick={() => setLinkedCollapsed((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault()
+              setLinkedCollapsed((current) => !current)
+            }
+          }}
+        >
           <button
             type="button"
             className="collapse-button"
-            onClick={() => setLinkedCollapsed((current) => !current)}
           >
             English Linked Text
           </button>
-          <button type="button" className="mini-settings" onClick={() => setSettingsModalOpen(true)}>
+          <button
+            type="button"
+            className="mini-settings"
+            onClick={(event) => {
+              event.stopPropagation()
+              setSettingsModalOpen(true)
+            }}
+          >
             Aa
           </button>
         </header>
@@ -870,7 +904,7 @@ function App() {
         <button type="button" onClick={() => shiftPage(-1)}>
           Previous page
         </button>
-        <span>{pageRange}</span>
+        <span>King James Version - {pageRange}</span>
         <button type="button" onClick={() => shiftPage(1)}>
           Next page
         </button>
@@ -895,11 +929,21 @@ function App() {
             {renderLinkedEnglishLine()}
             {selectedStrongEntry ? (
               <article className="strong-focus" aria-label="Strong's definition">
-                <header className="margin-section-header">
+                <header
+                  className="margin-section-header"
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setDefinitionCollapsed((current) => !current)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault()
+                      setDefinitionCollapsed((current) => !current)
+                    }
+                  }}
+                >
                   <button
                     type="button"
                     className="collapse-button"
-                    onClick={() => setDefinitionCollapsed((current) => !current)}
                   >
                     Definition
                   </button>
@@ -1375,10 +1419,6 @@ function App() {
         ) : selectedVerse ? (
           <>
             <header className="top-bar">
-              <div className="version-block">
-                <span className="eyebrow">King James Version</span>
-                <h1>{pageRange}</h1>
-              </div>
               <div className="page-controls" aria-label="Page selectors">
                 <label>
                   Translation
@@ -1527,23 +1567,29 @@ function App() {
                     </span>
                   ))}
                 </div>
-                <button
+                <div className="notes-quick-panels">
-                  type="button"
+                  <button
-                  className="note-helper"
+                    type="button"
-                  onClick={() => setTimelineModalOpen(true)}
+                    className="note-helper"
-                  aria-label="Open study timeline"
+                    onClick={() => setTimelineModalOpen(true)}
-                >
+                    aria-label="Open study timeline"
-                  <span className="note-helper-figure" aria-hidden="true">
+                  >
-                    <span className="helper-head" />
+                    <span className="note-helper-figure" aria-hidden="true">
-                    <span className="helper-body" />
+                      <span className="helper-head" />
-                    <span className="helper-notebook" />
+                      <span className="helper-body" />
-                    <span className="helper-pencil" />
+                      <span className="helper-notebook" />
-                  </span>
+                      <span className="helper-pencil" />
-                  <span>
+                    </span>
-                    <strong>Study timeline</strong>
+                    <span>
-                    <small>{activeSession?.timeline.length ?? 0} events recorded</small>
+                      <strong>Study timeline</strong>
-                  </span>
+                      <small>{activeSession?.timeline.length ?? 0} events recorded</small>
-                </button>
+                    </span>
+                  </button>
+                  <button type="button" className="note-placeholder">
+                    <strong>Study tools</strong>
+                    <small>Placeholder</small>
+                  </button>
+                </div>
               </aside>
               ) : null}
             </div>