From 2071c87ffe42fcc3246ef65c492b90014dbf378d Mon Sep 17 00:00:00 2001
From: Bob <bob@gptme.org>
Date: Thu, 2 Jul 2026 14:15:21 +0000
Subject: [PATCH 1/3] fix(i18n): use Intl.DateTimeFormat for date/time display
 in Trends and timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces hardcoded moment().format('MMM D'), moment().format('ddd, MMM D'),
and moment().format('HH:mm:ss') calls with locale-aware Intl.DateTimeFormat
helpers, so dates and times respect the browser's locale instead of always
rendering in English.

Adds three new helpers to src/util/time.ts:
- format_date_short(): "Jun 15" → "15 jun" in sv-SE
- format_date_with_weekday(): "Mon, Jun 15" → "mån 15 jun" in sv-SE
- format_time_of_day(): "14:30:05" or "2:30:05 PM" per locale

Fixes the date labels in Trends.vue (range labels, busiest-day label)
and the event clocktime in the timeline visualization popup.
---
 src/util/time.ts               | 22 ++++++++++++++++++++++
 src/views/Trends.vue           | 12 ++++++------
 src/visualizations/timeline.ts |  4 ++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/util/time.ts b/src/util/time.ts
index ccfe5889..74541eb6 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -112,3 +112,25 @@ export function get_short_month_labels(locale?: string | string[]) {
     new Intl.DateTimeFormat(locale, { month: 'short' }).format(new Date(2020, month, 1, 12))
   );
 }
+
+// Format a date as locale-aware short date (e.g. "Jun 15" in en-US, "15 jun" in sv-SE)
+export function format_date_short(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(d);
+}
+
+// Format a date with weekday prefix (e.g. "Mon, Jun 15" in en-US, "mån 15 jun" in sv-SE)
+export function format_date_with_weekday(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(d);
+}
+
+// Format a time-of-day string locale-aware (e.g. "14:30:05" or "2:30:05 PM" per browser locale)
+export function format_time_of_day(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(d);
+}
diff --git a/src/views/Trends.vue b/src/views/Trends.vue
index bf25ca77..7c07d018 100644
--- a/src/views/Trends.vue
+++ b/src/views/Trends.vue
@@ -89,7 +89,7 @@ div
 
 <script lang="ts">
 import moment from 'moment';
-import { get_today_with_offset } from '~/util/time';
+import { get_today_with_offset, format_date_short, format_date_with_weekday } from '~/util/time';
 import { buildBarchartDataset } from '~/util/datasets';
 import { canonicalEvents } from '~/queries';
 import { getClient } from '~/util/awclient';
@@ -161,14 +161,14 @@ export default {
     },
 
     currentRangeLabel(): string {
-      const start = this.currentStart.format('MMM D');
-      const end = moment(this.today).format('MMM D');
+      const start = format_date_short(this.currentStart.toDate());
+      const end = format_date_short(moment(this.today).toDate());
       return `${start} – ${end}`;
     },
 
     previousRangeLabel(): string {
-      const start = this.currentStart.clone().subtract(this.periodDays, 'days').format('MMM D');
-      const end = moment(this.today).subtract(this.periodDays, 'days').format('MMM D');
+      const start = format_date_short(this.currentStart.clone().subtract(this.periodDays, 'days').toDate());
+      const end = format_date_short(moment(this.today).subtract(this.periodDays, 'days').toDate());
       return `${start} – ${end}`;
     },
 
@@ -210,7 +210,7 @@ export default {
         const total = evts.reduce((a, e) => a + (e.duration || 0), 0);
         if (!best || total > best.duration) {
           const start = period.split('/')[0];
-          best = { label: moment(start).format('ddd, MMM D'), duration: total };
+          best = { label: format_date_with_weekday(new Date(start)), duration: total };
         }
       }
       return best && best.duration > 0 ? best : null;
diff --git a/src/visualizations/timeline.ts b/src/visualizations/timeline.ts
index 81b4f9e8..fef5c600 100644
--- a/src/visualizations/timeline.ts
+++ b/src/visualizations/timeline.ts
@@ -8,7 +8,7 @@ import _ from 'lodash';
 import moment from 'moment';
 
 import { getColorFromString } from '../util/color';
-import { seconds_to_duration } from '../util/time';
+import { seconds_to_duration, format_time_of_day } from '../util/time';
 import { IEvent } from '../util/interfaces';
 
 function show_info(container: HTMLElement, elem_id: string): void {
@@ -148,7 +148,7 @@ function update(
     _.each(e.data.subevents, function (t: IEvent) {
       const inforow = infolist.append('tr');
       // Clocktime
-      const clocktime = moment(t.timestamp).format('HH:mm:ss');
+      const clocktime = format_time_of_day(new Date(t.timestamp));
       inforow.append('td').text(clocktime);
       // Duration
       const duration = seconds_to_duration(t.duration);

From 9ec3eb2e0159a7c3236e1d5cc7f4dffc7c59955e Mon Sep 17 00:00:00 2001
From: Bob <bob@gptme.org>
Date: Thu, 2 Jul 2026 14:20:08 +0000
Subject: [PATCH 2/3] fix(lint): format options objects per prettier style

---
 src/util/time.ts     | 6 +++++-
 src/views/Trends.vue | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/util/time.ts b/src/util/time.ts
index 74541eb6..34aac992 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -122,7 +122,11 @@ export function format_date_short(date: Date | string, locale?: string | string[
 // Format a date with weekday prefix (e.g. "Mon, Jun 15" in en-US, "mån 15 jun" in sv-SE)
 export function format_date_with_weekday(date: Date | string, locale?: string | string[]) {
   const d = date instanceof Date ? date : new Date(date);
-  return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(d);
+  return new Intl.DateTimeFormat(locale, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
 }
 
 // Format a time-of-day string locale-aware (e.g. "14:30:05" or "2:30:05 PM" per browser locale)
diff --git a/src/views/Trends.vue b/src/views/Trends.vue
index 7c07d018..c35748fb 100644
--- a/src/views/Trends.vue
+++ b/src/views/Trends.vue
@@ -167,7 +167,9 @@ export default {
     },
 
     previousRangeLabel(): string {
-      const start = format_date_short(this.currentStart.clone().subtract(this.periodDays, 'days').toDate());
+      const start = format_date_short(
+        this.currentStart.clone().subtract(this.periodDays, 'days').toDate()
+      );
       const end = format_date_short(moment(this.today).subtract(this.periodDays, 'days').toDate());
       return `${start} – ${end}`;
     },

From b02e2262235ba312b3f42580265c2496f18f1524 Mon Sep 17 00:00:00 2001
From: Bob <bob@gptme.org>
Date: Thu, 2 Jul 2026 14:28:48 +0000
Subject: [PATCH 3/3] fix(time): use 2-digit hour to ensure consistent
 zero-padding in timeline

---
 src/util/time.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/time.ts b/src/util/time.ts
index 34aac992..e10c8223 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -133,7 +133,7 @@ export function format_date_with_weekday(date: Date | string, locale?: string |
 export function format_time_of_day(date: Date | string, locale?: string | string[]) {
   const d = date instanceof Date ? date : new Date(date);
   return new Intl.DateTimeFormat(locale, {
-    hour: 'numeric',
+    hour: '2-digit',
     minute: '2-digit',
     second: '2-digit',
   }).format(d);