From 3d252850fbada8a3831e0f3f32d986794e344616 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 28 Aug 2025 12:10:37 -0500
Subject: [PATCH] Add a focus effect when hovering columns

---
 app/assets/stylesheets/card-columns.css             | 13 +++++++++++++
 app/views/cards/index.html.erb                      |  2 +-
 .../cards/index/engagement/_considering.html.erb    |  7 ++++++-
 app/views/cards/index/engagement/_doing.html.erb    |  7 ++++++-
 app/views/cards/index/engagement/_on_deck.html.erb  |  7 ++++++-
 app/views/public/collections/show/_doing.html.erb   |  2 +-
 6 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 088e1ce0b..d7207cfab 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -119,6 +119,19 @@
     }
   }
 
+  .cards--related:not(:hover):not(.drag-and-drop__hover-container) {
+    .card {
+      box-shadow: 0 0 1px var(--color-ink-medium);
+      opacity: 0.9;
+      transition: box-shadow 450ms ease-in-out, opacity 150ms ease-in-out;
+
+      @media (prefers-color-scheme: dark) {
+        opacity: 0.8;
+        transition: opacity 150ms ease-in-out;
+      }
+    }
+  }
+
   /* Column elements
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index 7909a7bfa..6564f7749 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -37,7 +37,7 @@
         dragover->drag-and-drop#dragOver
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
-  <div class="card-columns">
+  <div class="card-columns" data-controller="related-element" data-related-element-highlight-class="cards--related">
     <%= render "cards/index/engagement/on_deck", **@on_deck.to_h %>
     <%= render "cards/index/engagement/considering", **@considering.to_h %>
     <%= render "cards/index/engagement/doing", **@doing.to_h %>
diff --git a/app/views/cards/index/engagement/_considering.html.erb b/app/views/cards/index/engagement/_considering.html.erb
index f445c1836..edc18a039 100644
--- a/app/views/cards/index/engagement/_considering.html.erb
+++ b/app/views/cards/index/engagement/_considering.html.erb
@@ -1,4 +1,9 @@
-<section id="considering-cards" class="cards cards--considering" data-drag-and-drop-target="container"  data-drop-target="considering">
+<section id="considering-cards" class="cards cards--considering"
+    data-drag-and-drop-target="container"
+    data-drop-target="considering"
+    data-related-element-target="related"
+    data-related-element-group-value="card-columns"
+    data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
   <div class="cards__decoration"></div>
   <%= render "cards/index/add_card_button", user_filtering: @user_filtering %>
   <% if page.used? %>
diff --git a/app/views/cards/index/engagement/_doing.html.erb b/app/views/cards/index/engagement/_doing.html.erb
index 8598d7963..b158ce3d6 100644
--- a/app/views/cards/index/engagement/_doing.html.erb
+++ b/app/views/cards/index/engagement/_doing.html.erb
@@ -1,4 +1,9 @@
-<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;" data-drag-and-drop-target="container" data-drop-target="doing">
+<section id="doing-cards" class="cards cards--doing"
+    data-drag-and-drop-target="container"
+    data-drop-target="doing"
+    data-related-element-target="related"
+    data-related-element-group-value="card-columns"
+    data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
   <% if workflow = filter.single_workflow %>
     <%= render "cards/index/workflow_filter", workflow: workflow, filter: filter %>
   <% else %>
diff --git a/app/views/cards/index/engagement/_on_deck.html.erb b/app/views/cards/index/engagement/_on_deck.html.erb
index cd50efed4..44105b2f6 100644
--- a/app/views/cards/index/engagement/_on_deck.html.erb
+++ b/app/views/cards/index/engagement/_on_deck.html.erb
@@ -1,4 +1,9 @@
-<section id="on-deck-cards" class="cards cards--on-deck" data-drag-and-drop-target="container" data-drop-target="on_deck">
+<section id="on-deck-cards" class="cards cards--on-deck"
+    data-drag-and-drop-target="container"
+    data-drop-target="on_deck"
+    data-related-element-target="related"
+    data-related-element-group-value="card-columns"
+    data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
   <h2 class="cards__heading">On Deck</h2>
 
   <% if page.used? %>
diff --git a/app/views/public/collections/show/_doing.html.erb b/app/views/public/collections/show/_doing.html.erb
index 7e19195ed..d072bc614 100644
--- a/app/views/public/collections/show/_doing.html.erb
+++ b/app/views/public/collections/show/_doing.html.erb
@@ -1,4 +1,4 @@
-<section id="doing-cards" class="cards cards--doing" style="view-transition-name: cards-container;">
+<section id="doing-cards" class="cards cards--doing">
   <h2 class="cards__heading">
     Working On
   </h2>