auto save

1 files changed, 39 insertions, 3 deletions

diff --git a/frontend/src/components/LeftSidebar.tsx b/frontend/src/components/LeftSidebar.tsx
index 8f9f202..6806ca3 100644
--- a/frontend/src/components/LeftSidebar.tsx
+++ b/frontend/src/components/LeftSidebar.tsx
@@ -36,7 +36,9 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
     renameProjectItem,
     deleteProjectItem,
     setCurrentBlueprintPath,
-    clearBlueprint
+    clearBlueprint,
+    autoSave,
+    setAutoSave
   } = useFlowStore();
   const { user, logout } = useAuthStore();
   const { setViewport, getViewport } = useReactFlow();
@@ -66,6 +68,14 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
   const [keysMessage, setKeysMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
   const { getAuthHeader } = useAuthStore();
 
+  // Load auto-save preference from localStorage on mount
+  useEffect(() => {
+    const saved = localStorage.getItem('contextflow-autosave');
+    if (saved === 'true') {
+      setAutoSave(true);
+    }
+  }, [setAutoSave]);
+
   // Load API keys when settings modal opens
   useEffect(() => {
     if (showUserSettings) {
@@ -668,7 +678,7 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
                     <div>
                       <p className={`font-medium mb-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>🎯 Basic Operations</p>
                       <ul className="list-disc list-inside space-y-1 ml-1">
-                        <li><span className="font-medium">Double-click</span> canvas to create a node</li>
+                        <li><span className="font-medium">Right-click</span> canvas to create a node</li>
                         <li><span className="font-medium">Drag</span> from handle to connect nodes</li>
                         <li><span className="font-medium">Click</span> node to edit in right sidebar</li>
                         <li><span className="font-medium">Delete</span> key to remove selected node</li>
@@ -705,11 +715,37 @@ const LeftSidebar: React.FC<LeftSidebarProps> = ({ isOpen, onToggle }) => {
                     
                     <div className={`p-2 rounded ${isDark ? 'bg-blue-900/30' : 'bg-blue-50'}`}>
                       <p className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>💡 Tip</p>
-                      <p>Use <span className="font-medium">Ctrl+S</span> to save, or enable auto-save in blueprints.</p>
+                      <p>Use <span className="font-medium">Ctrl+S</span> to save, or enable auto-save below.</p>
                     </div>
                   </div>
                 )}
               </div>
+
+              {/* Auto-Save Toggle */}
+              <div className={`border-t pt-4 ${isDark ? 'border-gray-700' : 'border-gray-200'}`}>
+                <div className="flex items-center justify-between">
+                  <span className={`text-sm font-medium ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Auto-Save
+                  </span>
+                  <button
+                    onClick={() => setAutoSave(!autoSave)}
+                    className={`relative w-11 h-6 rounded-full transition-colors ${
+                      autoSave 
+                        ? 'bg-blue-600' 
+                        : isDark ? 'bg-gray-600' : 'bg-gray-300'
+                    }`}
+                  >
+                    <span 
+                      className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${
+                        autoSave ? 'translate-x-5' : 'translate-x-0'
+                      }`}
+                    />
+                  </button>
+                </div>
+                <p className={`text-xs mt-1 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+                  Automatically save blueprint after changes (2s delay)
+                </p>
+              </div>
             </div>
 
             {/* Footer */}