bible270 1.8.4 → 1.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0203626f9a4f8ad023af249e14e69405dff650d48e0e2dc41a71e31cc27daaa
-  data.tar.gz: 5965d52ad7378dd14fd58f12ea5f7ef3a3789c396db9e7a62c971969af624364
+  metadata.gz: 251f07d9a39f657788b627258c3cf78a260f651be7e998267a3cd7028cd6e172
+  data.tar.gz: 49fc0b718a2d8625d18ba357dff2af2891de59a8daf4a113a566737f2afd6fe6
 SHA512:
-  metadata.gz: b5c0aca831d6336909d96124c9fdb7f4be01858e0fd5d35b72ba13415f3ad9ca19ee2c38329d03f8cec52b10506ec9a98d911a4dede76ac14d6ff7f14a01da91
-  data.tar.gz: '0803ce48711261b5282cac7a0877c747cd7069f906fc356b5440020661a81ecffd19a417253a56b7915dd866754321cda958c1f93dc2a2a451c8e97e6302d679'
+  metadata.gz: cb3c3b3246e339330a180f670af37a8d558a01c7a7b4a9fb71087aecf77ecc01508fbcb329e389339a8531dd7f08a18e9b6b37a05a3d1f9bb945d72629521502
+  data.tar.gz: 83023e4b01da0ce5a7b152801a5b6de52b1409b3becb172e11ab05b69dad6a35bc0095e486c446ffaae076ee97ad0a5d886a813f5d68bb698e37d9c6400f485a

data/CHANGELOG.md

