🐳 10/02 - 14:07 - 1. Validation identifies when I broke the json but it still shows SUCCESS! and green with the error, whihc is highgly confusing. It should show red X and the error not green success

script.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Sample JSON data
+    ======= Sample JSON data
     const sampleJSON = {
         "name": "John Doe",
         "age": 30,
@@ -94,9 +94,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 try {
                     const data = JSON.parse(e.target.result);
                     loadJSON(data);
-                    showNotification('File loaded successfully!');
+                    showNotification('File loaded successfully!', false);
                 } catch (error) {
-                    showNotification('Error loading file: Invalid JSON');
+                    const errorMessage = error.message || 'Invalid JSON format';
+                    showNotification('Error loading file: ' + errorMessage, true);
                 }
             };
             reader.readAsText(file);
@@ -449,13 +450,13 @@ document.addEventListener('DOMContentLoaded', function() {
         let displayValue = type === 'key' ? currentValue : JSON.stringify(currentValue);
         
         // Remove quotes from display for editing
-        if (displayValue.startsWith('"') && displayValue.endsWith('"')) {
+        if (displayValue && displayValue.startsWith('"') && displayValue.endsWith('"')) {
             displayValue = displayValue.slice(1, -1);
         }
         
         const input = document.createElement('input');
         input.type = 'text';
-        input.value = displayValue;
+        input.value = displayValue !== undefined ? displayValue : '';
         input.className = `editable-field ${type}-input`;
         
         // Replace span with input
@@ -709,12 +710,16 @@ document.addEventListener('DOMContentLoaded', function() {
             isApplyingChanges = false;
             rightEditorModified = false;
             if (showMsg) {
-                showNotification('Changes applied successfully!');
+                showNotification('Changes applied successfully!', false);
             }
             return true;
         } catch (e) {
             jsonOutput.style.borderColor = '#ef4444';
             validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
+            const errorMessage = e.message || 'Unknown JSON syntax error';
+            if (showMsg) {
+                showNotification('Invalid JSON: ' + errorMessage, true);
+            }
             return false;
         }
     }
@@ -747,7 +752,8 @@ document.addEventListener('DOMContentLoaded', function() {
             
         } catch (e) {
             jsonOutput.style.borderColor = '#ef4444';
-            validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
+            const errorMessage = e.message || 'Invalid JSON syntax';
+            validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON: ' + errorMessage + '</span>';
         }
     });
     
@@ -787,15 +793,31 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
     
-    // Show notification
-    function showNotification(message) {
+    // Show notification (success by default)
+    function showNotification(message, isError = false) {
         const notificationContent = notification.querySelector('p');
+        const notificationTitle = notification.querySelector('h4');
+        const notificationIcon = notification.querySelector('i');
+        
         notificationContent.textContent = message;
+        
+        if (isError) {
+            notificationTitle.textContent = 'Error!';
+            notificationIcon.className = 'fas fa-times-circle text-red-500 text-xl mt-0.5 mr-3';
+            notification.classList.remove('border-green-500');
+            notification.classList.add('border-red-500');
+        } else {
+            notificationTitle.textContent = 'Success!';
+            notificationIcon.className = 'fas fa-check-circle text-green-500 text-xl mt-0.5 mr-3';
+            notification.classList.remove('border-red-500');
+            notification.classList.add('border-green-500');
+        }
+        
         notification.classList.add('show');
         
         setTimeout(() => {
             notification.classList.remove('show');
-        }, 3000);
+        }, 4000);
     }
     
     // Save to history for undo/redo