feat(i18n): Enhance internationalization support by updating storage retrieval and translation handling

static/js/components/Header.js

@@ -3,6 +3,7 @@ import { toggleTheme } from '../utils/uiHelpers.js';
 import { SearchManager } from '../managers/SearchManager.js';
 import { FilterManager } from '../managers/FilterManager.js';
 import { initPageState } from '../state/index.js';
+import { getStorageItem } from '../utils/storageHelpers.js';
 import { updateSearchPlaceholder } from '../utils/i18nHelpers.js';
 
 /**
@@ -49,7 +50,7 @@ export class HeaderManager {
       const themeToggle = document.querySelector('.theme-toggle');
       if (themeToggle) {
         // Set initial state based on current theme
-        const currentTheme = localStorage.getItem('lm_theme') || 'auto';
+        const currentTheme = getStorageItem('theme') || 'auto';
         themeToggle.classList.add(`theme-${currentTheme}`);
         
         // Set initial tooltip text
@@ -157,8 +158,6 @@ export class HeaderManager {
       if (currentTheme === 'light') {
         themeToggle.title = window.i18n.t('header.theme.switchToDark');
       } else if (currentTheme === 'dark') {
-        themeToggle.title = window.i18n.t('header.theme.switchToAuto');
-      } else {
         themeToggle.title = window.i18n.t('header.theme.switchToLight');
       }
     }

static/js/components/controls/PageControls.js

@@ -2,7 +2,6 @@
 import { getCurrentPageState, setCurrentPageType } from '../../state/index.js';
 import { getStorageItem, setStorageItem, getSessionItem, setSessionItem } from '../../utils/storageHelpers.js';
 import { showToast } from '../../utils/uiHelpers.js';
-import { SidebarManager } from '../SidebarManager.js';
 import { sidebarManager } from '../SidebarManager.js';
 
 /**

static/js/utils/i18nHelpers.js

@@ -8,45 +8,38 @@ import { i18n } from '../i18n/index.js';
  * Uses data-i18n attribute to specify translation keys
  */
 export function translateDOM() {
-    // Find all elements with data-i18n attribute
+    if (!window.i18n) return;
+    
+    // Select all elements with data-i18n attributes, including optgroups and options
     const elements = document.querySelectorAll('[data-i18n]');
     
     elements.forEach(element => {
         const key = element.getAttribute('data-i18n');
-        const params = element.getAttribute('data-i18n-params');
-        
-        let parsedParams = {};
-        if (params) {
-            try {
-                parsedParams = JSON.parse(params);
-            } catch (e) {
-                console.warn(`Invalid JSON in data-i18n-params for key ${key}:`, params);
-            }
-        }
-        
-        // Get translated text
-        const translatedText = i18n.t(key, parsedParams);
-        
-        // Handle different translation targets
         const target = element.getAttribute('data-i18n-target') || 'textContent';
         
-        switch (target) {
+        if (key) {
-            case 'placeholder':
+            const translation = window.i18n.t(key);
-                element.placeholder = translatedText;
+            
-                break;
+            // Handle different target attributes
-            case 'title':
+            switch (target) {
-                element.title = translatedText;
+                case 'placeholder':
-                break;
+                    element.placeholder = translation;
-            case 'alt':
+                    break;
-                element.alt = translatedText;
+                case 'title':
-                break;
+                    element.title = translation;
-            case 'innerHTML':
+                    break;
-                element.innerHTML = translatedText;
+                case 'label':
-                break;
+                    // For optgroup elements
-            case 'textContent':
+                    element.label = translation;
-            default:
+                    break;
-                element.textContent = translatedText;
+                case 'value':
-                break;
+                    element.value = translation;
+                    break;
+                case 'textContent':
+                default:
+                    element.textContent = translation;
+                    break;
+            }
         }
     });
 }

templates/components/controls.html

@@ -3,15 +3,15 @@
         <div class="action-buttons">
             <div data-i18n="loras.controls.sort.title" data-i18n-target="title" title="Sort models by..." class="control-group">
                 <select id="sortSelect">
-                    <optgroup data-i18n="loras.controls.sort.name" label="Name">
+                    <optgroup data-i18n="loras.controls.sort.name" data-i18n-target="label" label="Name">
                         <option value="name:asc" data-i18n="loras.controls.sort.nameAsc">A - Z</option>
                         <option value="name:desc" data-i18n="loras.controls.sort.nameDesc">Z - A</option>
                     </optgroup>
-                    <optgroup data-i18n="loras.controls.sort.date" label="Date Added">
+                    <optgroup data-i18n="loras.controls.sort.date" data-i18n-target="label" label="Date Added">
                         <option value="date:desc" data-i18n="loras.controls.sort.dateDesc">Newest</option>
                         <option value="date:asc" data-i18n="loras.controls.sort.dateAsc">Oldest</option>
                     </optgroup>
-                    <optgroup data-i18n="loras.controls.sort.size" label="File Size">
+                    <optgroup data-i18n="loras.controls.sort.size" data-i18n-target="label" label="File Size">
                         <option value="size:desc" data-i18n="loras.controls.sort.sizeDesc">Largest</option>
                         <option value="size:asc" data-i18n="loras.controls.sort.sizeAsc">Smallest</option>
                     </optgroup>