Update displayDate to use local time format preferences (#4826)

* update date display time to use local browser locale

* incorporate displaySecond and displayDate

* rewrite

* a

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>

frontend/src/lib/utils.ts

@@ -72,14 +72,24 @@ export function displayDate(
 	displayDate = true
 ): string {
 	const date = new Date(dateString ?? '')
-	if (date.toString() === 'Invalid Date') {
+	if (Number.isNaN(date.valueOf())) {
 		return ''
 	} else {
-		return `${date.toLocaleTimeString([], {
+		const timeChoices: Intl.DateTimeFormatOptions = {
 			hour: '2-digit',
 			minute: '2-digit',
 			second: displaySecond ? '2-digit' : undefined
-		})}${displayDate ? ` ${date.getDate()}/${date.getMonth() + 1}` : ''}`
+		}
+		const dateChoices: Intl.DateTimeFormatOptions = displayDate
+			? {
+					day: 'numeric',
+					month: 'numeric'
+			  }
+			: {}
+		return date.toLocaleString(undefined, {
+			...timeChoices,
+			...dateChoices
+		})
 	}
 }
 

frontend/src/routes/(root)/(logged)/routes/+page.svelte

@@ -301,11 +301,11 @@
 						<div class="w-full flex justify-between items-baseline">
 							<div
 								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
-								><div class="truncate">edited by {edited_by}</div><div class="truncate"
-									>the {displayDate(edited_at)}</div
-								></div
-							></div
-						>
+							>
+								<div class="truncate">edited by {edited_by}</div>
+								<div class="truncate">at {displayDate(edited_at)}</div>
+							</div>
+						</div>
 					</div>
 				{/each}
 			</div>