@pheem49/mint 1.5.1 → 1.5.3

package/src/UI/settings.js

@@ -12,6 +12,7 @@ const DEFAULT_CONFIG = {
     proactiveCooldown: 120,
     glassBlur: 'blur(16px)',
     fontFamily: "'Outfit', sans-serif",
+    fontSize: '15px',
     aiProvider: 'gemini',
     ollamaModel: 'llama3:latest',
     enableVoiceReply: true,
@@ -55,8 +56,15 @@ function applyConfig(config) {
     } else {
         document.getElementById('custom-theme-controls').style.display = 'none';
         // Reset dynamic style variables if not custom
-        document.documentElement.style.removeProperty('--bg-gradient');
-        document.documentElement.style.removeProperty('--panel-bg');
+        [
+            '--bg-gradient',
+            '--panel-bg',
+            '--sidebar-bg',
+            '--chrome-bg',
+            '--surface-bg',
+            '--surface-strong',
+            '--input-bg'
+        ].forEach(name => document.documentElement.style.removeProperty(name));
     }
 
     // Apply accent color
@@ -171,6 +179,9 @@ function applyConfig(config) {
     document.getElementById('font-family-select').value = config.fontFamily || "'Outfit', sans-serif";
     document.body.style.fontFamily = config.fontFamily || "'Outfit', sans-serif";
 
+    document.getElementById('font-size-select').value = config.fontSize || '15px';
+    document.documentElement.style.fontSize = config.fontSize || '15px';
+
     // Update active theme card
     document.querySelectorAll('.theme-card').forEach(card => {
         card.classList.toggle('active', card.dataset.theme === config.theme);
@@ -184,6 +195,10 @@ function applyConfig(config) {
     // Update color picker
     document.getElementById('custom-color').value = config.accentColor;
 
+    const defaultTextColor = config.theme === 'light' ? '#0f172a' : DEFAULT_CONFIG.systemTextColor;
+    const textColor = (!config.systemTextColor || (config.theme === 'light' && config.systemTextColor === DEFAULT_CONFIG.systemTextColor))
+        ? defaultTextColor
+        : config.systemTextColor;
     document.getElementById('system-text-color').value = textColor;
     document.documentElement.style.setProperty('--text-main', textColor);
 
@@ -419,6 +434,11 @@ function applyCustomThemeStyles(cfg) {
     // Convert hex to rgba for panel bg to keep transparency
     const panelRgb = hexToRgb(cfg.customPanelBg);
     document.documentElement.style.setProperty('--panel-bg', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.75)`);
+    document.documentElement.style.setProperty('--sidebar-bg', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.82)`);
+    document.documentElement.style.setProperty('--chrome-bg', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.78)`);
+    document.documentElement.style.setProperty('--surface-bg', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.42)`);
+    document.documentElement.style.setProperty('--surface-strong', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.62)`);
+    document.documentElement.style.setProperty('--input-bg', `rgba(${panelRgb.r}, ${panelRgb.g}, ${panelRgb.b}, 0.58)`);
     updateCustomPreviewBox(cfg);
 }
 
@@ -451,6 +471,21 @@ document.getElementById('custom-panel-bg').addEventListener('input', (e) => {
     if (currentConfig.theme === 'custom') applyCustomThemeStyles(currentConfig);
 });
 
+document.getElementById('glass-blur-select').addEventListener('change', (e) => {
+    currentConfig.glassBlur = e.target.value;
+    document.documentElement.style.setProperty('--glass-blur', e.target.value);
+});
+
+document.getElementById('font-family-select').addEventListener('change', (e) => {
+    currentConfig.fontFamily = e.target.value;
+    document.body.style.fontFamily = e.target.value;
+});
+
+document.getElementById('font-size-select').addEventListener('change', (e) => {
+    currentConfig.fontSize = e.target.value;
+    document.documentElement.style.fontSize = e.target.value;
+});
+
 // Proactive sliders
 function formatSeconds(s) {
     if (s < 60) return `${s} sec`;
@@ -556,6 +591,7 @@ document.getElementById('save-btn').addEventListener('click', async () => {
     currentConfig.systemTextColor = document.getElementById('system-text-color').value;
     currentConfig.glassBlur = document.getElementById('glass-blur-select').value;
     currentConfig.fontFamily = document.getElementById('font-family-select').value;
+    currentConfig.fontSize = document.getElementById('font-size-select').value;
     
     currentConfig.customBgStart = document.getElementById('custom-bg-start').value;
     currentConfig.customBgEnd = document.getElementById('custom-bg-end').value;
@@ -586,22 +622,20 @@ function renderMcpServers() {
     console.log(`[Settings] Found ${entries.length} servers in currentConfig.`);
 
     if (entries.length === 0) {
-        list.innerHTML = '<p class="hint" style="text-align: center; padding: 10px;">No MCP servers connected.</p>';
+        list.innerHTML = '<p class="mcp-empty">No MCP servers connected.</p>';
         return;
     }
 
     for (const [name, cfg] of entries) {
         const item = document.createElement('div');
-        item.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; border: 1px solid var(--border);';
+        item.className = 'mcp-item';
         
         item.innerHTML = `
-            <div style="display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px;">
-                    <span>🌐 ${name}</span>
-                </div>
-                <div style="font-size: 0.75rem; opacity: 0.7; font-family: monospace;">${cfg.command} ${cfg.args.join(' ')}</div>
+            <div class="mcp-info">
+                <div class="mcp-name">🌐 ${name}</div>
+                <div class="mcp-command">${cfg.command} ${(cfg.args || []).join(' ')}</div>
             </div>
-            <button class="btn-danger" style="padding: 6px 12px; font-size: 0.8rem;" onclick="removeMcpServer('${name}')">Remove</button>
+            <button class="btn-danger btn-small" onclick="removeMcpServer('${name}')">Remove</button>
         `;
         list.appendChild(item);
     }