From 2e0b9e9b106fc11e40cfae10ab7564264ce17e1d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 21 Jan 2026 03:58:12 +0000
Subject: [PATCH] feat: Add save and load functionality

This commit introduces the ability for users to save their mind map's state (nodes and edges) to a JSON file and load it back into the application.

- Adds "Save" and "Load" buttons to the UI.
- Implements `handleSave` to serialize the mind map to a JSON file.
- Implements `handleLoad` to read a JSON file and update the mind map.
- Adds a confirmation dialog to the load functionality to prevent accidental data loss.
---
 src/App.jsx | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index 5f3df15..95e1f50 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -115,6 +115,7 @@ export default function App() {
   const [loading, setLoading] = useState(false);
   const stopGenerationRef = useRef(false);
   const reactFlowWrapper = useRef(null);
+  const fileInputRef = useRef(null);
 
   const handleExport = () => {
     if (reactFlowWrapper.current) {
@@ -126,6 +127,40 @@ export default function App() {
     }
   };
 
+  const handleSave = () => {
+    const data = {
+      nodes,
+      edges,
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    saveAs(blob, 'nodeverse-mindmap.json');
+  };
+
+  const handleLoad = (event) => {
+    if (window.confirm('Loading a new file will replace your current work. Are you sure?')) {
+      const file = event.target.files[0];
+      if (file && file.type === 'application/json') {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const { nodes: loadedNodes, edges: loadedEdges } = JSON.parse(e.target.result);
+            if (loadedNodes && loadedEdges) {
+              setNodes(loadedNodes);
+              setEdges(loadedEdges);
+            } else {
+              alert('Invalid JSON file.');
+            }
+          } catch (error) {
+            alert('Error loading file.');
+          }
+        };
+        reader.readAsText(file);
+      } else {
+        alert('Please select a JSON file.');
+      }
+    }
+  };
+
   const handleSubmit = async () => {
     if (!prompt.trim()) return;
     setLoading(true);
@@ -246,6 +281,45 @@ export default function App() {
           >
             Export as PNG
           </button>
+          <button
+            onClick={handleSave}
+            disabled={loading || nodes.length === 0}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#2196F3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: loading || nodes.length === 0 ? 'not-allowed' : 'pointer',
+              opacity: loading || nodes.length === 0 ? 0.7 : 1,
+            }}
+          >
+            Save
+          </button>
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleLoad}
+            accept=".json"
+          />
+          <button
+            onClick={() => fileInputRef.current.click()}
+            disabled={loading}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#FF9800',
+              color: 'white',
+              border: 'none',
+              borderRadius: '8px',
+              fontWeight: 'bold',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              opacity: loading ? 0.7 : 1,
+            }}
+          >
+            Load
+          </button>
         </div>
       </div>