From abc2d86dcf5082b957f08598bb27f758cd749789 Mon Sep 17 00:00:00 2001
From: Sean Morley <mail@seanmorley.com>
Date: Sat, 10 May 2025 21:40:18 -0400
Subject: [PATCH] Enhance visit date display with timezone support and improved
 formatting

---
 .../src/routes/adventures/[id]/+page.svelte   | 82 ++++++++++++-------
 1 file changed, 54 insertions(+), 28 deletions(-)

diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 6d54d85..4d5d335 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -10,6 +10,8 @@
 	import DOMPurify from 'dompurify';
 	// @ts-ignore
 	import toGeoJSON from '@mapbox/togeojson';
+	// @ts-ignore
+	import { DateTime } from 'luxon';
 
 	import LightbulbOn from '~icons/mdi/lightbulb-on';
 	import WeatherSunset from '~icons/mdi/weather-sunset';
@@ -412,33 +414,41 @@
 										</p>
 										<!-- show each visit start and end date as well as notes -->
 										{#each adventure.visits as visit}
-											<div class="flex flex-col gap-2">
-												<div class="flex gap-2 items-center">
-													<p>
-														{#if isAllDay(visit.start_date)}
-															<!-- For all-day events, show just the date -->
-															{new Date(visit.start_date).toLocaleDateString(undefined, {
-																timeZone: 'UTC'
-															})}
+											<div
+												class="p-4 border border-neutral rounded-lg bg-base-100 shadow-sm flex flex-col gap-2 mb-1"
+											>
+												{#if isAllDay(visit.start_date)}
+													<p class="text-sm text-base-content font-medium">
+														<span class="badge badge-outline mr-2">All Day</span>
+														{visit.start_date.split('T')[0]} – {visit.end_date.split('T')[0]}
+													</p>
+												{:else}
+													<p class="text-sm text-base-content font-medium">
+														{#if visit.timezone}
+															<!-- Use visit.timezone -->
+															🕓 <strong>{visit.timezone}</strong><br />
+															{DateTime.fromISO(visit.start_date, { zone: 'utc' })
+																.setZone(visit.timezone)
+																.toLocaleString(DateTime.DATETIME_MED)} –
+															{DateTime.fromISO(visit.end_date, { zone: 'utc' })
+																.setZone(visit.timezone)
+																.toLocaleString(DateTime.DATETIME_MED)}
 														{:else}
-															<!-- For timed events, show date and time -->
-															{new Date(visit.start_date).toLocaleDateString()} ({new Date(
-																visit.start_date
-															).toLocaleTimeString()})
+															<!-- Fallback to local browser time -->
+															🕓 <strong>Local Time</strong><br />
+															{DateTime.fromISO(visit.start_date).toLocaleString(
+																DateTime.DATETIME_MED
+															)} –
+															{DateTime.fromISO(visit.end_date).toLocaleString(
+																DateTime.DATETIME_MED
+															)}
 														{/if}
 													</p>
-													{#if visit.end_date && visit.end_date !== visit.start_date}
-														<p>
-															- {new Date(visit.end_date).toLocaleDateString(undefined, {
-																timeZone: 'UTC'
-															})}
-															{#if !isAllDay(visit.end_date)}
-																({new Date(visit.end_date).toLocaleTimeString()})
-															{/if}
-														</p>
-													{/if}
-												</div>
-												<p class="whitespace-pre-wrap -mt-2 mb-2">{visit.notes}</p>
+												{/if}
+
+												{#if visit.notes}
+													<p class="text-sm text-base-content opacity-70 italic">"{visit.notes}"</p>
+												{/if}
 											</div>
 										{/each}
 									</div>
@@ -527,13 +537,29 @@
 																			'T'
 																		)[0]}
 																	{:else}
-																		{new Date(visit.start_date).toLocaleString()} – {new Date(
-																			visit.end_date
-																		).toLocaleString()}
+																		<span>
+																			<strong>Local:</strong>
+																			{DateTime.fromISO(visit.start_date).toLocaleString(
+																				DateTime.DATETIME_MED
+																			)} –
+																			{DateTime.fromISO(visit.end_date).toLocaleString(
+																				DateTime.DATETIME_MED
+																			)}
+																		</span>
 																	{/if}
 																</p>
 
-																<!-- If the selected timezone is not the current one show the timezone + the time converted there -->
+																{#if !isAllDay(visit.start_date) && visit.timezone}
+																	<p class="text-sm text-base-content opacity-80">
+																		<strong>{visit.timezone}:</strong>
+																		{DateTime.fromISO(visit.start_date, { zone: 'utc' })
+																			.setZone(visit.timezone)
+																			.toLocaleString(DateTime.DATETIME_MED)} –
+																		{DateTime.fromISO(visit.end_date, { zone: 'utc' })
+																			.setZone(visit.timezone)
+																			.toLocaleString(DateTime.DATETIME_MED)}
+																	</p>
+																{/if}
 
 																{#if visit.notes}
 																	<p class="text-sm text-base-content opacity-70 italic">