bible270 0.18.3 → 1.0.0

data/app/views/bible270/days/_start_date.html.erb

@@ -13,7 +13,7 @@
         · <em>the 270 days have elapsed</em>
       <% elsif (off = reader.days_off_pace) %>
         <% if off > 0 %>
-          · <em><%= off %> day<%= "s" unless off == 1 %> behind</em>
+          · <em>reading at your own pace</em>
         <% elsif off < 0 %>
           · <em><%= -off %> day<%= "s" unless off == -1 %> ahead</em>
         <% else %>

data/app/views/bible270/days/index.html.erb

@@ -1,26 +1,34 @@
 <% content_for :title, Bible270.config.app_name %>
 <p class="b270-eyebrow"><%= Bible270.config.tagline %></p>
 <h1><%= Bible270.config.app_name %> <em>— read God's whole story</em></h1>
-<p class="lede">Daily passages from the Old Testament, New Testament, and Psalms or Proverbs — portions sized to take about the same time to read. Check off what you read; your place is saved for you, and you can see how your friends are progressing as well.</p>
+<p class="lede">Daily passages from the Old Testament, New Testament, and Psalms or Proverbs — portions sized to take about the same time to read. Check off what you read; your place is saved for you, and you can share reflections and encourage one another along the way.</p>
 
 <%= render "bible270/shared/progress" %>
 
 <% if @readers.any? %>
-  <% rankings= @readers.count < 5 ? @readers.count : 5 %>
-  <h2 class="b270-section-h">Reader Leaders</h2>
+  <h2 class="b270-section-h">Reading together</h2>
+  <p class="b270-community-intro">
+    Showing <%= [@readers.size, 5].min %> of <%= pluralize(@readers.size, "reader") %>, ordered by recent
+    checkoffs and reflections; new readers by join date.
+  </p>
   <div class="b270-list">
-    <% @readers.first(rankings).each_with_index do |r, i| %>
+    <% @readers.first(5).each do |r| %>
       <div class="b270-li">
-        <span class="rank"><%= i + 1 %></span>
         <%= b270_avatar(r) %>
         <div>
           <div class="name"><%= link_to r.display_name, reader_path(r), style: "text-decoration:none" %></div>
           <% day_word = @days_completed[r.id] == 1 ? "day" : "days" %>
-          <div class="sub"><%= @days_completed[r.id] %> <%= day_word %> read</div>
+          <% activity = @reader_activity.fetch(r.id) %>
+          <% activity_verb = { reading: "read", reflection: "reflected", joined: "joined" }.fetch(activity[:kind]) %>
+          <div class="sub">
+            <%= @days_completed[r.id] %> <%= day_word %> read ·
+            <span class="b270-reader-activity"><%= activity_verb %>
+              <time datetime="<%= activity[:at].iso8601 %>" title="<%= b270_datetime(activity[:at]) %>"><%= time_ago_in_words(activity[:at]) %> ago</time>
+            </span>
+          </div>
         </div>
-        <div class="stat"><span class="big"><%= (@days_completed[r.id].to_f / Bible270::Plan::DAYS * 100).round %>%</span></div>
       </div>
     <% end %>
   </div>
-  <p style="margin:12px 0 0"><%= link_to "See everyone →", community_path %></p>
+  <p style="margin:12px 0 0"><%= link_to "Meet the community →", community_path %></p>
 <% end %>

data/app/views/bible270/days/show.html.erb

@@ -1,50 +1,46 @@
 <% content_for :title, "Day #{@day} — #{Bible270.config.app_name}" %>
-<div class="b270-daynav">
-  <%= link_to "‹", (@prev_day ? day_path(@prev_day) : "#"), class: "b270-arrow #{'disabled' unless @prev_day}", "aria-label": "Previous day" %>
-  <div class="b270-dayhead">
-    <div class="k">Day <%= @day %><% if signed_in? && current_reader.day_complete?(@day) %><span class="b270-badge">Complete</span><% end %></div>
-    <% if signed_in? && current_reader.dated? %>
-      <div class="date">
-        <%= current_reader.date_for_day(@day).strftime("%A, %B %-d, %Y") %>
-        <% if current_reader.today?(@day) %><span class="b270-badge">Today</span><% end %>
-      </div>
-    <% end %>
+
+<div class="b270-day-page" data-b270-day-page data-b270-reading-mode="full">
+  <%= render "bible270/days/day_progress", day: @day, reader: current_reader %>
+
+  <div class="b270-reading-options" data-b270-reading-options hidden>
+    <button type="button" class="b270-linkbtn b270-reading-mode-toggle"
+            data-b270-compact-toggle aria-pressed="false">Compact reading</button>
   </div>
