feat: Enhance checklist item styles and privacy badge functionality with Bootstrap integration

Author: rsmithlal

app/assets/stylesheets/better_together/_checklist_transitions.scss

@@ -116,15 +116,21 @@
   position: relative;
 }
 .list-group-item .checklist-checkbox[aria-disabled="true"]::after {
-  /* small lock glyph to indicate action is restricted */
-  content: '\1F512'; /* Unicode lock glyph via codepoint */
+  /* small lock glyph to indicate action is restricted - use Font Awesome solid lock for consistent styling */
+  content: "\f023"; /* Font Awesome: fa-lock */
+  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
+  font-weight: 900; /* use solid weight */
   display: inline-block;
   position: absolute;
-  left: 2.25rem;
+  /* center the icon over the check ring (bt-checkmark is 2rem wide) */
+  left: 0;
+  width: 2rem;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 0.85rem;
-  color: rgba(0,0,0,0.45);
+  text-align: center;
+  font-size: 0.95rem;
+  /* inherit color from the checkbox container so privacy variants apply */
+  color: currentColor;
   pointer-events: none;
 }
 .list-group-item[data-person-toggle="false"] {
@@ -138,3 +144,103 @@
 .list-group-item[data-person-toggle="false"] .text-muted {
   color: rgba(0,0,0,0.45) !important;
 }
+
+/* Checklist checkbox visual refinements
+   - show a clear outlined ring when unchecked
+   - visually emphasize completed state with tinted background
+   - keep checkmark visibility controlled by the JS toggling the `d-none` class
+*/
+.checklist-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* default check color (primary) – privacy mappings will override this on the container */
+  color: rgba(13,110,253,0.9);
+}
+
+.bt-checkmark {
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+}
+
+.bt-check-ring {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid rgba(0,0,0,0.12);
+  background: white;
+  box-sizing: border-box;
+}
+
+.checklist-checkbox.completed .bt-check-ring {
+  background-color: rgba(13,110,253,0.12);
+  border-color: rgba(13,110,253,0.6);
+}
+
+.bt-check-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  font-size: 0.9rem;
+  /* inherit color from the checkbox container so privacy variants apply */
+  color: currentColor;
+}
+
+/* Privacy-tinted checkbox variants. The attribute `data-privacy-style` is set
+  on the checkbox container with values that match our badge style map
+  (e.g., success, secondary, info, primary, dark). Use conservative fallbacks
+  to avoid relying on presence of Bootstrap variables in all themes. */
+
+[data-privacy-style="success"] .bt-check-ring { background-color: rgba(40,167,69,0.12); border-color: rgba(40,167,69,0.6); }
+[data-privacy-style="success"] .checklist-checkbox.completed .bt-check-ring { background-color: rgba(40,167,69,0.14); border-color: rgba(40,167,69,0.8); }
+[data-privacy-style="success"] .bt-check-icon { color: rgba(40,167,69,0.9); }
+
+[data-privacy-style="secondary"] .bt-check-ring { background-color: rgba(108,117,125,0.08); border-color: rgba(108,117,125,0.5); }
+[data-privacy-style="secondary"] .checklist-checkbox.completed .bt-check-ring { background-color: rgba(108,117,125,0.12); border-color: rgba(108,117,125,0.6); }
+[data-privacy-style="secondary"] .bt-check-icon { color: rgba(108,117,125,0.9); }
+.checklist-checkbox[data-privacy-style="success"] .bt-check-ring { background-color: rgba(40,167,69,0.12); border-color: rgba(40,167,69,0.6); }
+.checklist-checkbox[data-privacy-style="success"].completed .bt-check-ring { background-color: rgba(40,167,69,0.14); border-color: rgba(40,167,69,0.8); }
+.checklist-checkbox[data-privacy-style="success"] .bt-check-icon { color: rgba(40,167,69,0.9); }
+
+.checklist-checkbox[data-privacy-style="secondary"] .bt-check-ring { background-color: rgba(108,117,125,0.08); border-color: rgba(108,117,125,0.5); }
+.checklist-checkbox[data-privacy-style="secondary"].completed .bt-check-ring { background-color: rgba(108,117,125,0.12); border-color: rgba(108,117,125,0.6); }
+.checklist-checkbox[data-privacy-style="secondary"] .bt-check-icon { color: rgba(108,117,125,0.9); }
+
+.checklist-checkbox[data-privacy-style="info"] .bt-check-ring { background-color: rgba(23,162,184,0.08); border-color: rgba(23,162,184,0.5); }
+.checklist-checkbox[data-privacy-style="info"].completed .bt-check-ring { background-color: rgba(23,162,184,0.12); border-color: rgba(23,162,184,0.6); }
+.checklist-checkbox[data-privacy-style="info"] .bt-check-icon { color: rgba(23,162,184,0.9); }
+
+.checklist-checkbox[data-privacy-style="primary"] .bt-check-ring { background-color: rgba(13,110,253,0.06); border-color: rgba(13,110,253,0.5); }
+.checklist-checkbox[data-privacy-style="primary"].completed .bt-check-ring { background-color: rgba(13,110,253,0.12); border-color: rgba(13,110,253,0.6); }
+.checklist-checkbox[data-privacy-style="primary"] .bt-check-icon { color: rgba(13,110,253,0.9); }
+
+.checklist-checkbox[data-privacy-style="dark"] .bt-check-ring { background-color: rgba(52,58,64,0.08); border-color: rgba(52,58,64,0.55); }
+.checklist-checkbox[data-privacy-style="dark"].completed .bt-check-ring { background-color: rgba(52,58,64,0.12); border-color: rgba(52,58,64,0.65); }
+.checklist-checkbox[data-privacy-style="dark"] .bt-check-icon { color: rgba(52,58,64,0.95); }
+
+/* Apply the privacy color to the checkbox container so pseudo-elements (lock) and
+  check icon inherit the same color via currentColor. */
+.checklist-checkbox[data-privacy-style="success"] { color: rgba(40,167,69,0.9); }
+.checklist-checkbox[data-privacy-style="secondary"] { color: rgba(108,117,125,0.9); }
+.checklist-checkbox[data-privacy-style="info"] { color: rgba(23,162,184,0.9); }
+.checklist-checkbox[data-privacy-style="primary"] { color: rgba(13,110,253,0.9); }
+.checklist-checkbox[data-privacy-style="dark"] { color: rgba(52,58,64,0.95); }
+
+[data-privacy-style="info"] .bt-check-ring { background-color: rgba(23,162,184,0.08); border-color: rgba(23,162,184,0.5); }
+[data-privacy-style="info"] .checklist-checkbox.completed .bt-check-ring { background-color: rgba(23,162,184,0.12); border-color: rgba(23,162,184,0.6); }
+[data-privacy-style="info"] .bt-check-icon { color: rgba(23,162,184,0.9); }
+
+[data-privacy-style="primary"] .bt-check-ring { background-color: rgba(13,110,253,0.06); border-color: rgba(13,110,253,0.5); }
+[data-privacy-style="primary"] .checklist-checkbox.completed .bt-check-ring { background-color: rgba(13,110,253,0.12); border-color: rgba(13,110,253,0.6); }
+[data-privacy-style="primary"] .bt-check-icon { color: rgba(13,110,253,0.9); }
+
+[data-privacy-style="dark"] .bt-check-ring { background-color: rgba(52,58,64,0.08); border-color: rgba(52,58,64,0.55); }
+[data-privacy-style="dark"] .checklist-checkbox.completed .bt-check-ring { background-color: rgba(52,58,64,0.12); border-color: rgba(52,58,64,0.65); }
+[data-privacy-style="dark"] .bt-check-icon { color: rgba(52,58,64,0.95); }

