When you hover a chip, highlight all the other chips about that bubble for that day

app/assets/stylesheets/events.css

@@ -60,3 +60,7 @@
   padding-block: var(--grid-lines);
   z-index: 1;
 }
+
+.event--related {
+  box-shadow: 0 0 0.3em 0.3em var(--bubble-color) !important;
+}

app/javascript/controllers/related_element_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["highlight"]
+  
+  highlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.add(this.highlightClass)
+    })
+  }
+
+  unhighlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.remove(this.highlightClass)
+    })
+  }
+}

app/views/events/_day.html.erb

@@ -1,4 +1,6 @@
-<div class="events--day">
+<div class="events--day" data-controller="related-element" 
+     data-related-element-highlight-class="event--related"
+     data-action="mouseover->related-element#highlight mouseout->related-element#unhighlight">
   <% if events.any? %>
     <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
 

app/views/events/_event.html.erb

@@ -3,7 +3,7 @@
 <%= link_to bucket_bubble_path(bubble.bucket, bubble),
       class: "event panel shadow center center-block flex-inline align-center justify-start gap position-relative",
       style: "--bubble-color: #{ bubble.color }; #{ bubble_rotation(bubble) }",
-      data: { controller: "animation", animation_play_class: "bubble--wobble", animation_play_on_load_value: "true", action: "mouseover->animation#play" } do %>
+      data: { controller: "animation", related_element_target: "bubble_id_#{bubble.id}", animation_play_class: "bubble--wobble", animation_play_on_load_value: "true", action: "mouseover->animation#play" } do %>
   <div class="bubble__shape flex-item-no-shrink txt-large"></div>
   <div class="flex flex-column min-width txt-small txt-tight-lines align-start txt-align-start">
     <strong><%= bubble.title %></strong>