Render activity directly into requested timezone

app/assets/stylesheets/events.css

@@ -2,15 +2,13 @@
   --grid-lines: 3px;
 
   border-block-start: 1px solid var(--color-subtle);
-  display: none;
+  display: grid;
   gap: var(--grid-lines);
   grid-template-columns: repeat(4, 1fr);
   padding-block-start: var(--block-space);
 }
 
 .event--cluster {
-  display: contents;
-
   /* FIXME re-enable this once we can set grid-column-start and grid-row-start on the cluster element */
 
   /* &:has(.event + .event) {
@@ -27,26 +25,12 @@
 
 .event {
   margin: var(--inline-space);
-
-  &.out-of-range {
-    display: none;
-  }
 }
 
 .events--none {
   padding: calc(3 * var(--block-space));
 }
 
-.events--day:has(.event:not(.out-of-range)) {
-  .events {
-    display: grid;
-  }
-
-  .events--none {
-    display: none;
-  }
-}
-
 .event-grid-item {
   background-color: var(--color-selected);
   block-size: 100%;
@@ -55,7 +39,7 @@
   inline-size: 100%;
   min-block-size: var(--block-space);
 
-  &:nth-child(1n + 57) {
+  &:nth-child(1n + 53) {
     background-color: var(--color-highlight);
   }
 

app/controllers/events_controller.rb

@@ -2,15 +2,17 @@ class EventsController < ApplicationController
   before_action :set_activity_day
 
   def index
-    @events = Event.
-      where(bubble: user_bubbles).
-      where(created_at: @activity_day.yesterday.beginning_of_day..@activity_day.tomorrow.end_of_day).
+    @events = user_events.where(created_at: @activity_day.all_day).
       group_by { |event| [ event.created_at.hour, helpers.event_column(event) ] }
 
     @next_day = @activity_day.yesterday.strftime("%Y-%m-%d")
   end
 
   private
+    def user_events
+      Event.where(bubble: user_bubbles)
+    end
+
     def user_bubbles
       Current.user.accessible_bubbles.published_or_drafted_by(Current.user)
     end

app/helpers/events_helper.rb

@@ -23,15 +23,20 @@ module EventsHelper
     end
   end
 
+  def event_cluster_tag(hour, col, &)
+    row = 25 - hour
+    tag.div class: "event--cluster", style: "grid-area: #{row}/#{col}", &
+  end
+
   def event_next_page_link(next_day)
     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(day, columns: 4, rows: 24)
     safe_join((2..rows + 1).map do |row|
+      current_hour = row == 25 - Time.current.hour
       (1..columns).map do |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" }
+        tag.div class: class_names("event-grid-item", "current-hour": current_hour), style: "grid-area: #{row}/#{col};"
       end
     end.flatten)
   end
@@ -50,8 +55,7 @@ module EventsHelper
           datetime: time.strftime("%H:%M")
         ),
         class: "event-grid-time",
-        style: "grid-area: #{25 - (hour * 23/24)}/2 / #{25 - (hour * 23/24)}/4;",
-        data: { timeline_target: "cell", datetime: time.iso8601 }
+        style: "grid-area: #{25 - (hour * 23/24)}/2 / #{25 - (hour * 23/24)}/4;"
       )
     end)
   end

app/javascript/controllers/timeline_controller.js

@@ -1,35 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-const MAX_ROWS = 25
-
-export default class extends Controller {
-  static targets = [ "cell", "item" ]
-  static values = { date: String }
-
-  cellTargetConnected(target) {
-    const dt = new Date(target.dataset.datetime)
-    target.classList.toggle("current-hour", this.#isCurrentHour(dt))
-  }
-
-  itemTargetConnected(target) {
-    const dt = new Date(target.dataset.datetime)
-    target.classList.toggle("out-of-range", !this.#dateIsToday(dt))
-    target.style.gridRowStart = MAX_ROWS - dt.getHours()
-  }
-
-  #dateIsToday(dt) {
-    const date = new Date(this.dateValue)
-    return this.#sameDay(dt, date)
-  }
-
-  #isCurrentHour(dt) {
-    const now = new Date()
-    return this.#sameDay(dt, now) && dt.getHours() === now.getHours()
-  }
-
-  #sameDay(dt1, dt2) {
-    return dt1.getYear() === dt2.getYear() &&
-      dt1.getMonth() === dt2.getMonth() &&
-      dt1.getDay() === dt2.getDay()
-  }
-}

app/views/events/_day.html.erb

@@ -1,4 +1,4 @@
-<div class="events--day margin-block-end-double pad-block-end" data-controller="timeline" data-timeline-date-value="<%= activity_day.to_date.iso8601 %>">
+<div class="events--day margin-block-end-double pad-block-end">
   <h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
 
   <div class="center events">
@@ -6,10 +6,10 @@
     <%= render_event_grid_cells(activity_day) %>
     <%= render_time_labels(activity_day) %>
 
-    <% events.each do |_, cluster| %>
-      <div class="event--cluster">
+    <% events.each do | hour_column, cluster| %>
+      <%= event_cluster_tag(*hour_column) do %>
         <%= render cluster %>
-      </div>
+      <% end %>
     <% end %>
 
   </div>

app/views/events/_event.html.erb

@@ -2,8 +2,8 @@
 
 <%= 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: "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 %>
+      style: "--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 %>
   <div class="bubble__shape flex-item-no-shrink txt-large"></div>
   <div class="flex flex-column min-width txt-small align-start">
     <strong><%= bubble.title %></strong>