From e5b712c082befcf0f3729a0dbba3a01056541d83 Mon Sep 17 00:00:00 2001
From: pixelpaws <willmiao.dev@gmail.com>
Date: Tue, 23 Sep 2025 22:00:31 +0800
Subject: [PATCH] fix(i18n): sync language with state settings

---
 static/js/i18n/index.js               | 38 ++++++-----------------
 static/js/managers/SettingsManager.js | 44 +++++++++++----------------
 2 files changed, 27 insertions(+), 55 deletions(-)

diff --git a/static/js/i18n/index.js b/static/js/i18n/index.js
index 4e2a8259..79b79c08 100644
--- a/static/js/i18n/index.js
+++ b/static/js/i18n/index.js
@@ -1,3 +1,5 @@
+import { state } from '../state/index.js';
+
 /**
  * Internationalization (i18n) system for LoRA Manager
  * Uses user-selected language from settings with fallback to English
@@ -123,26 +125,12 @@ class I18nManager {
      * @returns {string} Language code
      */
     getLanguageFromSettings() {
-        // Check localStorage for user-selected language
-        const STORAGE_PREFIX = 'lora_manager_';
-        let userLanguage = null;
-        
-        try {
-            const settings = localStorage.getItem(STORAGE_PREFIX + 'settings');
-            if (settings) {
-                const parsedSettings = JSON.parse(settings);
-                userLanguage = parsedSettings.language;
-            }
-        } catch (e) {
-            console.warn('Failed to parse settings from localStorage:', e);
+        const language = state?.global?.settings?.language;
+
+        if (language && this.availableLocales[language]) {
+            return language;
         }
-        
-        // If user has selected a language, use it
-        if (userLanguage && this.availableLocales[userLanguage]) {
-            return userLanguage;
-        }
-        
-        // Fallback to English
+
         return 'en';
     }
     
@@ -165,18 +153,10 @@ class I18nManager {
             this.readyPromise = this.initializeWithLocale(languageCode);
             await this.readyPromise;
             
-            // Save to localStorage
-            const STORAGE_PREFIX = 'lora_manager_';
-            const currentSettings = localStorage.getItem(STORAGE_PREFIX + 'settings');
-            let settings = {};
-            
-            if (currentSettings) {
-                settings = JSON.parse(currentSettings);
+            if (state?.global?.settings) {
+                state.global.settings.language = languageCode;
             }
             
-            settings.language = languageCode;
-            localStorage.setItem(STORAGE_PREFIX + 'settings', JSON.stringify(settings));
-            
             console.log(`Language changed to: ${languageCode}`);
             
             // Dispatch event to notify components of language change
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index 4c9b90b4..b6ffe6c2 100644
--- a/static/js/managers/SettingsManager.js
+++ b/static/js/managers/SettingsManager.js
@@ -4,6 +4,7 @@ import { state, createDefaultSettings } from '../state/index.js';
 import { resetAndReload } from '../api/modelApiFactory.js';
 import { DOWNLOAD_PATH_TEMPLATES, MAPPABLE_BASE_MODELS, PATH_TEMPLATE_PLACEHOLDERS, DEFAULT_PATH_TEMPLATES } from '../utils/constants.js';
 import { translate } from '../utils/i18nHelpers.js';
+import { i18n } from '../i18n/index.js';
 
 export class SettingsManager {
     constructor() {
@@ -57,9 +58,26 @@ export class SettingsManager {
             state.global.settings = this.mergeSettingsWithDefaults();
         }
 
+        await this.applyLanguageSetting();
         this.applyFrontendSettings();
     }
 
+    async applyLanguageSetting() {
+        const desiredLanguage = state?.global?.settings?.language;
+
+        if (!desiredLanguage) {
+            return;
+        }
+
+        try {
+            if (i18n.getCurrentLocale() !== desiredLanguage) {
+                await i18n.setLanguage(desiredLanguage);
+            }
+        } catch (error) {
+            console.warn('Failed to apply language from settings:', error);
+        }
+    }
+
     mergeSettingsWithDefaults(backendSettings = {}) {
         const defaults = createDefaultSettings();
         const merged = { ...defaults, ...backendSettings };
@@ -1158,8 +1176,6 @@ export class SettingsManager {
             // Use the universal save method for language (frontend-only setting)
             await this.saveSetting('language', selectedLanguage);
 
-            this.persistLanguageToLocalStorage(selectedLanguage);
-
             // Reload the page to apply the new language
             window.location.reload();
 
@@ -1168,30 +1184,6 @@ export class SettingsManager {
         }
     }
 
-    persistLanguageToLocalStorage(language) {
-        const STORAGE_PREFIX = 'lora_manager_';
-
-        try {
-            const storageKey = `${STORAGE_PREFIX}settings`;
-            const currentSettings = localStorage.getItem(storageKey);
-            let parsedSettings = {};
-
-            if (currentSettings) {
-                try {
-                    parsedSettings = JSON.parse(currentSettings) || {};
-                } catch (parseError) {
-                    console.warn('Failed to parse existing settings from localStorage, resetting to defaults');
-                    parsedSettings = {};
-                }
-            }
-
-            parsedSettings.language = language;
-            localStorage.setItem(storageKey, JSON.stringify(parsedSettings));
-        } catch (error) {
-            console.warn('Failed to persist language preference to localStorage:', error);
-        }
-    }
-
     toggleInputVisibility(button) {
         const input = button.parentElement.querySelector('input');
         const icon = button.querySelector('i');