bible270 1.4.1 → 1.5.0

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

@@ -2,9 +2,8 @@
 <div class="b270-completers" id="completers_<%= day %>">
   <% if completers.any? %>
     <span>Finished this day:</span>
-    <% completers.first(12).each do |reader| %>
-      <%= link_to b270_avatar(reader), reader_path(reader), title: reader.display_name %>
+    <% completers.each do |reader| %>
+      <%= link_to b270_avatar(reader, size: 56), reader_path(reader), title: reader.display_name %>
     <% end %>
-    <% if completers.size > 12 %><span><%= completers.size - 12 %> more</span><% end %>
   <% end %>
 </div>

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

@@ -1,4 +1,4 @@
-<%# locals: (day:, reader:, just_completed: false) %>
+<%# locals: (day:, reader:, just_completed: false, completion_event_id: nil) %>
 <%
   previous_day = day > 1 ? day - 1 : nil
   next_day = day < Bible270::Plan::DAYS ? day + 1 : nil
@@ -33,7 +33,9 @@
 
 
   <% if complete %>
-    <%= render "bible270/shared/day_completion_dove", day: day if just_completed %>
+    <% if just_completed && completion_event_id && !reader&.completion_dove_disabled? %>
+      <%= render "bible270/shared/day_completion_dove", day: day, completion_event_id: completion_event_id %>
+    <% end %>
     <div class="b270-day-complete" role="status" aria-live="polite"
          <%= tag.attributes(data: completion_data) %>>
       <div>

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

@@ -2,7 +2,7 @@
 
 <div class="b270-day-page">
   <%= render "bible270/days/day_progress", day: @day, reader: current_reader,
-        just_completed: @day_just_completed %>
+        just_completed: @day_just_completed, completion_event_id: @completion_event_id %>
 
   <%= render "bible270/shared/interaction_status" %>
 
@@ -16,8 +16,6 @@
   <% end %>
 
   <div class="b270-day-community">
-    <%= render "bible270/days/completers", day: @day, completers: @completers %>
-
     <h2 class="b270-section-h">Reflections</h2>
     <div id="comments">
       <%= render partial: "bible270/comments/comment", collection: @comments, as: :comment %>
@@ -29,7 +27,10 @@
       </div>
       <%= render "bible270/shared/comment_drafts" %>
       <%= render "bible270/shared/mention_typeahead" %>
+      <%= render "bible270/shared/markdown_toolbar" %>
     <% end %>
+
+    <%= render "bible270/days/completers", day: @day, completers: @completers %>
   </div>
 </div>
 

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

@@ -10,7 +10,7 @@
       </p>
 
       <blockquote style="margin:0;padding:14px 16px;background:#ece6da;border-left:3px solid #a5812c;border-radius:8px;font-size:15px;line-height:1.55">
-        <%= simple_format(@comment.body) %>
+        <%= b270_comment_body(@comment, link_mentions: false) %>
       </blockquote>
 
       <% if @day_url %>

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

@@ -1,6 +1,6 @@
 <%= @introduction %>
 
-<%= @comment.body %>
+<%= b270_comment_text(@comment) %>
 
 <% if @day_url %>
 Read it and reply: <%= @day_url %>

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

@@ -56,6 +56,7 @@
       const key = form.dataset.b270DraftKey;
       const body = form.querySelector("textarea[name='comment[body]']");
       const track = form.querySelector("select[name='comment[track]']");
+      const format = form.querySelector("[data-b270-body-format]");
       if (!key || !body) return;
 
       if (!body.value.trim()) {
@@ -65,8 +66,10 @@
       }
 
       const trackValue = track ? track.value : "";
+      const bodyFormat = format ? format.value : null;
       const current = readDraft(key);
