From 5bc8245ed244e8b553b3b7b680cc67477fb9a28b Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 14:17:47 -0400
Subject: [PATCH 1/6] Add structured show notes form to Episode Highlights;
 v1.2.3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace single showNotes textarea with five guided fields: Episode Summary,
Key Themes, Scripture References, Key Quotes, and Resources & Links. Legacy
showNotes content is preserved as a backward-compatible fallback — it
auto-populates the Summary field in the admin editor and renders on the public
episode detail page until overwritten with structured data.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json      |  2 +-
 src/AdminPage.tsx | 66 ++++++++++++++++++++++++++++++++++++++++++++---
 src/App.tsx       | 44 +++++++++++++++++++++++++++++--
 src/content.ts    |  7 +++++
 4 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 67cea13..15b450b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx
index a6805a1..83cf05b 100644
--- a/src/AdminPage.tsx
+++ b/src/AdminPage.tsx
@@ -1642,7 +1642,11 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
           summary: '',
           url: '',
           embedUrl: '',
-          showNotes: '',
+          showNotesSummary: '',
+          showNotesThemes: [],
+          showNotesScripture: [],
+          showNotesQuotes: [],
+          showNotesResources: [],
           discussionQuestions: [],
         },
       ],
@@ -1656,6 +1660,16 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
     }))
   }
 
