tweaks

src/colossiansStudy.tsx

@@ -1965,6 +1965,7 @@ export function ColossiansStudyNotesPage({ content }: Props) {
   const [notes, setNotes] = useState<StudyNotesMap>({})
   const [loading, setLoading] = useState(true)
   const [message, setMessage] = useState('')
+  const [activeNoteTab, setActiveNoteTab] = useState('')
 
   useEffect(() => {
     document.title = study ? `My Notes | ${study.title}` : 'My Study Notes'
@@ -2039,6 +2040,10 @@ export function ColossiansStudyNotesPage({ content }: Props) {
     })
     .filter(item => item.note && item.note.trim())
 
+  const enrolledStudies = !loading && auth.authenticated
+    ? getStudies(content).filter(s => (auth.enrolledStudySlugs ?? []).includes(s.slug.toLowerCase()))
+    : []
+
   return (
     <main className="study-section-page" aria-label="My study notes">
       <section className="section-study-classroom">
@@ -2047,6 +2052,22 @@ export function ColossiansStudyNotesPage({ content }: Props) {
           <p className="study-lesson-label">Student Workspace</p>
           <h1>My Lesson Notes</h1>
           {!loading && auth.authenticated && <p className="study-detail-summary">Signed in as {auth.username}</p>}
+          {enrolledStudies.length > 1 && (
+            <div className="study-track-switcher">
+              <p className="study-lesson-label">Switch Track</p>
+              <div className="study-track-switcher-tabs">
+                {enrolledStudies.map(s => (
+                  <Link
+                    key={s.slug}
+                    to={`/study/${s.slug}/notes`}
+                    className={`study-track-tab${s.slug === study.slug ? ' study-track-tab--active' : ''}`}
+                  >
+                    {s.title}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
           {!loading && auth.authenticated && (
             <div className="study-signup-actions" style={{ marginBottom: '1rem' }}>
               <Link to="/study/account" className="btn-secondary">My Account</Link>
@@ -2076,24 +2097,40 @@ export function ColossiansStudyNotesPage({ content }: Props) {
               {study.sections[0] && <Link to={`/study/${study.slug}/${study.sections[0].id}`} className="btn-primary">Open First Lesson</Link>}
             </article>
           )}
-          {!loading && auth.authenticated && enrolled && entries.length > 0 && (
-            <div className="study-module-list">
-              {entries.map(({ sectionId, section, note }) => (
-                <article key={sectionId} className="study-module-row">
-                  <div className="study-module-row-left">
-                    <p className="study-module-lesson">{section ? `Lesson ${getLessonNumber(study.sections, section.id)}` : 'Saved Note'}</p>
-                    <h3>{section?.title ?? sectionId}</h3>
-                    <p>{section ? section.reference : 'Lesson reference unavailable'}</p>
-                  </div>
-                  <div className="study-module-row-right">
-                    <p className="study-module-focus">Your Note</p>
-                    <p className="study-detail-copy study-detail-copy--scripture">{note}</p>
-                    {section && <Link to={`/study/${study.slug}/${section.id}`} className="btn-secondary">Open Lesson</Link>}
-                  </div>
+          {!loading && auth.authenticated && enrolled && entries.length > 0 && (() => {
+            const sorted = [...entries].sort((a, b) => {
+              const aNum = a.section ? getLessonNumber(study.sections, a.section.id) : 0
+              const bNum = b.section ? getLessonNumber(study.sections, b.section.id) : 0
+              return aNum - bNum
+            })
+            const active = sorted.find(item => item.sectionId === activeNoteTab) ?? sorted[0]
+            return (
+              <div className="study-notebook">
+                <div className="study-notebook-tabs" role="tablist" aria-label="Lesson notes">
+                  {sorted.map(({ sectionId, section }) => (
+                    <button
+                      key={sectionId}
+                      type="button"
+                      role="tab"
+                      aria-selected={active.sectionId === sectionId}
+                      className={`study-notebook-tab${active.sectionId === sectionId ? ' study-notebook-tab--active' : ''}`}
+                      onClick={() => setActiveNoteTab(sectionId)}
+                    >
+                      {section ? `Lesson ${getLessonNumber(study.sections, section.id)}` : 'Saved Note'}
+                    </button>
+                  ))}
+                </div>
+                <article className="study-notebook-page">
+                  <p className="study-module-lesson">{active.section ? `Lesson ${getLessonNumber(study.sections, active.section.id)}` : 'Saved Note'}</p>
+                  <h3>{active.section?.title ?? active.sectionId}</h3>
+                  <p className="study-detail-reference">{active.section ? active.section.reference : 'Lesson reference unavailable'}</p>
+                  <p className="study-module-focus">Your Note</p>
+                  <p className="study-detail-copy study-detail-copy--scripture">{active.note}</p>
+                  {active.section && <Link to={`/study/${study.slug}/${active.section.id}`} className="btn-secondary">Open Lesson</Link>}
                 </article>
-              ))}
-            </div>
-          )}
+              </div>
+            )
+          })()}
           {message && <p className="study-note-status">{message}</p>}
         </div>
       </section>