From ae396da72eafaff115692b9e407230fba2982769 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Wed, 3 Jun 2026 15:27:21 -0400
Subject: [PATCH] annoucments

---
 src/AdminPage.tsx       |  2 +-
 src/App.css             | 41 +++++++++++++++++++++++++++++++++++++++++
 src/colossiansStudy.tsx | 24 ++++++++++++++++--------
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx
index d2d32d7..d84b33d 100644
--- a/src/AdminPage.tsx
+++ b/src/AdminPage.tsx
@@ -89,7 +89,7 @@ function SortableLessonSection({ section, study, updateStudySection, removeStudy
             </div>
             <div className="admin-field">
               <label htmlFor={`study-section-commentary-${study.id}-${section.id}`}>Commentary</label>
-              <textarea id={`study-section-commentary-${study.id}-${section.id}`} rows={5} value={section.commentary} placeholder="Add your teaching notes and explanation here." onChange={e => updateStudySection(study.id, section.id, 'commentary', e.target.value)} />
+              <textarea id={`study-section-commentary-${study.id}-${section.id}`} rows={10} value={section.commentary} placeholder="Add your teaching notes and explanation here. Press Enter twice to start a new paragraph." onChange={e => updateStudySection(study.id, section.id, 'commentary', e.target.value)} />
             </div>
             <div className="admin-field">
               <label htmlFor={`study-section-greek-${study.id}-${section.id}`}>Greek Words</label>
diff --git a/src/App.css b/src/App.css
index 1cde95b..dbed398 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1264,6 +1264,47 @@
 
 /* ── Colossians Study ── */
 .study-index-page,
+/* ── Lesson Announcement Banner ── */
+.study-lesson-announcement-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  background: linear-gradient(135deg, #1a1500 0%, #241c00 100%);
+  border-bottom: 2px solid #c9a84c;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.study-lesson-announcement-icon {
+  font-size: 1.4rem;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-top: 0.1rem;
+}
+
+.study-lesson-announcement-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.study-lesson-announcement-label {
+  display: block;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #c9a84c;
+  margin-bottom: 0.3rem;
+  font-weight: 700;
+}
+
+.study-lesson-announcement-text {
+  margin: 0;
+  font-size: 0.95rem;
+  color: #f0e9cc;
+  line-height: 1.6;
+}
+
 .study-section-page {
   background:
     radial-gradient(1200px 500px at 90% -10%, rgba(201, 168, 76, 0.12), transparent 55%),
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 4c1ef40..9d2f37b 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -1639,6 +1639,15 @@ export function ColossiansStudySectionPage({ content }: Props) {
 
   return (
     <main className="study-section-page" aria-label={section.title}>
+      {section.announcement && (
+        <div className="study-lesson-announcement-banner" role="alert">
+          <span className="study-lesson-announcement-icon" aria-hidden="true">📢</span>
+          <div className="study-lesson-announcement-body">
+            <strong className="study-lesson-announcement-label">Announcement</strong>
+            <p className="study-lesson-announcement-text">{section.announcement}</p>
+          </div>
+        </div>
+      )}
       <section className="section-study-classroom" onContextMenu={handleLessonContentContextMenu}>
         <div className="section-inner study-classroom-shell">
           <div className="study-classroom-main">
@@ -1648,13 +1657,6 @@ export function ColossiansStudySectionPage({ content }: Props) {
             <p className="study-detail-reference">{section.reference}</p>
             <p className="study-detail-summary">{section.summary}</p>
 
-            {section.announcement && (
-              <article className="study-class-block" style={{ backgroundColor: '#1c1b17', border: '1px solid #3f3b2f' }}>
-                <h2>Lesson Announcement</h2>
-                <p className="study-detail-copy">{section.announcement}</p>
-              </article>
-            )}
-
             {lessonAudioEmbedUrl && (
               <article className="study-class-block">
                 <h2>Lesson Audio</h2>
@@ -1679,7 +1681,13 @@ export function ColossiansStudySectionPage({ content }: Props) {
 
             <article className="study-class-block">
               <h2>Instructor Commentary</h2>
-              <p className="study-detail-copy">{section.commentary}</p>
+              {section.commentary.split(/\n{2,}/).map((para, i) => (
+                <p key={i} className="study-detail-copy">
+                  {para.split('\n').map((line, j, arr) => (
+                    j < arr.length - 1 ? <>{line}<br /></> : line
+                  ))}
+                </p>
+              ))}
             </article>
 
             <article className="study-class-block">