mani-calc 1.2.2 → 2.1.0

package/src/ui/overlay.html

@@ -27,16 +27,103 @@
       --shortcut-bg: rgba(0, 0, 0, 0.02);
       --key-bg: rgba(0, 0, 0, 0.1);
       --border-color: rgba(0, 0, 0, 0.1);
+      --result-bg: rgba(0, 217, 255, 0.05);
     }
 
+    /* Dark Theme (default) */
     body.dark {
       --bg-color: rgba(30, 30, 30, 0.95);
       --text-color: #eee;
       --icon-color: #00D9FF;
-      --hint-color: #666;
+      --hint-color: #888;
       --shortcut-bg: rgba(255, 255, 255, 0.05);
       --key-bg: rgba(255, 255, 255, 0.1);
       --border-color: rgba(255, 255, 255, 0.1);
+      --result-bg: rgba(0, 217, 255, 0.08);
+    }
+
+    /* Midnight Blue Theme */
+    body.midnight {
+      --bg-color: rgba(10, 22, 40, 0.95);
+      --text-color: #e0e8f0;
+      --icon-color: #4a9eff;
+      --hint-color: #6a8aaa;
+      --shortcut-bg: rgba(74, 158, 255, 0.05);
+      --key-bg: rgba(74, 158, 255, 0.15);
+      --border-color: rgba(74, 158, 255, 0.2);
+      --result-bg: rgba(74, 158, 255, 0.1);
+    }
+
+    /* Forest Green Theme */
+    body.forest {
+      --bg-color: rgba(26, 47, 26, 0.95);
+      --text-color: #d0e8d0;
+      --icon-color: #4caf50;
+      --hint-color: #7ab87a;
+      --shortcut-bg: rgba(76, 175, 80, 0.05);
+      --key-bg: rgba(76, 175, 80, 0.15);
+      --border-color: rgba(76, 175, 80, 0.2);
+      --result-bg: rgba(76, 175, 80, 0.1);
+    }
+
+    /* Sunset Orange Theme */
+    body.sunset {
+      --bg-color: rgba(45, 26, 26, 0.95);
+      --text-color: #f0e0d8;
+      --icon-color: #ff6b35;
+      --hint-color: #cc8866;
+      --shortcut-bg: rgba(255, 107, 53, 0.05);
+      --key-bg: rgba(255, 107, 53, 0.15);
+      --border-color: rgba(255, 107, 53, 0.2);
+      --result-bg: rgba(255, 107, 53, 0.1);
+    }
+
+    /* Royal Purple Theme */
+    body.purple {
+      --bg-color: rgba(26, 26, 46, 0.95);
+      --text-color: #e8e0f0;
+      --icon-color: #9c27b0;
+      --hint-color: #aa77bb;
+      --shortcut-bg: rgba(156, 39, 176, 0.05);
+      --key-bg: rgba(156, 39, 176, 0.15);
+      --border-color: rgba(156, 39, 176, 0.2);
+      --result-bg: rgba(156, 39, 176, 0.1);
+    }
+
+    /* Neon Glow Theme */
+    body.neon {
+      --bg-color: rgba(13, 13, 13, 0.95);
+      --text-color: #f0fff0;
+      --icon-color: #39ff14;
+      --hint-color: #55aa44;
+      --shortcut-bg: rgba(57, 255, 20, 0.05);
+      --key-bg: rgba(57, 255, 20, 0.15);
+      --border-color: rgba(57, 255, 20, 0.3);
+      --result-bg: rgba(57, 255, 20, 0.08);
+    }
+
+    /* Deep Ocean Theme */
+    body.ocean {
+      --bg-color: rgba(10, 25, 41, 0.95);
+      --text-color: #e0f4f8;
+      --icon-color: #00bcd4;
+      --hint-color: #5599aa;
+      --shortcut-bg: rgba(0, 188, 212, 0.05);
+      --key-bg: rgba(0, 188, 212, 0.15);
+      --border-color: rgba(0, 188, 212, 0.2);
+      --result-bg: rgba(0, 188, 212, 0.1);
+    }
+
+    /* Light Theme */
+    body.light {
+      --bg-color: rgba(255, 255, 255, 0.98);
+      --text-color: #222;
+      --icon-color: #0066cc;
+      --hint-color: #666;
+      --shortcut-bg: rgba(0, 0, 0, 0.03);
+      --key-bg: rgba(0, 0, 0, 0.08);
+      --border-color: rgba(0, 0, 0, 0.1);
+      --result-bg: rgba(0, 102, 204, 0.05);
     }
 
     .container {
@@ -88,9 +175,12 @@
 
     .result-container {
       padding: 12px 20px;
-      background: rgba(0, 217, 255, 0.05);
+      background: var(--result-bg);
       display: none;
       animation: slideDown 0.2s ease;
+      white-space: pre-wrap;
+      max-height: 300px;
+      overflow-y: auto;
     }
 
     .result-container.show {
@@ -204,6 +294,7 @@
       input.value = '';
       resultContainer.classList.remove('show');
       shortcuts.classList.remove('show');
+      ipcRenderer.send('resize-window', 80);
     });
 
     // Handle input