@@ -7,6 +7,9 @@ All notable changes to bible270. Format follows [Keep a Changelog](https://keepa
 ### Changed
 
 - keep Proverbs 7 whole and divide Proverbs 10 and 16 into four readings
+- show likes and replies on My Progress and reader pages, with admin edit links on reader pages
+- show each reader's pace beside their completed-day count for admins on Community
+- add edit, like, and reply controls to reflections on Admin reader pages
 
 **[Full Changelog](https://github.com/avonderluft/bible270/compare/v1.8.1...main)**
 

data/README.md

@@ -368,6 +368,24 @@ Psalm 35: []
 Psalm 78: [20, 39, 55]
 ```
 
+## Display preference
+
+Readers can choose **Light**, **Dark**, or **System** under **Profile → Display**, then save.
+The preference is stored with their account and applies throughout Bible270 on every device.
+System is the default for existing and new readers, follows the device's current appearance,
+and responds to changes without reloading. Signed-out visitors also use System.
+The completion dove retains its bright colors in either theme.
+
+Upgrading hosts must install and run migration `20260101000023`:
+
+```bash
+bin/rails bible270:install:migrations
+bin/rails db:migrate
+```
+
+Custom engine layouts must render the shared styles and set `data-display-mode` on the
+`.b270` element to `current_reader&.effective_display_mode || 'system'` to honor the preference.
+
 ## Start dates
 
 The plan runs **undated** (day numbers only) or **dated** (days mapped onto a calendar):

data/app/controllers/bible270/admin_controller.rb

@@ -97,7 +97,7 @@ module Bible270
       @comment_notifications_available = comment_notifications_available_for?(@reader)
       @completion_dove_preference_available = completion_dove_available_for(@reader)
       @days_completed = @reader.days_completed
-      @comments = @reader.comments.order(created_at: :desc).limit(50)
+      @comments = @reader.comments.includes(likes: :reader).order(created_at: :desc).limit(50)
     end
 
     # ---- reflections ------------------------------------------------------

data/app/controllers/bible270/profiles_controller.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
 module Bible270
-  # A reader editing their own name — the one thing about themselves they can
-  # change. Everything else about a reader comes from how they signed in.
+  # A reader editing their own details and preferences.
   class ProfilesController < ApplicationController
     before_action :require_signed_in_reader
 
     def edit
       @names = current_reader.suggested_names
+      @display_mode = current_reader.effective_display_mode
       load_comment_notification_state
       load_daily_reminder_state
     end
@@ -16,7 +16,8 @@ module Bible270
       @comment_notifications_available = comment_notifications_available?
       @comment_notification_level = requested_comment_notification_level
       @daily_reminders_available = daily_reminders_available?
-      problems = [comment_notification_problem].compact
+      @display_mode = params.fetch(:display_mode, current_reader.effective_display_mode).to_s
+      problems = [comment_notification_problem, display_mode_problem].compact
       problems << 'both a first and last name' unless current_reader.update_names(params[:first_name],
                                                                                   params[:last_name])
       if params[:bible_version].present? && !current_reader.update_bible_version(params[:bible_version])
@@ -35,6 +36,7 @@ module Bible270
       end
 
       if problems.empty?
+        save_display_mode
         current_reader.update_comment_notification_level!(@comment_notification_level) if @comment_notifications_available
         if @daily_reminders_available
           current_reader.update!(daily_reminders: requested_daily_reminders,
@@ -57,6 +59,17 @@ module Bible270
 
   private
 
+    def display_mode_problem
+      return unless Reader.display_mode_column?
+      return if Reader::DISPLAY_MODES.include?(@display_mode)
+
+      'a display preference from the list'
+    end
+
+    def save_display_mode
+      current_reader.update!(display_mode: @display_mode) if Reader.display_mode_column?
+    end
+
     def load_comment_notification_state
       @comment_notifications_available = comment_notifications_available?
       @comment_notification_level = current_reader.comment_notification_level

data/app/controllers/bible270/readers_controller.rb

@@ -17,7 +17,7 @@ module Bible270
     def progress
       @reader = current_reader
       # Defaults keep the open visitor page simple and make every view input explicit.
-      @recent_comments = @reader ? @reader.comments.recent.limit(5) : Comment.none
+      @recent_comments = @reader ? recent_reflections(@reader, limit: 5) : []
       @partial_day_tasks = []
       @remaining_partial_days = 0
       return unless @reader
@@ -34,7 +34,7 @@ module Bible270
       redirect_to(community_path, alert: 'Reader not found.') and return unless @reader
 
       @days_completed = @reader.days_completed
-      @recent_comments = @reader.comments.recent.limit(20)
+      @recent_comments = recent_reflections(@reader, limit: 20)
     end
 
     def mention_suggestions
@@ -43,5 +43,16 @@ module Bible270
       response.headers['Cache-Control'] = 'private, no-store'
       render json: { suggestions: Reader.mention_suggestions(params[:q], except: current_reader) }
     end
+
+  private
+
+    def recent_reflections(reader, limit:)
+      comments = reader.comments.recent
+        .includes(:reader, { likes: :reader }, { replies: [:reader, { likes: :reader }] })
+        .limit(limit).to_a
+      ids = comments.map(&:id)
+      # A reader's own replies already appear beneath any listed parent reflection.
+      comments.reject { |comment| ids.include?(comment.parent_id) }
+    end
   end
 end

data/app/models/bible270/comment.rb

@@ -150,7 +150,14 @@ module Bible270
     def edited? = updated_at - created_at > 1
 
     # Visible replies, oldest first: a conversation reads forwards.
-    def visible_replies = replies.approved.order(created_at: :asc)
+    def visible_replies
+      if replies.loaded?
+        replies.select(&:approved?).sort_by { |reply| [reply.created_at, reply.id] }
+      else
+        replies.approved.order(created_at: :asc, id: :asc)
+      end
+    end
+
     def moderated? = moderated_at.present?
 
   private

data/app/models/bible270/reader.rb

@@ -27,6 +27,8 @@ module Bible270
 
     PASSAGE_SOURCES = %w[bible_com bible_gateway blue_letter_bible].freeze
     DEFAULT_PASSAGE_SOURCE = 'bible_com'
+    DISPLAY_MODES = %w[light dark system].freeze
+    DEFAULT_DISPLAY_MODE = 'system'
     DAILY_REMINDER_TIME_FORMAT = %r{\A(?:[01]\d|2[0-3]):[0-5]\d\z}
     DAILY_REMINDER_MINUTES = %w[00 15 30 45].freeze
     DAILY_REMINDER_COLUMNS = %w[daily_reminders daily_reminder_time last_daily_reminder_sent_on].freeze
@@ -39,6 +41,7 @@ module Bible270
     validates :display_name, presence: true
     validates :uid, uniqueness: { scope: :provider }, allow_nil: true
     validates :passage_source, inclusion: { in: PASSAGE_SOURCES }
+    validates :display_mode, inclusion: { in: DISPLAY_MODES }, if: -> { has_attribute?(:display_mode) }
     validates :daily_reminder_time,
               format: { with: DAILY_REMINDER_TIME_FORMAT, message: 'must use 24-hour HH:MM format' },
               if: -> { self.class.daily_reminder_columns? }
@@ -55,6 +58,17 @@ module Bible270
       false
     end
 
+    def self.display_mode_column?
+      column_names.include?('display_mode')
+    rescue ActiveRecord::StatementInvalid
+      false
+    end
+
+    def effective_display_mode
+      value = self[:display_mode] if has_attribute?(:display_mode)
+      DISPLAY_MODES.include?(value) ? value : DEFAULT_DISPLAY_MODE
+    end
+
     def self.valid_daily_reminder_time?(value)
       value.to_s.match?(DAILY_REMINDER_TIME_FORMAT)
     end
@@ -643,6 +657,17 @@ module Bible270
       Plan.day_for(Bible270.today, effective_start_date)
     end
 
+    def progress_status(completed_days: days_completed)
+      today = calendar_day
+      return 'undated' unless today
+
+      difference = completed_days - today
+      return 'on track' if difference.zero?
+
+      amount = difference.abs
+      "#{amount} #{amount == 1 ? 'day' : 'days'} #{difference.positive? ? 'ahead' : 'behind'}"
+    end
+
     # Raw, unclamped — lets callers distinguish "not started yet" / "finished".
     # The plan day that today actually is, or nil when today falls outside the
     # plan's window. calendar_day clamps, so before the start date it reports day

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

@@ -115,7 +115,8 @@
 
 
 <div class="b270-panel">
-  <%= render "bible270/shared/reflections", comments: @comments, moderate: true %>
+  <%= render "bible270/shared/interaction_status" %>
+  <%= render "bible270/shared/reflections", comments: @comments, moderate: true, editable: true, actions: true %>
 </div>
 
 <div class="b270-panel">
@@ -172,3 +173,4 @@
 </div>
 
 <p style="margin-top:18px"><%= link_to '← All readers', admin_path %></p>
+<%= render "bible270/shared/interaction_ui" %>

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

@@ -38,6 +38,20 @@
     </label>
     <%= render "bible270/shared/passage_source", reader: current_reader %>
 
+    <% if Bible270::Reader.display_mode_column? %>
+      <label class="b270-field">
+        <span>Display</span>
+        <%= select_tag :display_mode,
+              options_for_select([["Light", "light"], ["Dark", "dark"], ["System", "system"]], @display_mode),
+              class: "b270-select", aria: { describedby: "b270-display-hint" } %>
+        <span id="b270-display-hint" class="b270-hint" style="margin:0">System follows your device's light or dark setting.</span>
+      </label>
+    <% else %>
+      <p class="b270-flash alert" style="margin:0">
+        Display settings are temporarily unavailable while this installation finishes a database update.
+      </p>
+    <% end %>
+
     <% if @comment_notifications_available %>
       <%= render "bible270/shared/comment_notification_choices",
             level: @comment_notification_level,

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

@@ -14,6 +14,7 @@
             joined <%= Bible270.local_time(r.created_at).strftime("%b %-d %Y") %><% if @show_admin_progress %>
               · <%= link_to "#{@days_completed[r.id]} of #{Bible270::Plan::DAYS} days complete",
                     admin_reader_path(r), class: "b270-admin-progress" %>
+              · <%= r.progress_status(completed_days: @days_completed[r.id].to_i) %>
             <% end %>
           </div>
         </div>

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

@@ -12,8 +12,10 @@
 
 <% if @reader %>
   <div class="b270-panel">
+    <%= render "bible270/shared/interaction_status" %>
     <%= render "bible270/shared/reflections", comments: @recent_comments,
-          title: "Your recent reflections", editable: true,
+          title: "Your recent reflections", editable: true, conversations: true,
           empty_text: "You have not written any reflections yet." %>
   </div>
+  <%= render "bible270/shared/interaction_ui" %>
 <% end %>

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

@@ -16,8 +16,11 @@
 </div>
 
 <div class="b270-panel">
+  <%= render "bible270/shared/interaction_status" %>
   <%= render "bible270/shared/reflections", comments: @recent_comments,
-        title: "Their reflections", empty_text: "No reflections yet." %>
+        title: "Their reflections", empty_text: "No reflections yet.",
+        conversations: true, editable: Bible270.config.admin?(current_reader) %>
 </div>
 
 <%= render "bible270/shared/day_index", reader: @reader, expanded: true %>
+<%= render "bible270/shared/interaction_ui" %>

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

@@ -1,4 +1,4 @@
-<%# locals: (comments:, title: "Their reflections", moderate: false, editable: false, empty_text: "None yet.") %>
+<%# locals: (comments:, title: "Their reflections", moderate: false, editable: false, actions: false, conversations: false, reply: false, empty_text: "None yet.") %>
 <%#
   A reader's reflections. Three views showed near-identical markup: the admin
   page, a reader's public page, and the progress page, differing only in whether
@@ -11,17 +11,21 @@
   No ERB tags in this comment: the first close-tag would end it and the rest
   would become live template code.
 %>
-<h2 class="b270-subhead"><%= title %></h2>
+<% if title.present? %><h2 class="b270-subhead"><%= title %></h2><% end %>
 
 <% if comments.any? %>
   <% comments.each do |comment| %>
-    <div class="b270-comment">
+    <div class="b270-comment <%= 'b270-reply' if reply %>" id="comment-<%= comment.id %>">
+      <% if reply %><%= b270_avatar(comment.reader, size: 36) %><% end %>
       <div style="flex:1">
         <div class="b270-cmeta">
+          <% if reply %>
+            <strong><%= link_to comment.reader.display_name, reader_path(comment.reader) %></strong> ·
+          <% end %>
           <%= link_to "Day #{comment.day}", day_path(comment.day) %>
           · <%= b270_date(comment.created_at) %>
           <% if moderate && comment.hidden? %><span class="b270-badge">Hidden</span><% end %>
-          <% if editable && b270_can_edit?(comment) %>
+          <% if editable && !comment.hidden? && b270_can_edit?(comment) %>
             <%= link_to "edit", day_path(comment.day, edit: comment.id, anchor: "comment-#{comment.id}"),
                   class: "b270-cedit" %>
           <% end %>
@@ -29,6 +33,27 @@
 
         <div class="b270-cbody"><%= b270_comment_body(comment) %></div>
 
+        <% if (actions || conversations) && !comment.hidden? %>
+          <div class="b270-cactions">
+            <%= render "bible270/likes/likes", comment: comment %>
+            <% if !comment.reply? && signed_in? && comment.reader_id != current_reader.id %>
+              <%= link_to "Reply", day_path(comment.day, reply_to: comment.id, anchor: "new_comment_form"),
+                    class: "b270-linkbtn" %>
+            <% end %>
+          </div>
+        <% end %>
+        <% if conversations %>
+          <% unless comment.reply? %>
+            <div class="b270-replies" id="replies-<%= comment.id %>">
+              <% replies = comment.visible_replies %>
+              <% if replies.any? %>
+                <%= render "bible270/shared/reflections", comments: replies, title: nil,
+                      conversations: true, reply: true, editable: editable %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+
         <% if moderate %>
           <div style="display:flex;gap:10px;margin-top:6px">
             <% if comment.hidden? %>

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

@@ -3,9 +3,52 @@
     --paper:#ece6da; --card:#f4efe6; --ink:#231f18; --muted:#5d564c; --faint:#6e665b;
     --line:#d7cfbf; --line-soft:#e2dbcd; --teal:#2f6a67; --oxblood:#8a2f3b; --gold:#80631d;
     --gold-lite:#80631d; --shadow:0 1px 0 rgba(35,31,24,.04),0 10px 30px -18px rgba(35,31,24,.35);
+    --control:#fff; --control-line:#d7cfbf; --task-surface:rgba(255,255,255,.35); --button-hover:#3a352b;
+    --on-accent:#fff; --complete-ink:#eef3f2; --complete-dot:#f4efe6;
+    --button-surface:#231f18; --button-ink:#ece6da;
+    --teal-fill:#2f6a67; --oxblood-fill:#8a2f3b; --gold-fill:#80631d;
+    --teal-mark:#2f6a67; --oxblood-mark:#8a2f3b; --gold-mark:#80631d;
+    --alert-surface:#f6e4e2; --alert-ink:#7a2b28; --alert-line:#e6c3bf;
+    --notice-surface:#e7efe6; --notice-ink:#2f5d34; --notice-line:#c6dcc6;
+    color-scheme:light;
     margin:0; background:radial-gradient(120% 80% at 100% 0%,rgba(165,129,44,.06),transparent 55%),var(--paper);
     color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.2; -webkit-font-smoothing:antialiased;
   }
+  /* Explicit light keeps native controls light even when the OS is dark.
+     Only system mode follows the media query, including live OS changes. */
+  .b270[data-display-mode="light"]{color-scheme:light}
+  .b270[data-display-mode="dark"]{
+    color-scheme:dark;
+    background-image:none;
+    --control-line:#827c6e;
+    --paper:#39311f; --card:#322714; --ink:#ccc9bd; --muted:#b7b09f; --faint:#a9a28f;
+    --line:#42484a; --line-soft:#4b422d; --teal:#80b5ad; --oxblood:#d19199; --gold:#d6be79;
+    --gold-lite:#695116; --shadow:0 1px 0 rgba(0,0,0,.1);
+    --control:#181b1b; --task-surface:rgba(255,255,255,.025); --button-hover:#292316;
+    --on-accent:#ded8c5; --complete-ink:#ded8c5; --complete-dot:#ded8c5;
+    --button-surface:#201c12; --button-ink:#ded8c5;
+    --teal-fill:#2f5955; --oxblood-fill:#702731; --gold-fill:#695116;
+    --teal-mark:#409594; --oxblood-mark:#a73d50; --gold-mark:#b18b2b;
+    --alert-surface:#42282a; --alert-ink:#ffc0b8; --alert-line:#a66d68;
+    --notice-surface:#25382a; --notice-ink:#b6dfb6; --notice-line:#6d956e;
+  }
+  @media (prefers-color-scheme:dark){
+    .b270[data-display-mode="system"]{
+      color-scheme:dark;
+      background-image:none;
+      --control-line:#827c6e;
+      --paper:#39311f; --card:#322714; --ink:#ccc9bd; --muted:#b7b09f; --faint:#a9a28f;
+      --line:#42484a; --line-soft:#4b422d; --teal:#80b5ad; --oxblood:#d19199; --gold:#d6be79;
+      --gold-lite:#695116; --shadow:0 1px 0 rgba(0,0,0,.1);
+      --control:#181b1b; --task-surface:rgba(255,255,255,.025); --button-hover:#292316;
+      --on-accent:#ded8c5; --complete-ink:#ded8c5; --complete-dot:#ded8c5;
+      --button-surface:#201c12; --button-ink:#ded8c5;
+      --teal-fill:#2f5955; --oxblood-fill:#702731; --gold-fill:#695116;
+      --teal-mark:#409594; --oxblood-mark:#a73d50; --gold-mark:#b18b2b;
+      --alert-surface:#42282a; --alert-ink:#ffc0b8; --alert-line:#a66d68;
+      --notice-surface:#25382a; --notice-ink:#b6dfb6; --notice-line:#6d956e;
+    }
+  }
   .b270 *{box-sizing:border-box}
   /* Blanket anchor colour. NB: this is (0,1,1), so any single-class rule
      colouring an <a> (.b270-btn, .b270-cell, .b270-arrow ...) must be
@@ -38,7 +81,7 @@
   .b270-avatarrow input[type=file]{font:inherit;font-size:13px;max-width:100%}
   .b270-emailform{display:grid;gap:12px;max-width:340px;margin:12px 0 0}
   .b270-field{display:grid;gap:5px;font-size:12.5px;color:var(--muted)}
-  .b270-field input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
+  .b270-field input{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--control-line);border-radius:9px;background:var(--control);color:var(--ink);width:100%}
   .b270-field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(165,129,44,.13)}
   .b270-notification-field{margin:0;padding:0;border:0}
   .b270-notification-field legend{padding:0;margin:0 0 3px}
@@ -63,8 +106,8 @@
   .b270-time-control:active .b270-reminder-tooltip{visibility:visible;opacity:1}
   .b270-field .b270-reminder-optin input[type=checkbox]{width:auto;margin:0;flex:none}
   .b270-time-control{grid-template-columns:48px 5px 48px;align-items:center;gap:2px}
-  .b270-field .b270-time-select{width:48px;height:30px;margin:0;padding:4px 2px;border:1px solid var(--line);
-                                border-radius:7px;background:#fff;color:var(--ink);font:12px/16px system-ui,sans-serif;
+  .b270-field .b270-time-select{width:48px;height:30px;margin:0;padding:4px 2px;border:1px solid var(--control-line);
+                                border-radius:7px;background:var(--control);color:var(--ink);font:12px/16px system-ui,sans-serif;
                                 font-variant-numeric:tabular-nums;text-align:center}
   .b270-time-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(165,129,44,.13)}
   .b270-time-separator{display:grid;place-items:center;height:30px;font:12px/30px system-ui,sans-serif;color:var(--muted)}
@@ -72,19 +115,19 @@
   .b270-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
   .b270-or::before,.b270-or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
   .b270-providers{display:grid;gap:10px;max-width:340px}
-  .b270 .b270-provider{display:block;width:100%;text-align:center;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:12px 16px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .15s,transform .05s}
+  .b270 .b270-provider{display:block;width:100%;text-align:center;border:1px solid var(--line);background:var(--control);color:var(--ink);border-radius:10px;padding:12px 16px;font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color .15s,transform .05s}
   .b270-provider:hover{border-color:var(--gold);color:var(--gold)}
   .b270-provider:active{transform:translateY(1px)}
   .b270 .b270-signinbtn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:7px 13px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}
   .b270-signinbtn:hover{border-color:var(--gold);color:var(--gold)}
   .b270-signin-hint a{color:var(--gold);font-weight:600}
   .b270-flash{border-radius:10px;padding:11px 15px;margin-bottom:18px;font-size:14px}
-  .b270-flash.alert{background:#f6e4e2;color:#7a2b28;border:1px solid #e6c3bf}
-  .b270-flash.notice{background:#e7efe6;color:#2f5d34;border:1px solid #c6dcc6}
+  .b270-flash.alert{background:var(--alert-surface);color:var(--alert-ink);border:1px solid var(--alert-line)}
+  .b270-flash.notice{background:var(--notice-surface);color:var(--notice-ink);border:1px solid var(--notice-line)}
   .b270-interaction-status{margin:8px 0 12px;padding:8px 11px;border-radius:8px;background:rgba(47,106,103,.08);color:var(--teal);font-size:12.5px}
   .b270-interaction-status:empty{display:none}
   .b270-interaction-status[data-state="pending"]{color:var(--muted)}
-  .b270-interaction-status[data-state="error"]{background:#f6e4e2;color:#7a2b28}
+  .b270-interaction-status[data-state="error"]{background:var(--alert-surface);color:var(--alert-ink)}
   .b270 form[aria-busy="true"] [data-b270-disabled-by-submit]{cursor:wait;opacity:.55}
 
   .b270-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 10px}
@@ -103,7 +146,7 @@
 
 
   .b270-task-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
-  .b270-task{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(255,255,255,.35)}
+  .b270-task{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;background:var(--task-surface)}
   .b270-task-body{display:grid;gap:3px;min-width:0}
   .b270-task-body strong{font-size:14px}
   .b270-task-body span{color:var(--muted);font-size:12px;line-height:1.4}
@@ -118,7 +161,7 @@
   .b270-startline{margin:0;font-size:13.5px;color:var(--muted)}
   .b270-startline strong{color:var(--ink)}
   .b270-startform{display:flex;align-items:flex-end;gap:10px;margin-top:10px;flex-wrap:wrap}
-  .b270-startform input[type=date]{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
+  .b270-startform input[type=date]{font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--control-line);border-radius:8px;background:var(--control);color:var(--ink)}
   .b270-linkbtn{background:none;border:none;padding:0;margin-top:8px;font:inherit;font-size:12.5px;color:var(--oxblood);cursor:pointer;text-decoration:underline}
   .b270-hint{margin:8px 0 0;font-size:12px;color:var(--faint);max-width:111ch}
   .b270-tracks{margin-top:16px;display:grid;gap:11px}
@@ -139,7 +182,7 @@
   .b270-dayhead .k{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-family:"Spectral",serif;font-size:24px;font-weight:600;line-height:1}
   .b270-dayhead .date{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--faint);font-size:13px;margin-top:4px}
   .b270-dayhead .b270-badge{margin-left:0}
-  .b270-badge{display:inline-block;vertical-align:middle;line-height:1;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--gold-lite);padding:5px 8px 4px;border-radius:20px;margin-left:9px}
+  .b270-badge{display:inline-block;vertical-align:middle;line-height:1;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--gold-lite);padding:5px 8px 4px;border-radius:20px;margin-left:9px}
 
   .b270-day-complete{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:11px 13px;
                      border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:var(--shadow)}
@@ -168,15 +211,15 @@
   .b270-readings{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
   .b270-reading{display:flex;gap:15px;align-items:center;padding:16px 20px;border-left:4px solid transparent}
   .b270-reading+.b270-reading{border-top:1px solid var(--line-soft)}
-  .b270-reading.ot{border-left-color:var(--teal)} .b270-reading.nt{border-left-color:var(--oxblood)} .b270-reading.pp{border-left-color:var(--gold)}
+  .b270-reading.ot{border-left-color:var(--teal-mark)} .b270-reading.nt{border-left-color:var(--oxblood-mark)} .b270-reading.pp{border-left-color:var(--gold-mark)}
   .b270-reading.rest{opacity:.65}
   .b270-toggle{border:none;background:none;padding:0;cursor:pointer}
   .b270-toggle form{margin:0}
-  .b270-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--line);flex:none;display:grid;place-items:center;background:#fff;transition:background-color .18s,border-color .18s,opacity .18s}
-  .b270-check svg{width:15px;height:15px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
-  .b270-reading.done.ot .b270-check{background:var(--teal);border-color:var(--teal)}
-  .b270-reading.done.nt .b270-check{background:var(--oxblood);border-color:var(--oxblood)}
-  .b270-reading.done.pp .b270-check{background:var(--gold);border-color:var(--gold)}
+  .b270-check{width:26px;height:26px;border-radius:8px;border:2px solid var(--control-line);flex:none;display:grid;place-items:center;background:var(--control);transition:background-color .18s,border-color .18s,opacity .18s}
+  .b270-check svg{width:15px;height:15px;stroke:var(--on-accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
+  .b270-reading.done.ot .b270-check{background:var(--teal-fill);border-color:var(--teal-mark)}
+  .b270-reading.done.nt .b270-check{background:var(--oxblood-fill);border-color:var(--oxblood-mark)}
+  .b270-reading.done.pp .b270-check{background:var(--gold-fill);border-color:var(--gold-mark)}
   .b270-reading.done .b270-check svg{opacity:1}
   .b270-rbody{flex:1;min-width:0}
   .b270-cat{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:600}
@@ -195,16 +238,16 @@
   /* A ticked chapter looks exactly like a ticked single reading: the box fills
      in the track's colour and the tick appears. No strikethrough — the other
      tracks don't strike their references either. */
-  .b270-reading.ot .b270-part.done .b270-check{background:var(--teal);border-color:var(--teal)}
-  .b270-reading.nt .b270-part.done .b270-check{background:var(--oxblood);border-color:var(--oxblood)}
-  .b270-reading.pp .b270-part.done .b270-check{background:var(--gold);border-color:var(--gold)}
+  .b270-reading.ot .b270-part.done .b270-check{background:var(--teal-fill);border-color:var(--teal-mark)}
+  .b270-reading.nt .b270-part.done .b270-check{background:var(--oxblood-fill);border-color:var(--oxblood-mark)}
+  .b270-reading.pp .b270-part.done .b270-check{background:var(--gold-fill);border-color:var(--gold-mark)}
   .b270-part.done .b270-check svg{opacity:1}
   .b270-parts-meta{margin-top:10px;font-size:12.5px;color:var(--faint)}
   .b270-version{font-size:11.5px;color:var(--faint);font-weight:400;letter-spacing:.02em;white-space:nowrap}
-  .b270-select{font:inherit;font-size:14px;padding:10px 30px 10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%;max-width:100%;text-overflow:ellipsis}
+  .b270-select{font:inherit;font-size:14px;padding:10px 30px 10px 12px;border:1px solid var(--control-line);border-radius:9px;background:var(--control);color:var(--ink);width:100%;max-width:100%;text-overflow:ellipsis}
   .b270-source-choices{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:nowrap;width:100%;margin:8px 0 2px;color:var(--muted);font-size:clamp(10.5px,3.4vw,12.5px)}
   .b270-source-choice{display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
-  .b270-source-choice input{appearance:none;width:14px;height:14px;margin:0;border:1px solid var(--line);border-radius:3px;background:#fff;display:grid;place-content:center;cursor:pointer;flex:none}
+  .b270-source-choice input{appearance:none;width:14px;height:14px;margin:0;border:1px solid var(--control-line);border-radius:3px;background:var(--control);display:grid;place-content:center;cursor:pointer;flex:none}
   .b270-source-choice input::before{content:"";width:9px;height:9px;transform:scale(0);transition:transform .1s;clip-path:polygon(14% 44%,0 59%,38% 100%,100% 18%,82% 0,37% 65%);background:var(--paper)}
   .b270-source-choice input:checked{background:var(--gold);border-color:var(--gold)}
   .b270-source-choice input:checked::before{transform:scale(1)}
@@ -219,7 +262,7 @@
 
   /* completers */
   .b270-completers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted)}
-  .b270-avatar{border-radius:50%;object-fit:cover;display:inline-block;text-align:center;background:var(--teal);color:#fff;font-size:12px;font-weight:600}
+  .b270-avatar{border-radius:50%;object-fit:cover;display:inline-block;text-align:center;background:var(--teal-fill);color:var(--on-accent);font-size:12px;font-weight:600}
   .b270-avatar-fallback{border-radius:50%}
 
   /* comments */
@@ -239,6 +282,7 @@
   .b270-mention{color:var(--teal);font-weight:600;text-decoration:none}
   .b270-mention:hover{text-decoration:underline}
   .b270-cactions{display:flex;align-items:center;gap:12px;margin-top:6px;flex-wrap:wrap}
+  .b270-cactions .b270-linkbtn{margin:0}
   .b270-likes{display:inline-flex;align-items:center;gap:3px;position:relative}
   .b270-heart{font-size:13px;line-height:1;cursor:default}
   /* The single heart is also the toggle for signed-in readers. It stays red
@@ -280,8 +324,8 @@
   .b270-comment.b270-editing{background:rgba(165,129,44,.05);border-radius:10px;padding:12px}
   .b270-editing textarea{min-height:64px}
   .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-input{width:100%;padding:9px 11px;border:1px solid var(--control-line);border-radius:9px;background:var(--control);color:var(--ink);font:inherit;font-size:14px;margin-bottom:8px}
+  .b270-form textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--control-line);border-radius:10px;padding:11px 13px;background:var(--control);color:var(--ink);resize:vertical;min-height:76px}
   .b270-form textarea[data-b270-autosize=false]{min-height:114px}
   .b270-broadcast-audience{margin:8px 0}
   .b270-editor-utilities[hidden]{display:none}
@@ -301,7 +345,7 @@
   .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{min-height:76px;margin:0;padding:11px 13px;border:1px solid var(--control-line);border-radius:10px;background:var(--control);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}
@@ -315,15 +359,16 @@
   .b270-mention-option:hover,.b270-mention-option[aria-selected=true]{background:var(--paper);color:var(--gold)}
   .b270-draft-status{min-height:16px;margin:4px 0 -4px;font-size:11.5px;color:var(--faint)}
   .b270-form .row{display:flex;align-items:center;gap:10px;margin-top:10px}
-  .b270-form .row select{max-width:100%}
-  .b270 .b270-btn{border:none;border-radius:10px;padding:8px 16px;margin-top:4px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;background:var(--ink);color:var(--paper);text-decoration:none;display:inline-block}
-  .b270-btn:hover{background:#3a352b}
+  /* Override the reflection track selector's inline background and border color. */
+  .b270-form .row select{max-width:100%;background:var(--control)!important;border-color:var(--control-line)!important;color:var(--ink)}
+  .b270 .b270-btn{border:none;border-radius:10px;padding:8px 16px;margin-top:4px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;background:var(--button-surface);color:var(--button-ink);text-decoration:none;display:inline-block}
+  .b270 .b270-btn:hover{background:var(--button-hover)}
 
   /* community */
   .b270-admin-reader-tools{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;margin:0 0 10px;flex-wrap:wrap}
   .b270-admin-reader-sort{display:flex;align-items:flex-end;gap:8px}
   .b270-admin-reader-sort label{display:grid;gap:3px;font-size:11.5px;color:var(--muted)}
-  .b270-admin-reader-sort select{min-width:170px;padding:7px 25px 7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:12.5px}
+  .b270-admin-reader-sort select{min-width:170px;padding:7px 25px 7px 9px;border:1px solid var(--control-line);border-radius:8px;background:var(--control);color:var(--ink);font:inherit;font-size:12.5px}
   .b270 .b270-admin-reader-sort .b270-btn,.b270 .b270-reader-stats-open{margin:0;padding:8px 13px;font-size:12.5px}
   .b270-reader-stats-dialog{width:min(680px,calc(100vw - 28px));max-width:none;padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 18px 60px rgba(35,31,24,.35)}
   .b270-reader-stats-dialog::backdrop{background:rgba(35,31,24,.55)}
@@ -332,7 +377,7 @@
   .b270-reader-stats-head .b270-subhead{margin:0}
   .b270-reader-stats-head form{margin:0}
   .b270-reader-stats-head .b270-linkbtn{margin:0;color:var(--muted)}
-  .b270-reader-stats-dialog pre{max-height:65vh;overflow:auto;margin:0;padding:12px;border:1px solid var(--line-soft);border-radius:9px;background:#fff;color:var(--ink);font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
+  .b270-reader-stats-dialog pre{max-height:65vh;overflow:auto;margin:0;padding:12px;border:1px solid var(--line-soft);border-radius:9px;background:var(--control);color:var(--ink);font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
   .b270-list{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
   .b270-li{display:flex;align-items:center;gap:14px;padding:14px 18px}
   .b270-li+.b270-li{border-top:1px solid var(--line-soft)}
@@ -348,13 +393,13 @@
   .b270 .b270-cell{aspect-ratio:1;border-radius:6px;border:1px solid var(--line);background:var(--card);font-size:10.5px;color:var(--faint);display:grid;place-items:center;text-decoration:none;font-variant-numeric:tabular-nums}
   .b270-cell:hover{border-color:var(--gold);color:var(--gold)}
   .b270-cell.partial{background:linear-gradient(135deg,var(--card) 50%,rgba(165,129,44,.35) 50%);color:var(--muted)}
-  .b270-cell.complete{background:var(--teal);border-color:var(--teal);color:#eef3f2;font-weight:600}
+  .b270-cell.complete{background:var(--teal-fill);border-color:var(--teal-mark);color:var(--complete-ink);font-weight:600}
   /* Days that have reflections carry a dot and nothing else: the fill stays
      free to mean reading progress, so the two facts never compete. On a finished
-     square the dot goes pale, since oxblood on teal is hard to pick out. */
+     square the dot contrasts with teal, since oxblood on teal is hard to pick out. */
   .b270-cell.talk{position:relative}
   .b270-cell.talk::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--oxblood)}
-  .b270-cell.talk.complete::after{background:#f4efe6}
+  .b270-cell.talk.complete::after{background:var(--complete-dot)}
   .b270-cell.now{box-shadow:0 0 0 2px var(--gold)}
 
   /* On the Reflections page each thread carries the day it belongs to, since
@@ -364,7 +409,7 @@
   .b270-reflection-count{margin:3px 0 0;font-size:12px;color:var(--faint)}
   .b270-reflection-filters{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;flex-wrap:wrap}
   .b270-reflection-filters label{display:grid;gap:3px;font-size:11.5px;color:var(--muted)}
-  .b270-reflection-filters select{min-width:112px;max-width:180px;padding:7px 25px 7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:12.5px}
+  .b270-reflection-filters select{min-width:112px;max-width:180px;padding:7px 25px 7px 9px;border:1px solid var(--control-line);border-radius:8px;background:var(--control);color:var(--ink);font:inherit;font-size:12.5px}
   .b270 .b270-reflection-filters .b270-btn{margin:0;padding:8px 13px;font-size:12.5px}
   .b270 .b270-filter-clear{align-self:center;font-size:12px;color:var(--muted)}
   .b270-thread{margin-bottom:8px}

data/app/views/layouts/bible270/application.html.erb

@@ -13,7 +13,7 @@
   <%= render "bible270/shared/styles" %>
   <%= yield :head %>
 </head>
-<body class="b270">
+<body class="b270" data-display-mode="<%= current_reader&.effective_display_mode || Bible270::Reader::DEFAULT_DISPLAY_MODE %>">
   <div class="b270-wrap">
     <%= render "bible270/shared/header" %>
     <% if flash[:alert] %><div class="b270-flash alert"><%= flash[:alert] %></div><% end %>

data/db/migrate/20260101000023_add_display_mode_to_bible270_readers.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddDisplayModeToBible270Readers < ActiveRecord::Migration[7.0]
+  def change
+    add_column :bible270_readers, :display_mode, :string, null: false, default: 'system'
+  end
+end

data/lib/bible270/migration_reconciler.rb

@@ -32,6 +32,7 @@ module Bible270
       'AddCompletionDoveDisabledToBible270Readers' => :check_completion_dove_disabled,
       'AddBodyFormatToBible270Comments' => :check_comment_body_format,
       'ChangeAllCommentNoticesDefaultToTrue' => :check_all_comment_notices_default,
+      'AddDisplayModeToBible270Readers' => :check_display_mode,
       'CreateActiveStorageTables' => :check_active_storage
     }.freeze
 
@@ -222,6 +223,16 @@ module Bible270
       missing
     end
 
+    def check_display_mode
+      missing = table_missing(:bible270_readers, columns: %i[display_mode])
+      return missing if missing.any?
+
+      column = connection.columns(:bible270_readers).find { |candidate| candidate.name == 'display_mode' }
+      missing << 'column bible270_readers.display_mode default system' unless column&.default == 'system'
+      missing << 'column bible270_readers.display_mode null false' unless column && !column.null
+      missing
+    end
+
     def check_all_comment_notices_default
       missing = table_missing(:bible270_readers, columns: %i[notify_on_all_comments])
       return missing if missing.any?

data/lib/bible270/reader_progress_report.rb

@@ -28,14 +28,14 @@ module Bible270
         Row.new(
           name: reader.display_name,
           days_read: days_read,
-          status: status(reader, days_read),
+          status: reader.progress_status(completed_days: days_read),
           last_activity: last_activity_date(reader)
         )
       end
     end
 
     def status_for(reader)
-      status(reader, completed_days.fetch(reader.id, 0))
+      reader.progress_status(completed_days: completed_days.fetch(reader.id, 0))
     end
 
     def empty? = rows.empty?
@@ -83,16 +83,5 @@ module Bible270
       occurred_at = recent_activities[reader.id]&.occurred_at
       occurred_at ? Bible270.local_time(occurred_at).strftime('%b %-d, %Y') : '—'
     end
-
-    def status(reader, days_read)
-      calendar_day = reader.calendar_day
-      return 'undated' unless calendar_day
-
-      difference = days_read - calendar_day
-      return 'on track' if difference.zero?
-
-      amount = difference.abs
-      "#{amount} #{amount == 1 ? 'day' : 'days'} #{difference.positive? ? 'ahead' : 'behind'}"
-    end
   end
 end

data/lib/bible270/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bible270
-  VERSION = '1.8.4'
+  VERSION = '1.9.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bible270
 version: !ruby/object:Gem::Version
-  version: 1.8.4
+  version: 1.9.0
 platform: ruby
 authors:
 - Andrew vonderLuft
@@ -217,6 +217,7 @@ files:
 - db/migrate/20260101000020_add_completion_dove_disabled_to_bible270_readers.rb
 - db/migrate/20260101000021_add_body_format_to_bible270_comments.rb
 - db/migrate/20260101000022_change_all_comment_notices_default_to_true.rb
+- db/migrate/20260101000023_add_display_mode_to_bible270_readers.rb
 - lib/bible270.rb
 - lib/bible270/avatars.rb
 - lib/bible270/comment_formatter.rb