Pass full locale from Accept-Language to ClientDate

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

@@ -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());

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);
+}