feat(settings): add left navigation sidebar to settings modal

Implement two-column layout for improved settings navigation:
- Add 200px fixed navigation sidebar with 4 groups (General, Interface, Download, Advanced)
- Implement scroll spy to highlight current section during scroll
- Add smooth scrolling when clicking navigation items
- Extend modal width from 700px to 950px for better content display
- Add responsive mobile layout (switches to stacked view below 768px)
- Add i18n keys for navigation group titles
- Create documentation for optimization phases and progress tracking

Files changed:
- settings-modal.css: Add sidebar, navigation, and responsive styles
- settings_modal.html: Restructure with two-column layout and section IDs
- SettingsManager.js: Add initializeNavigation() with scroll spy
- locales/*.json: Add settings.nav translations (en, zh-CN, zh-TW, ja, ru, de, fr, es, ko, he)
- docs/ui-ux-optimization/: Add proposal and progress tracker documentation

static/js/managers/SettingsManager.js

@@ -364,10 +364,81 @@ export class SettingsManager {
         }
 
         this.setupPriorityTagInputs();
+        this.initializeNavigation();
 
         this.initialized = true;
     }
 
+    initializeNavigation() {
+        const settingsContent = document.querySelector('.settings-content');
+        const navItems = document.querySelectorAll('.settings-nav-item');
+
+        if (!settingsContent || navItems.length === 0) return;
+
+        // Handle navigation item clicks
+        navItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                const targetId = item.dataset.target;
+                if (!targetId) return;
+
+                const targetSection = document.getElementById(targetId);
+                if (targetSection) {
+                    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                }
+
+                // Update active state
+                navItems.forEach(nav => nav.classList.remove('active'));
+                item.classList.add('active');
+            });
+        });
+
+        // Setup scroll spy
+        const sections = document.querySelectorAll('.settings-section, .setting-item[id^="section-"]');
+        
+        const updateActiveNav = () => {
+            const scrollTop = settingsContent.scrollTop;
+            const contentHeight = settingsContent.clientHeight;
+
+            let currentSection = null;
+            let minDistance = Infinity;
+
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop - settingsContent.offsetTop;
+                const distance = Math.abs(sectionTop - scrollTop);
+
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    currentSection = section;
+                }
+            });
+
+            if (currentSection) {
+                const sectionId = currentSection.id;
+                navItems.forEach(item => {
+                    item.classList.remove('active');
+                    if (item.dataset.target === sectionId) {
+                        item.classList.add('active');
+                    }
+                });
+            }
+        };
+
+        // Use requestAnimationFrame for performance
+        let ticking = false;
+        settingsContent.addEventListener('scroll', () => {
+            if (!ticking) {
+                window.requestAnimationFrame(() => {
+                    updateActiveNav();
+                    ticking = false;
+                });
+                ticking = true;
+            }
+        });
+
+        // Initial update
+        updateActiveNav();
+    }
+
     async openSettingsFileLocation() {
         try {
             const response = await fetch('/api/lm/settings/open-location', {