+  function updatePodcastLinkStringArray(id: string, field: keyof PodcastFeaturedLink, raw: string) {
+    const items = raw.split('\n').map(s => s.trim()).filter(Boolean)
+    setForm(f => ({
+      ...f,
+      podcastFeaturedLinks: (f.podcastFeaturedLinks ?? []).map(link =>
+        link.id === id ? { ...link, [field]: items } : link
+      ),
+    }))
+  }
+
   function updatePodcastLinkQuestions(id: string, raw: string) {
     const questions = raw.split('\n').map(q => q.trim()).filter(Boolean)
     setForm(f => ({
@@ -3440,8 +3454,54 @@ async function handleAssetUpload(event: ChangeEvent<HTMLInputElement>) {
                         </select>
                       </div>
                       <div className="admin-field">
-                        <label htmlFor={`podcast-notes-${activeHighlight.id}`}>Show Notes</label>
-                        <textarea id={`podcast-notes-${activeHighlight.id}`} rows={4} placeholder="Key points, scripture references, timestamps..." value={activeHighlight.showNotes ?? ''} onChange={e => updatePodcastLink(activeHighlight.id, 'showNotes', e.target.value)} />
+                        <label htmlFor={`podcast-notes-summary-${activeHighlight.id}`}>Episode Summary</label>
+                        <textarea
+                          id={`podcast-notes-summary-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="2–3 sentences summarizing the episode..."
+                          value={activeHighlight.showNotesSummary ?? (activeHighlight.showNotes && !(activeHighlight.showNotesThemes?.length) ? activeHighlight.showNotes : '')}
+                          onChange={e => updatePodcastLink(activeHighlight.id, 'showNotesSummary', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-themes-${activeHighlight.id}`}>Key Themes (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-themes-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Faith and doubt&#10;Prayer in suffering&#10;Community"
+                          value={(activeHighlight.showNotesThemes ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesThemes', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-scripture-${activeHighlight.id}`}>Scripture References (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-scripture-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Romans 8:28&#10;Psalm 23:4"
+                          value={(activeHighlight.showNotesScripture ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesScripture', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-quotes-${activeHighlight.id}`}>Key Quotes (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-quotes-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="God meets us in the middle of our mess."
+                          value={(activeHighlight.showNotesQuotes ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesQuotes', e.target.value)}
+                        />
+                      </div>
+                      <div className="admin-field">
+                        <label htmlFor={`podcast-notes-resources-${activeHighlight.id}`}>Resources &amp; Links (one per line)</label>
+                        <textarea
+                          id={`podcast-notes-resources-${activeHighlight.id}`}
+                          rows={3}
+                          placeholder="Book: The Ruthless Elimination of Hurry by John Mark Comer&#10;https://example.com"
+                          value={(activeHighlight.showNotesResources ?? []).join('\n')}
+                          onChange={e => updatePodcastLinkStringArray(activeHighlight.id, 'showNotesResources', e.target.value)}
+                        />
                       </div>
                       <div className="admin-field">
                         <label htmlFor={`podcast-dq-${activeHighlight.id}`}>Discussion Questions (one per line)</label>
diff --git a/src/App.tsx b/src/App.tsx
index 7c32a91..7904cca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -716,6 +716,11 @@ function PodcastHighlightsSection({ content }: { content: SiteContent }) {
               || isLikelySpotifyEpisodeUrl(link.url)
               || (link.discussionQuestions ?? []).length > 0
               || link.showNotes
+              || link.showNotesSummary
+              || (link.showNotesThemes ?? []).length > 0
+              || (link.showNotesScripture ?? []).length > 0
+              || (link.showNotesQuotes ?? []).length > 0
+              || (link.showNotesResources ?? []).length > 0
             )
             const dest = (!hasRichContent && link.url)
               ? { external: link.url }
@@ -1500,10 +1505,45 @@ function EpisodeDetailPage({ content }: { content: SiteContent }) {
             </a>
           )}
 
-          {episode.showNotes && (
+          {(episode.showNotesSummary || (episode.showNotesThemes ?? []).length > 0 || (episode.showNotesScripture ?? []).length > 0 || (episode.showNotesQuotes ?? []).length > 0 || (episode.showNotesResources ?? []).length > 0 || episode.showNotes) && (
             <div className="episode-detail-show-notes">
               <h2 className="episode-detail-section-heading">Show Notes</h2>
-              <p>{episode.showNotes}</p>
+              {episode.showNotesSummary
+                ? <p>{episode.showNotesSummary}</p>
+                : episode.showNotes && !(episode.showNotesThemes ?? []).length && <p>{episode.showNotes}</p>
+              }
+              {(episode.showNotesThemes ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Key Themes</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesThemes!.map((t, i) => <li key={i}>{t}</li>)}
+                  </ul>
+                </div>
+              )}
+              {(episode.showNotesScripture ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Scripture References</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesScripture!.map((s, i) => <li key={i}>{s}</li>)}
+                  </ul>
+                </div>
+              )}
+              {(episode.showNotesQuotes ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Key Quotes</h3>
+                  {episode.showNotesQuotes!.map((q, i) => (
+                    <blockquote key={i} className="episode-detail-show-notes-quote">{q}</blockquote>
+                  ))}
+                </div>
+              )}
+              {(episode.showNotesResources ?? []).length > 0 && (
+                <div className="episode-detail-show-notes-section">
+                  <h3 className="episode-detail-show-notes-heading">Resources</h3>
+                  <ul className="episode-detail-show-notes-list">
+                    {episode.showNotesResources!.map((r, i) => <li key={i}>{r}</li>)}
+                  </ul>
+                </div>
+              )}
             </div>
           )}
 
diff --git a/src/content.ts b/src/content.ts
index fc6ace5..fc48cd2 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -67,6 +67,13 @@ export interface PodcastFeaturedLink {
   summary: string
   url: string
   embedUrl?: string
+  // Structured show notes fields
+  showNotesSummary?: string
+  showNotesThemes?: string[]
+  showNotesScripture?: string[]
+  showNotesQuotes?: string[]
+  showNotesResources?: string[]
+  // Legacy plain-text field — kept for backward compat with live data
   showNotes?: string
   discussionQuestions?: string[]
 }

From 038ef2b039056c079afb4c3f23288c5d1d8e4bd9 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 15:16:47 -0400
Subject: [PATCH 2/6] Add study account engagement features; v1.2.4

- Pause reminders: remindersPausedUntil field + scheduler skip + account UI with 7/14/30-day presets
- Email digest mode: reminderFrequency field (immediate/weekly) + weekly digest email + scheduler + account UI toggle
- Admin user list improvements: streak, reengagement, frequency, pause, per-study lesson progress
- Admin manual re-engagement: POST endpoint + tier selector button in admin panel
- Study bookmarks: bookmarkedSectionIds in progress file + POST/DELETE endpoints + toggle button in lesson UI
- Study completion certificate email: auto-sent on first certificate issuance
- Content fields for certificate and weekly digest email templates in admin

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json                       |   2 +-
 server.js                          |  11 +-
 server/data.js                     |   7 ++
 server/email.js                    |  77 ++++++++++++
 server/routes/admin-assets.js      |  53 +++++++-
 server/routes/study-account.js     |  24 +++-
 server/routes/study-certificate.js |   5 +
 server/routes/study-data.js        |  42 ++++++-
 server/study-helpers.js            |  81 +++++++++++-
 src/AdminPage.tsx                  |  64 +++++++++-
 src/colossiansStudy.tsx            | 196 ++++++++++++++++++++++++-----
 src/content.ts                     |  16 +++
 12 files changed, 540 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index 15b450b..9dad657 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/server.js b/server.js
index 6536faa..6ac0d88 100644
--- a/server.js
+++ b/server.js
@@ -31,7 +31,7 @@ import {
   refreshContentCaches,
   queueHitStatsWrite,
 } from './server/data.js'
-import { logResendEmailAlignmentWarnings, sendStudyReminderEmail, sendStudyReengagementEmail } from './server/email.js'
+import { logResendEmailAlignmentWarnings, sendStudyReminderEmail, sendStudyReengagementEmail, sendStudyWeeklyDigestEmail } from './server/email.js'
 import {
   detectBot,
   sanitizeUserAgent,
@@ -39,6 +39,7 @@ import {
   recordHit,
   scheduleStudyReminders,
   scheduleReengagementEmails,
+  scheduleWeeklyDigestEmails,
 } from './server/study-helpers.js'
 import { recordVisitor } from './server/routes/analytics.js'
 
@@ -194,6 +195,14 @@ Promise.all([
     }, 60 * 60 * 1000)
     void scheduleReengagementEmails(sendStudyReengagementEmail)
 
+    // Send weekly lesson digest emails every hour (only actually fires every 7 days per user)
+    setInterval(() => {
+      scheduleWeeklyDigestEmails(sendStudyWeeklyDigestEmail).catch(err => {
+        console.error('[study-digest] failed to schedule weekly digest:', err)
+      })
+    }, 60 * 60 * 1000)
+    void scheduleWeeklyDigestEmails(sendStudyWeeklyDigestEmail)
+
     app.listen(PORT, () => {
       logResendEmailAlignmentWarnings()
       console.log(`Siteforge listening on http://localhost:${PORT}`)
diff --git a/server/data.js b/server/data.js
index 40290d1..542f391 100644
--- a/server/data.js
+++ b/server/data.js
@@ -1415,6 +1415,9 @@ export function sanitizeStudyUsers(value) {
       totpEnabledAt: typeof item?.totpEnabledAt === 'string' ? item.totpEnabledAt : null,
       totpRecoveryCodes: Array.isArray(item?.totpRecoveryCodes) ? item.totpRecoveryCodes.filter(h => typeof h === 'string') : [],
       totpSecretPending: typeof item?.totpSecretPending === 'string' ? item.totpSecretPending : undefined,
+      remindersPausedUntil: typeof item?.remindersPausedUntil === 'string' ? item.remindersPausedUntil : null,
+      reminderFrequency: item?.reminderFrequency === 'weekly' ? 'weekly' : 'immediate',
+      weeklyDigestSentAt: typeof item?.weeklyDigestSentAt === 'string' ? item.weeklyDigestSentAt : null,
     })
   }
   return out.slice(0, MAX_STUDY_USERS)
@@ -1459,8 +1462,12 @@ export function sanitizeStudyProgress(value) {
             ])
         )
         : {}
+      const bookmarkedSectionIds = Array.isArray(studyData?.bookmarkedSectionIds)
+        ? Array.from(new Set(studyData.bookmarkedSectionIds.filter(id => typeof id === 'string' && id.trim()).map(id => id.trim())))
+        : []
       progress.byStudy[studySlug.trim().toLowerCase()] = {
         completedSectionIds: Array.from(new Set(completedSectionIds)),
+        bookmarkedSectionIds,
         quizAnswers,
       }
     }
diff --git a/server/email.js b/server/email.js
index 471756c..3b482bf 100644
--- a/server/email.js
+++ b/server/email.js
@@ -635,3 +635,80 @@ export async function sendStudyReengagementEmail(email, displayName, studyTitle,
     console.error('[study-reengagement] send exception:', err)
   }
 }
+
+export async function sendStudyCertificateEmail(email, displayName, studyTitle, certUrl) {
+  if (!process.env.RESEND_API_KEY) return
+  try {
+    const resend = new Resend(process.env.RESEND_API_KEY)
+    const cfg = state.cachedSiteContent ?? {}
+    const namePart = typeof displayName === 'string' && displayName.trim() ? displayName.trim() : 'friend'
+    const subject = cfg.studyCertificateEmailSubject?.trim() || 'Your certificate is ready'
+    const bodyText = cfg.studyCertificateEmailBody?.trim() || 'Congratulations — you have completed every lesson in this study. Your certificate is ready to view and share.'
+    const ctaLabel = cfg.studyCertificateEmailCtaLabel?.trim() || 'View Certificate'
+    const signoff = cfg.studyCertificateEmailSignoff?.trim() || 'Grace and peace,\nVerse by Verse with Nate'
+    const bodyHtml = (
+      `<p style="margin:0 0 16px;">Congratulations, <strong style="color:#f0ead8;">${escapeHtml(namePart)}</strong>!</p>` +
+      `<p style="margin:0 0 16px;">${escapeHtml(bodyText)}</p>` +
+      `<p style="margin:0 0 16px;color:#c9a84c;font-weight:700;">${escapeHtml(studyTitle)}</p>`
+    )
+    const footerHtml = `<p style="margin:0;font-family:Georgia,serif;font-size:12px;font-weight:300;color:#7a7060;line-height:1.6;">${escapeHtml(signoff).replace(/\n/g, '<br/>')}</p>`
+    const { error } = await resend.emails.send({
+      from: process.env.RESEND_FROM ?? DEFAULT_RESEND_FROM,
+      to: [email],
+      subject,
+      text: `Congratulations, ${namePart}!\n\n${bodyText}\n\n${studyTitle}\n\nView your certificate: ${certUrl}\n\n${signoff}`,
+      html: buildBrandedEmailHtml({
+        title: 'Study Complete',
+        eyebrow: 'Certificate of Completion',
+        bodyHtml,
+        ctaLabel,
+        ctaUrl: certUrl,
+        footerHtml,
+      }),
+    })
+    if (error) console.error('[study-certificate] email send error:', error)
+  } catch (err) {
+    console.error('[study-certificate] email exception:', err)
+  }
+}
+
+export async function sendStudyWeeklyDigestEmail(email, displayName, lessons, unsubUrl) {
+  if (!process.env.RESEND_API_KEY) return
+  try {
+    const resend = new Resend(process.env.RESEND_API_KEY)
+    const cfg = state.cachedSiteContent ?? {}
+    const namePart = typeof displayName === 'string' && displayName.trim() ? displayName.trim() : 'friend'
+    const subject = cfg.studyWeeklyDigestEmailSubject?.trim() || 'Your weekly study digest'
+    const introText = cfg.studyWeeklyDigestEmailBody?.trim() || 'Here are the lessons released this week in your study track. Open any to continue where you left off.'
+    const signoff = cfg.studyWeeklyDigestEmailSignoff?.trim() || 'Grace and peace,\nVerse by Verse with Nate'
+    const lessonListHtml = lessons.map(l =>
+      `<p style="margin:0 0 12px;"><a href="${escapeHtml(l.sectionUrl)}" style="color:#c9a84c;text-decoration:none;font-weight:700;">${escapeHtml(l.sectionTitle)}</a>` +
+      (l.sectionReference ? ` <span style="color:#7a7060;">(${escapeHtml(l.sectionReference)})</span>` : '') +
+      (l.studyTitle ? ` <span style="color:#7a7060;font-size:0.9em;">— ${escapeHtml(l.studyTitle)}</span>` : '') +
+      `</p>`
+    ).join('')
+    const lessonListText = lessons.map(l => `• ${l.sectionTitle}${l.sectionReference ? ` (${l.sectionReference})` : ''}: ${l.sectionUrl}`).join('\n')
+    const bodyHtml = (
+      `<p style="margin:0 0 16px;">Hi <strong style="color:#f0ead8;">${escapeHtml(namePart)}</strong>,</p>` +
+      `<p style="margin:0 0 20px;">${escapeHtml(introText)}</p>` +
+      `<div style="border-left:2px solid #2a2518;padding-left:16px;">${lessonListHtml}</div>`
+    )
+    const unsubLine = unsubUrl ? `<p style="margin:16px 0 0;font-size:11px;color:#7a7060;">Not interested? <a href="${escapeHtml(unsubUrl)}" style="color:#7a7060;">Unsubscribe from these reminders.</a></p>` : ''
+    const footerHtml = `<p style="margin:0;font-family:Georgia,serif;font-size:12px;font-weight:300;color:#7a7060;line-height:1.6;">${escapeHtml(signoff).replace(/\n/g, '<br/>')}</p>${unsubLine}`
+    const { error } = await resend.emails.send({
+      from: process.env.RESEND_FROM ?? DEFAULT_RESEND_FROM,
+      to: [email],
+      subject,
+      text: `Hi ${namePart},\n\n${introText}\n\n${lessonListText}\n\n${signoff}${unsubUrl ? `\n\nUnsubscribe: ${unsubUrl}` : ''}`,
+      html: buildBrandedEmailHtml({
+        title: 'Weekly Study Digest',
+        eyebrow: 'Study Reminder',
+        bodyHtml,
+        footerHtml,
+      }),
+    })
+    if (error) console.error('[study-digest] send error:', error)
+  } catch (err) {
+    console.error('[study-digest] send exception:', err)
+  }
+}
diff --git a/server/routes/admin-assets.js b/server/routes/admin-assets.js
index 0a48bca..80574e4 100644
--- a/server/routes/admin-assets.js
+++ b/server/routes/admin-assets.js
@@ -9,6 +9,7 @@ import {
   readUploadsMetadata,
   writeUploadsMetadata,
   getUserNotesFilePath,
+  loadUserProgress,
   queueStudyUsersWrite,
 } from '../data.js'
 import {
@@ -16,7 +17,9 @@ import {
   getStudyCatalog,
   normalizeStudySlug,
   isEnrollableStudySlug,
+  makeUnsubUrl,
 } from '../study-helpers.js'
+import { sendStudyReengagementEmail } from '../email.js'
 
 export function register(app) {
   app.get('/api/admin-assets', requireAdminAuth, async (_req, res) => {
@@ -117,9 +120,19 @@ export function register(app) {
         noteCount = Object.values(notes).filter(n => typeof n === 'string' && n.trim()).length
       } catch { /* ignore */ }
 
+      let progressByStudy = {}
+      try {
+        const prog = await loadUserProgress(user.id)
+        for (const [slug, data] of Object.entries(prog.byStudy)) {
+          progressByStudy[slug] = { completedLessons: (data.completedSectionIds ?? []).length }
+        }
+      } catch { /* ignore */ }
+
       const enrolledStudies = (user.enrolledStudySlugs ?? []).map(slug => {
         const study = catalog.find(s => s.slug === slug)
-        return study ? { slug, title: study.title } : { slug, title: slug }
+        return study
+          ? { slug, title: study.title, completedLessons: progressByStudy[slug]?.completedLessons ?? 0 }
+          : { slug, title: slug, completedLessons: 0 }
       })
 
       return {
@@ -132,12 +145,50 @@ export function register(app) {
         noteCount,
         subscribeNewsletter: user.subscribeNewsletter !== false,
         studyRemindersEnabled: user.studyRemindersEnabled === true,
+        reminderFrequency: user.reminderFrequency ?? 'immediate',
+        remindersPausedUntil: user.remindersPausedUntil ?? null,
+        currentStreak: user.currentStreak ?? 0,
+        longestStreak: user.longestStreak ?? 0,
+        reengagementSentAt: user.reengagementSentAt ?? {},
       }
     }))
 
     res.json({ users })
   })
 
+  app.post('/api/admin/study-users/:id/send-reengagement', requireAdminAuth, async (req, res) => {
+    const user = state.studyUsers.find(u => u.id === req.params.id)
+    if (!user) { res.status(404).json({ message: 'User not found.' }); return }
+
+    const tier = req.body?.tier
+    if (tier !== 't1' && tier !== 't2' && tier !== 't3') {
+      res.status(400).json({ message: 'tier must be t1, t2, or t3.' }); return
+    }
+
+    const studies = Array.isArray(state.cachedSiteContent?.studies) ? state.cachedSiteContent.studies : []
+    const enrolledStudySlugs = Array.isArray(user.enrolledStudySlugs) ? user.enrolledStudySlugs : []
+    const enrolledStudies = enrolledStudySlugs
+      .map(slug => studies.find(s => normalizeStudySlug(s?.slug) === slug))
+      .filter(Boolean)
+
+    if (enrolledStudies.length === 0) { res.status(400).json({ message: 'User has no enrolled studies.' }); return }
+
+    const firstStudy = enrolledStudies[0]
+    const studyTitle = enrolledStudies.length === 1 ? firstStudy.title : null
+    const canonical = state.cachedSiteContent?.seo?.canonicalUrl || 'https://versebyversewithnate.us/'
+    const base = canonical.endsWith('/') ? canonical.slice(0, -1) : canonical
+    const studyUrl = enrolledStudies.length === 1 ? `${base}/study/${firstStudy.slug}` : `${base}/study`
+    const unsubUrl = makeUnsubUrl(user.id)
+
+    try {
+      await sendStudyReengagementEmail(user.username, user.displayName || user.username, studyTitle, studyUrl, tier, unsubUrl)
+      res.json({ ok: true })
+    } catch (err) {
+      console.error(`[admin] manual reengagement send failed for ${user.username}:`, err)
+      res.status(500).json({ message: 'Failed to send email.' })
+    }
+  })
+
   app.patch('/api/admin/study-users/:id', requireAdminAuth, (req, res) => {
     const user = state.studyUsers.find(u => u.id === req.params.id)
     if (!user) { res.status(404).json({ message: 'User not found.' }); return }
diff --git a/server/routes/study-account.js b/server/routes/study-account.js
index d90d553..8dedda8 100644
--- a/server/routes/study-account.js
+++ b/server/routes/study-account.js
@@ -218,6 +218,8 @@ export function register(app) {
         displayName: user.displayName ?? '',
         subscribeNewsletter: user.subscribeNewsletter !== false,
         studyRemindersEnabled: user.studyRemindersEnabled === true,
+        reminderFrequency: user.reminderFrequency ?? 'immediate',
+        remindersPausedUntil: user.remindersPausedUntil ?? null,
         avatarUrl: getStudyAvatarUrl(user),
       },
       stats: {
@@ -303,6 +305,20 @@ export function register(app) {
     const studyRemindersEnabled = req.body?.studyRemindersEnabled === true
     user.subscribeNewsletter = subscribeNewsletter
     user.studyRemindersEnabled = studyRemindersEnabled
+
+    const reminderFrequency = req.body?.reminderFrequency
+    if (reminderFrequency === 'weekly' || reminderFrequency === 'immediate') {
+      user.reminderFrequency = reminderFrequency
+    }
+
+    const rawPaused = req.body?.remindersPausedUntil
+    if (rawPaused === null || rawPaused === '') {
+      user.remindersPausedUntil = null
+    } else if (typeof rawPaused === 'string') {
+      const parsed = new Date(rawPaused)
+      user.remindersPausedUntil = !isNaN(parsed.getTime()) && parsed.getTime() > Date.now() ? parsed.toISOString() : null
+    }
+
     user.updatedAt = new Date().toISOString()
     queueStudyUsersWrite()
 
@@ -310,7 +326,13 @@ export function register(app) {
       syncContactToResend(user.displayName || user.username, user.username).catch(err => console.error('[study-account] resend sync error:', err))
     }
 
-    res.json({ ok: true, subscribeNewsletter: user.subscribeNewsletter, studyRemindersEnabled: user.studyRemindersEnabled === true })
+    res.json({
+      ok: true,
+      subscribeNewsletter: user.subscribeNewsletter,
+      studyRemindersEnabled: user.studyRemindersEnabled === true,
+      reminderFrequency: user.reminderFrequency ?? 'immediate',
+      remindersPausedUntil: user.remindersPausedUntil ?? null,
+    })
   })
 
   app.post('/api/study-account/request-email-change', studyAuthRateLimiter, requireStudyAuth, async (req, res) => {
diff --git a/server/routes/study-certificate.js b/server/routes/study-certificate.js
index 224512b..ceea801 100644
--- a/server/routes/study-certificate.js
+++ b/server/routes/study-certificate.js
@@ -4,6 +4,8 @@ import { requireAdminAuth } from '../auth.js'
 import { requireStudyAuth, normalizeStudySlug, isStudyUserEnrolled, getStudyTitleBySlug } from '../study-helpers.js'
 import { state } from '../state.js'
 import { loadUserProgress, queueStudyCertificatesWrite } from '../data.js'
+import { sendStudyCertificateEmail, getCanonicalBaseUrl } from '../email.js'
+import { buildAbsoluteUrl } from '../helpers.js'
 
 const publicCertRateLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
@@ -95,6 +97,9 @@ export function register(app) {
       }
       state.studyCertificates.push(cert)
       queueStudyCertificatesWrite()
+      const certUrl = buildAbsoluteUrl(getCanonicalBaseUrl(), `/study/certificate/${cert.token}`)
+      sendStudyCertificateEmail(user.username, user.displayName || user.username, cert.studyTitle, certUrl)
+        .catch(err => console.error('[study-certificate] email exception:', err))
     }
 
     res.json({ ok: true, token: cert.token, issuedAt: cert.issuedAt })
diff --git a/server/routes/study-data.js b/server/routes/study-data.js
index 289926c..b76ad75 100644
--- a/server/routes/study-data.js
+++ b/server/routes/study-data.js
@@ -171,6 +171,7 @@ export function register(app) {
 
     const progress = await loadUserProgress(user.id)
     const completedSectionIds = progress.byStudy[studySlug]?.completedSectionIds ?? []
+    const bookmarkedSectionIds = progress.byStudy[studySlug]?.bookmarkedSectionIds ?? []
 
     // Record first visit timestamp on the user record (additive, never overwrite)
     if (!user.firstVisitAt) {
@@ -178,7 +179,7 @@ export function register(app) {
       queueStudyUsersWrite()
     }
 
-    res.json({ studySlug, completedSectionIds })
+    res.json({ studySlug, completedSectionIds, bookmarkedSectionIds })
   })
 
   app.post('/api/study-progress/:studySlug/:sectionId', requireStudyAuth, async (req, res) => {
@@ -301,6 +302,45 @@ export function register(app) {
     res.json({ ok: true, studySlug, sectionId, answers })
   })
 
+  // ── Bookmarks ─────────────────────────────────────────────────────────────
+
+  app.post('/api/study-progress/:studySlug/:sectionId/bookmark', requireStudyAuth, async (req, res) => {
+    const user = req.studyUser
+    const studySlug = normalizeStudySlug(req.params.studySlug)
+    const sectionId = normalizeLessonSectionId(req.params.sectionId)
+    if (!studySlug || !sectionId) { res.status(400).json({ message: 'Invalid study slug or section id.' }); return }
+    if (!isStudyUserEnrolled(user, studySlug)) { res.status(403).json({ message: 'Please enroll in this study to bookmark lessons.' }); return }
+
+    const progress = await loadUserProgress(user.id)
+    const studyProgress = progress.byStudy[studySlug] ?? { completedSectionIds: [], bookmarkedSectionIds: [] }
+    const bookmarkedSectionIds = Array.isArray(studyProgress.bookmarkedSectionIds) ? studyProgress.bookmarkedSectionIds : []
+    if (!bookmarkedSectionIds.includes(sectionId)) {
+      studyProgress.bookmarkedSectionIds = [...bookmarkedSectionIds, sectionId]
+    }
+    progress.byStudy[studySlug] = studyProgress
+    progress.updatedAt = new Date().toISOString()
+    state.studyProgressCache.set(user.id, progress)
+    queueUserProgressWrite(user.id)
+    res.json({ ok: true, studySlug, bookmarkedSectionIds: studyProgress.bookmarkedSectionIds })
+  })
+
+  app.delete('/api/study-progress/:studySlug/:sectionId/bookmark', requireStudyAuth, async (req, res) => {
+    const user = req.studyUser
+    const studySlug = normalizeStudySlug(req.params.studySlug)
+    const sectionId = normalizeLessonSectionId(req.params.sectionId)
+    if (!studySlug || !sectionId) { res.status(400).json({ message: 'Invalid study slug or section id.' }); return }
+    if (!isStudyUserEnrolled(user, studySlug)) { res.status(403).json({ message: 'Not enrolled.' }); return }
+
+    const progress = await loadUserProgress(user.id)
+    const studyProgress = progress.byStudy[studySlug] ?? { completedSectionIds: [], bookmarkedSectionIds: [] }
+    studyProgress.bookmarkedSectionIds = (studyProgress.bookmarkedSectionIds ?? []).filter(id => id !== sectionId)
+    progress.byStudy[studySlug] = studyProgress
+    progress.updatedAt = new Date().toISOString()
+    state.studyProgressCache.set(user.id, progress)
+    queueUserProgressWrite(user.id)
+    res.json({ ok: true, studySlug, bookmarkedSectionIds: studyProgress.bookmarkedSectionIds })
+  })
+
   // ── Community ─────────────────────────────────────────────────────────────
 
   app.get('/api/study-community', requireStudyAuth, async (req, res) => {
diff --git a/server/study-helpers.js b/server/study-helpers.js
index 92dfba1..c223cfc 100644
--- a/server/study-helpers.js
+++ b/server/study-helpers.js
@@ -622,6 +622,9 @@ export async function scheduleStudyReminders(sendStudyReminderEmail) {
 
   for (const user of state.studyUsers) {
     if (user.studyRemindersEnabled !== true) continue
+    if (user.reminderFrequency === 'weekly') continue
+    const pausedUntil = user.remindersPausedUntil ? new Date(user.remindersPausedUntil) : null
+    if (pausedUntil && !isNaN(pausedUntil.getTime()) && pausedUntil > now) continue
     const email = user.username
     const displayName = user.displayName || email
     const enrolledStudySlugs = Array.isArray(user.enrolledStudySlugs) ? user.enrolledStudySlugs : []
@@ -677,7 +680,7 @@ function getReengagementTiers() {
   return days.slice(0, 3).map((d, i) => ({ key: `t${i + 1}`, days: d }))
 }
 
-function makeUnsubUrl(userId) {
+export function makeUnsubUrl(userId) {
   const secret = process.env.RESEND_WEBHOOK_TOKEN ?? 'siteforge'
   const token = createHmac('sha256', secret).update(userId).digest('hex')
   const canonical = state.cachedSiteContent?.seo?.canonicalUrl || 'https://versebyversewithnate.us/'
@@ -694,6 +697,8 @@ export async function scheduleReengagementEmails(sendStudyReengagementEmail) {
   for (const user of state.studyUsers) {
     if (user.studyRemindersEnabled !== true) continue
     if (!user.lastLoginAt) continue
+    const pausedUntil = user.remindersPausedUntil ? new Date(user.remindersPausedUntil) : null
+    if (pausedUntil && !isNaN(pausedUntil.getTime()) && pausedUntil > now) continue
     const lastLogin = new Date(user.lastLoginAt)
     if (isNaN(lastLogin.getTime())) continue
     const daysSinceLogin = (nowMs - lastLogin.getTime()) / (1000 * 60 * 60 * 24)
@@ -733,3 +738,77 @@ export async function scheduleReengagementEmails(sendStudyReengagementEmail) {
     }
   }
 }
+
+// ── Weekly digest scheduler ───────────────────────────────────────────────
+
+export async function scheduleWeeklyDigestEmails(sendStudyWeeklyDigestEmail) {
+  if (!state.cachedSiteContent) return
+  const now = new Date()
+  const nowMs = now.getTime()
+  const ONE_WEEK_MS = 7 * 24 * 60 * 60 * 1000
+
+  for (const user of state.studyUsers) {
+    if (user.reminderFrequency !== 'weekly') continue
+    if (user.studyRemindersEnabled !== true) continue
+
+    const pausedUntil = user.remindersPausedUntil ? new Date(user.remindersPausedUntil) : null
+    if (pausedUntil && !isNaN(pausedUntil.getTime()) && pausedUntil > now) continue
+
+    const lastDigestMs = user.weeklyDigestSentAt ? new Date(user.weeklyDigestSentAt).getTime() : 0
+    if (nowMs - lastDigestMs < ONE_WEEK_MS) continue
+
+    const enrolledStudySlugs = Array.isArray(user.enrolledStudySlugs) ? user.enrolledStudySlugs : []
+    if (enrolledStudySlugs.length === 0) continue
+
+    const userSent = state.studyReminders.users[user.id] ?? {}
+    const lessons = []
+    const newlySentByStudy = {}
+
+    for (const studySlug of enrolledStudySlugs) {
+      const study = Array.isArray(state.cachedSiteContent.studies)
+        ? state.cachedSiteContent.studies.find(item => normalizeStudySlug(item?.slug) === studySlug)
+        : undefined
+      if (!study) continue
+
+      for (const section of study.sections ?? []) {
+        const releaseTime = getSectionReleaseTime(section)
+        if (!Number.isFinite(releaseTime) || releaseTime > nowMs) continue
+        const sentForStudy = Array.isArray(userSent[studySlug]) ? userSent[studySlug] : []
+        if (sentForStudy.includes(section.id)) continue
+
+        const canonical = state.cachedSiteContent?.seo?.canonicalUrl || 'https://versebyversewithnate.us/'
+        const base = canonical.endsWith('/') ? canonical.slice(0, -1) : canonical
+        lessons.push({
+          sectionId: section.id,
+          studySlug,
+          sectionTitle: section.title ?? section.id,
+          sectionReference: section.reference ?? '',
+          studyTitle: study.title ?? studySlug,
+          sectionUrl: `${base}/study/${study.slug}/${section.id}`,
+        })
+        if (!newlySentByStudy[studySlug]) newlySentByStudy[studySlug] = []
+        newlySentByStudy[studySlug].push(section.id)
+      }
+    }
+
+    if (lessons.length === 0) continue
+
+    const unsubUrl = makeUnsubUrl(user.id)
+    try {
+      await sendStudyWeeklyDigestEmail(user.username, user.displayName || user.username, lessons, unsubUrl)
+    } catch (err) {
+      console.error(`[study-digest] failed to send digest to ${user.username}:`, err)
+      continue
+    }
+
+    for (const [studySlug, sectionIds] of Object.entries(newlySentByStudy)) {
+      const sentForStudy = Array.isArray(userSent[studySlug]) ? userSent[studySlug] : []
+      userSent[studySlug] = [...new Set([...sentForStudy, ...sectionIds])]
+    }
+    state.studyReminders.users[user.id] = userSent
+    queueStudyRemindersWrite()
+
+    user.weeklyDigestSentAt = now.toISOString()
+    queueStudyUsersWrite()
+  }
+}
diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx
index 83cf05b..4ba71fe 100644
--- a/src/AdminPage.tsx
+++ b/src/AdminPage.tsx
@@ -78,6 +78,9 @@ interface StudyUserRecord {
   noteCount: number
   subscribeNewsletter: boolean
   studyRemindersEnabled: boolean
+  reminderFrequency: 'immediate' | 'weekly'
+  remindersPausedUntil: string | null
+  reengagementSentAt: Record<string, string>
 }
 
 function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
@@ -89,6 +92,7 @@ function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
   const [newPassword, setNewPassword] = useState<Record<string, string>>({})
   const [msg, setMsg] = useState<Record<string, string>>({})
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
+  const [reengagementTier, setReengagementTier] = useState<Record<string, string>>({})
 
   function flashMsg(id: string, text: string) {
     setMsg(prev => ({ ...prev, [id]: text }))
@@ -154,6 +158,20 @@ function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
     } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
   }
 
+  async function handleSendReengagement(user: StudyUserRecord) {
+    const tier = reengagementTier[user.id] ?? 't1'
+    try {
+      const res = await fetch(`/api/admin/study-users/${user.id}/send-reengagement`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ tier }),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.message ?? 'Error')
+      flashMsg(user.id, `Tier ${tier.slice(1)} re-engagement email sent.`)
+    } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
+  }
+
   async function handleDelete(id: string) {
     try {
       await fetch(`/api/admin/study-users/${id}`, { method: 'DELETE' })
@@ -222,7 +240,13 @@ function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
                     <span>Last studied: {user.lastStudiedDate ?? '—'}</span>
                     <span>Streak: {user.currentStreak ?? 0} 🔥 (best: {user.longestStreak ?? 0})</span>
                     <span>Newsletter: {user.subscribeNewsletter ? 'Yes' : 'No'}</span>
-                    <span>Reminders: {user.studyRemindersEnabled ? 'On' : 'Off'}</span>
+                    <span>Reminders: {user.studyRemindersEnabled ? 'On' : 'Off'} · {user.reminderFrequency === 'weekly' ? 'Weekly digest' : 'Per-lesson'}</span>
+                    {user.remindersPausedUntil && new Date(user.remindersPausedUntil) > new Date() && (
+                      <span style={{ color: '#c9a84c' }}>Paused until {new Date(user.remindersPausedUntil).toLocaleDateString()}</span>
+                    )}
+                    {user.reengagementSentAt && Object.keys(user.reengagementSentAt).length > 0 && (
+                      <span>Re-engagement sent: {Object.keys(user.reengagementSentAt).sort().join(', ')}</span>
+                    )}
                   </div>
 
                   {/* Display Name */}
@@ -292,6 +316,25 @@ function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
                     )}
                   </div>
 
+                  {/* Re-engagement */}
+                  {user.enrolledStudies.length > 0 && (
+                    <div className="admin-study-user-section">
+                      <h4>Send Re-engagement Email</h4>
+                      <div className="admin-study-user-row">
+                        <select
+                          value={reengagementTier[user.id] ?? 't1'}
+                          onChange={e => setReengagementTier(prev => ({ ...prev, [user.id]: e.target.value }))}
+                        >
+                          <option value="t1">Tier 1 (gentle nudge)</option>
+                          <option value="t2">Tier 2 (momentum)</option>
+                          <option value="t3">Tier 3 (still here)</option>
+                        </select>
+                        <button type="button" className="btn-admin-save" onClick={() => handleSendReengagement(user)}>Send</button>
+                      </div>
+                      <p className="admin-stats-note" style={{ marginTop: '0.25rem' }}>Sends the selected tier email immediately, regardless of inactivity threshold.</p>
+                    </div>
+                  )}
+
                   {msg[user.id] && <p className="admin-study-user-msg">{msg[user.id]}</p>}
 
                   {/* Delete */}
@@ -419,6 +462,18 @@ function EmailTemplatesPanel({
         fieldKeys={['studyReengagementDays','studyReengagementT1Subject','studyReengagementT1Body','studyReengagementT1Cta','studyReengagementT2Subject','studyReengagementT2Body','studyReengagementT2Cta','studyReengagementT3Subject','studyReengagementT3Body','studyReengagementT3Cta']}
         openKey="study-reengagement" />
 
+      <EmailTemplateCard type="study" icon="🏅" title="Study Account — Completion Certificate"
+        trigger="A student earns their certificate by completing all lessons in a study"
+        autoVars="Student's name, study title, and a link to the public certificate are auto-inserted"
+        fieldKeys={['studyCertificateEmailSubject','studyCertificateEmailBody','studyCertificateEmailCtaLabel','studyCertificateEmailSignoff']}
+        openKey="study-certificate" />
+
+      <EmailTemplateCard type="study" icon="📅" title="Study Account — Weekly Lesson Digest"
+        trigger="Students who choose 'Weekly Digest' mode receive one summary email per week listing all newly released lessons"
+        autoVars="Student's name, lesson list (title, scripture reference, link), and a one-click unsubscribe link"
+        fieldKeys={['studyWeeklyDigestEmailSubject','studyWeeklyDigestEmailBody','studyWeeklyDigestEmailSignoff']}
+        openKey="study-weekly-digest" />
+
       <EmailTemplateCard type="transactional" icon="🔐" title="Account Security — Email Change Confirmation"
         trigger="A student requests to change their account email address"
         autoVars="Button links to a one-time verification URL (auto-generated per request, not editable)"
@@ -927,6 +982,13 @@ const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; sect
   { key: 'studyReengagementT3Subject', label: 'Tier 3 — Subject Line', section: 'email-templates' },
   { key: 'studyReengagementT3Body', label: 'Tier 3 — Body', multiline: true, section: 'email-templates' },
   { key: 'studyReengagementT3Cta', label: 'Tier 3 — Button Label', section: 'email-templates' },
+  { key: 'studyCertificateEmailSubject', label: 'Subject Line', section: 'email-templates' },
+  { key: 'studyCertificateEmailBody', label: 'Body Paragraph', multiline: true, section: 'email-templates' },
+  { key: 'studyCertificateEmailCtaLabel', label: 'Button Label', section: 'email-templates' },
+  { key: 'studyCertificateEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
+  { key: 'studyWeeklyDigestEmailSubject', label: 'Subject Line', section: 'email-templates' },
+  { key: 'studyWeeklyDigestEmailBody', label: 'Intro Paragraph', multiline: true, section: 'email-templates' },
+  { key: 'studyWeeklyDigestEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
   { key: 'emailChangeSubject', label: 'Subject Line', section: 'email-templates' },
   { key: 'emailChangeBody', label: 'Body Text', multiline: true, section: 'email-templates' },
   { key: 'emailChangeCtaLabel', label: 'Button Label', section: 'email-templates' },
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 31e5cb7..982f7e2 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -44,6 +44,8 @@ type StudyAccountOverview = {
     displayName: string
     subscribeNewsletter: boolean
     studyRemindersEnabled: boolean
+    reminderFrequency?: string
+    remindersPausedUntil?: string | null
     avatarUrl?: string
   }
   stats: {
@@ -69,6 +71,7 @@ type StudyNotesMap = Record<string, string>
 
 type StudyProgress = {
   completedSectionIds: string[]
+  bookmarkedSectionIds: string[]
 }
 
 type StudyCommunityReply = {
@@ -1256,7 +1259,7 @@ export function ColossiansStudyIndexPage({ content }: Props) {
   const [auth, setAuth] = useState<StudyAuthState>({ checked: false, authenticated: false, username: '', enrolledStudySlugs: [] })
   const [enrolling, setEnrolling] = useState(false)
   const [enrollMessage, setEnrollMessage] = useState('')
-  const [studyProgress, setStudyProgress] = useState<StudyProgress>({ completedSectionIds: [] })
+  const [studyProgress, setStudyProgress] = useState<StudyProgress>({ completedSectionIds: [], bookmarkedSectionIds: [] })
   const [progressLoading, setProgressLoading] = useState(false)
 
   useEffect(() => {
@@ -1305,14 +1308,14 @@ export function ColossiansStudyIndexPage({ content }: Props) {
     let cancelled = false
     setProgressLoading(true)
 
-    readJson<{ studySlug: string; completedSectionIds: string[] }>(`/api/study-progress/${encodeURIComponent(study.slug)}`)
+    readJson<{ studySlug: string; completedSectionIds: string[]; bookmarkedSectionIds: string[] }>(`/api/study-progress/${encodeURIComponent(study.slug)}`)
       .then(data => {
         if (cancelled) return
-        setStudyProgress({ completedSectionIds: Array.isArray(data.completedSectionIds) ? data.completedSectionIds : [] })
+        setStudyProgress({ completedSectionIds: Array.isArray(data.completedSectionIds) ? data.completedSectionIds : [], bookmarkedSectionIds: Array.isArray(data.bookmarkedSectionIds) ? data.bookmarkedSectionIds : [] })
       })
       .catch(() => {
         if (cancelled) return
-        setStudyProgress({ completedSectionIds: [] })
+        setStudyProgress({ completedSectionIds: [], bookmarkedSectionIds: [] })
       })
       .finally(() => {
         if (cancelled) return
@@ -1499,6 +1502,8 @@ export function ColossiansStudySectionPage({ content }: Props) {
   const noteMapDirtyRef = useRef(false)
   const [contextNoteMenu, setContextNoteMenu] = useState<{ x: number; y: number; text: string; anchor: NoteAnchorId } | null>(null)
   const [completedSectionIds, setCompletedSectionIds] = useState<string[]>([])
+  const [bookmarkedSectionIds, setBookmarkedSectionIds] = useState<string[]>([])
+  const [bookmarkSaving, setBookmarkSaving] = useState(false)
   const [progressSaving, setProgressSaving] = useState(false)
   const [progressMessage, setProgressMessage] = useState('')
   const [checkpointAnswers, setCheckpointAnswers] = useState<Record<number, string>>({})
@@ -1568,14 +1573,16 @@ export function ColossiansStudySectionPage({ content }: Props) {
     let cancelled = false
     setProgressMessage('')
 
-    readJson<{ studySlug: string; completedSectionIds: string[] }>(`/api/study-progress/${encodeURIComponent(currentStudySlug)}`)
+    readJson<{ studySlug: string; completedSectionIds: string[]; bookmarkedSectionIds: string[] }>(`/api/study-progress/${encodeURIComponent(currentStudySlug)}`)
       .then(data => {
         if (cancelled) return
         setCompletedSectionIds(Array.isArray(data.completedSectionIds) ? data.completedSectionIds : [])
+        setBookmarkedSectionIds(Array.isArray(data.bookmarkedSectionIds) ? data.bookmarkedSectionIds : [])
       })
       .catch(() => {
         if (cancelled) return
         setCompletedSectionIds([])
+        setBookmarkedSectionIds([])
       })
       .finally(() => {
         if (cancelled) return
@@ -2017,30 +2024,56 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   <h2 style={{ margin: 0 }}>Lesson Progress</h2>
                   <p style={{ margin: '0.25rem 0 0', fontSize: '0.85rem', color: '#5a5440' }}>No checkpoint questions for this lesson.</p>
                 </div>
-                <button
-                  type="button"
-                  className={lessonCompleted ? 'btn-secondary' : 'btn-primary'}
-                  style={lessonCompleted ? { borderColor: '#2196f3', color: '#2196f3' } : {}}
-                  disabled={progressSaving}
-                  onClick={async () => {
-                    if (!study || !section?.id) return
-                    setProgressSaving(true)
-                    const wasComplete = lessonCompleted
-                    try {
-                      const method = wasComplete ? 'DELETE' : 'POST'
-                      const data = await readJson<{ ok: boolean; completedSectionIds: string[] }>(
-                        `/api/study-progress/${encodeURIComponent(study.slug)}/${encodeURIComponent(section.id)}`,
-                        { method }
-                      )
-                      const newIds = Array.isArray(data.completedSectionIds) ? data.completedSectionIds : []
-                      setCompletedSectionIds(newIds)
-                      if (!wasComplete) checkAndShowCelebration(newIds, false)
-                    } catch { /* ignore */ }
-                    finally { setProgressSaving(false) }
-                  }}
-                >
-                  {progressSaving ? '…' : lessonCompleted ? '✓ Completed' : 'Mark as Completed'}
-                </button>
+                <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                  <button
+                    type="button"
+                    className={lessonCompleted ? 'btn-secondary' : 'btn-primary'}
+                    style={lessonCompleted ? { borderColor: '#2196f3', color: '#2196f3' } : {}}
+                    disabled={progressSaving}
+                    onClick={async () => {
+                      if (!study || !section?.id) return
+                      setProgressSaving(true)
+                      const wasComplete = lessonCompleted
+                      try {
+                        const method = wasComplete ? 'DELETE' : 'POST'
+                        const data = await readJson<{ ok: boolean; completedSectionIds: string[] }>(
+                          `/api/study-progress/${encodeURIComponent(study.slug)}/${encodeURIComponent(section.id)}`,
+                          { method }
+                        )
+                        const newIds = Array.isArray(data.completedSectionIds) ? data.completedSectionIds : []
+                        setCompletedSectionIds(newIds)
+                        if (!wasComplete) checkAndShowCelebration(newIds, false)
+                      } catch { /* ignore */ }
+                      finally { setProgressSaving(false) }
+                    }}
+                  >
+                    {progressSaving ? '…' : lessonCompleted ? '✓ Completed' : 'Mark as Completed'}
+                  </button>
+                  {isEnrolled && section?.id && (
+                    <button
+                      type="button"
+                      className="btn-secondary"
+                      style={bookmarkedSectionIds.includes(section.id) ? { borderColor: '#c9a84c', color: '#c9a84c' } : {}}
+                      disabled={bookmarkSaving}
+                      title={bookmarkedSectionIds.includes(section.id) ? 'Remove bookmark' : 'Bookmark this lesson'}
+                      onClick={async () => {
+                        if (!study || !section?.id) return
+                        setBookmarkSaving(true)
+                        const isBookmarked = bookmarkedSectionIds.includes(section.id)
+                        try {
+                          const data = await readJson<{ ok: boolean; bookmarkedSectionIds: string[] }>(
+                            `/api/study-progress/${encodeURIComponent(study.slug)}/${encodeURIComponent(section.id)}/bookmark`,
+                            { method: isBookmarked ? 'DELETE' : 'POST' }
+                          )
+                          setBookmarkedSectionIds(Array.isArray(data.bookmarkedSectionIds) ? data.bookmarkedSectionIds : [])
+                        } catch { /* ignore */ }
+                        finally { setBookmarkSaving(false) }
+                      }}
+                    >
+                      {bookmarkSaving ? '…' : bookmarkedSectionIds.includes(section.id) ? '🔖 Bookmarked' : '🔖 Bookmark'}
+                    </button>
+                  )}
+                </div>
               </article>
             )}
 
@@ -2439,6 +2472,8 @@ export function StudyAccountPage() {
 
   const [subscribeNewsletter, setSubscribeNewsletter] = useState(true)
   const [studyRemindersEnabled, setStudyRemindersEnabled] = useState(true)
+  const [reminderFrequency, setReminderFrequency] = useState<'immediate' | 'weekly'>('immediate')
+  const [remindersPausedUntil, setRemindersPausedUntil] = useState<string | null>(null)
   const [prefMessage, setPrefMessage] = useState('')
   const [prefBusy, setPrefBusy] = useState(false)
   const [accountModal, setAccountModal] = useState<'none' | 'enrollments' | 'changeEmail' | 'changePassword' | 'profile' | 'preferences' | 'export' | 'choose2fa' | 'setup2fa' | 'setup2fa-email' | 'disable2fa' | 'recoveryCodes'>('none')
@@ -2509,6 +2544,8 @@ export function StudyAccountPage() {
         setAvatarUrlInput(data.profile.avatarUrl ?? '')
         setSubscribeNewsletter(data.profile.subscribeNewsletter !== false)
         setStudyRemindersEnabled(data.profile.studyRemindersEnabled === true)
+        setReminderFrequency(data.profile.reminderFrequency === 'weekly' ? 'weekly' : 'immediate')
+        setRemindersPausedUntil(data.profile.remindersPausedUntil ?? null)
       })
       .catch(() => {})
       .finally(() => setLoadingOverview(false))
@@ -2541,6 +2578,8 @@ export function StudyAccountPage() {
     setAvatarUrlInput(data.profile.avatarUrl ?? '')
     setSubscribeNewsletter(data.profile.subscribeNewsletter !== false)
     setStudyRemindersEnabled(data.profile.studyRemindersEnabled === true)
+    setReminderFrequency(data.profile.reminderFrequency === 'weekly' ? 'weekly' : 'immediate')
+    setRemindersPausedUntil(data.profile.remindersPausedUntil ?? null)
   }
 
   async function handleAvatarUpload(file: File) {
@@ -2600,12 +2639,14 @@ export function StudyAccountPage() {
     setPrefBusy(true)
     setPrefMessage('')
     try {
-      const data = await readJson<{ ok: boolean; subscribeNewsletter: boolean; studyRemindersEnabled: boolean }>('/api/study-account/preferences', {
+      const data = await readJson<{ ok: boolean; subscribeNewsletter: boolean; studyRemindersEnabled: boolean; reminderFrequency: string; remindersPausedUntil: string | null }>('/api/study-account/preferences', {
         method: 'PATCH',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ subscribeNewsletter, studyRemindersEnabled }),
+        body: JSON.stringify({ subscribeNewsletter, studyRemindersEnabled, reminderFrequency, remindersPausedUntil }),
       })
       setAuth(prev => ({ ...prev, subscribeNewsletter: data.subscribeNewsletter, studyRemindersEnabled: data.studyRemindersEnabled }))
+      setReminderFrequency(data.reminderFrequency === 'weekly' ? 'weekly' : 'immediate')
+      setRemindersPausedUntil(data.remindersPausedUntil ?? null)
       setPrefMessage('Preferences updated.')
       await refreshOverview()
     } catch (err) {
@@ -3008,6 +3049,99 @@ export function StudyAccountPage() {
                       <input type="checkbox" checked={studyRemindersEnabled} onChange={e => setStudyRemindersEnabled(e.target.checked)} />
                       <span>Send email reminders when a new lesson is released</span>
                     </label>
+                    {studyRemindersEnabled && (
+                      <div style={{ marginLeft: '2rem', display: 'grid', gap: '0.75rem' }}>
+                        <div>
+                          <p style={{ margin: '0 0 0.4rem', fontSize: '0.875rem', color: '#b9b09b' }}>Reminder frequency</p>
+                          <div style={{ display: 'flex', gap: '0.5rem' }}>
+                            <button
+                              type="button"
+                              onClick={() => setReminderFrequency('immediate')}
+                              style={{
+                                padding: '0.35rem 0.75rem',
+                                borderRadius: '0.375rem',
+                                border: reminderFrequency === 'immediate' ? '1px solid #d4af7a' : '1px solid #444',
+                                background: reminderFrequency === 'immediate' ? '#2a2218' : 'transparent',
+                                color: reminderFrequency === 'immediate' ? '#d4af7a' : '#b9b09b',
+                                fontSize: '0.875rem',
+                                cursor: 'pointer',
+                              }}
+                            >
+                              Per-lesson
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => setReminderFrequency('weekly')}
+                              style={{
+                                padding: '0.35rem 0.75rem',
+                                borderRadius: '0.375rem',
+                                border: reminderFrequency === 'weekly' ? '1px solid #d4af7a' : '1px solid #444',
+                                background: reminderFrequency === 'weekly' ? '#2a2218' : 'transparent',
+                                color: reminderFrequency === 'weekly' ? '#d4af7a' : '#b9b09b',
+                                fontSize: '0.875rem',
+                                cursor: 'pointer',
+                              }}
+                            >
+                              Weekly digest
+                            </button>
+                          </div>
+                          <p style={{ margin: '0.35rem 0 0', fontSize: '0.8rem', color: '#7a7060' }}>
+                            {reminderFrequency === 'weekly'
+                              ? 'Receive one weekly email summarizing all new lessons.'
+                              : 'Receive an email each time a new lesson is released.'}
+                          </p>
+                        </div>
+                        <div>
+                          <p style={{ margin: '0 0 0.4rem', fontSize: '0.875rem', color: '#b9b09b' }}>
+                            Pause reminders
+                            {remindersPausedUntil && new Date(remindersPausedUntil) > new Date()
+                              ? ` · paused until ${new Date(remindersPausedUntil).toLocaleDateString()}`
+                              : ''}
+                          </p>
+                          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                            {[7, 14, 30].map(days => (
+                              <button
+                                key={days}
+                                type="button"
+                                onClick={() => {
+                                  const d = new Date()
+                                  d.setDate(d.getDate() + days)
+                                  setRemindersPausedUntil(d.toISOString())
+                                }}
+                                style={{
+                                  padding: '0.35rem 0.75rem',
+                                  borderRadius: '0.375rem',
+                                  border: '1px solid #444',
+                                  background: 'transparent',
+                                  color: '#b9b09b',
+                                  fontSize: '0.875rem',
+                                  cursor: 'pointer',
+                                }}
+                              >
+                                {days} days
+                              </button>
+                            ))}
+                            {remindersPausedUntil && new Date(remindersPausedUntil) > new Date() && (
+                              <button
+                                type="button"
+                                onClick={() => setRemindersPausedUntil(null)}
+                                style={{
+                                  padding: '0.35rem 0.75rem',
+                                  borderRadius: '0.375rem',
+                                  border: '1px solid #555',
+                                  background: 'transparent',
+                                  color: '#7a7060',
+                                  fontSize: '0.875rem',
+                                  cursor: 'pointer',
+                                }}
+                              >
+                                Clear pause
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
                     <label className="contact-consent" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                       <input type="checkbox" checked={subscribeNewsletter} onChange={e => setSubscribeNewsletter(e.target.checked)} />
                       <span>Subscribe to newsletter updates</span>
diff --git a/src/content.ts b/src/content.ts
index fc48cd2..f594218 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -259,6 +259,15 @@ export interface SiteContent {
   studyReengagementT3Subject: string
   studyReengagementT3Body: string
   studyReengagementT3Cta: string
+  // ── Study Completion Certificate Email ──
+  studyCertificateEmailSubject: string
+  studyCertificateEmailBody: string
+  studyCertificateEmailCtaLabel: string
+  studyCertificateEmailSignoff: string
+  // ── Study Weekly Lesson Digest Email ──
+  studyWeeklyDigestEmailSubject: string
+  studyWeeklyDigestEmailBody: string
+  studyWeeklyDigestEmailSignoff: string
   // ── Email Change Confirmation ──
   emailChangeSubject: string
   emailChangeBody: string
@@ -472,6 +481,13 @@ export const DEFAULTS: SiteContent = {
   studyReengagementT3Subject: 'Your progress is still here',
   studyReengagementT3Body: "Your study progress is still intact and waiting. There's no deadline — come back whenever you're ready.",
   studyReengagementT3Cta: 'Open Your Study',
+  studyCertificateEmailSubject: 'Your certificate is ready',
+  studyCertificateEmailBody: 'Congratulations — you have completed every lesson in this study. Your certificate is ready to view and share.',
+  studyCertificateEmailCtaLabel: 'View Certificate',
+  studyCertificateEmailSignoff: 'Grace and peace,\nVerse by Verse with Nate',
+  studyWeeklyDigestEmailSubject: 'Your weekly study digest',
+  studyWeeklyDigestEmailBody: 'Here are the lessons released this week in your study track. Open any to continue where you left off.',
+  studyWeeklyDigestEmailSignoff: 'Grace and peace,\nVerse by Verse with Nate',
   emailChangeSubject: 'Confirm your new email address',
   emailChangeBody: 'Click the link below to confirm your new account email. If you did not request this change, ignore this message.',
   emailChangeCtaLabel: 'Confirm Email Change',

From 874dd0c89b3b51e1fccc137638e49c2ec5c7763c Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 16:01:15 -0400
Subject: [PATCH 3/6] Redesign study lesson UI: progress bar, sidebar nav,
 inline answers; v1.2.5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Progress bar: thin gold bar under lesson label showing completed/total lessons
- Sidebar lesson navigator: all lessons listed with ✓/current/○ states, replaces static Study Track + Lesson Navigation blocks
- Notes panel moves to sidebar: clicking a block's Note button opens NoteCard in sidebar instead of inline, preserving reading position
- Inline reflection answers: textareas under each question auto-save to quiz API; replaces separate quiz page link
- Note buttons: "Note" / "✎ Note" text label instead of bare pencil icon for better discoverability
- Greek Word Study block hidden when lesson has no greek notes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json            |   2 +-
 src/App.css             | 191 ++++++++++++++++++++++++++++++-
 src/colossiansStudy.tsx | 243 +++++++++++++++++++++++-----------------
 3 files changed, 328 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index 9dad657..22148ec 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.css b/src/App.css
index 8a862ef..82e6061 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2668,17 +2668,20 @@
 
 .note-anchor-btn {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: 0.85rem;
+  right: 0.85rem;
   background: transparent;
   border: 1px solid #3a3828;
   border-radius: 6px;
   color: #5a5440;
-  padding: 0.2rem 0.55rem;
-  font-size: 0.9rem;
+  padding: 0.22rem 0.65rem;
+  font-size: 0.78rem;
+  font-family: var(--brand-font-body);
+  font-weight: 500;
+  letter-spacing: 0.02em;
   cursor: pointer;
   transition: color 150ms, border-color 150ms, background 150ms;
-  line-height: 1;
+  line-height: 1.4;
   z-index: 1;
 }
 
@@ -2699,6 +2702,184 @@
   border-color: rgba(224, 192, 112, 0.5);
 }
 
+/* ── Progress bar ────────────────────────────────────────────────── */
+.study-lesson-progress-bar {
+  height: 3px;
+  background: rgba(201, 168, 76, 0.12);
+  border-radius: 2px;
+  margin: 0.35rem 0 0.1rem;
+  overflow: hidden;
+}
+
+.study-lesson-progress-fill {
+  height: 100%;
+  background: #c9a84c;
+  border-radius: 2px;
+  transition: width 0.4s ease;
+  min-width: 3px;
+}
+
+/* ── Sidebar lesson navigator ────────────────────────────────────── */
+.study-lesson-nav-progress {
+  font-size: 0.72rem;
+  font-weight: 400;
+  color: #5a5440;
+  margin-left: 0.4rem;
+  letter-spacing: 0.02em;
+}
+
+.study-lesson-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-top: 0.25rem;
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.study-lesson-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.42rem 0.55rem;
+  border-radius: 7px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  transition: background 120ms, border-color 120ms;
+  cursor: pointer;
+}
+
+.study-lesson-nav-item:hover {
+  background: rgba(201, 168, 76, 0.06);
+}
+
+.study-lesson-nav-item--current {
+  background: rgba(201, 168, 76, 0.1);
+  border-color: rgba(201, 168, 76, 0.2);
+}
+
+.study-lesson-nav-item--locked {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+.study-lesson-nav-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  font-weight: 700;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.05);
+  color: #5a5440;
+}
+
+.study-lesson-nav-item--done .study-lesson-nav-icon {
+  background: rgba(201, 168, 76, 0.18);
+  color: #c9a84c;
+}
+
+.study-lesson-nav-item--current .study-lesson-nav-icon {
+  background: #c9a84c;
+  color: #0e0d0b;
+}
+
+.study-lesson-nav-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: #7a7060;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.study-lesson-nav-item--current .study-lesson-nav-label {
+  color: #e2d4a8;
+}
+
+.study-lesson-nav-item--done .study-lesson-nav-label {
+  color: #5a5040;
+}
+
+.study-lesson-nav-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+/* ── Notes count badge ────────────────────────────────────────────── */
+.study-notes-count-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: rgba(201, 168, 76, 0.18);
+  color: #c9a84c;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0 5px;
+  margin-left: 0.4rem;
+  font-family: var(--brand-font-body);
+  vertical-align: middle;
+}
+
+/* ── Inline reflection question answers ─────────────────────────── */
+.study-detail-list--questions {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin-top: 0.25rem;
+}
+
+.study-question-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.study-question-text {
+  color: var(--brand-muted);
+  font-size: 0.93rem;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.study-question-answer {
+  width: 100%;
+  box-sizing: border-box;
+  background: rgba(201, 168, 76, 0.04);
+  border: 1px solid rgba(201, 168, 76, 0.15);
+  border-radius: 8px;
+  padding: 0.65rem 0.85rem;
+  font-size: 0.88rem;
+  font-family: var(--brand-font-body);
+  color: #f0ead8;
+  resize: vertical;
+  min-height: 72px;
+  line-height: 1.6;
+  transition: border-color 150ms;
+}
+
+.study-question-answer:focus {
+  outline: none;
+  border-color: rgba(201, 168, 76, 0.4);
+}
+
+.study-question-answer::placeholder {
+  color: #3a3020;
+}
+
 /* ── Sidebar anchor list ─────────────────────────────────────────── */
 .note-anchor-list {
   display: flex;
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 982f7e2..169ee6b 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -1507,6 +1507,8 @@ export function ColossiansStudySectionPage({ content }: Props) {
   const [progressSaving, setProgressSaving] = useState(false)
   const [progressMessage, setProgressMessage] = useState('')
   const [checkpointAnswers, setCheckpointAnswers] = useState<Record<number, string>>({})
+  const [quizAnswers, setQuizAnswers] = useState<string[]>([])
+  const quizAnswersDirtyRef = useRef(false)
   const [showCelebration, setShowCelebration] = useState(false)
   const [bannerDismissed, setBannerDismissed] = useState(() => localStorage.getItem('study-banner-dismissed-v1') === '1')
   const [autoSaveMsg, setAutoSaveMsg] = useState('')
@@ -1692,6 +1694,44 @@ export function ColossiansStudySectionPage({ content }: Props) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [noteMap, noteId, auth.authenticated, noteLoading])
 
+  useEffect(() => {
+    if (!auth.authenticated || !isEnrolled || !study || !section?.id) {
+      setQuizAnswers([])
+      quizAnswersDirtyRef.current = false
+      return
+    }
+    let cancelled = false
+    readJson<{ answers: string[] }>(`/api/study-quiz/${encodeURIComponent(currentStudySlug)}/${encodeURIComponent(section.id)}`)
+      .then(data => {
+        if (cancelled) return
+        setQuizAnswers(Array.isArray(data.answers) ? data.answers : [])
+        quizAnswersDirtyRef.current = false
+      })
+      .catch(() => { if (!cancelled) setQuizAnswers([]) })
+    return () => { cancelled = true }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [auth.authenticated, isEnrolled, currentStudySlug, section?.id])
+
+  useEffect(() => {
+    if (!auth.authenticated || !isEnrolled || !study || !section?.id) return
+    if (!quizAnswersDirtyRef.current) return
+    const timer = setTimeout(async () => {
+      if (!quizAnswersDirtyRef.current) return
+      quizAnswersDirtyRef.current = false
+      try {
+        await readJson<{ ok: boolean; answers: string[] }>(`/api/study-quiz/${encodeURIComponent(currentStudySlug)}/${encodeURIComponent(section.id)}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ answers: quizAnswers }),
+        })
+      } catch {
+        quizAnswersDirtyRef.current = true
+      }
+    }, 1500)
+    return () => clearTimeout(timer)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [quizAnswers, auth.authenticated, isEnrolled, currentStudySlug, section?.id])
+
   useEffect(() => {
     if (!showCelebration) return
     function onKeyDown(e: KeyboardEvent) {
@@ -1896,6 +1936,11 @@ export function ColossiansStudySectionPage({ content }: Props) {
             <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Studies', href: '/study' }, { label: study.title, href: `/study/${study.slug}` }, { label: `Lesson ${lessonNumber}` }]} />
             <Link to={`/study/${study.slug}`} className="study-detail-back">Back to {study.title}</Link>
             <p className="study-lesson-label">Lesson {lessonNumber} of {sections.length}</p>
+            {sections.length > 0 && (
+              <div className="study-lesson-progress-bar" role="progressbar" aria-valuenow={completedSectionIds.length} aria-valuemax={sections.length} aria-label={`${completedSectionIds.length} of ${sections.length} lessons completed`}>
+                <div className="study-lesson-progress-fill" style={{ width: `${Math.round((completedSectionIds.length / sections.length) * 100)}%` }} />
+              </div>
+            )}
             <h1>{section.title}</h1>
             <p className="study-detail-reference">{section.reference}</p>
             <p className="study-detail-summary">{section.summary}</p>
@@ -1927,9 +1972,8 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   type="button"
                   className={`note-anchor-btn${noteMap['scripture']?.trim() ? ' note-anchor-btn--has-note' : ''}${openAnchor === 'scripture' ? ' note-anchor-btn--open' : ''}`}
                   onClick={() => setOpenAnchor(curr => curr === 'scripture' ? null : 'scripture')}
-                  title={noteMap['scripture']?.trim() ? 'Edit scripture note' : 'Add note to Scripture'}
                   aria-pressed={openAnchor === 'scripture'}
-                >✎</button>
+                >{noteMap['scripture']?.trim() ? '✎ Note' : '+ Note'}</button>
               )}
               <h2>Scripture Text</h2>
               {bsbPassageLoading
@@ -1943,15 +1987,6 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   : <p className="study-detail-copy" style={{ opacity: 0.5 }}>Passage text not available.</p>
               }
               {bsbPassage && <p style={{ fontSize: '0.78rem', color: '#5a5440', marginTop: '0.5rem' }}>Berean Standard Bible (BSB)</p>}
-              {isEnrolled && openAnchor === 'scripture' && (
-                <NoteCard
-                  anchorLabel="Scripture Text"
-                  html={noteMap['scripture'] ?? ''}
-                  autoSaveMsg={autoSaveMsg}
-                  onChange={html => updateNote('scripture', html)}
-                  onClose={() => setOpenAnchor(null)}
-                />
-              )}
             </article>
 
             <article className="study-class-block study-class-block--anchored" data-note-anchor="commentary">
@@ -1960,9 +1995,8 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   type="button"
                   className={`note-anchor-btn${noteMap['commentary']?.trim() ? ' note-anchor-btn--has-note' : ''}${openAnchor === 'commentary' ? ' note-anchor-btn--open' : ''}`}
                   onClick={() => setOpenAnchor(curr => curr === 'commentary' ? null : 'commentary')}
-                  title={noteMap['commentary']?.trim() ? 'Edit commentary note' : 'Add note to Commentary'}
                   aria-pressed={openAnchor === 'commentary'}
-                >✎</button>
+                >{noteMap['commentary']?.trim() ? '✎ Note' : '+ Note'}</button>
               )}
               <h2>Instructor Commentary</h2>
               {section.commentary.split(/\n{2,}/).map((para, i) => (
@@ -1972,15 +2006,6 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   ))}
                 </p>
               ))}
-              {isEnrolled && openAnchor === 'commentary' && (
-                <NoteCard
-                  anchorLabel="Commentary"
-                  html={noteMap['commentary'] ?? ''}
-                  autoSaveMsg={autoSaveMsg}
-                  onChange={html => updateNote('commentary', html)}
-                  onClose={() => setOpenAnchor(null)}
-                />
-              )}
             </article>
 
             <article className="study-class-block study-class-block--anchored" data-note-anchor="questions">
@@ -1989,33 +2014,35 @@ export function ColossiansStudySectionPage({ content }: Props) {
                   type="button"
                   className={`note-anchor-btn${noteMap['questions']?.trim() ? ' note-anchor-btn--has-note' : ''}${openAnchor === 'questions' ? ' note-anchor-btn--open' : ''}`}
                   onClick={() => setOpenAnchor(curr => curr === 'questions' ? null : 'questions')}
-                  title={noteMap['questions']?.trim() ? 'Edit reflection note' : 'Add note to Reflection Questions'}
                   aria-pressed={openAnchor === 'questions'}
-                >✎</button>
+                >{noteMap['questions']?.trim() ? '✎ Note' : '+ Note'}</button>
               )}
               <h2>Reflection Questions</h2>
-              <p className="study-detail-copy" style={{ marginBottom: '0.75rem', color: '#8a7f5a', fontSize: '0.9rem' }}>
-                Work through these on your own, then share your thoughts in the Discussion below.
-              </p>
-              <ol className="study-detail-list">
+              <ol className="study-detail-list study-detail-list--questions">
                 {section.studyQuestions.map((question, index) => (
-                  <li key={index}>{question}</li>
+                  <li key={index} className="study-question-item">
+                    <p className="study-question-text">{question}</p>
+                    {isEnrolled && (
+                      <textarea
+                        className="study-question-answer"
+                        value={quizAnswers[index] ?? ''}
+                        onChange={e => {
+                          const next = [...quizAnswers]
+                          next[index] = e.target.value
+                          setQuizAnswers(next)
+                          quizAnswersDirtyRef.current = true
+                        }}
+                        placeholder="Write your answer…"
+                        rows={2}
+                      />
+                    )}
+                  </li>
                 ))}
               </ol>
               <div style={{ marginTop: '1rem', display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
-                <Link to={`/study/${study.slug}/${section.id}/quiz`} className="btn-secondary">Write My Answers</Link>
                 <Link to={`/study/${study.slug}/community`} className="btn-primary">Go to Community</Link>
                 <Link to={`/contact?source=community&study=${encodeURIComponent(study.title)}`} className="btn-secondary">Ask Nate</Link>
               </div>
-              {isEnrolled && openAnchor === 'questions' && (
-                <NoteCard
-                  anchorLabel="Reflection Questions"
-                  html={noteMap['questions'] ?? ''}
-                  autoSaveMsg={autoSaveMsg}
-                  onChange={html => updateNote('questions', html)}
-                  onClose={() => setOpenAnchor(null)}
-                />
-              )}
             </article>
 
             {isEnrolled && !(section.checkpointQuestions && section.checkpointQuestions.length > 0) && (
@@ -2133,28 +2160,40 @@ export function ColossiansStudySectionPage({ content }: Props) {
           </div>
 
           <aside className="study-classroom-sidebar" aria-label="Lesson tools">
+            {/* Lesson navigator */}
             <article className="study-class-side-block">
-              <h3>Study Track</h3>
-              <p>{study.title}</p>
-              <p>{study.description}</p>
+              <h3>Lessons <span className="study-lesson-nav-progress">{completedSectionIds.length}/{sections.length}</span></h3>
+              <nav className="study-lesson-nav" aria-label="All lessons">
+                {sections.map(s => {
+                  const sNum = getLessonNumber(sections, s.id)
+                  const isDone = completedSectionIds.includes(s.id)
+                  const isCurr = s.id === section.id
+                  const released = isSectionReleased(s)
+                  return (
+                    <Link
+                      key={s.id}
+                      to={released ? `/study/${study.slug}/${s.id}` : '#'}
+                      aria-current={isCurr ? 'page' : undefined}
+                      className={`study-lesson-nav-item${isCurr ? ' study-lesson-nav-item--current' : ''}${isDone ? ' study-lesson-nav-item--done' : ''}${!released ? ' study-lesson-nav-item--locked' : ''}`}
+                      onClick={e => { if (!released) e.preventDefault() }}
+                    >
+                      <span className="study-lesson-nav-icon" aria-hidden="true">
+                        {isDone ? '✓' : isCurr ? String(sNum) : released ? String(sNum) : '○'}
+                      </span>
+                      <span className="study-lesson-nav-label">{s.title}</span>
+                    </Link>
+                  )
+                })}
+              </nav>
             </article>
 
+            {/* Notes panel */}
             <article className="study-class-side-block">
-              <h3>Greek Word Study</h3>
-              {section.greekNotes.length > 0 ? (
-                <ul className="study-detail-list">
-                  {section.greekNotes.map((note, index) => (
-                    <li key={index}>{note}</li>
-                  ))}
-                </ul>
-              ) : (
-                <p className="study-detail-copy">Greek notes will be added for this lesson.</p>
-              )}
-            </article>
-
-            <article className="study-class-side-block">
-              <h3>Student Notes</h3>
-              {!auth.checked && <p className="study-detail-copy">Checking sign-in status...</p>}
+              <h3>
+                Your Notes
+                {savedNoteCount > 0 && <span className="study-notes-count-badge">{savedNoteCount}</span>}
+              </h3>
+              {!auth.checked && <p className="study-detail-copy" style={{ fontSize: '0.85rem' }}>Checking sign-in…</p>}
               {auth.checked && !auth.authenticated && (
                 <div className="study-auth-box">
                   <p className="study-auth-why">Sign in to save notes for this lesson.</p>
@@ -2166,60 +2205,60 @@ export function ColossiansStudySectionPage({ content }: Props) {
                     <button type="button" className="btn-secondary" disabled={authBusy} onClick={() => submitAuth('login')}>Sign In</button>
                     <button type="button" className="btn-primary" disabled={authBusy} onClick={() => submitAuth('signup')}>Create Account</button>
                   </div>
+                  {authMessage && <p className="study-note-status" style={{ marginTop: '0.5rem' }}>{authMessage}</p>}
                 </div>
               )}
               {auth.checked && auth.authenticated && (
-                <div className="study-notes-box">
-                  <p className="study-notes-user">Signed in as {auth.username}</p>
-                  <Link to="/study/account" className="btn-secondary" style={{ marginBottom: '0.5rem', display: 'inline-block' }}>My Account</Link>
+                <>
                   {noteLoading ? (
-                    <p style={{ color: '#7a7060', fontSize: '0.85rem', marginTop: '0.5rem' }}>Loading notes…</p>
+                    <p style={{ color: '#7a7060', fontSize: '0.85rem' }}>Loading notes…</p>
+                  ) : openAnchor ? (
+                    <NoteCard
+                      anchorLabel={ANCHOR_LABELS[openAnchor] ?? 'Notes'}
+                      html={noteMap[openAnchor] ?? ''}
+                      autoSaveMsg={autoSaveMsg}
+                      onChange={html => updateNote(openAnchor as NoteAnchorId, html)}
+                      onClose={() => setOpenAnchor(null)}
+                    />
                   ) : (
-                    <>
-                      {savedNoteCount > 0 && (
-                        <p style={{ fontSize: '0.82rem', color: '#7a9c6a', marginBottom: '0.5rem' }}>
-                          {savedNoteCount} note{savedNoteCount !== 1 ? 's' : ''} saved ✓
-                        </p>
-                      )}
-                      <div className="note-anchor-list">
-                        {NOTE_ANCHORS.map(({ id, label }) => {
-                          const hasNote = !!(noteMap[id]?.trim())
-                          return (
-                            <button
-                              key={id}
-                              type="button"
-                              className={`note-anchor-list-item${hasNote ? ' note-anchor-list-item--has' : ''}${openAnchor === id ? ' note-anchor-list-item--open' : ''}`}
-                              onClick={() => setOpenAnchor(curr => curr === id ? null : id as NoteAnchorId)}
-                            >
-                              <span>{label}</span>
-                              {hasNote && <span className="note-anchor-dot" aria-hidden="true">●</span>}
-                            </button>
-                          )
-                        })}
-                      </div>
-                      <p style={{ margin: '0.5rem 0 0', color: '#7a7060', fontSize: '0.82rem' }}>Click a section above to add notes. Right-click lesson text to append a selection.</p>
-                    </>
+                    <p style={{ fontSize: '0.85rem', color: '#5a5040', lineHeight: 1.55 }}>
+                      {savedNoteCount > 0
+                        ? `${savedNoteCount} note${savedNoteCount !== 1 ? 's' : ''} saved. Click a section's Note button to edit.`
+                        : 'Click the Note button on Scripture, Commentary, or Reflection Questions to write notes here.'}
+                    </p>
                   )}
-                </div>
+                  {autoSaveMsg && <p style={{ fontSize: '0.82rem', color: '#7a9c6a', marginTop: '0.35rem' }}>{autoSaveMsg}</p>}
+                  {noteMessage && <p className="study-note-status" style={{ marginTop: '0.35rem' }}>{noteMessage}</p>}
+                  <Link to="/study/account" style={{ display: 'block', fontSize: '0.82rem', color: '#7a7060', marginTop: '0.75rem' }}>My Account →</Link>
+                </>
               )}
-              {(authMessage || noteMessage || progressMessage) && <p className="study-note-status">{authMessage || noteMessage || progressMessage}</p>}
             </article>
 
-            <article className="study-class-side-block">
-              <h3>Lesson Navigation</h3>
-              <div className="study-detail-nav">
-                {previousSection ? (
-                  <Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">Previous Lesson</Link>
-                ) : <span className="study-nav-placeholder" />}
-                {nextSection && !isSectionReleased(nextSection) ? (
-                  <span className="study-nav-placeholder">Available {getReleaseDateDisplay(nextSection)}</span>
-                ) : nextSection && !lessonCompleted ? (
-                  <span className="study-nav-placeholder" title="Complete this lesson's checkpoint to unlock the next one">🔒 Complete checkpoint first</span>
-                ) : nextSection ? (
-                  <Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next Lesson</Link>
-                ) : <span className="study-nav-placeholder" />}
-              </div>
-            </article>
+            {/* Greek Word Study */}
+            {section.greekNotes.length > 0 && (
+              <article className="study-class-side-block">
+                <h3>Greek Word Study</h3>
+                <ul className="study-detail-list">
+                  {section.greekNotes.map((note, index) => (
+                    <li key={index}>{note}</li>
+                  ))}
+                </ul>
+              </article>
+            )}
+
+            {/* Prev / Next navigation */}
+            <div className="study-lesson-nav-actions">
+              {previousSection ? (
+                <Link to={`/study/${study.slug}/${previousSection.id}`} className="btn-secondary">← Previous</Link>
+              ) : <span />}
+              {nextSection && !isSectionReleased(nextSection) ? (
+                <span className="study-nav-placeholder" style={{ fontSize: '0.82rem', color: '#5a5440' }}>Next available {getReleaseDateDisplay(nextSection)}</span>
+              ) : nextSection && !lessonCompleted ? (
+                <span className="study-nav-placeholder" style={{ fontSize: '0.82rem', color: '#5a5440' }}>Complete lesson to continue</span>
+              ) : nextSection ? (
+                <Link to={`/study/${study.slug}/${nextSection.id}`} className="btn-secondary">Next →</Link>
+              ) : null}
+            </div>
           </aside>
 
           {contextNoteMenu && (

From 49e3a80c2c8be30b7a83cd818a428aa4a0dfe6f5 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 16:34:28 -0400
Subject: [PATCH 4/6] Redesign community section with social media feed UX;
 v1.2.6

- Twitter/X-style post cards: avatar thread line, author + relative timestamp
- Heart like button with optimistic toggle and like count per post
- Comment button with reply count; inline threaded replies always visible
- Compose card with user avatar, borderless textarea, pill Post button
- Horizontal scrollable lesson filter chips (All + per-lesson)
- New POST /api/study-community/posts/:postId/like endpoint (toggle)
- GET community posts now returns likedByMe + likeCount per post
- sanitizeStudyCommunityPosts preserves likedBy array on disk
- Relative timestamps (just now, Xm ago, Xh ago, Xd ago, then date)
- UserAvatar helper renders img or initials fallback consistently

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json                |   2 +-
 server/data.js              |   2 +
 server/routes/study-data.js |  22 +++
 src/App.css                 |  70 +++++++++
 src/colossiansStudy.tsx     | 300 ++++++++++++++++++++----------------
 5 files changed, 261 insertions(+), 135 deletions(-)

diff --git a/package.json b/package.json
index 22148ec..9e6d173 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.5",
+  "version": "1.2.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/server/data.js b/server/data.js
index 542f391..e68eef8 100644
--- a/server/data.js
+++ b/server/data.js
@@ -1523,6 +1523,7 @@ export function sanitizeStudyCommunityPosts(value) {
         ? item.replies.map(sanitizeStudyCommunityReply).filter(Boolean).slice(0, 50)
         : []
       if (!studySlug || !message) return null
+      const likedBy = Array.isArray(item.likedBy) ? item.likedBy.filter(id => typeof id === 'string' && id.trim()).slice(0, 1000) : []
       return {
         id: typeof item.id === 'string' && item.id.trim() ? item.id.trim() : randomUUID(),
         studySlug,
@@ -1532,6 +1533,7 @@ export function sanitizeStudyCommunityPosts(value) {
         message,
         createdAt: typeof item.createdAt === 'string' ? item.createdAt : new Date().toISOString(),
         replies,
+        likedBy,
       }
     })
     .filter(Boolean)
diff --git a/server/routes/study-data.js b/server/routes/study-data.js
index b76ad75..47e290e 100644
--- a/server/routes/study-data.js
+++ b/server/routes/study-data.js
@@ -363,9 +363,12 @@ export function register(app) {
       .slice(0, 50)
       .map(post => {
         const author = findStudyUserById(post.authorUserId)
+        const likedBy = Array.isArray(post.likedBy) ? post.likedBy : []
         return {
           ...post,
           authorAvatarUrl: getStudyAvatarUrl(author || post.authorName || ''),
+          likedByMe: likedBy.includes(user.id),
+          likeCount: likedBy.length,
           replies: Array.isArray(post.replies)
             ? post.replies.map(reply => {
               const replyAuthor = findStudyUserById(reply.authorUserId)
@@ -452,4 +455,23 @@ export function register(app) {
 
     res.json({ ok: true, reply })
   })
+
+  app.post('/api/study-community/posts/:postId/like', requireStudyAuth, (req, res) => {
+    const user = req.studyUser
+    const postId = typeof req.params.postId === 'string' ? req.params.postId.trim() : ''
+    const post = state.studyCommunityPosts.find(item => item.id === postId)
+    if (!post) { res.status(404).json({ message: 'Post not found.' }); return }
+    if (!isStudyUserEnrolled(user, post.studySlug)) {
+      res.status(403).json({ message: 'Please enroll in this study to like posts.' }); return
+    }
+    if (!Array.isArray(post.likedBy)) post.likedBy = []
+    const idx = post.likedBy.indexOf(user.id)
+    if (idx === -1) {
+      post.likedBy.push(user.id)
+    } else {
+      post.likedBy.splice(idx, 1)
+    }
+    queueStudyCommunityWrite()
+    res.json({ ok: true, likeCount: post.likedBy.length, likedByMe: post.likedBy.includes(user.id) })
+  })
 }
diff --git a/src/App.css b/src/App.css
index 82e6061..4ba82cc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -12550,3 +12550,73 @@
 .admin-save-ok { color: #6ebd7c; font-size: 0.85rem; margin: 0; }
 .admin-save-error { color: #e05c5c; font-size: 0.85rem; margin: 0; }
 .admin-field-hint { font-size: 0.78rem; color: var(--admin-muted, #a0957e); margin: 0; }
+
+/* ── Community feed ──────────────────────────────────────────────────────── */
+.community-feed { display: flex; flex-direction: column; gap: 0; }
+
+.community-filter-bar { display: flex; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1.25rem; scrollbar-width: none; }
+.community-filter-bar::-webkit-scrollbar { display: none; }
+.community-filter-chip { flex-shrink: 0; padding: 0.3rem 0.85rem; border-radius: 999px; border: 1px solid var(--brand-border, #2a2518); background: transparent; color: var(--brand-muted, #b0a48c); font-size: 0.82rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
+.community-filter-chip:hover { background: rgba(201,168,76,0.08); color: var(--brand-gold, #c9a84c); border-color: var(--brand-gold, #c9a84c); }
+.community-filter-chip--active { background: rgba(201,168,76,0.12); color: var(--brand-gold, #c9a84c); border-color: var(--brand-gold, #c9a84c); font-weight: 600; }
+
+/* Avatar */
+.community-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
+.community-avatar--initials { background: #2a2518; display: grid; place-items: center; color: var(--brand-warm-white, #f0ead8); font-weight: 700; font-family: var(--brand-font-body, sans-serif); line-height: 1; }
+
+/* Compose card */
+.community-compose-card { display: flex; gap: 0.85rem; padding: 1.1rem 1.25rem; background: var(--brand-card-bg, #11100d); border: 1px solid var(--brand-border, #2a2518); border-radius: 14px; margin-bottom: 1.25rem; }
+.community-compose-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
+.community-compose-tag { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--brand-muted, #b0a48c); }
+.community-compose-tag strong { color: var(--brand-gold, #c9a84c); }
+.community-compose-tag-clear { background: none; border: none; color: var(--brand-muted, #b0a48c); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.1rem; }
+.community-compose-textarea { width: 100%; padding: 0.7rem 0; background: transparent; border: none; border-bottom: 1px solid var(--brand-border, #2a2518); color: var(--brand-warm-white, #f0ead8); font-family: var(--brand-font-body, sans-serif); font-size: 0.975rem; resize: none; overflow: hidden; outline: none; box-sizing: border-box; transition: border-color 0.15s; }
+.community-compose-textarea:focus { border-bottom-color: var(--brand-gold, #c9a84c); }
+.community-compose-textarea::placeholder { color: var(--brand-muted, #b0a48c); }
+.community-compose-footer { display: flex; justify-content: flex-end; }
+.community-post-btn { font-size: 0.875rem; padding: 0.4rem 1.1rem; border-radius: 999px; }
+
+/* Status */
+.community-status-msg { color: var(--brand-muted, #b0a48c); font-size: 0.9rem; padding: 0.75rem 0; margin: 0; }
+.community-status-msg--error { color: #e07060; }
+
+/* Post list */
+.community-posts-list { display: flex; flex-direction: column; }
+
+/* Post card */
+.community-post-card { display: flex; gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--brand-border, #2a2518); opacity: 1; transition: opacity 300ms; }
+.community-post-card--pending { opacity: 0.55; }
+.community-post-card:last-child { border-bottom: none; }
+.community-post-left { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 0.15rem; }
+.community-thread-line { flex: 1; width: 2px; background: var(--brand-border, #2a2518); margin-top: 0.35rem; border-radius: 1px; min-height: 1rem; }
+.community-post-body { flex: 1; min-width: 0; }
+.community-post-header { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
+.community-post-author { font-weight: 700; font-size: 0.925rem; color: var(--brand-warm-white, #f0ead8); }
+.community-post-time { font-size: 0.8rem; color: var(--brand-muted, #b0a48c); }
+.community-lesson-chip { font-size: 0.73rem; font-weight: 500; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--brand-border, #2a2518); background: transparent; color: var(--brand-muted, #b0a48c); cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
+.community-lesson-chip:hover { color: var(--brand-gold, #c9a84c); border-color: var(--brand-gold, #c9a84c); }
+.community-post-text { font-size: 0.95rem; line-height: 1.6; color: var(--brand-warm-white, #f0ead8); white-space: pre-wrap; margin: 0 0 0.6rem; }
+
+/* Engagement bar */
+.community-engagement-bar { display: flex; align-items: center; gap: 0.15rem; margin-bottom: 0.25rem; }
+.community-action-btn { display: flex; align-items: center; gap: 0.3rem; background: none; border: none; color: var(--brand-muted, #b0a48c); cursor: pointer; padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.82rem; font-weight: 500; transition: color 0.15s, background 0.15s; line-height: 1; }
+.community-action-btn:hover { color: var(--brand-gold, #c9a84c); background: rgba(201,168,76,0.08); }
+.community-action-btn--liked .community-action-icon { fill: #e05c5c; color: #e05c5c; }
+.community-action-btn--liked { color: #e05c5c; }
+.community-action-btn--liked:hover { background: rgba(224,92,92,0.08); color: #e05c5c; }
+.community-action-btn--active { color: var(--brand-gold, #c9a84c); }
+.community-action-icon { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
+
+/* Reply compose */
+.community-reply-compose { display: flex; gap: 0.65rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--brand-border, #2a2518); align-items: flex-start; }
+
+/* Replies thread */
+.community-replies { display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; padding-top: 0.5rem; }
+.community-reply { display: flex; gap: 0.6rem; padding: 0.65rem 0; border-top: 1px solid color-mix(in srgb, var(--brand-border, #2a2518) 60%, transparent); }
+.community-reply:first-child { border-top: none; }
+.community-reply-body { flex: 1; min-width: 0; }
+
+@media (max-width: 540px) {
+  .community-compose-card { padding: 0.9rem 1rem; }
+  .community-post-card { gap: 0.55rem; padding: 0.85rem 0; }
+}
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index 169ee6b..d8e5149 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -91,6 +91,8 @@ type StudyCommunityPost = {
   message: string
   createdAt: string
   replies: StudyCommunityReply[]
+  likeCount?: number
+  likedByMe?: boolean
   pending?: boolean
 }
 
@@ -228,10 +230,31 @@ function getDisplayName(auth: StudyAuthState) {
   return auth.displayName?.trim() || auth.username.split('@')[0] || 'student'
 }
 
-function formatCommunityDate(value: string) {
+function formatRelativeTime(value: string) {
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) return ''
-  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+  const diffMs = Date.now() - date.getTime()
+  const diffSec = Math.floor(diffMs / 1000)
+  if (diffSec < 60) return 'just now'
+  const diffMin = Math.floor(diffSec / 60)
+  if (diffMin < 60) return `${diffMin}m ago`
+  const diffHr = Math.floor(diffMin / 60)
+  if (diffHr < 24) return `${diffHr}h ago`
+  const diffDay = Math.floor(diffHr / 24)
+  if (diffDay < 7) return `${diffDay}d ago`
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+function UserAvatar({ name, url, size = 36 }: { name?: string; url?: string; size?: number }) {
+  if (url) {
+    return <img src={url} alt={name || 'avatar'} width={size} height={size} className="community-avatar" />
+  }
+  const initial = (name || 'S').slice(0, 1).toUpperCase()
+  return (
+    <div className="community-avatar community-avatar--initials" style={{ width: size, height: size, fontSize: size * 0.4 }}>
+      {initial}
+    </div>
+  )
 }
 
 function CommunityBoard({
@@ -248,7 +271,6 @@ function CommunityBoard({
   const [posts, setPosts] = useState<StudyCommunityPost[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
-  const [message, setMessage] = useState('')
   const [replyDrafts, setReplyDrafts] = useState<Record<string, string>>({})
   const [replyingTo, setReplyingTo] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
@@ -265,40 +287,25 @@ function CommunityBoard({
 
   useEffect(() => {
     let cancelled = false
-
     async function load() {
-      if (!canParticipate) {
-        setPosts([])
-        setLoading(false)
-        return
-      }
-
-      setLoading(true)
-      setError('')
+      if (!canParticipate) { setPosts([]); setLoading(false); return }
+      setLoading(true); setError('')
       try {
         const data = await readJson<{ posts?: StudyCommunityPost[] }>('/api/study-community?' + new URLSearchParams({ studySlug: study.slug }).toString())
-        if (cancelled) return
-        setPosts(Array.isArray(data.posts) ? data.posts : [])
+        if (!cancelled) setPosts(Array.isArray(data.posts) ? data.posts : [])
       } catch (err) {
-        if (cancelled) return
-        setError(err instanceof Error ? err.message : 'Unable to load the community right now.')
+        if (!cancelled) setError(err instanceof Error ? err.message : 'Unable to load the community right now.')
       } finally {
-        if (cancelled) return
-        setLoading(false)
+        if (!cancelled) setLoading(false)
       }
     }
-
     void load()
-    return () => {
-      cancelled = true
-    }
+    return () => { cancelled = true }
   }, [canParticipate, study.slug])
 
   async function submitPost() {
     if (!newPost.trim() || !canParticipate) return
-    setSubmitting(true)
-    setMessage('')
-    setError('')
+    setSubmitting(true); setError('')
     const optimisticId = `pending-${Date.now()}`
     const optimisticPost: StudyCommunityPost = {
       id: optimisticId,
@@ -309,6 +316,8 @@ function CommunityBoard({
       message: newPost,
       createdAt: new Date().toISOString(),
       replies: [],
+      likeCount: 0,
+      likedByMe: false,
       pending: true,
     }
     setPosts(prev => [optimisticPost, ...prev])
@@ -321,9 +330,8 @@ function CommunityBoard({
         body: JSON.stringify({ studySlug: study.slug, sectionId: activeSection, message: postedMessage }),
       })
       setPosts(prev => data.post
-        ? prev.map(p => p.id === optimisticId ? { ...data.post!, pending: false } : p)
+        ? prev.map(p => p.id === optimisticId ? { ...data.post!, likeCount: 0, likedByMe: false, pending: false } : p)
         : prev.filter(p => p.id !== optimisticId))
-      setMessage('')
     } catch (err) {
       setPosts(prev => prev.filter(p => p.id !== optimisticId))
       setNewPost(postedMessage)
@@ -336,8 +344,7 @@ function CommunityBoard({
   async function submitReply(postId: string) {
     const reply = replyDrafts[postId]?.trim()
     if (!reply || !canParticipate) return
-    setSubmitting(true)
-    setError('')
+    setSubmitting(true); setError('')
     try {
       const data = await readJson<{ reply?: StudyCommunityReply }>(`/api/study-community/posts/${encodeURIComponent(postId)}/replies`, {
         method: 'POST',
@@ -349,7 +356,6 @@ function CommunityBoard({
       }
       setReplyDrafts(prev => ({ ...prev, [postId]: '' }))
       setReplyingTo(null)
-      setMessage('Reply posted.')
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Unable to post your reply.')
     } finally {
@@ -357,34 +363,41 @@ function CommunityBoard({
     }
   }
 
+  async function toggleLike(postId: string) {
+    if (!canParticipate) return
+    setPosts(prev => prev.map(p => p.id === postId
+      ? { ...p, likedByMe: !p.likedByMe, likeCount: (p.likeCount ?? 0) + (p.likedByMe ? -1 : 1) }
+      : p))
+    try {
+      await readJson(`/api/study-community/posts/${encodeURIComponent(postId)}/like`, {
+        method: 'POST',
+      })
+    } catch {
+      setPosts(prev => prev.map(p => p.id === postId
+        ? { ...p, likedByMe: !p.likedByMe, likeCount: (p.likeCount ?? 0) + (p.likedByMe ? -1 : 1) }
+        : p))
+    }
+  }
+
   return (
-    <div className="study-community-board">
+    <div className="community-feed">
       {/* Section filter tabs */}
       {releasedSections.length > 1 && canParticipate && (
-        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '1rem' }}>
-          <button
-            type="button"
-            className={`qa-topic-btn${activeSection === '' ? ' qa-topic-btn--active' : ''}`}
-            onClick={() => setActiveSection('')}
-          >All lessons</button>
+        <div className="community-filter-bar">
+          <button type="button" className={`community-filter-chip${activeSection === '' ? ' community-filter-chip--active' : ''}`} onClick={() => setActiveSection('')}>All</button>
           {releasedSections.map(s => (
-            <button
-              key={s.id}
-              type="button"
-              className={`qa-topic-btn${activeSection === s.id ? ' qa-topic-btn--active' : ''}`}
-              onClick={() => setActiveSection(s.id)}
-            >{s.title}</button>
+            <button key={s.id} type="button" className={`community-filter-chip${activeSection === s.id ? ' community-filter-chip--active' : ''}`} onClick={() => setActiveSection(s.id)}>{s.title}</button>
           ))}
         </div>
       )}
 
-      {!auth.checked && <p className="study-note-status">Checking your account status...</p>}
+      {!auth.checked && <p className="community-status-msg">Checking your account status...</p>}
       {auth.checked && !auth.authenticated && (
         <div className="study-auth-box">
           <p className="study-auth-why">Sign in to join the study community.</p>
           <div className="study-auth-actions">
             <Link to="/study/signup" className="btn-primary">Create Account</Link>
-            <Link to="/study/account" className="btn-secondary">My Account</Link>
+            <Link to="/study/account" className="btn-secondary">Sign In</Link>
           </div>
         </div>
       )}
@@ -398,112 +411,131 @@ function CommunityBoard({
       )}
 
       {canParticipate && (
-        <div style={{ marginBottom: '1.5rem' }}>
-          {activeSection && (
-            <p style={{ fontSize: '0.875rem', color: '#7a7060', marginBottom: '0.5rem' }}>
-              Posting to: <strong style={{ color: '#e0c070' }}>{releasedSections.find(s => s.id === activeSection)?.title ?? 'this lesson'}</strong>
-            </p>
-          )}
-          <textarea
-            rows={4}
-            value={newPost}
-            onChange={e => setNewPost(e.target.value)}
-            onInput={e => {
-              const el = e.currentTarget
-              el.style.height = 'auto'
-              el.style.height = `${el.scrollHeight}px`
-            }}
-            placeholder={activeSection ? `Share a thought about ${releasedSections.find(s => s.id === activeSection)?.title ?? 'this lesson'}...` : 'Share a thought with the community...'}
-            style={{ width: '100%', padding: '0.85rem 1rem', borderRadius: '12px', border: '1px solid #2a2518', background: '#14130f', color: '#f0ead8', marginBottom: '0.75rem', resize: 'none', overflow: 'hidden', boxSizing: 'border-box' }}
-          />
-          <div className="study-auth-actions">
-            <button type="button" className="btn-primary" disabled={submitting || !newPost.trim()} onClick={submitPost}>
-              {submitting ? 'Posting...' : 'Post to Community'}
-            </button>
+        <div className="community-compose-card">
+          <UserAvatar name={communityDisplayName} url={auth.avatarUrl || undefined} size={40} />
+          <div className="community-compose-body">
+            {activeSection && (
+              <div className="community-compose-tag">
+                <span>Posting to:</span>
+                <strong>{releasedSections.find(s => s.id === activeSection)?.title ?? 'this lesson'}</strong>
+                <button type="button" className="community-compose-tag-clear" onClick={() => setActiveSection('')} aria-label="Clear lesson filter">×</button>
+              </div>
+            )}
+            <textarea
+              rows={3}
+              value={newPost}
+              onChange={e => setNewPost(e.target.value)}
+              onInput={e => { const el = e.currentTarget; el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px` }}
+              placeholder={activeSection ? `Share a thought about ${releasedSections.find(s => s.id === activeSection)?.title ?? 'this lesson'}…` : 'Share a thought with the community…'}
+              className="community-compose-textarea"
+            />
+            <div className="community-compose-footer">
+              <button type="button" className="btn-primary community-post-btn" disabled={submitting || !newPost.trim()} onClick={submitPost}>
+                {submitting ? 'Posting…' : 'Post'}
+              </button>
+            </div>
           </div>
         </div>
       )}
 
-      {message && <p className="study-note-status" style={{ marginBottom: '0.75rem' }}>{message}</p>}
-      {error && <p className="study-note-status" style={{ marginBottom: '0.75rem' }}>{error}</p>}
+      {error && <p className="community-status-msg community-status-msg--error">{error}</p>}
 
       {canParticipate && (
-        <div style={{ display: 'grid', gap: '0.85rem' }}>
+        <div className="community-posts-list">
           {loading ? (
-            <p className="study-detail-copy">Loading community posts...</p>
+            <p className="community-status-msg">Loading posts…</p>
           ) : visiblePosts.length === 0 ? (
-            <p className="study-detail-copy">No posts yet{activeSection ? ' for this lesson' : ''}. Be the first to start the conversation.</p>
+            <p className="community-status-msg">No posts yet{activeSection ? ' for this lesson' : ''}. Be the first to start the conversation.</p>
           ) : visiblePosts.map(post => {
             const postSection = study.sections.find(s => s.id === post.sectionId)
+            const isReplying = replyingTo === post.id
             return (
-              <div key={post.id} style={{ border: '1px solid #2a2518', borderRadius: '14px', padding: '1.15rem', background: '#11100d', opacity: post.pending ? 0.65 : 1, transition: 'opacity 300ms' }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap', marginBottom: '0.4rem' }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.65rem', flexWrap: 'wrap' }}>
-                    {post.authorAvatarUrl ? (
-                      <img src={post.authorAvatarUrl} alt={`${post.authorName || 'Student'} avatar`} width={28} height={28} style={{ borderRadius: '50%', border: '1px solid #2a2518' }} />
-                    ) : (
-                      <div style={{ width: 28, height: 28, borderRadius: '50%', background: '#2a2518', display: 'grid', placeItems: 'center', color: '#f0ead8', fontSize: '0.85rem', fontWeight: 700 }}>
-                        {post.authorName?.slice(0, 1).toUpperCase() || 'S'}
-                      </div>
-                    )}
-                    <strong style={{ color: '#e0c070' }}>{post.authorName || 'Student'}</strong>
+              <article key={post.id} className={`community-post-card${post.pending ? ' community-post-card--pending' : ''}`}>
+                <div className="community-post-left">
+                  <UserAvatar name={post.authorName} url={post.authorAvatarUrl} size={40} />
+                  {(post.replies?.length ?? 0) > 0 && <div className="community-thread-line" />}
+                </div>
+                <div className="community-post-body">
+                  {/* Header */}
+                  <div className="community-post-header">
+                    <span className="community-post-author">{post.authorName || 'Student'}</span>
+                    <span className="community-post-time" title={post.createdAt}>{formatRelativeTime(post.createdAt)}</span>
                     {postSection && !activeSection && (
-                      <button
-                        type="button"
-                        className="qa-topic-btn"
-                        style={{ padding: '0.2rem 0.6rem', fontSize: '0.78rem' }}
-                        onClick={() => setActiveSection(postSection.id)}
-                      >{postSection.title}</button>
+                      <button type="button" className="community-lesson-chip" onClick={() => setActiveSection(postSection.id)}>{postSection.title}</button>
                     )}
                   </div>
-                  <span className="study-note-status">{formatCommunityDate(post.createdAt)}</span>
-                </div>
-                <p className="study-detail-copy" style={{ marginTop: 0, whiteSpace: 'pre-wrap' }}>{post.message}</p>
-                <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap', marginTop: '0.75rem' }}>
-                  <button type="button" className="btn-secondary" style={{ fontSize: '0.85rem', padding: '0.35rem 0.85rem' }} onClick={() => setReplyingTo(curr => curr === post.id ? null : post.id)}>
-                    {replyingTo === post.id ? 'Cancel' : `Reply${post.replies?.length ? ` (${post.replies.length})` : ''}`}
-                  </button>
-                </div>
-                {replyingTo === post.id && canParticipate && (
-                  <div style={{ marginTop: '0.85rem' }}>
-                    <textarea
-                      rows={3}
-                      value={replyDrafts[post.id] ?? ''}
-                      onChange={e => setReplyDrafts(prev => ({ ...prev, [post.id]: e.target.value }))}
-                      onInput={e => {
-                        const el = e.currentTarget
-                        el.style.height = 'auto'
-                        el.style.height = `${el.scrollHeight}px`
-                      }}
-                      placeholder={`Reply to ${post.authorName || communityDisplayName}...`}
-                      style={{ width: '100%', padding: '0.8rem 1rem', borderRadius: '12px', border: '1px solid #2a2518', background: '#14130f', color: '#f0ead8', marginBottom: '0.75rem', resize: 'none', overflow: 'hidden' }}
-                    />
-                    <button type="button" className="btn-primary" style={{ fontSize: '0.9rem' }} disabled={submitting || !(replyDrafts[post.id] ?? '').trim()} onClick={() => submitReply(post.id)}>Post Reply</button>
+                  {/* Content */}
+                  <p className="community-post-text">{post.message}</p>
+                  {/* Engagement bar */}
+                  <div className="community-engagement-bar">
+                    <button
+                      type="button"
+                      className={`community-action-btn${post.likedByMe ? ' community-action-btn--liked' : ''}`}
+                      onClick={() => toggleLike(post.id)}
+                      aria-label={post.likedByMe ? 'Unlike' : 'Like'}
+                      disabled={post.pending}
+                    >
+                      <svg viewBox="0 0 24 24" className="community-action-icon" aria-hidden="true">
+                        <path d={post.likedByMe
+                          ? 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
+                          : 'M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'}
+                        />
+                      </svg>
+                      {(post.likeCount ?? 0) > 0 && <span>{post.likeCount}</span>}
+                    </button>
+                    <button
+                      type="button"
+                      className={`community-action-btn${isReplying ? ' community-action-btn--active' : ''}`}
+                      onClick={() => setReplyingTo(curr => curr === post.id ? null : post.id)}
+                      aria-label="Reply"
+                      disabled={post.pending}
+                    >
+                      <svg viewBox="0 0 24 24" className="community-action-icon" aria-hidden="true">
+                        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" />
+                      </svg>
+                      {(post.replies?.length ?? 0) > 0 && <span>{post.replies!.length}</span>}
+                    </button>
                   </div>
-                )}
-                {Array.isArray(post.replies) && post.replies.length > 0 && (
-                  <div style={{ marginTop: '1rem', display: 'grid', gap: '0.65rem' }}>
-                    {post.replies.map(reply => (
-                      <div key={reply.id} style={{ borderLeft: '2px solid #2a2518', paddingLeft: '0.85rem' }}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
-                          <div style={{ display: 'flex', alignItems: 'center', gap: '0.55rem', flexWrap: 'wrap' }}>
-                      {reply.authorAvatarUrl ? (
-                        <img src={reply.authorAvatarUrl} alt={`${reply.authorName || 'Student'} avatar`} width={22} height={22} style={{ borderRadius: '50%', border: '1px solid #2a2518' }} />
-                      ) : (
-                        <div style={{ width: 22, height: 22, borderRadius: '50%', background: '#2a2518', display: 'grid', placeItems: 'center', color: '#f0ead8', fontSize: '0.75rem', fontWeight: 700 }}>
-                          {reply.authorName?.slice(0, 1).toUpperCase() || 'S'}
+                  {/* Reply compose */}
+                  {isReplying && (
+                    <div className="community-reply-compose">
+                      <UserAvatar name={communityDisplayName} url={auth.avatarUrl || undefined} size={30} />
+                      <div style={{ flex: 1 }}>
+                        <textarea
+                          rows={2}
+                          autoFocus
+                          value={replyDrafts[post.id] ?? ''}
+                          onChange={e => setReplyDrafts(prev => ({ ...prev, [post.id]: e.target.value }))}
+                          onInput={e => { const el = e.currentTarget; el.style.height = 'auto'; el.style.height = `${el.scrollHeight}px` }}
+                          placeholder={`Reply to ${post.authorName || 'this post'}…`}
+                          className="community-compose-textarea"
+                        />
+                        <div style={{ display: 'flex', gap: '0.5rem', marginTop: '0.5rem' }}>
+                          <button type="button" className="btn-primary" style={{ fontSize: '0.875rem', padding: '0.35rem 0.9rem' }} disabled={submitting || !(replyDrafts[post.id] ?? '').trim()} onClick={() => submitReply(post.id)}>Reply</button>
+                          <button type="button" className="btn-secondary" style={{ fontSize: '0.875rem', padding: '0.35rem 0.9rem' }} onClick={() => setReplyingTo(null)}>Cancel</button>
                         </div>
-                      )}
-                      <strong style={{ color: '#c9a84c', fontSize: '0.95rem' }}>{reply.authorName || 'Student'}</strong>
-                    </div>
-                          <span className="study-note-status">{formatCommunityDate(reply.createdAt)}</span>
-                        </div>
-                        <p className="study-detail-copy" style={{ margin: '0.25rem 0 0', whiteSpace: 'pre-wrap' }}>{reply.message}</p>
                       </div>
-                    ))}
-                  </div>
-                )}
-              </div>
+                    </div>
+                  )}
+                  {/* Replies */}
+                  {Array.isArray(post.replies) && post.replies.length > 0 && (
+                    <div className="community-replies">
+                      {post.replies.map(reply => (
+                        <div key={reply.id} className="community-reply">
+                          <UserAvatar name={reply.authorName} url={reply.authorAvatarUrl} size={28} />
+                          <div className="community-reply-body">
+                            <div className="community-post-header">
+                              <span className="community-post-author">{reply.authorName || 'Student'}</span>
+                              <span className="community-post-time">{formatRelativeTime(reply.createdAt)}</span>
+                            </div>
+                            <p className="community-post-text">{reply.message}</p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </article>
             )
           })}
         </div>

From 53e200174f768f8c5fe96a8c64fad7435abaabe4 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 16:38:38 -0400
Subject: [PATCH 5/6] Add community shortcut to lesson sidebar; v1.2.7

Adds a "Discuss this lesson" link in the classroom sidebar that takes
the user directly to the community page pre-filtered to the current
lesson's sectionId, so they can jump into discussion without navigating
back to the study index first.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json            |  2 +-
 src/App.css             |  8 ++++++++
 src/colossiansStudy.tsx | 11 +++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9e6d173..e9ade0e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.css b/src/App.css
index 4ba82cc..5d3f188 100644
--- a/src/App.css
+++ b/src/App.css
@@ -12620,3 +12620,11 @@
   .community-compose-card { padding: 0.9rem 1rem; }
   .community-post-card { gap: 0.55rem; padding: 0.85rem 0; }
 }
+
+/* ── Community sidebar shortcut ─────────────────────────────────────────── */
+.study-class-side-block--community { padding: 0; border: 1px solid rgba(201,168,76,0.2); border-radius: 10px; overflow: hidden; }
+.study-community-shortcut { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; color: var(--brand-gold, #c9a84c); font-size: 0.9rem; font-weight: 600; text-decoration: none; background: rgba(201,168,76,0.05); transition: background 0.15s; }
+.study-community-shortcut:hover { background: rgba(201,168,76,0.12); }
+.study-community-shortcut-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
+.study-community-shortcut-arrow { margin-left: auto; opacity: 0.6; transition: transform 0.15s; }
+.study-community-shortcut:hover .study-community-shortcut-arrow { transform: translateX(3px); opacity: 1; }
diff --git a/src/colossiansStudy.tsx b/src/colossiansStudy.tsx
index d8e5149..83e3d0c 100644
--- a/src/colossiansStudy.tsx
+++ b/src/colossiansStudy.tsx
@@ -2266,6 +2266,17 @@ export function ColossiansStudySectionPage({ content }: Props) {
               )}
             </article>
 
+            {/* Community shortcut */}
+            {isEnrolled && (
+              <article className="study-class-side-block study-class-side-block--community">
+                <Link to={`/study/${study.slug}/community?sectionId=${section.id}`} className="study-community-shortcut">
+                  <svg viewBox="0 0 24 24" aria-hidden="true" className="study-community-shortcut-icon"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z" /></svg>
+                  <span>Discuss this lesson</span>
+                  <span className="study-community-shortcut-arrow">→</span>
+                </Link>
+              </article>
+            )}
+
             {/* Greek Word Study */}
             {section.greekNotes.length > 0 && (
               <article className="study-class-side-block">

From e35e5d55bb1a70ce86970575372698ec3ea46772 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 3 Sep 2026 16:41:18 -0400
Subject: [PATCH 6/6] Bump to v2.0.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e9ade0e..7867ecd 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.2.7",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",