WIP

app/javascript/controllers/compare_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["checkbox"]
+
+  checkboxTargetConnected(checkbox) {
+    const shotRow = checkbox.closest(".group")
+    if (this.isChecked) {
+      shotRow.setAttribute('data-comparing', true)
+    } else {
+      shotRow.removeAttribute('data-comparing')
+    }
+  }
+
+  select(event) {
+    this.isChecked = event.target.checked
+    this.checkboxTargets.forEach(checkbox => {
+      const shotRow = checkbox.closest(".group")
+      if (this.isChecked) {
+        shotRow.setAttribute('data-comparing', true)
+      } else {
+        shotRow.removeAttribute('data-comparing')
+      }
+
+      if (checkbox.checked && checkbox !== event.target) {
+        checkbox.checked = false
+      }
+    })
+  }
+
+  view(event) {
+    if (this.isChecked) {
+      event.preventDefault()
+      // Find the closest group container first, then find the checkbox within it
+      const shotRow = event.target.closest(".group")
+      const checkbox = shotRow.querySelector('[data-compare-target="checkbox"]')
+      if (checkbox.checked) {
+        checkbox.checked = false
+        checkbox.dispatchEvent(new Event('change'))
+      } else {
+        const checkedCheckbox = this.checkboxTargets.find(cb => cb.checked)
+        if (checkedCheckbox) {
+          const baseId = checkedCheckbox.closest(".group").dataset.shotId
+          const compareId = shotRow.dataset.shotId
+          window.location.href = `/shots/${baseId}/compare/${compareId}`
+        } else {
+          window.location.href = event.target.href
+        }
+      }
+    } else {
+
+    }
+  }
+}

app/views/shots/_shot.html.erb

@@ -1,9 +1,12 @@
 <% @timezone ||= ActiveSupport::TimeZone.new(shot.user&.timezone.presence || "UTC") %>
-<%= tag.div id: dom_id(shot) do %>
-  <div class="relative flex md:rounded sm:shadow dark:sm:shadow-none dark:sm:border dark:sm:border-neutral-700 dark:text-neutral-200">
+<%= tag.div id: dom_id(shot), class: "group", data: { shot_id: shot.id } do %>
+  <div class="relative flex md:rounded sm:shadow dark:sm:shadow-none dark:sm:border dark:sm:border-neutral-700 dark:text-neutral-200 has-checked:bg-terracotta-100/30">
     <div class="relative flex p-4 cursor-pointer grow sm:gap-x-8 dark:hover:bg-neutral-800/25 hover:bg-neutral-100/25">
+      <div class="absolute top-3 right-3 z-10">
+        <%= check_box_tag "compare_shots[]", shot.id, false, class: "standard-checkbox", data: { compare_target: "checkbox", action: "change->compare#select" } %>
+      </div>
       <div class="flex-none hidden w-24 -my-4 -ml-4 lg:w-40" data-check-images-target="container">
-        <% if shot.image.attached? && shot.image.variable? %>
+        <% if false && shot.image.attached? && shot.image.variable? %>
           <div class="flex w-full h-full">
             <%= image_tag shot.image.variant(:thumb), class: "rounded-l object-cover object-center" %>
           </div>
@@ -20,7 +23,7 @@
                 </span>
               <% end %>
               <span class="text-base font-semibold md:text-lg">
-                <%= link_to shot_path(shot) do %>
+                <%= link_to shot_path(shot), data: { action: "click->compare#view" } do %>
                   <span class="absolute inset-x-0 bottom-0 -top-px"></span>
                   <%= shot.profile_title %>
                 <% end %>
@@ -88,7 +91,7 @@
         </div>
       </div>
     </div>
-    <div class="flex border-l border-neutral-200 dark:border-neutral-700">
+    <div class="flex border-l border-neutral-200 dark:border-neutral-700 group-data-comparing:hidden">
       <div class="flex flex-col w-full -mt-px divide-y divide-neutral-200 dark:divide-neutral-700">
         <div class="relative flex grow dark:hover:bg-neutral-800/25 hover:bg-neutral-100/25">
           <%= link_to edit_shot_path(shot), class: "flex items-center p-4 text-sm border border-transparent gap-x-3" do %>

app/views/shots/index.html.erb

@@ -60,7 +60,7 @@
     <%= render "filters" %>
     <div data-controller="modal" class="mt-3 sm:mt-6">
       <%= render "shared/modal" %>
-      <div id="shots" class="flex flex-col divide-y border-y sm:gap-y-4 sm:border-none sm:divide-none border-neutral-200 divide-neutral-200 dark:divide-neutral-700 dark:border-neutral-700" data-controller="check-images">
+      <div id="shots" class="flex flex-col divide-y border-y sm:gap-y-4 sm:border-none sm:divide-none border-neutral-200 divide-neutral-200 dark:divide-neutral-700 dark:border-neutral-700" data-controller="check-images compare">
         <%= render @shots %>
       </div>
     </div>