app/helpers/better_together/badges_helper.rb

@@ -12,10 +12,38 @@ def categories_badge(entity, rounded: true, style: 'info')
       )
     end
 
-    def privacy_badge(entity, rounded: true, style: 'primary')
-      return unless entity.respond_to? :privacy
+    # Render a privacy badge for an entity.
+    # By default, map known privacy values to sensible Bootstrap context classes.
+    # Pass an explicit `style:` to force a fixed Bootstrap style instead of using the mapping.
+    def privacy_badge(entity, rounded: true, style: nil)
+      return unless entity.respond_to?(:privacy) && entity.privacy.present?
 
-      create_badge(entity.privacy.humanize.capitalize, rounded: rounded, style: style)
+      privacy_key = entity.privacy.to_s.downcase
+
+      # Map privacy values to Bootstrap text-bg-* styles. Consumers can override by passing `style:`.
+      privacy_style_map = {
+        'public' => 'success',
+        'private' => 'secondary',
+        'community' => 'info'
+      }
+
+      chosen_style = style || privacy_style_map[privacy_key] || 'primary'
+
+      create_badge(entity.privacy.humanize.capitalize, rounded: rounded, style: chosen_style)
+    end
+
+    # Return the mapped bootstrap-style for an entity's privacy. Useful for wiring
+    # styling elsewhere (for example: tinting checkboxes to match privacy badge).
+    def privacy_style(entity)
+      return nil unless entity.respond_to?(:privacy) && entity.privacy.present?
+      privacy_key = entity.privacy.to_s.downcase
+      privacy_style_map = {
+        'public' => 'success',
+        'private' => 'secondary',
+        'community' => 'info'
+      }
+
+      privacy_style_map[privacy_key] || 'primary'
     end
 
     private

app/views/better_together/checklist_items/_checklist_item.html.erb

