From 38ada3bd4f9ca78b360f8ce24caf691f36fa1be6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sun, 29 Mar 2026 11:46:21 +0200
Subject: [PATCH] Pass full locale from Accept-Language to ClientDate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add detectLocale() that extracts the full locale tag (e.g. "de-DE")
from the request, not just the language. The journal root loader passes
it via LocaleContext so ClientDate renders with the correct locale on
both server and client — no more hardcoded "en-US" fallback.

Also fixes settings page hydration mismatch by using ClientDate for
passkey creation dates instead of inline toLocaleDateString().

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/journal/app/components/ClientDate.tsx    | 11 ++++++++---
 apps/journal/app/components/LocaleContext.tsx | 17 +++++++++++++++++
 apps/journal/app/root.tsx                     | 10 +++++++---
 apps/journal/app/routes/settings.tsx          |  6 +++---
 packages/i18n/src/index.ts                    | 19 +++++++++++++++++++
 5 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 apps/journal/app/components/LocaleContext.tsx

diff --git a/apps/journal/app/components/ClientDate.tsx b/apps/journal/app/components/ClientDate.tsx
index e2fcf06..0bbc775 100644
--- a/apps/journal/app/components/ClientDate.tsx
+++ b/apps/journal/app/components/ClientDate.tsx
@@ -1,11 +1,16 @@
 import { useState, useEffect } from "react";
+import { useLocale } from "./LocaleContext";
 
 /**
- * Renders a date only on the client to avoid SSR hydration mismatches.
- * Server renders empty, client fills in with user's locale.
+ * Renders a date using the server-detected locale for the initial render
+ * (matching SSR output), then updates to the browser's native locale
+ * after hydration.
  */
 export function ClientDate({ iso }: { iso: string }) {
-  const [formatted, setFormatted] = useState(new Date(iso).toLocaleDateString("en-US"));
+  const locale = useLocale();
+  const [formatted, setFormatted] = useState(
+    new Date(iso).toLocaleDateString(locale),
+  );
 
   useEffect(() => {
     setFormatted(new Date(iso).toLocaleDateString());
diff --git a/apps/journal/app/components/LocaleContext.tsx b/apps/journal/app/components/LocaleContext.tsx
new file mode 100644
index 0000000..15902c8
--- /dev/null
+++ b/apps/journal/app/components/LocaleContext.tsx
@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+const LocaleContext = createContext<string>("en");
+
+export function LocaleProvider({
+  locale,
+  children,
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  return <LocaleContext value={locale}>{children}</LocaleContext>;
+}
+
+export function useLocale() {
+  return useContext(LocaleContext);
+}
diff --git a/apps/journal/app/root.tsx b/apps/journal/app/root.tsx
index c041ae7..be4a5f4 100644
--- a/apps/journal/app/root.tsx
+++ b/apps/journal/app/root.tsx
@@ -4,7 +4,9 @@ import type { LinksFunction } from "react-router";
 import type { Route } from "./+types/root";
 import * as Sentry from "@sentry/react";
 import { useTranslation } from "react-i18next";
+import { detectLocale } from "@trails-cool/i18n";
 import { getSessionUser } from "~/lib/auth.server";
+import { LocaleProvider } from "~/components/LocaleContext";
 import stylesheet from "@trails-cool/ui/styles.css?url";
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];
@@ -33,7 +35,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export async function loader({ request }: Route.LoaderArgs) {
   const user = await getSessionUser(request);
-  return { user: user ? { id: user.id, username: user.username } : null };
+  const locale = detectLocale(request);
+  return { user: user ? { id: user.id, username: user.username } : null, locale };
 }
 
 function NavBar({ user }: { user: { id: string; username: string } | null }) {
@@ -110,6 +113,7 @@ function NavBar({ user }: { user: { id: string; username: string } | null }) {
 
 export default function App({ loaderData }: Route.ComponentProps) {
   const user = loaderData?.user;
+  const locale = loaderData?.locale ?? "en";
   useEffect(() => {
     if (user) {
       Sentry.setUser({ id: user.id, username: user.username });
@@ -119,10 +123,10 @@ export default function App({ loaderData }: Route.ComponentProps) {
   }, [user]);
 
   return (
-    <>
+    <LocaleProvider locale={locale}>
       <NavBar user={user ?? null} />
       <Outlet />
-    </>
+    </LocaleProvider>
   );
 }
 
diff --git a/apps/journal/app/routes/settings.tsx b/apps/journal/app/routes/settings.tsx
index fda39b5..11b75b7 100644
--- a/apps/journal/app/routes/settings.tsx
+++ b/apps/journal/app/routes/settings.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { data, redirect, useFetcher } from "react-router";
 import { useTranslation } from "react-i18next";
+import { ClientDate } from "~/components/ClientDate";
 import { eq } from "drizzle-orm";
 import type { Route } from "./+types/settings";
 import { getSessionUser } from "~/lib/auth.server";
@@ -217,9 +218,8 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
                   {transportLabel(passkey.transports, t)}
                 </p>
                 <p className="text-xs text-gray-500">
-                  {t("settings.security.addedOn", {
-                    date: new Date(passkey.createdAt).toLocaleDateString(),
-                  })}
+                  {t("settings.security.addedOn", { date: "" })}
+                  <ClientDate iso={passkey.createdAt} />
                 </p>
               </div>
               <deleteFetcher.Form
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
index 1582ae9..d37030d 100644
--- a/packages/i18n/src/index.ts
+++ b/packages/i18n/src/index.ts
@@ -70,4 +70,23 @@ export function detectLanguage(request: Request): SupportedLng {
   return "en";
 }
 
+/**
+ * Extract the full locale (e.g. "de-DE") from a request's Accept-Language header.
+ * Falls back to the supported language (e.g. "en") if no region tag is present.
+ */
+export function detectLocale(request: Request): string {
+  const header = request.headers.get("Accept-Language") ?? "";
+  for (const part of header.split(",")) {
+    const tag = part.split(";")[0]?.trim();
+    if (!tag) continue;
+    const lang = tag.toLowerCase();
+    for (const supported of supportedLngs) {
+      if (lang === supported || lang.startsWith(supported + "-")) {
+        return tag; // preserve original casing (e.g. "de-DE")
+      }
+    }
+  }
+  return "en";
+}
+
 export { i18n };