From 8778eda155b7fd7d6d35fcbd66113da38668b44e Mon Sep 17 00:00:00 2001
From: Essential Randomness <essentialrandomn3ss@gmail.com>
Date: Thu, 21 May 2026 04:26:04 -0700
Subject: [PATCH] timezones

---
 src/components/events/EventCard.astro    |  2 +-
 src/components/events/HappeningNow.astro | 39 +++-------
 src/layouts/Base.astro                   | 24 ++----
 src/lib/client/event-time.ts             | 93 ++++++++++++++++++++++++
 4 files changed, 110 insertions(+), 48 deletions(-)
 create mode 100644 src/lib/client/event-time.ts

diff --git a/src/components/events/EventCard.astro b/src/components/events/EventCard.astro
index 6f5fa38..c6c1496 100644
--- a/src/components/events/EventCard.astro
+++ b/src/components/events/EventCard.astro
@@ -226,7 +226,7 @@ const canRsvp = showRsvp && isLoggedIn && Boolean(cid);
     display: flex;
     flex-direction: column;
     height: 100%;
-    scroll-margin-top: var(--space-2xl);
+    scroll-margin-top: calc(var(--space-4xl) + var(--space-lg));
   }
   .event-card:hover {
     border-color: var(--card-border-hover);
diff --git a/src/components/events/HappeningNow.astro b/src/components/events/HappeningNow.astro
index aef1c71..5da6864 100644
--- a/src/components/events/HappeningNow.astro
+++ b/src/components/events/HappeningNow.astro
@@ -413,12 +413,10 @@ const startTimeFmt = new Intl.DateTimeFormat("en-US", {
     formatStartsIn,
     formatTimeLeft,
   } from "../../lib/community/happening-now";
-
-  const localTimeFmt = new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-    timeZoneName: "short",
-  });
+  import {
+    formatLocalEventClock,
+    readEventTiming,
+  } from "../../lib/client/event-time";
 
   function localizeTimes() {
     document
@@ -426,7 +424,7 @@ const startTimeFmt = new Intl.DateTimeFormat("en-US", {
       .forEach((el) => {
         const iso = el.getAttribute("datetime");
         if (!iso) return;
-        el.textContent = localTimeFmt.format(new Date(iso));
+        el.textContent = formatLocalEventClock(new Date(iso));
       });
   }
 
@@ -456,14 +454,6 @@ const startTimeFmt = new Intl.DateTimeFormat("en-US", {
     });
   }
 
-  function getLocalDateKey(date: Date): string {
-    return new Intl.DateTimeFormat("en-CA", {
-      year: "numeric",
-      month: "2-digit",
-      day: "2-digit",
-    }).format(date);
-  }
-
   function setStatus(card: HTMLElement, mode: "live" | "soon", label: string) {
     card.classList.toggle("now-card--live", mode === "live");
     card.classList.toggle("now-card--soon", mode === "soon");
@@ -480,9 +470,7 @@ const startTimeFmt = new Intl.DateTimeFormat("en-US", {
   }
 
   function regroupNowStrip() {
-    const now = Date.now();
-    const todayKey = getLocalDateKey(new Date(now));
-    const weekEndsAt = now + 7 * 24 * 60 * 60 * 1000;
+    const now = new Date();
     const sections = new Map(
       Array.from(document.querySelectorAll<HTMLElement>("[data-now-section]")).map(
         (section) => [section.dataset.nowSection, section],
@@ -495,21 +483,16 @@ const startTimeFmt = new Intl.DateTimeFormat("en-US", {
     };
 
     document.querySelectorAll<HTMLElement>(".now-card").forEach((card) => {
-      const startsAt = card.dataset.eventStartsAt;
-      const endsAt = card.dataset.eventEndsAt;
-      if (!startsAt || !endsAt) return;
-
-      const start = new Date(startsAt).getTime();
-      const end = new Date(endsAt).getTime();
-      if (end <= now) return;
+      const timing = readEventTiming(card, now);
+      if (!timing || timing.state === "past") return;
 
-      if (start <= now) {
+      if (timing.state === "live") {
         buckets.now.push(card);
         setStatus(card, "live", "Live");
-      } else if (getLocalDateKey(new Date(start)) === todayKey) {
+      } else if (timing.state === "today") {
         buckets.today.push(card);
         setStatus(card, "soon", "Today");
-      } else if (start < weekEndsAt) {
+      } else if (timing.state === "week") {
         buckets.week.push(card);
         setStatus(card, "soon", "This week");
       }
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 9322fbb..1ec84a5 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -54,27 +54,13 @@ import '../styles/global.css';
     </main>
     <slot name="footer" />
     <script>
-      // Localize event times to the user's timezone.
+      import { applyEventCardTiming } from "../lib/client/event-time";
+
+      // Localize event times and day labels to the user's timezone.
       // Falls back to the UTC time rendered at build time if anything fails.
-      document.querySelectorAll('time[data-event-time]').forEach((el) => {
+      document.querySelectorAll<HTMLElement>(".event-card").forEach((el) => {
         try {
-          const iso = el.getAttribute('datetime');
-          if (!iso) return;
-          const d = new Date(iso);
-          if (isNaN(d.getTime())) return;
-          const date = d.toLocaleDateString('en-US', {
-            weekday: 'short',
-            month: 'short',
-            day: 'numeric',
-          });
-          const time = d.toLocaleTimeString('en-US', {
-            hour: 'numeric',
-            minute: '2-digit',
-          });
-          const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-          const short = d.toLocaleTimeString('en-US', { timeZoneName: 'short' })
-            .replace(/.*\s/, ''); // extract "PDT", "EST", etc.
-          el.textContent = `${date} · ${time} ${short}`;
+          applyEventCardTiming(el);
         } catch {
           // Keep the UTC fallback rendered at build time
         }
diff --git a/src/lib/client/event-time.ts b/src/lib/client/event-time.ts
new file mode 100644
index 0000000..c1391ad
--- /dev/null
+++ b/src/lib/client/event-time.ts
@@ -0,0 +1,93 @@
+export const EVENT_DEFAULT_DURATION_MS = 2 * 60 * 60 * 1000;
+export const EVENT_WEEK_WINDOW_MS = 7 * 24 * 60 * 60 * 1000;
+
+const localDayFmt = new Intl.DateTimeFormat("en-CA", {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+});
+
+const localTimeFmt = new Intl.DateTimeFormat(undefined, {
+  hour: "numeric",
+  minute: "2-digit",
+  timeZoneName: "short",
+});
+
+export type EventTimingState = "past" | "live" | "today" | "week" | "later";
+
+export interface EventTiming {
+  startsAt: Date;
+  endsAt: Date;
+  state: EventTimingState;
+}
+
+export function localDateKey(date: Date): string {
+  return localDayFmt.format(date);
+}
+
+export function readEventTiming(
+  eventEl: HTMLElement,
+  now: Date = new Date(),
+): EventTiming | undefined {
+  const startsAt = eventEl.dataset.eventStartsAt;
+  if (!startsAt) return undefined;
+
+  const start = new Date(startsAt);
+  const end = eventEl.dataset.eventEndsAt
+    ? new Date(eventEl.dataset.eventEndsAt)
+    : new Date(start.getTime() + EVENT_DEFAULT_DURATION_MS);
+
+  if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+    return undefined;
+  }
+
+  const nowMs = now.getTime();
+  const startMs = start.getTime();
+  const endMs = end.getTime();
+  const state: EventTimingState =
+    endMs <= nowMs
+      ? "past"
+      : startMs <= nowMs
+        ? "live"
+        : localDateKey(start) === localDateKey(now)
+          ? "today"
+          : startMs < nowMs + EVENT_WEEK_WINDOW_MS
+            ? "week"
+            : "later";
+
+  return { startsAt: start, endsAt: end, state };
+}
+
+export function formatLocalEventTime(date: Date, label?: string): string {
+  const dateText =
+    label ??
+    date.toLocaleDateString("en-US", {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+    });
+  return `${dateText} · ${localTimeFmt.format(date)}`;
+}
+
+export function formatLocalEventClock(date: Date): string {
+  return localTimeFmt.format(date);
+}
+
+export function applyEventCardTiming(
+  card: HTMLElement,
+  now: Date = new Date(),
+): EventTiming | undefined {
+  const timing = readEventTiming(card, now);
+  if (!timing) return undefined;
+
+  const timeEl = card.querySelector<HTMLTimeElement>("time[data-event-time]");
+  if (timeEl) {
+    const label = timing.state === "today" ? "Today" : undefined;
+    timeEl.textContent = formatLocalEventTime(timing.startsAt, label);
+  }
+
+  card.classList.toggle("event-card--live", timing.state === "live");
+  card.classList.toggle("event-card--today", timing.state === "today");
+
+  return timing;
+}
-- 
2.51.2