@@ -18,16 +18,20 @@
         </div>
       <% end %>
 
-  <div data-better_together--person-checklist-item-target="checkbox"
+      <div data-better_together--person-checklist-item-target="checkbox"
        role="button"
        tabindex="<%= can_person_toggle ? '0' : '-1' %>"
        aria-pressed="false"
        aria-disabled="<%= can_person_toggle ? 'false' : 'true' %>"
        class="me-3 checklist-checkbox"
+       <% if checklist_item.respond_to?(:privacy) && checklist_item.privacy.present? %>
+         data-privacy-style="<%= privacy_style(checklist_item) %>"
+       <% end %>
        <%= 'data-action="click->better_together--person-checklist-item#toggle keydown->better_together--person-checklist-item#toggle"' if can_person_toggle %>>
-        <span class="fa-stack fa-2x">
-          <i class="fa fa-circle fa-stack-2x text-secondary" aria-hidden="true"></i>
-          <i class="fa fa-check fa-stack-1x fa-inverse d-none" aria-hidden="true"></i>
+        <%# Use a simple structure (ring + check icon) so the unchecked state can be styled reliably without depending on FontAwesome stack glyphs. %>
+        <span class="bt-checkmark" aria-hidden="true">
+          <span class="bt-check-ring" aria-hidden="true"></span>
+          <i class="fa fa-check bt-check-icon d-none" aria-hidden="true"></i>
         </span>
       </div>
       <% unless can_person_toggle %>
@@ -39,6 +43,10 @@
         <% if checklist_item.description.present? %>
           <div class="text-muted small"><%= checklist_item.description %></div>
         <% end %>
+        <%# Privacy badge shown below the description (or under the label when no description) %>
+        <% if checklist_item.respond_to?(:privacy) %>
+          <div class="mt-1"><%= privacy_badge(checklist_item) %></div>
+        <% end %>
       </div>
       <div class="ms-auto small text-muted" data-better_together--person-checklist-item-target="timestamp"></div>
     </div>
@@ -78,7 +86,8 @@
   <%# Render children container (always present so Turbo can target it); CSS hides it when empty %>
   <% has_children = checklist_item.children.exists? %>
   <ul id="<%= dom_id(checklist_item, :children) %>" class="list-group ms-4 children_checklist_item <%= dom_class(checklist_item, :children) %>" data-has-children="<%= has_children ? 'true' : 'false' %>">
-    <%= render partial: 'better_together/checklist_items/checklist_item', collection: checklist_item.children.with_translations.order(:position), as: :checklist_item %>
+    <% child_items = policy_scope(::BetterTogether::ChecklistItem).where(checklist: checklist_item.checklist, parent_id: checklist_item.id).with_translations.order(:position) %>
+    <%= render partial: 'better_together/checklist_items/checklist_item', collection: child_items, as: :checklist_item %>
   </ul>
 </li>
 

app/views/better_together/checklist_items/_list.html.erb

@@ -1,6 +1,7 @@
 <%# app/views/better_together/checklist_items/_list.html.erb %>
 <div id="<%= dom_id(checklist, :checklist_items) %>" class="bt-list-fade" data-better_together--checklist-items-target="list" data-bt-debug="true" data-can-update="<%= policy(checklist).update? ? 'true' : 'false' %>">
   <ul class="list-group bt-checklist" role="list" aria-labelledby="checklist-items-list">
-    <%= render partial: 'better_together/checklist_items/checklist_item', collection: checklist.checklist_items.with_translations.where(parent_id: nil).order(:position), as: :checklist_item %>
+  <% items = policy_scope(::BetterTogether::ChecklistItem).where(checklist: checklist, parent_id: nil).with_translations.order(:position) %>
+  <%= render partial: 'better_together/checklist_items/checklist_item', collection: items, as: :checklist_item %>
   </ul>
 </div>

app/views/better_together/checklist_items/_list_contents.html.erb

@@ -1,6 +1,7 @@
 <%# app/views/better_together/checklist_items/_list.html.erb %>
 <div id="<%= dom_id(checklist, :checklist_items) %>" class="bt-list-fade" data-better_together--checklist-items-target="list" data-bt-debug="true" data-can-update="<%= policy(checklist).update? ? 'true' : 'false' %>">
   <ul class="list-group bt-checklist" role="list" aria-labelledby="checklist-items-list">
-    <%= render partial: 'better_together/checklist_items/checklist_item', collection: checklist.checklist_items.with_translations.where(parent_id: nil).order(:position), as: :checklist_item %>
+  <% items = policy_scope(::BetterTogether::ChecklistItem).where(checklist: checklist, parent_id: nil).with_translations.order(:position) %>
+  <%= render partial: 'better_together/checklist_items/checklist_item', collection: items, as: :checklist_item %>
   </ul>
 </div>