-      if (current && current.body === body.value && current.track === trackValue) {
+      if (current && current.body === body.value && current.track === trackValue &&
+          current.bodyFormat === bodyFormat) {
         setStatus(form, "Draft saved in this browser.");
         return;
       }
@@ -74,6 +77,7 @@
       const draft = {
         body: body.value,
         track: trackValue,
+        bodyFormat,
         savedAt: Date.now(),
         revision: `${Date.now().toString(36)}:${Math.random().toString(36).slice(2)}`
       };
@@ -115,10 +119,14 @@
 
       const body = form.querySelector("textarea[name='comment[body]']");
       const track = form.querySelector("select[name='comment[track]']");
+      const format = form.querySelector("[data-b270-body-format]");
       if (body) body.value = draft.body;
       if (track && Array.from(track.options).some((option) => option.value === draft.track)) {
         track.value = draft.track;
       }
+      if (format) {
+        format.value = ["plain", "markdown"].includes(draft.bodyFormat) ? draft.bodyFormat : "plain";
+      }
       setStatus(form, "Draft restored from this browser.");
     }
 

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

@@ -1,17 +1,19 @@
-<%# locals: (day:) %>
+<%# locals: (day:, completion_event_id:) %>
 <svg class="b270-completion-dove" data-b270-completion-dove data-b270-day="<%= day %>"
+     data-b270-completion-event="<%= completion_event_id %>" data-turbo-temporary
      viewBox="0 0 260 200" aria-hidden="true" focusable="false">
   <defs>
     <radialGradient id="b270-dove-light" cx="50%" cy="43%" r="68%">
-      <stop offset="0%" stop-color="#fff" />
-      <stop offset="58%" stop-color="#fffef8" />
-      <stop offset="100%" stop-color="#fff9e2" />
+      <stop class="b270-dove-light-center" offset="0%" stop-color="#fff" />
+      <stop class="b270-dove-light-middle" offset="58%" stop-color="#fffef8" />
+      <stop class="b270-dove-light-edge" offset="100%" stop-color="#fff9e2" />
     </radialGradient>
   </defs>
   <g class="b270-dove-silhouette">
     <path d="M122 94C103 82 87 69 72 53L39 17l11 28-23-23 15 32-23-20 19 30-24-16 22 26-25-12 27 23-24-7 30 19-22-3 31 17c20 11 42 16 59 8 5-9 8-18 10-25Z" />
     <path d="M138 94c19-12 35-25 50-41l33-36-11 28 23-23-15 32 23-20-19 30 24-16-22 26 25-12-27 23 24-7-30 19 22-3-31 17c-20 11-42 16-59 8-5-9-8-18-10-25Z" />
     <path d="M148 140c6 7 16 14 24 19 2 2 1 5-2 6-5 2-10-1-14-5 4 8 7 17 4 22-2 3-5 1-7-2l-6-11c3 10 2 19-3 24-2 3-5 1-6-3l-4-15c0 11-3 21-8 24-3 2-5-1-6-5l-1-19c-3 10-6 17-11 20-3 2-5-1-5-5l2-19c-4 8-9 13-14 14-3 1-5-2-4-6l6-18c-5 5-11 7-16 4-3-1-3-4 0-7 7-7 17-13 26-19Z" />
-    <path d="M108 116c5-10 9-17 14-17-1-11-2-23 4-29 5-4 12-3 15 1 2 3 2 6 1 9 3 .2 6 .8 8 1.5-2.5 1.3-5.5 2.1-8 2.5-1 5-3 10-5 15 6 3 11 9 15 17-1 15-6 28-16 39-3 4-7 7-10 9-4-2-8-5-11-9-9-11-14-25-11-37 1-1 2-2 4-2Z" />
+    <path class="b270-dove-beak" d="M140 80C144 80 148 80.8 151 82 152 82.4 152 83.2 151 83.8 148 85.1 144 85.8 140 85 138.5 83.5 138.5 81.2 140 80Z" />
+    <path d="M108 116c5-10 9-17 14-17-1-11-2-23 4-29 5-4 12-3 15 1 2 3 2 6 1 9 1 1 1 3 0 4-1 5-3 10-5 15 6 3 11 9 15 17-1 15-6 28-16 39-3 4-7 7-10 9-4-2-8-5-11-9-9-11-14-25-11-37 1-1 2-2 4-2Z" />
   </g>
 </svg>

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

@@ -18,6 +18,53 @@
       region.dataset.state = state;
     }
 
