fix: use system hour cycle for queue times

src/utils/dateTimeUtil.test.ts

@@ -212,8 +212,24 @@ describe('formatShortMonthDay', () => {
 describe('formatClockTime', () => {
   it('formats time with hours, minutes, and seconds', () => {
     const ts = new Date(2024, 5, 15, 14, 5, 6).getTime()
-    const result = formatClockTime(ts, 'en-GB')
+    const result = formatClockTime(ts, 'en-GB', 'en-GB')
     // en-GB uses 24-hour format
     expect(result).toBe('14:05:06')
   })
+
+  it('uses app locale with browser/system hour-cycle preference', () => {
+    const ts = new Date(2024, 5, 15, 14, 5, 6).getTime()
+    const hourCycle = new Intl.DateTimeFormat(undefined, {
+      hour: 'numeric'
+    }).resolvedOptions().hourCycle
+    const options = {
+      hour: 'numeric',
+      minute: '2-digit',
+      second: '2-digit',
+      hourCycle
+    } satisfies Intl.DateTimeFormatOptions
+    const expected = new Intl.DateTimeFormat('es', options).format(ts)
+
+    expect(formatClockTime(ts, 'es')).toBe(expected)
+  })
 })

src/utils/dateTimeUtil.ts

@@ -84,17 +84,30 @@ export const formatShortMonthDay = (ts: number, locale: string): string => {
 }
 
 /**
- * Localized clock time, e.g. "10:05:06" with locale defaults for 12/24 hour.
+ * Localized clock time, e.g. "10:05:06" with the app locale for language and
+ * the browser/system locale preference for 12/24-hour formatting.
  *
  * @param ts Unix timestamp in milliseconds
  * @param locale BCP-47 locale string
+ * @param clockPreferenceLocale Optional locale source for hour-cycle preference
  * @returns Localized time string
  */
-export const formatClockTime = (ts: number, locale: string): string => {
+export const formatClockTime = (
+  ts: number,
+  locale: string,
+  clockPreferenceLocale?: string
+): string => {
   const d = new Date(ts)
-  return new Intl.DateTimeFormat(locale, {
+  const hourCycle = new Intl.DateTimeFormat(clockPreferenceLocale, {
+    hour: 'numeric'
+  }).resolvedOptions().hourCycle
+  const options: Intl.DateTimeFormatOptions = {
     hour: 'numeric',
     minute: '2-digit',
     second: '2-digit'
-  }).format(d)
+  }
+  if (hourCycle) {
+    options.hourCycle = hourCycle
+  }
+  return new Intl.DateTimeFormat(locale, options).format(d)
 }