Highlight the current hour

FIXME: only do this on the current day

app/assets/stylesheets/events.css

@@ -35,6 +35,10 @@
   &:nth-child(1n + 57) {
     background-color: var(--color-highlight);
   }
+
+  &.current-hour {
+    background-color: var(--color-selected-dark);
+  }
 }
 
 .event-grid-time {
@@ -52,6 +56,6 @@
     padding: 0 var(--inline-space-double);
     position: absolute;
     text-transform: uppercase;
-    transform: translate(-50%, 50%);
+    transform: translate(-50%, 0);
   }
 }

app/javascript/controllers/timeline_controller.js

@@ -9,6 +9,7 @@ export default class extends Controller {
   cellTargetConnected(target) {
     const dt = new Date(target.dataset.datetime)
     target.classList.toggle("future", dt > new Date())
+    target.classList.toggle("current-hour", this.#isCurrentHour(dt))
   }
 
   itemTargetConnected(target) {
@@ -23,4 +24,11 @@ export default class extends Controller {
       dt.getMonth() == date.getMonth() &&
       dt.getDay() == date.getDay()
   }
+
+  #isCurrentHour(dt) {
+    const now = new Date()
+    const utcHour = dt.getUTCHours()
+    const localHour = now.getHours()
+    return utcHour === localHour
+  }
 }