-  <%= link_to "›", (@next_day ? day_path(@next_day) : "#"), class: "b270-arrow #{'disabled' unless @next_day}", "aria-label": "Next day" %>
-</div>
 
-<div id="readings" class="b270-readings">
-  <%= render partial: "bible270/days/reading", collection: %w[ot nt pp],
-             as: :track, locals: { day: @day, readings: @readings, reader_tracks: @reader_tracks } %>
-</div>
+  <%= render "bible270/shared/interaction_status" %>
 
-<% unless signed_in? %>
-  <p class="b270-signin-hint" style="margin-top:12px"><%= link_to "Sign in", sign_in_path(origin: request.fullpath) %> to check off these readings.</p>
-<% end %>
-
-<div class="b270-completers" id="completers_<%= @day %>">
-  <% if @completers.any? %>
-    <span>Finished this day:</span>
-    <% @completers.first(12).each { |r| %><%= link_to b270_avatar(r), reader_path(r), title: r.display_name %><% } %>
-    <% if @completers.size > 12 %><span><%= @completers.size - 12 %> more</span><% end %>
-  <% else %>
-    <span>No one has finished this day yet — be the first.</span>
-  <% end %>
-</div>
+  <div id="readings" class="b270-readings">
+    <%= render partial: "bible270/days/reading", collection: %w[ot nt pp],
+               as: :track, locals: { day: @day, readings: @readings, reader_tracks: @reader_tracks } %>
+  </div>
 
-<h2 class="b270-section-h">Reflections</h2>
-<div id="comments">
-  <% if @comments.any? %>
-    <%= render partial: "bible270/comments/comment", collection: @comments, as: :comment %>
-  <% else %>
-    <p style="color:var(--faint)" id="no_comments">No reflections yet. Share the first.</p>
+  <% unless signed_in? %>
+    <p class="b270-signin-hint" style="margin-top:12px"><%= link_to "Sign in", sign_in_path(origin: request.fullpath) %> to check off these readings.</p>
   <% end %>
-</div>
 
-<% if signed_in? %>
-  <div style="margin-top:18px">
-    <%= render "bible270/comments/form", day: @day, comment: @new_comment %>
+  <div class="b270-day-community" data-b270-compact-hide>
+    <%= render "bible270/days/completers", day: @day, completers: @completers %>
+
+    <h2 class="b270-section-h">Reflections</h2>
+    <div id="comments">
+      <% if @comments.any? %>
+        <%= render partial: "bible270/comments/comment", collection: @comments, as: :comment %>
+      <% else %>
+        <p style="color:var(--faint)" id="no_comments">No reflections yet. Share the first.</p>
+      <% end %>
+    </div>
+
+    <% if signed_in? %>
+      <div style="margin-top:18px">
+        <%= render "bible270/comments/form", day: @day, comment: @new_comment %>
+      </div>
+      <%= render "bible270/shared/comment_drafts" %>
+    <% else %>
+      <p class="b270-signin-hint" style="margin-top:14px"><%= link_to "Sign in", sign_in_path(origin: request.fullpath) %> to leave a reflection.</p>
+    <% end %>
   </div>
-<% else %>
-  <p class="b270-signin-hint" style="margin-top:14px"><%= link_to "Sign in", sign_in_path(origin: request.fullpath) %> to leave a reflection.</p>
-<% end %>
+</div>
+
+<%= render "bible270/shared/reading_mode" %>
+<%= render "bible270/shared/interaction_ui" %>

data/app/views/bible270/likes/_likes.html.erb

@@ -15,7 +15,11 @@
 
   <% if signed_in? %>
     <%= button_to like_comment_path(comment), method: :post, class: "b270-likebtn#{' liked' if likes.any?}",