+    const shownCompletionDoves = new Set();
+
+    function claimCompletionDove(dove) {
+      const eventId = dove.dataset.b270CompletionEvent;
+      if (!eventId) return false;
+
+      const key = `b270-completion-dove:${eventId}`;
+      if (shownCompletionDoves.has(key)) return false;
+
+      try {
+        if (window.sessionStorage.getItem(key) === "shown") return false;
+        window.sessionStorage.setItem(key, "shown");
+      } catch (_error) {
+        // Some privacy modes disable session storage. The in-memory set still
+        // prevents duplicate Turbo rendering within the current page.
+      }
+      shownCompletionDoves.add(key);
+      return true;
+    }
+
+    function initializeCompletionDove(dove) {
+      if (dove.dataset.b270DoveInitialized === "true") return;
+      dove.dataset.b270DoveInitialized = "true";
+
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        dove.remove();
+        return;
+      }
+
+      if (!claimCompletionDove(dove)) {
+        dove.remove();
+        return;
+      }
+
+      // Keep an active flight outside the Turbo-replaced progress panel so a
+      // replayed response cannot restart or cut short the same completion event.
+      if (dove.parentElement !== document.body) document.body.appendChild(dove);
+      requestAnimationFrame(() => {
+        if (dove.isConnected) dove.classList.add("b270-completion-dove-active");
+      });
+    }
+
+    function initializeCompletionDoves(root = document) {
+      if (root.matches && root.matches("[data-b270-completion-dove]")) initializeCompletionDove(root);
+      root.querySelectorAll?.("[data-b270-completion-dove]").forEach(initializeCompletionDove);
+    }
+
     function resetForm(form) {
       form.removeAttribute("aria-busy");
       form.dataset.b270Submitting = "false";
@@ -29,8 +76,18 @@
 
     function reset() {
       document.querySelectorAll("form[data-b270-submit='true']").forEach(resetForm);
+      initializeCompletionDoves();
     }
 
+    const completionDoveObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) initializeCompletionDoves(node);
+        });
+      });
+    });
+    completionDoveObserver.observe(document.documentElement, { childList: true, subtree: true });
+
     const SESSION_REFRESH_AFTER = 5 * 60 * 1000;
     let sessionRefreshedAt = Date.now();
     let sessionRefresh = null;
@@ -201,8 +258,12 @@
       }
     });
     document.addEventListener("turbo:load", reset);
+    document.addEventListener("turbo:before-cache", () => {
+      document.querySelectorAll("[data-b270-completion-dove]").forEach((dove) => dove.remove());
+    });
     document.addEventListener("animationend", (event) => {
-      if (event.target.matches("[data-b270-completion-dove]")) event.target.remove();
+      if (event.animationName === "b270-dove-flight" &&
+          event.target.matches("[data-b270-completion-dove]")) event.target.remove();
     });
 
     window.Bible270InteractionUI = { reset };

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

