From d0286f78681b5b354db7cd3ab97b3e35ec238a5a Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 9 Jun 2026 11:24:25 -0400
Subject: [PATCH] feat(badges): show full date + browser timezone in throughput
 separators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Date separators now display "Monday, June 9 — EDT" instead of "Jun 9",
using the browser's local timezone abbreviation resolved at page load.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../reports_badge_print_throughput.svelte     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte
index 51996e77..ebd013a7 100644
--- a/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte
+++ b/src/routes/events/[event_id]/(badges)/badges/reports/reports_badge_print_throughput.svelte
@@ -33,6 +33,21 @@ function fmt_date(ms: number): string {
     return new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' });
 }
 
+// Resolved once per page load — timezone abbreviation (e.g. "EDT", "PDT") for the separator label.
+const tz_abbr: string =
+    Intl.DateTimeFormat('en-US', { timeZoneName: 'short' })
+        .formatToParts(new Date())
+        .find((p) => p.type === 'timeZoneName')?.value ?? '';
+
+function fmt_date_header(ms: number): string {
+    const date_part = new Intl.DateTimeFormat('en-US', {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric'
+    }).format(ms);
+    return tz_abbr ? `${date_part} — ${tz_abbr}` : date_part;
+}
+
 // Naive UTC strings from the backend have no timezone indicator — append Z so
 // the browser parses them as UTC and converts to local time, matching the badge list display.
 function parse_utc_ms(dt: string | null | undefined): number {
@@ -82,7 +97,7 @@ let stats: PrintStats = $derived.by(() => {
     let prev_day = '';
     const buckets: Bucket[] = raw_buckets.map((b) => {
         const day = fmt_date(b.start_ms);
-        const date_label = day !== prev_day ? day : null;
+        const date_label = day !== prev_day ? fmt_date_header(b.start_ms) : null;
         prev_day = day;
         return { ...b, date_label };
     });
@@ -142,7 +157,7 @@ function get_effective_name(badge: any): string {
             {#each stats.buckets as bucket (bucket.start_ms)}
                 <!-- Date separator when the day changes -->
                 {#if bucket.date_label}
-                    <div class="pt-2 pb-1 text-xs font-semibold uppercase tracking-wide text-surface-500-400">
+                    <div class="pt-2 pb-1 text-xs font-semibold tracking-wide text-surface-500-400">
                         {bucket.date_label}
                     </div>
                 {/if}
@@ -154,7 +169,7 @@ function get_effective_name(badge: any): string {
                         onclick={() => (expanded_bucket = expanded_bucket === bucket.start_ms ? null : bucket.start_ms)}
                         class="flex w-full flex-row items-center gap-2 rounded px-2 py-1.5 text-left hover:bg-surface-50 dark:hover:bg-surface-900/50 transition-colors">
                         <!-- Time label -->
-                        <span class="w-14 shrink-0 font-mono text-sm">
+                        <span class="w-18 shrink-0 font-mono text-sm">
                             {bucket.label}
                         </span>