-          form: { style: "display:inline", data: { turbo_stream: true } },
+          params: { liked: liked ? "0" : "1" },
+          form: { style: "display:inline",
+                  data: { turbo_stream: true, b270_submit: true, b270_pending: "Saving like…",
+                          b270_success: (liked ? "Like removed." : "Reflection liked."),
+                          b270_failure: "Couldn’t update that like. Try again." } },
           aria: {
             label: liked ? "Take back your like" : "Like this reflection",
             describedby: (tooltip_id if likes.any?)

data/app/views/bible270/notice_mailer/daily_reminder.html.erb

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <body style="margin:0;padding:24px;background:#ece6da;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#231f18">
+    <div style="max-width:520px;margin:0 auto;background:#f4efe6;border:1px solid #d7cfbf;border-radius:14px;padding:28px">
+      <h1 style="margin:0 0 6px;font-family:Georgia,serif;font-size:20px;font-weight:600">
+        Day <%= @day %> is ready, <%= @reader.first_name.presence || @reader.display_name %>
+      </h1>
+      <p style="margin:0 0 18px;font-size:14px;color:#6d6558">
+        <%= @on.strftime("%A, %B %-d, %Y") %> · <%= @app_name %>
+      </p>
+
+      <ul style="margin:0;padding-left:22px;font-size:15px;line-height:1.7">
+        <% @readings.each do |track, reference| %>
+          <li><strong><%= Bible270::Plan::TRACKS.fetch(track).fetch(:label) %>:</strong> <%= reference %></li>
+        <% end %>
+      </ul>
+
+      <% if @day_url %>
+        <p style="margin:20px 0 0">
+          <a href="<%= @day_url %>" style="display:inline-block;background:#231f18;color:#ece6da;text-decoration:none;padding:10px 18px;border-radius:10px;font-weight:600;font-size:14px">Open day <%= @day %></a>
+        </p>
+      <% end %>
+
+      <p style="margin:22px 0 0;font-size:12px;color:#9a9082">
+        You opted in to daily reading reminders.
+        <% if @profile_url %><a href="<%= @profile_url %>" style="color:#6d6558">Change this in your profile</a>.<% end %>
+      </p>
+    </div>
+  </body>
+</html>

data/app/views/bible270/notice_mailer/daily_reminder.text.erb

@@ -0,0 +1,14 @@
+Day <%= @day %> is ready, <%= @reader.first_name.presence || @reader.display_name %>.
+<%= @on.strftime("%A, %B %-d, %Y") %> · <%= @app_name %>
+
+<% @readings.each do |track, reference| %>
+<%= Bible270::Plan::TRACKS.fetch(track).fetch(:label) %>: <%= reference %>
+<% end %>
+<% if @day_url %>
+Open day <%= @day %>: <%= @day_url %>
+<% end %>
+--
+You opted in to daily reading reminders.
+<% if @profile_url %>
+Change this in your profile: <%= @profile_url %>
+<% end %>

data/app/views/bible270/notice_mailer/mentioned.html.erb

@@ -21,7 +21,6 @@
 
       <p style="margin:22px 0 0;font-size:12px;color:#9a9082">
         You are getting this because someone wrote your name in a reflection.
-        You can turn these off on your profile page.
       </p>
     </div>
   </body>

data/app/views/bible270/notice_mailer/mentioned.text.erb

@@ -8,5 +8,4 @@ Read it and reply: <%= @day_url %>
 You can find it on day <%= @comment.day %> of <%= @app_name %>.
 <% end %>
 --
-You are getting this because someone wrote your name in a reflection. You can
-turn these off on your profile page.
+You are getting this because someone wrote your name in a reflection.

data/app/views/bible270/profiles/edit.html.erb

@@ -1,6 +1,6 @@
-<% content_for :title, "Your profile — #{Bible270.config.app_name}" %>
-<p class="b270-eyebrow">Your details</p>
-<h1>Your profile</h1>
+<% content_for :title, "Profile — #{Bible270.config.app_name}" %>
+<p class="b270-eyebrow">Profile</p>
+<h1>Your details</h1>
 <p class="lede">This is how you appear beside your reflections and on the community page.</p>
 
 <div class="b270-panel">
@@ -19,10 +19,6 @@
       <% end %>
     </div>
 
-    <label class="b270-field" style="flex-direction:row;align-items:center;gap:10px">
-      <%= check_box_tag :notify_on_mention, "1", current_reader.notify_on_mention %>
-      <span style="margin:0">Email me when someone mentions me in a reflection</span>
-    </label>
 
     <label class="b270-field">
       <span>First name</span>
@@ -41,6 +37,43 @@
     </label>
     <%= render "bible270/shared/passage_source", reader: current_reader %>
 
+    <% if @daily_reminders_available %>
+      <% reminder_hour, reminder_minute = @daily_reminder_time.to_s.split(":", 2) %>
+      <div class="b270-field">
+        <span>Daily reading reminder</span>
+        <div class="b270-reminder-row">
+          <label class="b270-reminder-optin">
+            <%= check_box_tag :daily_reminders, "1", @daily_reminders,
+                  aria: { describedby: "daily-reminder-optin-hint" } %>
+            <span>Email me each day's readings</span>
+            <span class="b270-reminder-tooltip" id="daily-reminder-optin-hint" role="tooltip">
+              Uses the plan's configured time zone. You can turn reminders off here at any time.
+            </span>
+          </label>
+          <div class="b270-reminder-time">
+            <span>at</span>
+            <span class="b270-time-control" role="group" aria-label="Reminder time"
+                  aria-describedby="daily-reminder-time-hint">
+              <%= select_tag :daily_reminder_hour,
+                    options_for_select((0..23).map { |hour| format("%02d", hour) }, reminder_hour),
+                    class: "b270-time-select", required: true, aria: { label: "Hour" } %>
+              <span class="b270-time-separator" aria-hidden="true">:</span>
+              <%= select_tag :daily_reminder_minute,
+                    options_for_select((0..59).map { |minute| format("%02d", minute) }, reminder_minute),
+                    class: "b270-time-select", required: true, aria: { label: "Minute" } %>
+              <span class="b270-reminder-tooltip" id="daily-reminder-time-hint" role="tooltip">
+                Uses the plan's configured time zone. You can turn reminders off here at any time.
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    <% elsif Bible270.config.daily_reminders? %>
+      <p class="b270-flash alert" style="margin:0">
+        Daily reminders are temporarily unavailable while this installation finishes a database update.
+      </p>
+    <% end %>
+
     <%= submit_tag "Save", class: "b270-btn" %>
   <% end %>
 
@@ -55,4 +88,4 @@
   <% end %>
 </div>
 
-<p style="margin-top:18px"><%= link_to "← Back to your progress", reader_path(current_reader) %></p>
+<p style="margin-top:18px"><%= link_to "← Back to your progress", progress_path %></p>

data/app/views/bible270/readers/_next_steps.html.erb

@@ -0,0 +1,63 @@
+<%# locals: (reader:, partial_day_tasks:, remaining_partial_days:, week_days:, week_completed:, next_milestone:, days_to_milestone:) %>
+<div class="b270-panel b270-next-steps">
+  <h2 class="b270-subhead">Your next steps</h2>
+
+  <section class="b270-next-section" aria-labelledby="finish-started-heading">
+    <h3 id="finish-started-heading">Finish what you started</h3>
+    <% if partial_day_tasks.any? %>
+      <ul class="b270-task-list">
+        <% partial_day_tasks.each do |task| %>
+          <% day = task[:day] %>
+          <% first_track = task[:remaining].first&.fetch(:track) %>
+          <li class="b270-task">
+            <div class="b270-task-body">
+              <strong><%= link_to "Day #{day}", day_path(day, anchor: "reading_#{day}_#{first_track}") %></strong>
+              <span>
+                Still to read:
+                <%= safe_join(task[:remaining].map { |part|
+                      link_to(part[:reference], day_path(day, anchor: "reading_#{day}_#{part[:track]}"))
+                    }, " · ") %>
+              </span>
+            </div>
+            <%= link_to "Continue →", day_path(day, anchor: "reading_#{day}_#{first_track}"),
+                  class: "b270-task-link" %>
+          </li>
+        <% end %>
+      </ul>
+      <% if remaining_partial_days.positive? %>
+        <p class="b270-next-note"><%= remaining_partial_days %> more partially read
+          <%= "day".pluralize(remaining_partial_days) %> are highlighted in the grid below.</p>
+      <% end %>
+    <% else %>
+      <p class="b270-next-note">No partially read days. Your next reading is ready above.</p>
+    <% end %>
+  </section>
+
+  <section class="b270-next-section" aria-labelledby="this-week-heading">
+    <h3 id="this-week-heading">This week</h3>
+    <% if week_days.any? %>
+      <p class="b270-week-count"><strong><%= week_completed %> of <%= week_days.size %></strong>
+        scheduled <%= "day".pluralize(week_days.size) %> complete so far this week</p>
+      <progress class="b270-week-progress" value="<%= week_completed %>" max="<%= week_days.size %>"
+                aria-label="<%= week_completed %> of <%= week_days.size %> scheduled days complete this week"></progress>
+    <% elsif reader.dated? %>
+      <p class="b270-next-note">No plan days are scheduled so far this week.</p>
+    <% elsif Bible270.config.allow_reader_start_date %>
+      <p class="b270-next-note">Set a start date to see your weekly progress.</p>
+    <% else %>
+      <p class="b270-next-note">This plan is not tied to calendar dates.</p>
+    <% end %>
+  </section>
+
+  <section class="b270-next-section" aria-labelledby="milestone-heading">
+    <h3 id="milestone-heading">Next milestone</h3>
+    <% if next_milestone %>
+      <% milestone_day, milestone_label = next_milestone %>
+      <p class="b270-milestone"><strong><%= milestone_day %> days</strong> · <%= milestone_label %></p>
+      <p class="b270-next-note"><%= days_to_milestone %>
+        <%= "day".pluralize(days_to_milestone) %> to go.</p>
+    <% else %>
+      <p class="b270-milestone"><strong>All <%= Bible270::Plan::DAYS %> days complete.</strong></p>
+    <% end %>
+  </section>
+</div>

data/app/views/bible270/readers/index.html.erb

@@ -1,20 +1,17 @@
 <% content_for :title, "Community — #{Bible270.config.app_name}" %>
-<p class="b270-eyebrow">Reading together</p>
-<h1>The community</h1>
-<p class="lede">Everyone walking through the Word, seeing each pilgrim's progress.</p>
+<p class="b270-eyebrow">Community</p>
+<h1>Reading together</h1>
+<p class="lede">A community walking through the Word, sharing reflections and encouraging one another.</p>
 
 <% if @readers.any? %>
   <div class="b270-list">
-    <% @readers.each_with_index do |r, i| %>
+    <% @readers.each do |r| %>
       <div class="b270-li">
-        <span class="rank"><%= i + 1 %></span>
         <%= b270_avatar(r, size: 72) %>
         <div>
           <div class="name"><%= link_to r.display_name, reader_path(r), style: "text-decoration:none" %></div>
-          <div class="sub"><%= @days_completed[r.id] %> of <%= Bible270::Plan::DAYS %> days · joined <%= Bible270.local_time(r.created_at).strftime("%b %Y") %></div>
-        </div>
-        <div class="stat">
-          <span class="big"><%= (@days_completed[r.id].to_f / Bible270::Plan::DAYS * 100).round %>%</span>
+          <% day_word = @days_completed[r.id] == 1 ? "day" : "days" %>
+          <div class="sub"><%= @days_completed[r.id] %> <%= day_word %> read · joined <%= Bible270.local_time(r.created_at).strftime("%b %Y") %></div>
         </div>
       </div>
     <% end %>

data/app/views/bible270/readers/progress.html.erb

@@ -1,11 +1,21 @@
-<% content_for :title, "Your progress — #{Bible270.config.app_name}" %>
+<% content_for :title, "My Progress — #{Bible270.config.app_name}" %>
 <% content_for :hide_day_index, true %><%# the panel is followed by its own grid below %>
 
-<p class="b270-eyebrow">Your progress</p>
-<h1><%= @reader ? @reader.display_name : "Your progress" %></h1>
+<p class="b270-eyebrow">My Progress</p>
+<h1>Your reading journey</h1>
 
 <%= render "bible270/shared/progress" %>
 
+<% if @reader %>
+  <%= render "bible270/readers/next_steps", reader: @reader,
+        partial_day_tasks: @partial_day_tasks,
+        remaining_partial_days: @remaining_partial_days,
+        week_days: @week_days,
+        week_completed: @week_completed,
+        next_milestone: @next_milestone,
+        days_to_milestone: @days_to_milestone %>
+<% end %>
+
 <div class="b270-panel">
   <%= render "bible270/shared/reflections", comments: @recent_comments,
         title: "Your recent reflections",

data/app/views/bible270/shared/_comment_drafts.html.erb

@@ -0,0 +1,169 @@
+<script nonce="<%= content_security_policy_nonce %>">
+  (() => {
+    if (window.Bible270Drafts) {
+      window.Bible270Drafts.scan();
+      return;
+    }
+
+    const maxAge = 30 * 24 * 60 * 60 * 1000;
+    const pendingKey = "bible270:draft:pending";
+
+    function browserStorage(name) {
+      try { return window[name]; } catch (_error) { return null; }
+    }
+
+    const local = browserStorage("localStorage");
+    const session = browserStorage("sessionStorage");
+    const storage = {
+      get(area, key) {
+        if (!area) return null;
+        try { return area.getItem(key); } catch (_error) { return null; }
+      },
+      set(area, key, value) {
+        if (!area) return;
+        try { area.setItem(key, value); } catch (_error) { /* Drafts degrade safely. */ }
+      },
+      remove(area, key) {
+        if (!area) return;
+        try { area.removeItem(key); } catch (_error) { /* Drafts degrade safely. */ }
+      }
+    };
+
+    function readDraft(key) {
+      const raw = storage.get(local, key);
+      if (!raw) return null;
+
+      try {
+        const draft = JSON.parse(raw);
+        if (typeof draft.body !== "string" || typeof draft.savedAt !== "number" ||
+            Date.now() - draft.savedAt > maxAge) {
+          storage.remove(local, key);
+          return null;
+        }
+        return draft;
+      } catch (_error) {
+        storage.remove(local, key);
+        return null;
+      }
+    }
+
+    function setStatus(form, message) {
+      const status = form.querySelector("[data-b270-draft-status]");
+      if (status) status.textContent = message;
+    }
+
+    function save(form) {
+      const key = form.dataset.b270DraftKey;
+      const body = form.querySelector("textarea[name='comment[body]']");
+      const track = form.querySelector("select[name='comment[track]']");
+      if (!key || !body) return;
+
+      if (!body.value.trim()) {
+        storage.remove(local, key);
+        setStatus(form, "");
+        return;
+      }
+
+      const trackValue = track ? track.value : "";
+      const current = readDraft(key);
+      if (current && current.body === body.value && current.track === trackValue) {
+        setStatus(form, "Draft saved in this browser.");
+        return;
+      }
+
+      const draft = {
+        body: body.value,
+        track: trackValue,
+        savedAt: Date.now(),
+        revision: `${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}`
+      };
+      storage.set(local, key, JSON.stringify(draft));
+      setStatus(form, "Draft saved in this browser.");
+    }
+
+    function settlePending(key = null) {
+      const raw = storage.get(session, pendingKey);
+      if (!raw) return;
+
+      try {
+        const pending = JSON.parse(raw);
+        if (key && pending.key !== key) return;
+        const current = readDraft(pending.key);
+        if (current && current.revision === pending.revision) {
+          storage.remove(local, pending.key);
+        }
+      } catch (_error) {
+        // A malformed pending marker should never prevent the form from working.
+      }
+      storage.remove(session, pendingKey);
+    }
+
+    function rememberSubmission(form) {
+      save(form);
+      const key = form.dataset.b270DraftKey;
+      const draft = readDraft(key);
+      if (draft) {
+        storage.set(session, pendingKey, JSON.stringify({ key, revision: draft.revision }));
+      }
+    }
+
+    function restore(form) {
+      if (form.dataset.b270DraftErrors === "true") return;
+
+      const draft = readDraft(form.dataset.b270DraftKey);
+      if (!draft) return;
+
+      const body = form.querySelector("textarea[name='comment[body]']");
+      const track = form.querySelector("select[name='comment[track]']");
+      if (body) body.value = draft.body;
+      if (track && Array.from(track.options).some((option) => option.value === draft.track)) {
+        track.value = draft.track;
+      }
+      setStatus(form, "Draft restored from this browser.");
+    }
+
+    function initialize(form) {
+      if (form.dataset.b270DraftReady === "true") return;
+      form.dataset.b270DraftReady = "true";
+
+      if (form.dataset.b270DraftPosted === "true") {
+        settlePending(form.dataset.b270DraftKey);
+      } else {
+        restore(form);
+      }
+
+      form.addEventListener("input", () => save(form));
+      form.addEventListener("change", () => save(form));
+      form.addEventListener("submit", () => rememberSubmission(form));
+    }
+
+    function scan() {
+      document.querySelectorAll("form[data-b270-draft='true']").forEach(initialize);
+    }
+
+    if (/^#comment-\d+$/.test(window.location.hash)) {
+      settlePending();
+    } else {
+      storage.remove(session, pendingKey);
+    }
+    scan();
+
+    new MutationObserver(scan).observe(document.documentElement, { childList: true, subtree: true });
+    window.addEventListener("pageshow", scan);
+    window.addEventListener("pagehide", () => {
+      document.querySelectorAll("form[data-b270-draft='true']").forEach(save);
+    });
+    document.addEventListener("turbo:submit-end", (event) => {
+      const form = event.target;
+      if (!form.matches("form[data-b270-draft='true']")) return;
+
+      if (event.detail.success) {
+        settlePending(form.dataset.b270DraftKey);
+      } else {
+        storage.remove(session, pendingKey);
+      }
+    });
+
+    window.Bible270Drafts = { scan };
+  })();
+</script>

data/app/views/bible270/shared/_day_index.html.erb

@@ -2,7 +2,7 @@
   <details class="b270-index">
     <summary>All <%= Bible270::Plan::DAYS %> days</summary>
     <div class="b270-grid">
-      <% today = signed_in? ? current_reader.current_day : nil %>
+      <% today = signed_in? ? current_reader.today_day : nil %>
       <% (1..Bible270::Plan::DAYS).each do |d| %>
         <%= b270_day_cell(d, reader: current_reader, today: today) %>
       <% end %>

data/app/views/bible270/shared/_header.html.erb

@@ -8,22 +8,19 @@
       </span>
     <% end %>
   </div>
-  <nav class="b270-nav">
-    <!--<%= link_to "Plan", root_path %>-->
-    <%= link_to "People", community_path %>
-    <%# Public, like the community page: anyone may read reflections. %>
-    <%= link_to "Posts", reflections_path %>
-    <% if signed_in? %>
-      <%= link_to "Progress", progress_path %>
-      <%= link_to "Profile", profile_path %>
-      <% if Bible270.config.admin?(current_reader) %><%= link_to "Admin", admin_path %><% end %>
-      <%= button_to "Sign out", sign_out_path, method: :delete, class: "b270-linkbtn",
-            form: { style: "display:inline" } %>
-    <% elsif Bible270.config.any_sign_in_method? %>
-      <%# Always route to the sign-in page: it offers email as well as any
-          social providers, so nobody is shut out. OmniAuth's own request phase
-          rejects GET, so its buttons live on that page as POST forms. %>
-      <%= link_to "Sign in", sign_in_path(origin: request.fullpath), class: "b270-signin" %>
-    <% end %>
+  <nav class="b270-nav" aria-label="Primary navigation">
+    <div class="b270-desktopnav">
+      <%= render "bible270/shared/nav_links" %>
+    </div>
+    <details class="b270-navmenu">
+      <summary class="b270-navtoggle" aria-label="Menu">
+        <span class="b270-menuicon" aria-hidden="true">
+          <span></span><span></span><span></span>
+        </span>
+      </summary>
+      <div class="b270-navlinks">
+        <%= render "bible270/shared/nav_links" %>
+      </div>
+    </details>
   </nav>
 </header>

data/app/views/bible270/shared/_interaction_status.html.erb

@@ -0,0 +1,2 @@
+<p id="b270-interaction-status" class="b270-interaction-status" role="status"
+   aria-live="polite" aria-atomic="true"><%= flash[:b270_interaction_status] %></p>