@@ -0,0 +1,239 @@
+<script nonce="<%= content_security_policy_nonce %>">
+  (() => {
+    if (window.Bible270MarkdownToolbar) {
+      window.Bible270MarkdownToolbar.scan();
+      return;
+    }
+
+    const openEditors = new Set();
+
+    function editorKey(editor) {
+      return editor.dataset.b270EditorKey;
+    }
+
+    function select(textarea, start, finish) {
+      textarea.focus();
+      textarea.setSelectionRange(start, finish);
+    }
+
+    function resizeTextarea(textarea) {
+      if (!textarea || textarea.dataset.b270Autosize !== "true") return;
+
+      textarea.style.height = "auto";
+      const borders = textarea.offsetHeight - textarea.clientHeight;
+      textarea.style.height = `${textarea.scrollHeight + borders}px`;
+    }
+
+    function initializeAutosize(textarea) {
+      if (!textarea || textarea.dataset.b270Autosize !== "true" ||
+          textarea.dataset.b270AutosizeReady === "true") return;
+
+      textarea.dataset.b270AutosizeReady = "true";
+      textarea.addEventListener("input", () => resizeTextarea(textarea));
+      window.requestAnimationFrame(() => resizeTextarea(textarea));
+    }
+
+    function resizeEditors() {
+      document.querySelectorAll("textarea[data-b270-autosize='true']").forEach(resizeTextarea);
+    }
+
+    function update(editor, textarea, replacement, start, finish, selectedStart, selectedEnd) {
+      textarea.value = `${textarea.value.slice(0, start)}${replacement}${textarea.value.slice(finish)}`;
+      const format = editor.querySelector("[data-b270-body-format]");
+      if (format) format.value = "markdown";
+      select(textarea, start + selectedStart, start + selectedEnd);
+      textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+
+    function wrap(editor, textarea, before, after, placeholder) {
+      const start = textarea.selectionStart;
+      const finish = textarea.selectionEnd;
+      const selected = textarea.value.slice(start, finish) || placeholder;
+      const replacement = `${before}${selected}${after}`;
+      update(editor, textarea, replacement, start, finish, before.length, before.length + selected.length);
+    }
+
+    function prefixLines(editor, textarea, action) {
+      const selectionStart = textarea.selectionStart;
+      const selectionEnd = textarea.selectionEnd;
+      const start = textarea.value.lastIndexOf("\n", Math.max(selectionStart - 1, 0)) + 1;
+      const nextNewline = textarea.value.indexOf("\n", selectionEnd);
+      const finish = nextNewline === -1 ? textarea.value.length : nextNewline;
+      const source = textarea.value.slice(start, finish) || (action === "quote" ? "quoted text" : "list item");
+      const lines = source.split("\n");
+      const replacement = lines.map((line, index) => {
+        if (action === "quote") return `> ${line}`;
+        if (action === "number-list") return `${index + 1}. ${line}`;
+        return `- ${line}`;
+      }).join("\n");
+      update(editor, textarea, replacement, start, finish, 0, replacement.length);
+    }
+
+    function addLink(editor, textarea) {
+      const href = window.prompt("Link address (https://…)");
+      if (!href) return;
+
+      const start = textarea.selectionStart;
+      const finish = textarea.selectionEnd;
+      const selected = textarea.value.slice(start, finish) || "link text";
+      const replacement = `[${selected}](${href.trim()})`;
+      update(editor, textarea, replacement, start, finish, 1, selected.length + 1);
+    }
+
+    function requestPreview(editor, state) {
+      const textarea = editor.querySelector("textarea[name='comment[body]']");
+      const preview = editor.querySelector("[data-b270-preview-panel]");
+      const url = editor.dataset.b270PreviewUrl;
+      if (!textarea || !preview || !url) return;
+
+      if (!textarea.value.trim()) {
+        preview.innerHTML = '<p class="b270-hint">Nothing to preview yet.</p>';
+        return;
+      }
+
+      if (state.abort) state.abort.abort();
+      state.abort = new AbortController();
+      preview.textContent = "Loading preview…";
+      const body = new URLSearchParams({ "comment[body]": textarea.value });
+      const token = document.querySelector("meta[name='csrf-token']")?.content;
+      const headers = {
+        Accept: "text/html",
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
+      };
+      if (token) headers["X-CSRF-Token"] = token;
+
+      fetch(url, {
+        method: "POST",
+        credentials: "same-origin",
+        cache: "no-store",
+        redirect: "error",
+        headers,
+        body: body.toString(),
+        signal: state.abort.signal
+      }).then((response) => {
+        if (!response.ok) throw new Error("Preview unavailable");
+        return response.text();
+      }).then((html) => {
+        preview.innerHTML = html;
+      }).catch((error) => {
+        if (error.name !== "AbortError") preview.textContent = "Preview unavailable. Return to Write and try again.";
+      });
+    }
+
+    function setFormattingOpen(editor, open, remember = true) {
+      const drawer = editor.querySelector("[data-b270-formatting-drawer]");
+      const toggle = editor.querySelector("[data-b270-formatting-toggle]");
+      if (!drawer || !toggle) return;
+
+      editor.dataset.b270FormattingOpen = open ? "true" : "false";
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+      drawer.setAttribute("aria-hidden", open ? "false" : "true");
+      drawer.inert = !open;
+      if (!remember) return;
+
+      if (open) openEditors.add(editorKey(editor));
+      else openEditors.delete(editorKey(editor));
+    }
+
+    function showMode(editor, state, mode) {
+      const previewing = mode === "preview";
+      const writePanel = editor.querySelector("[data-b270-write-panel]");
+      const previewPanel = editor.querySelector("[data-b270-preview-panel]");
+      const previewToggle = editor.querySelector("[data-b270-preview-toggle]");
+      const formattingToggle = editor.querySelector("[data-b270-formatting-toggle]");
+      if (!writePanel || !previewPanel || !previewToggle || !formattingToggle) return;
+
+      editor.dataset.b270EditorMode = mode;
+      writePanel.hidden = previewing;
+      previewPanel.hidden = !previewing;
+      previewToggle.textContent = previewing ? "Write" : "Preview";
+      previewToggle.setAttribute("aria-pressed", previewing ? "true" : "false");
+      previewToggle.setAttribute("aria-label", previewing ? "Return to writing" : "Preview reflection");
+      formattingToggle.disabled = previewing;
+      if (previewing) {
+        setFormattingOpen(editor, false, false);
+        requestPreview(editor, state);
+      } else {
+        setFormattingOpen(editor, openEditors.has(editorKey(editor)), false);
+        const textarea = editor.querySelector("textarea[name='comment[body]']");
+        resizeTextarea(textarea);
+        textarea?.focus();
+      }
+    }
+
+    function apply(editor, action) {
+      const textarea = editor.querySelector("textarea[name='comment[body]']");
+      if (!textarea) return;
+
+      if (action === "bold") {
+        wrap(editor, textarea, "**", "**", "bold text");
+      } else if (action === "italic") {
+        wrap(editor, textarea, "*", "*", "italic text");
+      } else if (action === "link") {
+        addLink(editor, textarea);
+      } else {
+        prefixLines(editor, textarea, action);
+      }
+    }
+
+    function initialize(editor) {
+      const textarea = editor.querySelector("textarea[name='comment[body]']");
+      if (!textarea) return;
+      initializeAutosize(textarea);
+      if (editor.dataset.b270MarkdownReady === "true") return;
+
+      const utilities = editor.querySelector("[data-b270-editor-utilities]");
+      const toolbar = editor.querySelector("[data-b270-markdown-toolbar]");
+      const drawer = editor.querySelector("[data-b270-formatting-drawer]");
+      const formattingToggle = editor.querySelector("[data-b270-formatting-toggle]");
+      const previewToggle = editor.querySelector("[data-b270-preview-toggle]");
+      if (!utilities || !toolbar || !drawer || !formattingToggle || !previewToggle) return;
+
+      editor.dataset.b270MarkdownReady = "true";
+      if (editor.closest("form")?.dataset.b270DraftPosted === "true") openEditors.delete(editorKey(editor));
+      const state = { abort: null };
+      utilities.hidden = false;
+      setFormattingOpen(editor, openEditors.has(editorKey(editor)), false);
+      formattingToggle.addEventListener("click", () => {
+        setFormattingOpen(editor, editor.dataset.b270FormattingOpen !== "true");
+      });
+      previewToggle.addEventListener("click", () => {
+        const mode = editor.dataset.b270EditorMode === "preview" ? "write" : "preview";
+        showMode(editor, state, mode);
+      });
+      toolbar.querySelectorAll("[data-b270-markdown-action]").forEach((button) => {
+        button.addEventListener("click", () => apply(editor, button.dataset.b270MarkdownAction));
+      });
+      toolbar.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape") return;
+
+        event.preventDefault();
+        setFormattingOpen(editor, false);
+        formattingToggle.focus();
+      });
+      textarea.addEventListener("keydown", (event) => {
+        if (!(event.ctrlKey || event.metaKey) || event.altKey) return;
+        const action = event.key.toLocaleLowerCase() === "b" ? "bold" :
+          event.key.toLocaleLowerCase() === "i" ? "italic" : null;
+        if (!action) return;
+
+        event.preventDefault();
+        apply(editor, action);
+      });
+    }
+
+    function scan() {
+      document.querySelectorAll("[data-b270-markdown-editor]").forEach(initialize);
+    }
+
+    scan();
+    new MutationObserver(scan).observe(document.documentElement, { childList: true, subtree: true });
+    window.addEventListener("pageshow", () => {
+      scan();
+      resizeEditors();
+    });
+    window.addEventListener("resize", resizeEditors);
+    document.addEventListener("turbo:load", scan);
+    window.Bible270MarkdownToolbar = { scan };
+  })();
+</script>

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

