From 1c20872b833c402c8855dbca5b44eda6b3fca98b Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 22 Jan 2025 21:57:38 -0600
Subject: [PATCH] Highlight the current hour

FIXME: only do this on the current day
---
 app/assets/stylesheets/events.css                 | 6 +++++-
 app/javascript/controllers/timeline_controller.js | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 3700c91d4..3417716ca 100644
--- a/app/assets/stylesheets/events.css
+++ b/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);
   }
 }
diff --git a/app/javascript/controllers/timeline_controller.js b/app/javascript/controllers/timeline_controller.js
index a9eb906b5..9dfccc63e 100644
--- a/app/javascript/controllers/timeline_controller.js
+++ b/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
+  }
 }