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>

Cargo.lock

@@ -64,7 +64,7 @@ checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
 
 [[package]]
 name = "api"
-version = "1.20.1"
+version = "1.21.0"
 dependencies = [
  "anyhow",
  "argon2",
@@ -1232,7 +1232,7 @@ dependencies = [
 
 [[package]]
 name = "indexer"
-version = "1.20.1"
+version = "1.21.0"
 dependencies = [
  "anyhow",
  "axum",
@@ -1771,7 +1771,7 @@ dependencies = [
 
 [[package]]
 name = "parsers"
-version = "1.20.1"
+version = "1.21.0"
 dependencies = [
  "anyhow",
  "flate2",
@@ -2906,7 +2906,7 @@ dependencies = [
 
 [[package]]
 name = "stripstream-core"
-version = "1.20.1"
+version = "1.21.0"
 dependencies = [
  "anyhow",
  "serde",

Cargo.toml

@@ -9,7 +9,7 @@ resolver = "2"
 
 [workspace.package]
 edition = "2021"
-version = "1.20.1"
+version = "1.21.0"
 license = "MIT"
 
 [workspace.dependencies]

apps/backoffice/app/api/jobs/stream/route.ts

@@ -11,6 +11,7 @@ export async function GET(request: NextRequest) {
       let lastData: string | null = null;
       let isActive = true;
       let consecutiveErrors = 0;
+      let intervalId: ReturnType<typeof setInterval> | null = null;
 
       const fetchJobs = async () => {
         if (!isActive) return;
@@ -25,23 +26,28 @@ export async function GET(request: NextRequest) {
             const data = await response.json();
             const dataStr = JSON.stringify(data);
 
-            // Send if data changed
+            // Send only if data changed
             if (dataStr !== lastData && isActive) {
               lastData = dataStr;
               try {
                 controller.enqueue(
                   new TextEncoder().encode(`data: ${dataStr}\n\n`)
                 );
-              } catch (err) {
+              } catch {
-                // Controller closed, ignore
                 isActive = false;
               }
             }
+
+            // Adapt interval: 2s when active jobs exist, 15s when idle
+            const hasActiveJobs = data.some((j: { status: string }) =>
+              j.status === "running" || j.status === "pending" || j.status === "extracting_pages" || j.status === "generating_thumbnails"
+            );
+            const nextInterval = hasActiveJobs ? 2000 : 15000;
+            restartInterval(nextInterval);
           }
         } catch (error) {
           if (isActive) {
             consecutiveErrors++;
-            // Only log first failure and every 30th to avoid spam
             if (consecutiveErrors === 1 || consecutiveErrors % 30 === 0) {
               console.warn(`SSE fetch error (${consecutiveErrors} consecutive):`, error);
             }
@@ -49,22 +55,18 @@ export async function GET(request: NextRequest) {
         }
       };
 
-      // Initial fetch
+      const restartInterval = (ms: number) => {
-      await fetchJobs();
+        if (intervalId !== null) clearInterval(intervalId);
+        intervalId = setInterval(fetchJobs, ms);
+      };
 
-      // Poll every 2 seconds
+      // Initial fetch + start polling
-      const interval = setInterval(async () => {
+      await fetchJobs();
-        if (!isActive) {
-          clearInterval(interval);
-          return;
-        }
-        await fetchJobs();
-      }, 2000);
 
       // Cleanup
       request.signal.addEventListener("abort", () => {
         isActive = false;
-        clearInterval(interval);
+        if (intervalId !== null) clearInterval(intervalId);
         controller.close();
       });
     },

apps/backoffice/app/components/JobsIndicator.tsx

@@ -54,44 +54,60 @@ export function JobsIndicator() {
   const [popinStyle, setPopinStyle] = useState<React.CSSProperties>({});
 
   useEffect(() => {
-    let intervalId: ReturnType<typeof setInterval> | null = null;
+    let eventSource: EventSource | null = null;
+    let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
 
-    const fetchActiveJobs = async () => {
+    const connect = () => {
-      try {
+      if (eventSource) {
-        const response = await fetch("/api/jobs/active");
+        eventSource.close();
-        if (response.ok) {
-          const jobs: Job[] = await response.json();
-          setActiveJobs(jobs);
-          // Adapt polling interval: 2s when jobs are active, 30s when idle
-          restartInterval(jobs.length > 0 ? 2000 : 30000);
-        }
-      } catch (error) {
-        console.error("Failed to fetch jobs:", error);
       }
+      eventSource = new EventSource("/api/jobs/stream");
+
+      eventSource.onmessage = (event) => {
+        try {
+          const allJobs: Job[] = JSON.parse(event.data);
+          const active = allJobs.filter(j =>
+            j.status === "running" || j.status === "pending" ||
+            j.status === "extracting_pages" || j.status === "generating_thumbnails"
+          );
+          setActiveJobs(active);
+        } catch {
+          // ignore malformed data
+        }
+      };
+
+      eventSource.onerror = () => {
+        eventSource?.close();
+        eventSource = null;
+        // Reconnect after 5s on error
+        reconnectTimeout = setTimeout(connect, 5000);
+      };
     };
 
-    const restartInterval = (ms: number) => {
+    const disconnect = () => {
-      if (intervalId !== null) clearInterval(intervalId);
+      if (reconnectTimeout) {
-      intervalId = setInterval(fetchActiveJobs, ms);
+        clearTimeout(reconnectTimeout);
+        reconnectTimeout = null;
+      }
+      if (eventSource) {
+        eventSource.close();
+        eventSource = null;
+      }
     };
 
     const handleVisibilityChange = () => {
       if (document.hidden) {
-        if (intervalId !== null) {
+        disconnect();
-          clearInterval(intervalId);
-          intervalId = null;
-        }
       } else {
-        // Refetch immediately when tab becomes visible, then resume polling
+        connect();
-        fetchActiveJobs();
       }
     };
 
-    fetchActiveJobs();
+    connect();
     document.addEventListener("visibilitychange", handleVisibilityChange);
 
     return () => {
-      if (intervalId !== null) clearInterval(intervalId);
+      disconnect();
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, []);

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

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}

apps/backoffice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stripstream-backoffice",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 7082",