@@ -23,7 +23,7 @@
           <% if moderate && comment.hidden? %><span class="b270-badge">Hidden</span><% end %>
         </div>
 
-        <p class="b270-cbody"><%= comment.body %></p>
+        <div class="b270-cbody"><%= b270_comment_body(comment) %></div>
 
         <% if moderate %>
           <div style="display:flex;gap:10px;margin-top:6px">

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

@@ -148,16 +148,20 @@
   .b270-day-complete span{font-size:12px;color:var(--muted)}
   .b270 .b270-day-complete .b270-btn{flex:none;margin:0 0 0 auto}
   .b270-completion-dove{position:fixed;z-index:1000;top:72vh;left:50vw;
-                        width:min(75vw,97.5vh);height:auto;overflow:visible;pointer-events:none;opacity:0;
+                        width:min(80vw,104vh);height:auto;overflow:visible;pointer-events:none;opacity:0;
+                        color-scheme:only light;forced-color-adjust:none;
                         filter:drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 24px rgba(255,252,220,1)) drop-shadow(0 0 52px rgba(225,191,92,.82));
-                        will-change:top,left,transform,opacity;animation:b270-dove-flight 1.6s cubic-bezier(.18,.72,.28,1) both}
-  .b270-dove-silhouette{fill:url(#b270-dove-light);stroke:none}
+                        will-change:top,left,transform,opacity}
+  .b270-completion-dove-active{animation:b270-dove-flight 1.7s cubic-bezier(.18,.72,.28,1) both}
+  .b270-dove-silhouette{fill:url(#b270-dove-light)!important;stroke:none}
+  .b270-dove-light-center{stop-color:#fff!important}
+  .b270-dove-light-middle{stop-color:#fffef8!important}
+  .b270-dove-light-edge{stop-color:#fff9e2!important}
   @keyframes b270-dove-flight{
     0%{top:72vh;left:50vw;opacity:.22;visibility:visible;transform:translate(-50%,-50%) scale(.02) rotate(-8deg)}
     8%{top:calc(72vh - 10px);left:50vw;opacity:.78;transform:translate(-50%,-50%) scale(.08) rotate(-5deg)}
-    64%{top:38vh;left:52vw;opacity:.92;transform:translate(-50%,-50%) scale(1) rotate(4deg)}
-    99%{visibility:visible}
-    100%{top:-25vh;left:115vw;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(1.55) rotate(12deg)}
+    33%{top:50vh;left:50vw;opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1) rotate(4deg)}
+    100%{top:50vh;left:50vw;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(1) rotate(4deg)}
   }
 
   /* readings */
@@ -252,7 +256,15 @@
   .b270-likes:active .b270-liketooltip{display:block}
   .b270-liker{display:block;white-space:nowrap}
   .b270-creply{margin-top:6px}
-  .b270-cbody{margin:3px 0 0;white-space:pre-wrap}
+  .b270-cbody{margin:3px 0 0;line-height:1.2}
+  .b270-cbody p{margin:0;white-space:pre-wrap}
+  .b270-cbody p+p,.b270-cbody p+ul,.b270-cbody p+ol,.b270-cbody p+blockquote,
+  .b270-cbody ul+p,.b270-cbody ol+p,.b270-cbody blockquote+p{margin-top:8px}
+  .b270-cbody ul,.b270-cbody ol{margin:6px 0 0;padding-left:24px}
+  .b270-cbody li{margin:2px 0;white-space:pre-wrap}
+  .b270-cbody blockquote{margin:7px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--line);color:var(--muted)}
+  .b270-cbody a{color:var(--teal);text-decoration:underline;text-decoration-color:var(--line)}
+  .b270-cbody a:hover{text-decoration-color:currentColor}
   .b270-editform{margin-top:6px}
   .b270-editform textarea{min-height:64px}
   .b270-editerror{margin:0 0 8px;font-size:13px;color:var(--oxblood)}
@@ -264,6 +276,27 @@
   .b270-cdel{font-size:12px;color:var(--oxblood);background:none;border:none;cursor:pointer;padding:0;margin-left:8px}
   .b270-input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;font:inherit;font-size:14px;margin-bottom:8px}
   .b270-form textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:#fff;resize:vertical;min-height:76px}
+  .b270-form textarea[data-b270-autosize=false]{min-height:114px}
+  .b270-editor-utilities[hidden]{display:none}
+  .b270-editor-utilities{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 5px}
+  .b270 .b270-editor-utility{padding:2px 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
+  .b270 .b270-editor-utility:hover,.b270 .b270-editor-utility:focus-visible{color:var(--gold)}
+  .b270 .b270-editor-utility:disabled{color:var(--faint);opacity:.55;cursor:default}
+  .b270-format-chevron{display:inline-block;margin-left:2px;transition:transform .14s ease}
+  .b270-markdown-editor[data-b270-formatting-open=true] .b270-format-chevron{transform:rotate(180deg)}
+  .b270-formatting-drawer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .14s ease,opacity .1s ease}
+  .b270-markdown-editor[data-b270-formatting-open=true] .b270-formatting-drawer{grid-template-rows:1fr;opacity:1}
+  .b270-formatting-drawer-inner{min-height:0;overflow:hidden}
+  .b270-markdown-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--paper)}
+  .b270 .b270-markdown-toolbar button{min-height:32px;padding:5px 9px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer}
+  .b270 .b270-markdown-toolbar button:hover,.b270 .b270-markdown-toolbar button:focus-visible{background:var(--card);color:var(--ink)}
+  .b270-format-glyph{display:inline-block;min-width:13px;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1}
+  .b270-format-bold{font-weight:700}
+  .b270-format-italic{font-style:italic;font-weight:600}
+  .b270-markdown-editor[data-b270-formatting-open=true] textarea{border-radius:0 0 10px 10px}
+  .b270-markdown-preview{min-height:76px;margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
+  .b270-markdown-preview[hidden]{display:none}
+  .b270-markdown-preview>.b270-hint{margin:0}
   .b270-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
   .b270-mention-composer{position:relative}
   .b270-mention-options{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);overflow:hidden;

data/config/routes.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# Rails routes are intentionally kept in one cohesive DSL block.
 Bible270::Engine.routes.draw do
   root to: 'days#index'
 
@@ -12,6 +13,7 @@ Bible270::Engine.routes.draw do
                                    constraints: { day: %r{\d+} }
   post   'day/:day/comments',      to: 'comments#create',  as: :day_comments,
                                    constraints: { day: %r{\d+} }
+  post   'comments/preview',       to: 'comments#preview', as: :comment_preview
   post   'comments/:id/like',      to: 'likes#toggle',     as: :like_comment
   patch  'comments/:id',           to: 'comments#update'
   delete 'comments/:id',           to: 'comments#destroy', as: :comment
@@ -22,6 +24,8 @@ Bible270::Engine.routes.draw do
   delete 'admin/readers/:id',            to: 'admin#destroy'
   patch  'admin/readers/:id/profile',    to: 'admin#update_profile', as: :admin_reader_profile
   patch  'admin/readers/:id/notifications', to: 'admin#update_notifications', as: :admin_reader_notifications
+  patch  'admin/readers/:id/completion-animation', to: 'admin#update_completion_animation',
+                                                   as: :admin_reader_completion_animation
   delete 'admin/readers/:id/avatar',     to: 'admin#remove_avatar', as: :admin_reader_avatar
   patch  'admin/readers/:id/version',    to: 'admin#update_bible_version', as: :admin_reader_version
   patch  'admin/readers/:id/start',      to: 'admin#update_start',     as: :admin_reader_start

data/db/migrate/20260101000020_add_completion_dove_disabled_to_bible270_readers.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddCompletionDoveDisabledToBible270Readers < ActiveRecord::Migration[7.0]
+  def change
+    add_column :bible270_readers, :completion_dove_disabled, :boolean, null: false, default: false
+  end
+end

data/db/migrate/20260101000021_add_body_format_to_bible270_comments.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class AddBodyFormatToBible270Comments < ActiveRecord::Migration[7.0]
+  def up
+    add_column :bible270_comments, :body_format, :string, null: false, default: 'plain'
+  end
+
+  def down
+    remove_column :bible270_comments, :body_format
+  end
+end