Resolve the language setting persistence issue

- Move i18n initialization to async function
- Sync i18n with settings store language
- Add Root component for i18n loading state
- Convert i18n.js to TypeScript

lightrag_webui/src/stores/settings.ts

@@ -59,11 +59,27 @@ interface SettingsState {
   setCurrentTab: (tab: Tab) => void
 }
 
+// Helper to get initial state from localStorage
+const getInitialState = () => {
+  try {
+    const stored = localStorage.getItem('settings-storage')
+    if (stored) {
+      const { state } = JSON.parse(stored)
+      return {
+        theme: state?.theme || 'system',
+        language: state?.language || 'zh'
+      }
+    }
+  } catch (e) {
+    console.error('Failed to parse settings from localStorage:', e)
+  }
+  return { theme: 'system', language: 'zh' }
+}
+
 const useSettingsStoreBase = create<SettingsState>()(
   persist(
     (set) => ({
-      theme: 'system',
-      language: 'zh',
+      ...getInitialState(),
       refreshLayout: () => {
         const graphState = useGraphStore.getState();
         const currentGraph = graphState.sigmaGraph;
@@ -116,10 +132,13 @@ const useSettingsStoreBase = create<SettingsState>()(
       setTheme: (theme: Theme) => set({ theme }),
 
       setLanguage: (language: Language) => {
+        set({ language })
+        // Update i18n after state is updated
         import('i18next').then(({ default: i18n }) => {
-          i18n.changeLanguage(language);
-        });
-        set({ language });
+          if (i18n.language !== language) {
+            i18n.changeLanguage(language)
+          }
+        })
       },
 
       setGraphLayoutMaxIterations: (iterations: number) =>