feat: Implement person-specific checklist item completion functionality

- Add a new Stimulus controller for managing person checklist item states.
- Update the Checklist model to include positioned checklist items.
- Modify the PersonChecklistItem model to remove unnecessary protection.
- Enhance the ChecklistPolicy to include completion status permissions.
- Revamp checklist item view to support person-specific toggling and display.
- Create new partials for checklist item lists and contents for better Turbo integration.
- Add edit view for checklist items.
- Update checklist show view to incorporate new checklist item rendering logic.
- Extend routes to support person checklist item endpoints.
- Implement feature specs for person checklist item completion and reordering.
- Add request specs for JSON responses related to person checklist items.

Author: rsmithlal

app/assets/stylesheets/better_together/_checklist_transitions.scss

@@ -0,0 +1,140 @@
+@use 'theme' as *;
+
+/* Gentle cross-fade for checklist list updates to reduce visual flicker */
+.bt-list-fade {
+  position: relative;
+}
+.bt-list-fade > ul {
+  /* Do not fade the list on update — keep items fully visible. */
+  /* Only allow transform transitions when necessary for small motion hints. */
+  transition: transform 120ms ease-in-out;
+  will-change: transform;
+}
+.bt-list-fade.is-updating > ul {
+  /* No opacity change: keep list visible during updates. */
+  opacity: 1;
+  transform: none;
+}
+
+/* Highlight a moved item briefly when inserted */
+@keyframes bt-move-highlight {
+  0% { background-color: rgba(255, 255, 0, 0.95); }
+  40% { background-color: rgba(255, 255, 0, 0.6); }
+  100% { background-color: transparent; }
+}
+
+.moved-item {
+  animation: bt-move-highlight 900ms ease forwards;
+}
+
+/* Smooth enable/disable transitions for move buttons */
+.btn.keyboard-move-up,
+.btn.keyboard-move-down,
+.keyboard-move-up,
+.keyboard-move-down {
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+.disabled {
+  opacity: 0.45 !important;
+  transform: translateY(0);
+}
+
+/* Drag handle styling */
+.drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: $text-opposite-theme-color;
+  cursor: grab;
+}
+.drag-handle:active { cursor: grabbing }
+.drag-handle i { font-size: 0.9rem }
+
+/* Focus style for keyboard discoverability */
+.drag-handle:focus {
+  outline: 2px solid rgba(0,0,0,0.12);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/* Cloned drag image styling: visually match the list item, but don't intercept pointer events */
+.bt-drag-image {
+  pointer-events: none;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
+  opacity: 0.98;
+  background: white;
+}
+
+/* Visual cue for the list item currently being dragged */
+.dragging {
+  opacity: 0.85;
+  transform: scale(0.995);
+  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
+  transition: box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;
+}
+
+/* Drop indicators: insertion line before/after and a subtle highlight for target item */
+.bt-drop-before::before,
+.bt-drop-after::after {
+  /* Draw a clear insertion line near the top or bottom of the target item */
+  content: '';
+  position: absolute;
+  left: 0.5rem;
+  right: 0.5rem;
+  height: 0;
+  pointer-events: none;
+  border-top: 2px solid rgba(0, 123, 255, 0.9); /* high-contrast insertion line */
+  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
+}
+.bt-drop-before::before { top: 0.25rem; }
+.bt-drop-after::after { bottom: 0.25rem; }
+.bt-drop-before,
+.bt-drop-after {
+  /* Remove full-row tint; keep a very subtle background so target is still readable */
+  transition: background-color 120ms ease;
+  background-color: transparent;
+  position: relative; /* ensure pseudo-element is positioned relative to LI */
+}
+
+/* Disable pointer cursor and interactions for checklist-checkboxes that are not actionable */
+.checklist-checkbox[aria-disabled="true"],
+.checklist-checkbox[tabindex="-1"] {
+  cursor: default !important;
+  /* Allow pointer events so hover/tooltips still work; click handlers are
+     not present when aria-disabled is true, so disabling clicks is handled
+     by markup rather than pointer-events. */
+  pointer-events: auto;
+  opacity: 0.9;
+}
+
+/* Visual treatment for unauthenticated / non-actionable checklist items */
+.list-group-item .checklist-checkbox[aria-disabled="true"] {
+  /* make the checkbox area look subdued */
+  opacity: 0.9;
+  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 */
+  display: inline-block;
+  position: absolute;
+  left: 2.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.85rem;
+  color: rgba(0,0,0,0.45);
+  pointer-events: none;
+}
+.list-group-item[data-person-toggle="false"] {
+  /* slightly mute entire row to indicate read-only state for this viewer */
+  opacity: 0.95;
+}
+.list-group-item[data-person-toggle="false"] .fa-stack-2x {
+  /* dim the avatar / icon for read-only viewers */
+  opacity: 0.55;
+}
+.list-group-item[data-person-toggle="false"] .text-muted {
+  color: rgba(0,0,0,0.45) !important;
+}

app/assets/stylesheets/better_together/application.scss

@@ -23,6 +23,7 @@
 @use 'devise';
 @use 'font-awesome';
 @use 'actiontext';
+@use 'checklist_transitions';
 @use 'contact_details';
 @use 'content_blocks';
 @use 'conversations';

app/controllers/better_together/checklist_items_controller.rb

@@ -3,7 +3,7 @@
 module BetterTogether
   class ChecklistItemsController < FriendlyResourceController # rubocop:todo Style/Documentation, Metrics/ClassLength
     before_action :set_checklist
-    before_action :checklist_item, only: %i[show edit update destroy]
+    before_action :checklist_item, only: %i[show edit update destroy position]
 
     helper_method :new_checklist_item
 
@@ -13,7 +13,9 @@ def create # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
       authorize @checklist_item
       respond_to do |format|
         if @checklist_item.save
-          format.html { redirect_to request.referer || checklist_path(@checklist), notice: t('flash.generic.created') }
+          format.html do
+            redirect_to request.referer || checklist_path(@checklist), notice: t('flash.generic.created')
+          end
           format.turbo_stream
         else
           format.html do
@@ -35,7 +37,9 @@ def update # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
       authorize @checklist_item
       respond_to do |format|
         if @checklist_item.update(resource_params)
-          format.html { redirect_to request.referer || checklist_path(@checklist), notice: t('flash.generic.updated') }
+          format.html do
+            redirect_to request.referer || checklist_path(@checklist), notice: t('flash.generic.updated')
+          end
           format.turbo_stream
         else
           format.html do
@@ -65,7 +69,8 @@ def destroy
     end
 
     def position # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
-      authorize @checklist_item
+      # Reordering affects the checklist as a whole; require permission to update the parent
+      authorize @checklist, :update?
 
       direction = params[:direction]
       sibling = if direction == 'up'
@@ -87,10 +92,27 @@ def position # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
       respond_to do |format|
         format.html { redirect_to request.referer || checklist_path(@checklist), notice: t('flash.generic.updated') }
         format.turbo_stream do
-          render turbo_stream: turbo_stream.replace(dom_id(@checklist, :checklist_items)) {
-            render partial: 'better_together/checklist_items/checklist_item',
-                   collection: @checklist.checklist_items.with_translations, as: :checklist_item
-          }
+              # Move the LI node: remove the moved element and insert before/after the sibling
+              begin
+                a = @checklist_item
+                b = sibling
+                streams = []
+                streams << turbo_stream.remove(helpers.dom_id(a))
+
+                # If direction is up, insert before sibling; if down, insert after sibling
+              if direction == 'up'
+                streams << turbo_stream.before(helpers.dom_id(b), partial: 'better_together/checklist_items/checklist_item', locals: { checklist_item: a, checklist: @checklist, moved: true })
+              else
+                streams << turbo_stream.after(helpers.dom_id(b), partial: 'better_together/checklist_items/checklist_item', locals: { checklist_item: a, checklist: @checklist, moved: true })
+              end
+
+                render turbo_stream: streams
+              rescue StandardError
+                # Fallback: update only the inner list contents
+                render turbo_stream: turbo_stream.update("#{helpers.dom_id(@checklist, :checklist_items)}",
+                                                         partial: 'better_together/checklist_items/list_contents',
+                                                         locals: { checklist: @checklist })
+              end
         end
       end
     end
@@ -104,6 +126,9 @@ def reorder # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
 
       klass = resource_class
 
+      # Capture previous order before we update positions so we can compute a minimal DOM update
+      previous_order = @checklist.checklist_items.order(:position).pluck(:id)
+
       klass.transaction do
         ids.each_with_index do |id, idx|
           item = klass.find_by(id: id, checklist: @checklist)
@@ -116,10 +141,60 @@ def reorder # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
       respond_to do |format|
         format.json { head :no_content }
         format.turbo_stream do
-          render turbo_stream: turbo_stream.replace(dom_id(@checklist, :checklist_items)) {
-            render partial: 'better_together/checklist_items/checklist_item',
-                   collection: @checklist.checklist_items.with_translations, as: :checklist_item
-          }
+            # Try a minimal DOM update: if exactly one item moved, remove it and insert before/after the neighbor.
+            begin
+              ordered = params[:ordered_ids].map(&:to_i)
+              # previous_order holds the order before we updated positions
+              current_before = previous_order
+
+              # If nothing changed, no content
+              if ordered == current_before
+                head :no_content and return
+              end
+
+              # Detect single moved id (difference between arrays)
+              moved = (ordered - current_before)
+              removed = (current_before - ordered)
+
+              if moved.size == 1 && removed.size == 1
+                moved_id = moved.first
+                moved_item = @checklist.checklist_items.find_by(id: moved_id)
+                # Safety: if item not found, fallback
+                unless moved_item
+                  raise 'moved-missing'
+                end
+
+                # Where did it land?
+                new_index = ordered.index(moved_id)
+
+                streams = []
+                # Remove original node first
+                streams << turbo_stream.remove(helpers.dom_id(moved_item))
+
+                # Append after the next element (neighbor at new_index + 1)
+                neighbor_id = ordered[new_index + 1] if new_index
+                if neighbor_id
+                  neighbor = @checklist.checklist_items.find_by(id: neighbor_id)
+                  if neighbor
+                    streams << turbo_stream.after(helpers.dom_id(neighbor), partial: 'better_together/checklist_items/checklist_item', locals: { checklist_item: moved_item, checklist: @checklist, moved: true })
+                    render turbo_stream: streams and return
+                  end
+                end
+
+                # If neighbor not found (moved to end), append to the UL
+                streams << turbo_stream.append("#{helpers.dom_id(@checklist, :checklist_items)} ul", partial: 'better_together/checklist_items/checklist_item', locals: { checklist_item: moved_item, checklist: @checklist, moved: true })
+                render turbo_stream: streams and return
+              end
+
+              # Fallback: update inner contents for complex reorders
+              render turbo_stream: turbo_stream.update("#{helpers.dom_id(@checklist, :checklist_items)}",
+                                                       partial: 'better_together/checklist_items/list_contents',
+                                                       locals: { checklist: @checklist })
+            rescue StandardError
+              render turbo_stream: turbo_stream.update("#{helpers.dom_id(@checklist, :checklist_items)}",
+                                                       partial: 'better_together/checklist_items/list_contents',
+                                                       locals: { checklist: @checklist })
+            end
         end
       end
     end
@@ -128,14 +203,37 @@ def reorder # rubocop:todo Metrics/AbcSize, Metrics/MethodLength
 
     def set_checklist
       key = params[:checklist_id] || params[:id]
-      @checklist = if key.nil?
-                     nil
-                   else
-                     # The checklists table doesn't have a direct `slug` column in this schema
-                     # (friendly id slugs are stored in the `friendly_id_slugs` table), so avoid
-                     # querying `slug` directly. Lookup by id or identifier instead.
-                     BetterTogether::Checklist.where(id: key).or(BetterTogether::Checklist.where(identifier: key)).first
-                   end
+
+      @checklist = nil
+      if key.present?
+        # Try direct id/identifier lookup first (fast)
+        @checklist = BetterTogether::Checklist.where(id: key).or(BetterTogether::Checklist.where(identifier: key)).first
+
+        # Fallbacks to mirror FriendlyResourceController behaviour: try translated slug lookups
+        if @checklist.nil?
+          begin
+            # Try Mobility translation lookup across locales
+            translation = Mobility::Backends::ActiveRecord::KeyValue::StringTranslation.where(
+              translatable_type: 'BetterTogether::Checklist',
+              key: 'slug',
+              value: key
+            ).includes(:translatable).last
+
+            @checklist ||= translation&.translatable
+          rescue StandardError
+            # ignore DB/translation lookup errors and continue to friendly_id fallback
+          end
+        end
+
+        if @checklist.nil?
+          begin
+            @checklist = BetterTogether::Checklist.friendly.find(key)
+          rescue StandardError
+            @checklist ||= BetterTogether::Checklist.find_by(id: key)
+          end
+        end
+      end
+
       raise ActiveRecord::RecordNotFound unless @checklist
     end
 

app/controllers/better_together/checklists_controller.rb

@@ -8,12 +8,23 @@ def create
       @checklist.creator = helpers.current_person if @checklist.respond_to?(:creator=)
 
       if @checklist.save
-        redirect_to @checklist, notice: t('flash.generic.created')
+        redirect_to @checklist, notice: t('flash.generic.created', resource: t('resources.checklist'))
       else
         render :new, status: :unprocessable_entity
       end
     end
 
+    def completion_status
+      authorize resource_instance
+      person = current_user&.person
+      total = resource_instance.checklist_items.count
+      completed = 0
+
+      completed = resource_instance.person_checklist_items.where(person:).where.not(completed_at: nil).count if person
+
+      render json: { total: total, completed: completed, complete: total.positive? && completed >= total }
+    end
+
     private
 
     def resource_class