Use Stimulus to position events by timezone

app/assets/stylesheets/events.css

@@ -31,6 +31,10 @@
   &:nth-child(1n + 57) {
     background-color: var(--color-highlight);
   }
+
+  &.future {
+    display: none;
+  }
 }
 
 .event-grid-time {
@@ -50,4 +54,8 @@
     text-transform: uppercase;
     transform: translate(-50%, 50%);
   }
+
+  &.future {
+    display: none;
+  }
 }

app/helpers/events_helper.rb

@@ -27,17 +27,18 @@ module EventsHelper
     tag.div id: "next_page", data: { controller: "fetch-on-visible", fetch_on_visible_url_value: events_path(day: next_day) }
   end
 
-  def render_event_grid_cells(columns: 4, rows: 24)
+  def render_event_grid_cells(day, columns: 4, rows: 24)
     safe_join((2..rows + 1).map do |row|
       (1..columns).map do |col|
-        content_tag(:div, "", class: "event-grid-item", style: "grid-area: #{row}/#{col};")
+        time = day.beginning_of_day + (rows - row + 1).hours
+        tag.div class: "event-grid-item", style: "grid-area: #{row}/#{col};", data: { datetime: time.iso8601, timeline_target: "cell" }
       end
     end.flatten)
   end
 
-  def render_time_labels
+  def render_time_labels(day)
     safe_join((0..24).step(6).to_a.map do |hour|
-      time = Time.current.beginning_of_day + hour.hours
+      time = day.beginning_of_day + hour.hours
       label = if hour == 24
         "midnight"
       else
@@ -49,7 +50,8 @@ module EventsHelper
           datetime: time.strftime("%H:%M")
         ),
         class: "event-grid-time",
-        style: "grid-area: #{25 - (hour * 23/24)}/2 / #{25 - (hour * 23/24)}/4;"
+        style: "grid-area: #{25 - (hour * 23/24)}/2 / #{25 - (hour * 23/24)}/4;",
+        data: { timeline_target: "cell", datetime: time.iso8601 }
       )
     end)
   end

app/javascript/controllers/timeline_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+const MAX_ROWS = 25
+
+export default class extends Controller {
+  static targets = [ "cell", "item" ]
+
+  cellTargetConnected(target) {
+    const dt = new Date(target.dataset.datetime)
+    target.classList.toggle("future", dt > new Date())
+  }
+
+  itemTargetConnected(target) {
+    const dt = new Date(target.dataset.datetime)
+    target.style.gridRowStart = MAX_ROWS - dt.getHours()
+  }
+}

app/views/events/_day.html.erb

@@ -1,10 +1,10 @@
-<div class="margin-block-end-double">
+<div class="margin-block-end-double" data-controller="timeline">
   <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
   <% if @events.any? %>
     <div class="center events">
       <%= render_column_headers %>
-      <%= render_event_grid_cells %>
-      <%= render_time_labels %>
+      <%= render_event_grid_cells(activity_day) %>
+      <%= render_time_labels(activity_day) %>
       <%= render events %>
     </div>
   <% else %>

app/views/events/_event.html.erb

@@ -1,8 +1,9 @@
 <% bubble = event.summary.bubble %>
 
-<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "event panel shadow center flex-inline align-center justify-start gap position-relative",
-      style: "grid-area: #{ event.created_at.hour }/ #{ event_column(event) }; --panel-border-radius: 0.7em; --panel-padding: 0.3em 0.6em; --panel-size: auto; --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 %>
+<%= link_to bucket_bubble_path(bubble.bucket, bubble),
+      class: "event panel shadow center flex-inline align-center justify-start gap position-relative",
+      style: "grid-column-start: #{ event_column(event) }; --panel-border-radius: 0.7em; --panel-padding: 0.3em 0.6em; --panel-size: auto; --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", timeline_target: "item", datetime: event.created_at.iso8601 } do %>
   <div class="bubble__shape flex-item-no-shrink txt-large"></div>
   <div class="flex flex-column min-width txt-small">
     <strong><%= bubble.title %></strong>