Polish study layout controls

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
-                  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>
+                <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>