@@ -215,11 +306,11 @@
         return;
       }
 
-      // Debounce for live preview
+      // Debounce for live preview (100ms for fast response)
       clearTimeout(debounceTimer);
       debounceTimer = setTimeout(() => {
         processQuery(query, true);
-      }, 300);
+      }, 100);
     });
 
     // Handle Enter key
@@ -234,16 +325,66 @@
       }
     });
 
+    // Simple math evaluator for live preview
+    function evaluateMathExpression(expr) {
+      try {
+        // Clean the expression
+        let cleanExpr = expr.trim();
+
+        // Replace ^ with ** for exponentiation
+        cleanExpr = cleanExpr.replace(/\^/g, '**');
+
+        // Replace × with *
+        cleanExpr = cleanExpr.replace(/×/g, '*');
+
+        // Replace ÷ with /
+        cleanExpr = cleanExpr.replace(/÷/g, '/');
+
+        // Handle implicit multiplication (e.g., "2(3+4)" -> "2*(3+4)")
+        cleanExpr = cleanExpr.replace(/(\d)\(/g, '$1*(');
+
+        // Security: Only allow safe math characters
+        if (!/^[\d\s\+\-\*\/\(\)\.\,\%]+$/.test(cleanExpr)) {
+          return null;
+        }
+
+        // Handle percentage (e.g., "50%" -> "0.5")
+        cleanExpr = cleanExpr.replace(/(\d+(?:\.\d+)?)\s*%/g, '($1/100)');
+
+        // Evaluate using Function (safer than eval for math expressions)
+        const result = Function('"use strict"; return (' + cleanExpr + ')')();
+
+        // Check if result is valid
+        if (typeof result === 'number' && !isNaN(result) && isFinite(result)) {
+          // Round to reasonable precision
+          if (Math.abs(result - Math.round(result)) < 1e-10) {
+            return Math.round(result);
+          }
+          return Math.round(result * 1e10) / 1e10;
+        }
+
+        return null;
+      } catch (e) {
+        return null;
+      }
+    }
+
     // Process query
     function processQuery(query, isPreview) {
       if (!isPreview) {
         ipcRenderer.send('process-query', query);
       } else {
-        // Show preview for calculations
+        // Show live preview for calculations
         try {
-          // Simple preview for math expressions
-          if (/^[\d\s\+\-\*\/\(\)\.\^]+$/.test(query)) {
-            showResult('Calculating...', 'Press Enter to execute', 'success');
+          // Try to evaluate the expression live
+          const result = evaluateMathExpression(query);
+
+          if (result !== null) {
+            // Show the live result immediately
+            showResult(`= ${result}`, 'Press Enter to copy to clipboard', 'success');
+          } else if (/^[\d\s\+\-\*\/\(\)\.\^×÷]+$/.test(query)) {
+            // It looks like a math expression but couldn't be evaluated yet
+            showResult('...', 'Keep typing or press Enter', 'success');
           }
         } catch (error) {
           // Ignore preview errors
@@ -251,17 +392,37 @@
       }
     }
 
-    // Handle theme toggle
+    // Available themes
+    const themes = ['dark', 'light', 'midnight', 'forest', 'sunset', 'purple', 'neon', 'ocean'];
+    let currentThemeIndex = 0;
+
+    // Apply theme by name
+    function applyTheme(themeName) {
+      themes.forEach(t => document.body.classList.remove(t));
+      if (themeName && themes.includes(themeName)) {
+        document.body.classList.add(themeName);
+        currentThemeIndex = themes.indexOf(themeName);
+      }
+    }
+
+    // Handle theme toggle (cycle through themes)
     ipcRenderer.on('toggle-theme', () => {
-      document.body.classList.toggle('dark');
+      currentThemeIndex = (currentThemeIndex + 1) % themes.length;
+      applyTheme(themes[currentThemeIndex]);
     });
 
     // Handle result from main process
     ipcRenderer.on('query-result', (event, result) => {
       if (result.error) {
         showResult(`✗ ${result.error}`, '', 'error');
+      } else if (result.type === 'theme') {
+        // Apply the theme and show success
+        applyTheme(result.themeId);
+        showResult(`✓ ${result.formatted}`, '', 'success');
       } else if (result.type === 'system_command') {
-        showResult(`✓ ${result.formatted}`, 'Copied to clipboard', 'system');
+        showResult(`✓ ${result.formatted}`, '', 'system');
+      } else if (result.type === 'info') {
+        showResult(`ℹ️ ${result.formatted}`, '', 'success');
       } else {
         showResult(`✓ ${result.formatted}`, 'Copied to clipboard', 'success');
       }
@@ -273,6 +434,12 @@
       resultText.className = `result-text ${type}`;
       resultHint.textContent = hint;
       resultContainer.classList.add('show');
+
+      // Calculate new height
+      setTimeout(() => {
+        const height = document.body.offsetHeight;
+        ipcRenderer.send('resize-window', height);
+      }, 10);
     }
 
     // Auto-focus on load