Split file loading into two separate buttons

- Add 'Load an Object' button for standard JSON files (.json)
- Add 'Load a Log File' button for JSON Lines files (.log)
- Each button has specific file type filter and handling logic
- Improved user experience with clear separation of functionality
- Add styling for the new info button (log files)
- Update documentation to reflect the two-button approach

src/App.js

@@ -119,7 +119,7 @@ function App() {
   const loadFromDisk = () => {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = '.json,.log';
+    fileInput.accept = '.json';
     fileInput.onchange = (event) => {
       const file = event.target.files[0];
       if (file) {
@@ -127,35 +127,50 @@ function App() {
         reader.onload = (e) => {
           try {
             const content = e.target.result;
-            let jsonContent;
+            // Handle .json files as regular JSON
+            JSON.parse(content); // Validate JSON
+            setJsonData(content);
+            setJsonError('');
+          } catch (err) {
+            setJsonError(`Invalid JSON file: ${err.message}`);
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    fileInput.click();
+  };
+
+  const loadLogFile = () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.log';
+    fileInput.onchange = (event) => {
+      const file = event.target.files[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const content = e.target.result;
+            const lines = content.split('\n')
+              .map(line => line.trim())
+              .filter(line => line.length > 0);
             
-            // Handle .log files as sequences of JSON objects (JSON Lines format)
-            if (file.name.toLowerCase().endsWith('.log')) {
-              const lines = content.split('\n')
-                .map(line => line.trim())
-                .filter(line => line.length > 0);
-              
-              const jsonObjects = [];
-              for (const line of lines) {
-                try {
-                  const obj = JSON.parse(line);
-                  jsonObjects.push(obj);
-                } catch (lineError) {
-                  throw new Error(`Invalid JSON on line: "${line.substring(0, 50)}..." - ${lineError.message}`);
-                }
+            const jsonObjects = [];
+            for (const line of lines) {
+              try {
+                const obj = JSON.parse(line);
+                jsonObjects.push(obj);
+              } catch (lineError) {
+                throw new Error(`Invalid JSON on line: "${line.substring(0, 50)}..." - ${lineError.message}`);
               }
-              
-              jsonContent = JSON.stringify(jsonObjects, null, 2);
-            } else {
-              // Handle .json files as regular JSON
-              JSON.parse(content); // Validate JSON
-              jsonContent = content;
             }
             
+            const jsonContent = JSON.stringify(jsonObjects, null, 2);
             setJsonData(jsonContent);
             setJsonError('');
           } catch (err) {
-            setJsonError(`Invalid file content: ${err.message}`);
+            setJsonError(`Invalid log file: ${err.message}`);
           }
         };
         reader.readAsText(file);
@@ -195,9 +210,16 @@ function App() {
                   <button 
                     className="btn btn-outline-success btn-sm me-2" 
                     onClick={loadFromDisk}
-                    title="Load JSON from disk"
+                    title="Load JSON object from file"
                   >
-                    📁 Load from Disk
+                    📄 Load an Object
+                  </button>
+                  <button 
+                    className="btn btn-outline-info btn-sm me-2" 
+                    onClick={loadLogFile}
+                    title="Load JSON Lines log file"
+                  >
+                    📋 Load a Log File
                   </button>
                   <button 
                     className="btn btn-outline-primary btn-sm me-2" 

src/index.css

@@ -65,6 +65,12 @@ code {
   color: white;
 }
 
+.btn-outline-info:hover {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+  color: white;
+}
+
 .header-section {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;