feat(web): implement getNowLinePosition utility and refactor Agenda components

- Introduced `getNowLinePosition` utility to calculate the pixel position of the now line based on the current time, accounting for fractional minutes.
- Refactored `AgendaEvents` and `NowLine` components to utilize the new utility for positioning, improving code clarity and maintainability.
- Added comprehensive tests for `getNowLinePosition` to ensure accurate positioning across various time scenarios.

Author: tyler-dane

packages/web/src/views/Day/components/Agenda/Events/AgendaEvent/AgendaEvents.tsx

@@ -1,18 +1,14 @@
-import {
-  MINUTES_PER_SLOT,
-  SLOT_HEIGHT,
-} from "@web/views/Day/constants/day.constants";
+import { SLOT_HEIGHT } from "@web/views/Day/constants/day.constants";
 import { useDayEvents } from "@web/views/Day/data/day.data";
 import { useDateInView } from "@web/views/Day/hooks/navigation/useDateInView";
+import { getNowLinePosition } from "@web/views/Day/util/agenda/agenda.util";
 import { AgendaSkeleton } from "../../AgendaSkeleton/AgendaSkeleton";
 import { AgendaEvent } from "./AgendaEvent";
 
 export const AgendaEvents = () => {
   const dateInView = useDateInView();
   const { events, isLoading } = useDayEvents(dateInView);
   const currentTime = new Date();
-  const currentHour = currentTime.getHours();
-  const currentMinute = currentTime.getMinutes();
 
   // Filter out all-day events and sort timed events by start time for consistent TAB order
   const timedEvents = events
@@ -36,7 +32,7 @@ export const AgendaEvents = () => {
         <div
           className="border-red absolute right-0 left-0 z-30 border-t-2"
           style={{
-            top: `${(currentHour * 4 + Math.floor(currentMinute / MINUTES_PER_SLOT)) * SLOT_HEIGHT}px`,
+            top: `${getNowLinePosition(currentTime)}px`,
           }}
         />
 

packages/web/src/views/Day/components/Agenda/NowLine/NowLine.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from "react";
-import { MINUTES_PER_SLOT } from "@web/views/Day/constants/day.constants";
-import { SLOT_HEIGHT } from "@web/views/Day/constants/day.constants";
-import { getAgendaEventTime } from "@web/views/Day/util/agenda/agenda.util";
+import {
+  getAgendaEventTime,
+  getNowLinePosition,
+} from "@web/views/Day/util/agenda/agenda.util";
 import { setupMinuteSync } from "@web/views/Day/util/time/time.util";
 
 export const NowLine = ({
@@ -10,8 +11,6 @@ export const NowLine = ({
   nowLineRef: React.RefObject<HTMLDivElement>;
 }) => {
   const [currentTime, setCurrentTime] = useState(new Date());
-  const currentHour = currentTime.getHours();
-  const currentMinute = currentTime.getMinutes();
 
   useEffect(() => {
     const cleanup = setupMinuteSync(() => {
@@ -27,7 +26,7 @@ export const NowLine = ({
       data-now-marker="true"
       className="absolute right-0 left-0 z-40 border-t-2 text-yellow-300"
       style={{
-        top: `${(currentHour * 4 + Math.floor(currentMinute / MINUTES_PER_SLOT)) * SLOT_HEIGHT}px`,
+        top: `${getNowLinePosition(currentTime)}px`,
       }}
     >
       <div className="absolute -top-1 -left-2 h-2 w-4 rounded-full"></div>

packages/web/src/views/Day/util/agenda/agenda.util.test.ts

@@ -0,0 +1,150 @@
+import { MINUTES_PER_SLOT, SLOT_HEIGHT } from "../../constants/day.constants";
+import { getNowLinePosition } from "./agenda.util";
+
+describe("agenda.util", () => {
+  describe("getNowLinePosition", () => {
+    it("should position at exact hour marks correctly", () => {
+      // 3:00pm (15:00 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 0, 0, 0);
+      const position = getNowLinePosition(date);
+      // 15 hours * 4 slots/hour * 20px/slot = 1200px
+      expect(position).toBe(1200);
+    });
+
+    it("should position at quarter-hour marks correctly", () => {
+      // 3:15pm (15:15 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 15, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 15/15) * 20 = (60 + 1) * 20 = 1220px
+      expect(position).toBe(1220);
+    });
+
+    it("should position at half-hour marks correctly", () => {
+      // 3:30pm (15:30 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 30, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 30/15) * 20 = (60 + 2) * 20 = 1240px
+      expect(position).toBe(1240);
+    });
+
+    it("should position at three-quarter hour marks correctly", () => {
+      // 3:45pm (15:45 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 45, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 45/15) * 20 = (60 + 3) * 20 = 1260px
+      expect(position).toBe(1260);
+    });
+
+    it("should position at 3:26pm correctly (fractional minutes)", () => {
+      // 3:26pm (15:26 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 26, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 26/15) * 20 = (60 + 1.733...) * 20 ≈ 1234.67px
+      const expectedPosition = (15 * 4 + 26 / MINUTES_PER_SLOT) * SLOT_HEIGHT;
+      expect(position).toBeCloseTo(expectedPosition, 2);
+      // Verify it's approximately 43% between 3pm (1200px) and 4pm (1280px)
+      // 26/60 = 0.433... of the hour
+      // 1200 + (0.433... * 80) ≈ 1234.67px
+      expect(position).toBeCloseTo(1234.67, 2);
+    });
+
+    it("should position at single minutes correctly", () => {
+      // 3:01pm (15:01 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 1, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 1/15) * 20 = (60 + 0.0667) * 20 ≈ 1201.33px
+      const expectedPosition = (15 * 4 + 1 / MINUTES_PER_SLOT) * SLOT_HEIGHT;
+      expect(position).toBeCloseTo(expectedPosition, 2);
+    });
+
+    it("should position at 3:07pm correctly", () => {
+      // 3:07pm (15:07 in 24-hour format)
+      const date = new Date();
+      date.setHours(15, 7, 0, 0);
+      const position = getNowLinePosition(date);
+      // (15 * 4 + 7/15) * 20 = (60 + 0.4667) * 20 ≈ 1209.33px
+      const expectedPosition = (15 * 4 + 7 / MINUTES_PER_SLOT) * SLOT_HEIGHT;
+      expect(position).toBeCloseTo(expectedPosition, 2);
+    });
+
+    it("should position at midnight correctly", () => {
+      // 0:00 (midnight)
+      const date = new Date();
+      date.setHours(0, 0, 0, 0);
+      const position = getNowLinePosition(date);
+      // 0 * 4 * 20 = 0px
+      expect(position).toBe(0);
+    });
+
+    it("should position at end of day correctly", () => {
+      // 23:59 (end of day)
+      const date = new Date();
+      date.setHours(23, 59, 0, 0);
+      const position = getNowLinePosition(date);
+      // (23 * 4 + 59/15) * 20 = (92 + 3.933...) * 20 ≈ 1918.67px
+      const expectedPosition = (23 * 4 + 59 / MINUTES_PER_SLOT) * SLOT_HEIGHT;
+      expect(position).toBeCloseTo(expectedPosition, 2);
+    });
+
+    it("should position at noon correctly", () => {
+      // 12:00pm (12:00 in 24-hour format)
+      const date = new Date();
+      date.setHours(12, 0, 0, 0);
+      const position = getNowLinePosition(date);
+      // 12 * 4 * 20 = 960px
+      expect(position).toBe(960);
+    });
+
+    it("should position at 1:00am correctly", () => {
+      // 1:00am (1:00 in 24-hour format)
+      const date = new Date();
+      date.setHours(1, 0, 0, 0);
+      const position = getNowLinePosition(date);
+      // 1 * 4 * 20 = 80px
+      expect(position).toBe(80);
+    });
+
+    it("should handle seconds correctly (ignores seconds)", () => {
+      // 3:26:30pm - should position same as 3:26pm
+      const date1 = new Date();
+      date1.setHours(15, 26, 30, 0);
+      const position1 = getNowLinePosition(date1);
+
+      const date2 = new Date();
+      date2.setHours(15, 26, 0, 0);
+      const position2 = getNowLinePosition(date2);
+
+      // Both should be the same since we only use hours and minutes
+      expect(position1).toBe(position2);
+    });
+
+    it("should calculate position proportionally within an hour", () => {
+      // Verify that 3:26pm is approximately 43% between 3pm and 4pm
+      const date3pm = new Date();
+      date3pm.setHours(15, 0, 0, 0);
+      const position3pm = getNowLinePosition(date3pm);
+
+      const date4pm = new Date();
+      date4pm.setHours(16, 0, 0, 0);
+      const position4pm = getNowLinePosition(date4pm);
+
+      const date326pm = new Date();
+      date326pm.setHours(15, 26, 0, 0);
+      const position326pm = getNowLinePosition(date326pm);
+
+      const hourHeight = position4pm - position3pm; // Should be 80px (4 slots * 20px)
+      const offsetFrom3pm = position326pm - position3pm;
+      const percentage = offsetFrom3pm / hourHeight;
+
+      // 26 minutes / 60 minutes = 0.4333... ≈ 43%
+      expect(percentage).toBeCloseTo(26 / 60, 2);
+      expect(percentage).toBeCloseTo(0.4333, 2);
+    });
+  });
+});

packages/web/src/views/Day/util/agenda/agenda.util.ts

@@ -20,3 +20,10 @@ export const getAgendaEventPosition = (date: Date) => {
   const slot = hours * 4 + Math.floor(minutes / MINUTES_PER_SLOT);
   return slot * SLOT_HEIGHT;
 };
+
+// Get exact position in pixels for the now line (accounts for fractional minutes)
+export const getNowLinePosition = (date: Date) => {
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  return (hours * 4 + minutes / MINUTES_PER_SLOT) * SLOT_HEIGHT;
+};