From be5c3f7a34d260aea13c57c21ff6d9054fb16727 Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Sat, 21 Mar 2026 13:36:35 +0100
Subject: [PATCH] fix: pass explicit locale to date formatting to prevent
 hydration mismatch

Server and client could use different default locales for
toLocaleDateString/toLocaleString, causing React hydration errors.
Pass the user locale explicitly in JobsList and SettingsPage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/backoffice/app/components/JobsList.tsx   | 4 ++--
 apps/backoffice/app/settings/SettingsPage.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/backoffice/app/components/JobsList.tsx b/apps/backoffice/app/components/JobsList.tsx
index f21eed0..039babe 100644
--- a/apps/backoffice/app/components/JobsList.tsx
+++ b/apps/backoffice/app/components/JobsList.tsx
@@ -57,13 +57,13 @@ function getDateParts(dateStr: string): { mins: number; hours: number; useDate:
 }
 
 export function JobsList({ initialJobs, libraries, highlightJobId }: JobsListProps) {
-  const { t } = useTranslation();
+  const { t, locale } = useTranslation();
   const [jobs, setJobs] = useState(initialJobs);
 
   const formatDate = (dateStr: string): string => {
     const parts = getDateParts(dateStr);
     if (parts.useDate) {
-      return parts.date.toLocaleDateString();
+      return parts.date.toLocaleDateString(locale);
     }
     if (parts.mins < 1) return t("time.justNow");
     if (parts.hours > 0) return t("time.hoursAgo", { count: parts.hours });
diff --git a/apps/backoffice/app/settings/SettingsPage.tsx b/apps/backoffice/app/settings/SettingsPage.tsx
index f2f9fac..769d3fe 100644
--- a/apps/backoffice/app/settings/SettingsPage.tsx
+++ b/apps/backoffice/app/settings/SettingsPage.tsx
@@ -734,7 +734,7 @@ export default function SettingsPage({ initialSettings, initialCacheStats, initi
                     >
                       <div className="flex items-center justify-between">
                         <span className="text-sm font-medium text-foreground">
-                          {new Date(r.created_at).toLocaleString()}
+                          {new Date(r.created_at).toLocaleString(locale)}
                         </span>
                         <span className="text-xs text-muted-foreground truncate ml-2" title={r.komga_url}>
                           {r.komga_url}