From 32f431e879e7c1e1302810cd1f3cf1578f90889b Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Tue, 21 Apr 2026 22:16:43 +0200
Subject: [PATCH] fix: translate months in journey timeline (#815)

formatDate() in both JourneyDetailPage and JourneyPublicPage passed
undefined/'en' as the locale to toLocaleDateString, so weekday/month
names always followed the browser's language instead of the app's
selected UI language. Thread the selected locale through from
useTranslation() in both pages.

Public view still falls back to 'en' when no settings locale is
available (shared links can be opened by anyone).
---
 client/src/pages/JourneyDetailPage.tsx | 16 +++++++++-------
 client/src/pages/JourneyPublicPage.tsx |  8 ++++----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/client/src/pages/JourneyDetailPage.tsx b/client/src/pages/JourneyDetailPage.tsx
index c0619a5c..f5287a24 100644
--- a/client/src/pages/JourneyDetailPage.tsx
+++ b/client/src/pages/JourneyDetailPage.tsx
@@ -67,11 +67,13 @@ function groupByDate(entries: JourneyEntry[]): Map<string, JourneyEntry[]> {
   return groups
 }
 
-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
   const date = new Date(d + 'T00:00:00')
+  // Pass the app's selected locale so weekday/month follow the UI language
+  // instead of the browser's navigator.language.
   return {
-    weekday: date.toLocaleDateString(undefined, { weekday: 'long' }),
-    month: date.toLocaleDateString(undefined, { month: 'long' }),
+    weekday: date.toLocaleDateString(locale, { weekday: 'long' }),
+    month: date.toLocaleDateString(locale, { month: 'long' }),
     day: date.getDate(),
   }
 }
@@ -84,7 +86,7 @@ export default function JourneyDetailPage() {
   const { id } = useParams()
   const navigate = useNavigate()
   const toast = useToast()
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   const { current, loading, notFound, loadJourney, updateEntry, deleteEntry, reorderEntries, uploadPhotos, deletePhoto } = useJourneyStore()
   const mapRef = useRef<JourneyMapHandle>(null)
   const fullMapRef = useRef<JourneyMapHandle>(null)
@@ -575,7 +577,7 @@ export default function JourneyDetailPage() {
 
                   {sortedDates.map((date, dayIdx) => {
                     const entries = dayGroups.get(date)!
-                    const fd = formatDate(date)
+                    const fd = formatDate(date, locale)
                     const locations = [...new Set(entries.map(e => e.location_name).filter(Boolean))]
 
                     return (
@@ -816,7 +818,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
   fullMapRef: React.RefObject<JourneyMapHandle | null>
   onLocationClick: (id: string) => void
 }) {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   // group map entries by date
   const byDate = new Map<string, { entry: JourneyEntry; globalIdx: number }[]>()
   mapEntries.forEach((e, i) => {
@@ -872,7 +874,7 @@ function MapView({ entries, mapEntries, sortedDates, activeLocationId, fullMapRe
         <div className="px-5 pb-5">
           {dates.map((date, dayIdx) => {
             const items = byDate.get(date)!
-            const fd = formatDate(date)
+            const fd = formatDate(date, locale)
 
             return (
               <div key={date}>
diff --git a/client/src/pages/JourneyPublicPage.tsx b/client/src/pages/JourneyPublicPage.tsx
index 7e08c71a..aa10be43 100644
--- a/client/src/pages/JourneyPublicPage.tsx
+++ b/client/src/pages/JourneyPublicPage.tsx
@@ -40,11 +40,11 @@ function photoUrl(p: PublicPhoto, shareToken: string, kind: 'thumbnail' | 'origi
   return `/api/public/journey/${shareToken}/photos/${p.photo_id}/${kind}`
 }
 
-function formatDate(d: string): { weekday: string; month: string; day: number } {
+function formatDate(d: string, locale?: string): { weekday: string; month: string; day: number } {
   const date = new Date(d + 'T00:00:00')
   return {
-    weekday: date.toLocaleDateString('en', { weekday: 'long' }),
-    month: date.toLocaleDateString('en', { month: 'long' }),
+    weekday: date.toLocaleDateString(locale || 'en', { weekday: 'long' }),
+    month: date.toLocaleDateString(locale || 'en', { month: 'long' }),
     day: date.getDate(),
   }
 }
@@ -233,7 +233,7 @@ export default function JourneyPublicPage() {
           <div className="flex flex-col gap-6">
             {sortedDates.map(date => {
               const dayEntries = groupedEntries.get(date)!
-              const fd = formatDate(date)
+              const fd = formatDate(date, locale)
               return (
                 <div key={date}>
                   <div className="flex items-center gap-3 mb-4">