Create static/js/settings.js

static/js/settings.js

@@ -0,0 +1,122 @@
+// static/js/settings.js
+
+let currentAccentColor = '#ffc107';
+
+function switchSettingsPanel(panelId, element) {
+    // Hide all panels
+    document.querySelectorAll('.settings-section').forEach(p => p.classList.remove('active'));
+    // Show target
+    document.getElementById(panelId).classList.add('active');
+    
+    // Update tabs
+    document.querySelectorAll('.settings-tab').forEach(t => t.classList.remove('active'));
+    element.classList.add('active');
+}
+
+function setAccentColor(hexCode, element) {
+    currentAccentColor = hexCode;
+    
+    // Update swatches visually
+    document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
+    if(element) {
+        element.classList.add('active');
+    }
+    
+    // Update the custom color picker input to match if needed
+    document.getElementById('custom-accent-color').value = hexCode;
+    
+    previewSettings();
+}
+
+function previewSettings() {
+    // 1. Apply Accent Color
+    document.documentElement.style.setProperty('--accent-main', currentAccentColor);
+    // Generate a softer glow color based on the hex (simplified logic)
+    document.documentElement.style.setProperty('--accent-glow', currentAccentColor + '40'); 
+    
+    // 2. Apply Theme (Light/Dark)
+    const theme = document.getElementById('setting-theme-mode').value;
+    if (theme === 'light') {
+        document.documentElement.style.setProperty('--bg-base', '#f5f5f5');
+        document.documentElement.style.setProperty('--bg-surface', '#ffffff');
+        document.documentElement.style.setProperty('--text-primary', '#111111');
+        document.documentElement.style.setProperty('--text-secondary', '#555555');
+        document.documentElement.style.setProperty('--glass-border', '1px solid rgba(0,0,0,0.1)');
+        document.documentElement.style.setProperty('--panel-bg', 'rgba(255,255,255,0.8)');
+    } else {
+        // Revert to Dark
+        document.documentElement.style.setProperty('--bg-base', '#050505');
+        document.documentElement.style.setProperty('--bg-surface', '#0a0a0a');
+        document.documentElement.style.setProperty('--text-primary', '#ffffff');
+        document.documentElement.style.setProperty('--text-secondary', '#a0a0a0');
+        document.documentElement.style.setProperty('--glass-border', '1px solid rgba(255, 255, 255, 0.05)');
+        document.documentElement.style.setProperty('--panel-bg', 'rgba(20, 20, 20, 0.6)');
+    }
+
+    // 3. Apply Editor Settings
+    const editorFont = document.getElementById('setting-editor-font').value;
+    const editorSize = document.getElementById('setting-editor-font-size').value;
+    document.documentElement.style.setProperty('--font-mono', editorFont);
+    
+    if (typeof editor !== 'undefined' && editor) {
+        editor.setOptions({
+            fontFamily: editorFont,
+            fontSize: editorSize
+        });
+    }
+
+    // 4. Apply Terminal Settings
+    const termSize = document.getElementById('setting-terminal-font-size').value;
+    const termOutput = document.getElementById('terminal-output');
+    if (termOutput) {
+        termOutput.style.fontSize = termSize;
+    }
+}
+
+async function saveSettings() {
+    const btn = document.getElementById('save-settings-btn');
+    btn.innerText = "Saving...";
+    
+    const settingsData = {
+        theme: document.getElementById('setting-theme-mode').value,
+        accent: currentAccentColor,
+        editorFont: document.getElementById('setting-editor-font').value,
+        editorSize: document.getElementById('setting-editor-font-size').value,
+        termSize: document.getElementById('setting-terminal-font-size').value
+    };
+
+    try {
+        const res = await fetch('/api/settings', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({token: currentToken, settings: settingsData})
+        });
+        
+        const data = await res.json();
+        if(data.success) {
+            btn.innerText = "✓ Saved";
+            setTimeout(() => btn.innerText = "Save Settings", 2000);
+        } else {
+            alert("Failed to save settings.");
+            btn.innerText = "Save Settings";
+        }
+    } catch (e) {
+        alert("Network error.");
+        btn.innerText = "Save Settings";
+    }
+}
+
+// Called on login/boot
+async function loadSettings() {
+    if(!currentUser) return;
+    
+    // Set username in profile
+    const usernameInput = document.getElementById('setting-username');
+    const avatar = document.getElementById('profile-avatar');
+    if(usernameInput) usernameInput.value = currentUser;
+    if(avatar) avatar.innerText = currentUser.charAt(0).toUpperCase();
+
+    // In a full app, we would fetch the user's specific settings from the DB here via a GET route.
+    // For now, we apply the default UI state so everything looks perfect immediately.
+    previewSettings();
+}