From 208a52589f39d98fd4fc610c96de285dd402ae9a Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Sun, 14 Sep 2025 16:35:12 +0800
Subject: [PATCH] feat: update theme context to support dynamic locale
 switching

---
 web/src/App.tsx                   | 39 +++++++++++++------------------
 web/src/contexts/ThemeContext.tsx |  6 ++++-
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index c22ed6b..c98664a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -5,12 +5,10 @@ import { status as getStatus } from './api/config.ts';
 import type { SystemStatus } from './api/config.ts';
 import { SystemContext } from './contexts/SystemContext.tsx';
 import { ThemeProvider } from './contexts/ThemeContext.tsx';
-import { Spin, ConfigProvider } from 'antd';
+import { Spin } from 'antd';
 import { Routes, Route, Navigate } from 'react-router';
 import SetupPage from './pages/SetupPage.tsx';
-import { I18nProvider, useI18n } from './i18n';
-import zhCN from 'antd/locale/zh_CN';
-import enUS from 'antd/locale/en_US';
+import { I18nProvider } from './i18n';
 
 function AppInner() {
   const [status, setStatus] = useState<SystemStatus | null>(null);
@@ -39,26 +37,21 @@ function AppInner() {
     );
   }
 
-  const { lang } = useI18n();
-  const locale = lang === 'zh' ? zhCN : enUS;
-
   return (
-    <ConfigProvider locale={locale}>
-      <SystemContext.Provider value={status}>
-        <AuthProvider>
-          <ThemeProvider>
-            {!status.is_initialized ? (
-              <Routes>
-                <Route path="/setup" element={<SetupPage />} />
-                <Route path="*" element={<Navigate to="/setup" replace />} />
-              </Routes>
-            ) : (
-              <AppRouter />
-            )}
-          </ThemeProvider>
-        </AuthProvider>
-      </SystemContext.Provider>
-    </ConfigProvider>
+    <SystemContext.Provider value={status}>
+      <AuthProvider>
+        <ThemeProvider>
+          {!status.is_initialized ? (
+            <Routes>
+              <Route path="/setup" element={<SetupPage />} />
+              <Route path="*" element={<Navigate to="/setup" replace />} />
+            </Routes>
+          ) : (
+            <AppRouter />
+          )}
+        </ThemeProvider>
+      </AuthProvider>
+    </SystemContext.Provider>
   );
 }
 
diff --git a/web/src/contexts/ThemeContext.tsx b/web/src/contexts/ThemeContext.tsx
index 3555692..7544471 100644
--- a/web/src/contexts/ThemeContext.tsx
+++ b/web/src/contexts/ThemeContext.tsx
@@ -1,10 +1,12 @@
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
+import enUS from 'antd/locale/en_US';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { getAllConfig } from '../api/config';
 import { useAuth } from './AuthContext';
 import baseTheme from '../theme';
+import { useI18n } from '../i18n';
 
 type ThemeMode = 'light' | 'dark' | 'system';
 
@@ -101,6 +103,7 @@ function buildThemeConfig(state: ThemeState, systemDark: boolean): ThemeConfig {
 
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const { isAuthenticated } = useAuth();
+  const { lang } = useI18n();
   const systemDark = useSystemDarkPreferred();
   const [state, setState] = useState<ThemeState>({ mode: 'light' });
   const styleTagRef = useRef<HTMLStyleElement | null>(null);
@@ -163,6 +166,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   const themeConfig = useMemo(() => buildThemeConfig(state, systemDark), [state, systemDark]);
   const resolvedMode: ThemeMode = useMemo(() => (state.mode === 'system' ? (systemDark ? 'dark' : 'light') : state.mode), [state.mode, systemDark]);
+  const locale = useMemo(() => (lang === 'zh' ? zhCN : enUS), [lang]);
 
   const ctxValue = useMemo<ThemeContextType>(() => ({
     refreshTheme,
@@ -173,7 +177,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <Ctx.Provider value={ctxValue}>
-      <ConfigProvider theme={{ ...themeConfig, cssVar: true }} locale={zhCN}>
+      <ConfigProvider theme={{ ...themeConfig, cssVar: true }} locale={locale}>
         {children}
       </ConfigProvider>
     </Ctx.Provider>