remove saved

Author: mikebarkmin

packages/learningmap/src/LearningMapEditor.tsx

@@ -68,12 +68,11 @@ export function LearningMapEditor({
 
   const parsedRoadmap = parseRoadmapData(roadmapData || "");
   const { screenToFlowPosition, zoomIn, zoomOut, setCenter, fitView } = useReactFlow();
-  
+
   // Only get minimal state needed in this component
   const nodes = useEditorStore(state => state.nodes);
   const edges = useEditorStore(state => state.edges);
   const settings = useEditorStore(state => state.settings);
-  const saved = useEditorStore(state => state.saved);
   const previewMode = useEditorStore(state => state.previewMode);
   const debugMode = useEditorStore(state => state.debugMode);
   const showGrid = useEditorStore(state => state.showGrid);
@@ -88,12 +87,11 @@ export function LearningMapEditor({
   const nextNodeId = useEditorStore(state => state.nextNodeId);
   const clipboard = useEditorStore(state => state.clipboard);
   const pendingExternalId = useEditorStore(state => state.pendingExternalId);
-  
+
   // Store actions
   const onNodesChange = useEditorStore(state => state.onNodesChange);
   const onEdgesChange = useEditorStore(state => state.onEdgesChange);
   const onConnect = useEditorStore(state => state.onConnect);
-  const setSaved = useEditorStore(state => state.setSaved);
   const setHelpOpen = useEditorStore(state => state.setHelpOpen);
   const setShowGrid = useEditorStore(state => state.setShowGrid);
   const setSelectedNodeId = useEditorStore(state => state.setSelectedNodeId);
@@ -123,7 +121,7 @@ export function LearningMapEditor({
   const setNodes = useEditorStore(state => state.setNodes);
   const setEdges = useEditorStore(state => state.setEdges);
   const setSettings = useEditorStore(state => state.setSettings);
-  
+
   // Temporal store for undo/redo
   const { undo, redo, canUndo, canRedo } = useTemporalStore();
 
@@ -166,7 +164,7 @@ export function LearningMapEditor({
     // Filter out existing debug edges, but use the store's edges directly to avoid dependency loop
     const baseEdges = useEditorStore.getState().edges.filter((e) => !e.id.startsWith("debug-"));
     const newEdges: Edge[] = [...baseEdges];
-    
+
     if (debugMode) {
       nodes.forEach((node) => {
         if (showCompletionNeeds && node.type === "topic" && node.data?.completion?.needs) {
@@ -331,7 +329,6 @@ export function LearningMapEditor({
 
   const handleSave = useCallback(() => {
     const roadmapData = getRoadmapData();
-    setSaved(true);
 
     if (onChange) {
       onChange(roadmapData);
@@ -342,16 +339,7 @@ export function LearningMapEditor({
         root.dispatchEvent(new CustomEvent("change", { detail: roadmapData }));
       }
     }
-  }, [nodes, edges, settings, onChange, getRoadmapData, setSaved]);
-
-  // Auto-save when changes are made
-  useEffect(() => {
-    if (!saved) {
-      setTimeout(() => {
-        handleSave();
-      }, 2000);
-    }
-  }, [saved, handleSave]);
+  }, [nodes, edges, settings, onChange, getRoadmapData]);
 
   const togglePreviewMode = useCallback(() => {
     handleSave();
@@ -380,7 +368,7 @@ export function LearningMapEditor({
 
   const handleShare = useCallback(() => {
     const roadmapData = getRoadmapData();
-    
+
     // Check if map is empty (no nodes)
     if (!roadmapData.nodes || roadmapData.nodes.length === 0) {
       alert(t.emptyMapCannotBeShared);
@@ -806,9 +794,6 @@ export function LearningMapEditor({
                 <Info />
               </ControlButton>
             </Controls>
-            {!saved && <Panel position="bottom-right" title={t.unsavedChanges} onClick={() => { handleSave(); }}>
-              <ShieldAlert size={32} color="var(--learningmap-color-coal)" />
-            </Panel>}
             {selectedNodeIds.length > 1 && <MultiNodePanel onUpdate={handleUpdateNodes} />}
           </ReactFlow>
         </div>

packages/learningmap/src/editorStore.ts

@@ -1,7 +1,22 @@
-import { create } from 'zustand';
-import { temporal } from 'zundo';
-import { Node, Edge, applyNodeChanges, applyEdgeChanges, addEdge, NodeChange, EdgeChange, Connection } from '@xyflow/react';
-import { NodeData, RoadmapData, Settings, ImageNodeData, TextNodeData } from './types';
+import { create } from "zustand";
+import { temporal } from "zundo";
+import {
+  Node,
+  Edge,
+  applyNodeChanges,
+  applyEdgeChanges,
+  addEdge,
+  NodeChange,
+  EdgeChange,
+  Connection,
+} from "@xyflow/react";
+import {
+  NodeData,
+  RoadmapData,
+  Settings,
+  ImageNodeData,
+  TextNodeData,
+} from "./types";
 
 // Note: This is a global store for the editor. Typically only one editor instance is active at a time.
 // If you need multiple independent editor instances, consider creating store instances per component or using context.
@@ -10,9 +25,8 @@ export interface EditorState {
   nodes: Node<NodeData>[];
   edges: Edge[];
   settings: Settings;
-  
+
   // UI state
-  saved: boolean;
   previewMode: boolean;
   debugMode: boolean;
   showGrid: boolean;
@@ -22,24 +36,24 @@ export interface EditorState {
   edgeDrawerOpen: boolean;
   shareDialogOpen: boolean;
   loadExternalDialogOpen: boolean;
-  
+
   // Selected items
   selectedNodeId: string | null;
   selectedNodeIds: string[];
   selectedEdge: Edge | null;
-  
+
   // Other state
   nextNodeId: number;
   clipboard: { nodes: Node<NodeData>[]; edges: Edge[] } | null;
   lastMousePosition: { x: number; y: number } | null;
   shareLink: string;
   pendingExternalId: string | null;
-  
+
   // Debug settings
   showCompletionNeeds: boolean;
   showCompletionOptional: boolean;
   showUnlockAfter: boolean;
-  
+
   // Actions
   onNodesChange: (changes: NodeChange<Node<NodeData>>[]) => void;
   onEdgesChange: (changes: EdgeChange<Edge>[]) => void;
@@ -54,9 +68,8 @@ export interface EditorState {
   deleteNode: (nodeId: string) => void;
   deleteEdge: (edgeId: string) => void;
   addNode: (node: Node<NodeData>) => void;
-  
+
   // UI state setters
-  setSaved: (saved: boolean) => void;
   setPreviewMode: (previewMode: boolean) => void;
   setDebugMode: (debugMode: boolean) => void;
   setShowGrid: (showGrid: boolean) => void;
@@ -70,14 +83,16 @@ export interface EditorState {
   setSelectedNodeIds: (nodeIds: string[]) => void;
   setSelectedEdge: (edge: Edge | null) => void;
   setNextNodeId: (nextNodeId: number) => void;
-  setClipboard: (clipboard: { nodes: Node<NodeData>[]; edges: Edge[] } | null) => void;
+  setClipboard: (
+    clipboard: { nodes: Node<NodeData>[]; edges: Edge[] } | null,
+  ) => void;
   setLastMousePosition: (position: { x: number; y: number } | null) => void;
   setShareLink: (shareLink: string) => void;
   setPendingExternalId: (pendingExternalId: string | null) => void;
   setShowCompletionNeeds: (showCompletionNeeds: boolean) => void;
   setShowCompletionOptional: (showCompletionOptional: boolean) => void;
   setShowUnlockAfter: (showUnlockAfter: boolean) => void;
-  
+
   // Bulk operations
   loadRoadmapData: (roadmapData: RoadmapData) => void;
   getRoadmapData: () => RoadmapData;
@@ -89,7 +104,6 @@ const initialState = {
   nodes: [],
   edges: [],
   settings: { background: { color: "#ffffff" } },
-  saved: true,
   previewMode: false,
   debugMode: false,
   showGrid: false,
@@ -121,52 +135,47 @@ export const useEditorStore = create<EditorState>()(
       onNodesChange: (changes) => {
         set({
           nodes: applyNodeChanges(changes, get().nodes),
-          saved: false,
         });
       },
 
       onEdgesChange: (changes) => {
         set({
           edges: applyEdgeChanges(changes, get().edges),
-          saved: false,
         });
       },
 
       onConnect: (connection) => {
         set({
           edges: addEdge(connection, get().edges),
-          saved: false,
         });
       },
 
       // Node operations
       setNodes: (nodes) => {
-        set({ nodes, saved: false });
+        set({ nodes });
       },
 
       setEdges: (edges) => {
-        set({ edges, saved: false });
+        set({ edges });
       },
 
       setSettings: (settings) => {
-        set({ settings, saved: false });
+        set({ settings });
       },
 
       updateNode: (nodeId, updates) => {
         set({
           nodes: get().nodes.map((n) =>
-            n.id === nodeId ? { ...n, ...updates } : n
+            n.id === nodeId ? { ...n, ...updates } : n,
           ),
-          saved: false,
         });
       },
 
       updateNodeData: (nodeId, dataUpdates) => {
         set({
           nodes: get().nodes.map((n) =>
-            n.id === nodeId ? { ...n, data: { ...n.data, ...dataUpdates } } : n
+            n.id === nodeId ? { ...n, data: { ...n.data, ...dataUpdates } } : n,
           ),
-          saved: false,
         });
       },
 
@@ -176,16 +185,14 @@ export const useEditorStore = create<EditorState>()(
             const updated = updates.find((un) => un.id === n.id);
             return updated ? updated : n;
           }),
-          saved: false,
         });
       },
 
       updateEdge: (edgeId, updates) => {
         set({
           edges: get().edges.map((e) =>
-            e.id === edgeId ? { ...e, ...updates } : e
+            e.id === edgeId ? { ...e, ...updates } : e,
           ),
-          saved: false,
         });
         // Update selected edge if it's the one being updated
         const selectedEdge = get().selectedEdge;
@@ -197,36 +204,36 @@ export const useEditorStore = create<EditorState>()(
       deleteNode: (nodeId) => {
         set({
           nodes: get().nodes.filter((n) => n.id !== nodeId),
-          edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
-          saved: false,
+          edges: get().edges.filter(
+            (e) => e.source !== nodeId && e.target !== nodeId,
+          ),
         });
       },
 
       deleteEdge: (edgeId) => {
         set({
           edges: get().edges.filter((e) => e.id !== edgeId),
-          saved: false,
         });
       },
 
       addNode: (node) => {
         set({
           nodes: [...get().nodes, node],
-          saved: false,
         });
       },
 
       // UI state setters
-      setSaved: (saved) => set({ saved }),
       setPreviewMode: (previewMode) => set({ previewMode }),
       setDebugMode: (debugMode) => set({ debugMode }),
       setShowGrid: (showGrid) => set({ showGrid }),
       setHelpOpen: (helpOpen) => set({ helpOpen }),
       setDrawerOpen: (drawerOpen) => set({ drawerOpen }),
-      setSettingsDrawerOpen: (settingsDrawerOpen) => set({ settingsDrawerOpen }),
+      setSettingsDrawerOpen: (settingsDrawerOpen) =>
+        set({ settingsDrawerOpen }),
       setEdgeDrawerOpen: (edgeDrawerOpen) => set({ edgeDrawerOpen }),
       setShareDialogOpen: (shareDialogOpen) => set({ shareDialogOpen }),
-      setLoadExternalDialogOpen: (loadExternalDialogOpen) => set({ loadExternalDialogOpen }),
+      setLoadExternalDialogOpen: (loadExternalDialogOpen) =>
+        set({ loadExternalDialogOpen }),
       setSelectedNodeId: (selectedNodeId) => set({ selectedNodeId }),
       setSelectedNodeIds: (selectedNodeIds) => set({ selectedNodeIds }),
       setSelectedEdge: (selectedEdge) => set({ selectedEdge }),
@@ -235,14 +242,20 @@ export const useEditorStore = create<EditorState>()(
       setLastMousePosition: (lastMousePosition) => set({ lastMousePosition }),
       setShareLink: (shareLink) => set({ shareLink }),
       setPendingExternalId: (pendingExternalId) => set({ pendingExternalId }),
-      setShowCompletionNeeds: (showCompletionNeeds) => set({ showCompletionNeeds }),
-      setShowCompletionOptional: (showCompletionOptional) => set({ showCompletionOptional }),
+      setShowCompletionNeeds: (showCompletionNeeds) =>
+        set({ showCompletionNeeds }),
+      setShowCompletionOptional: (showCompletionOptional) =>
+        set({ showCompletionOptional }),
       setShowUnlockAfter: (showUnlockAfter) => set({ showUnlockAfter }),
 
       // Bulk operations
       loadRoadmapData: (roadmapData) => {
-        const nodesArr = Array.isArray(roadmapData?.nodes) ? roadmapData.nodes : [];
-        const edgesArr = Array.isArray(roadmapData?.edges) ? roadmapData.edges : [];
+        const nodesArr = Array.isArray(roadmapData?.nodes)
+          ? roadmapData.nodes
+          : [];
+        const edgesArr = Array.isArray(roadmapData?.edges)
+          ? roadmapData.edges
+          : [];
 
         const rawNodes = nodesArr.map((n) => ({
           ...n,
@@ -257,15 +270,17 @@ export const useEditorStore = create<EditorState>()(
           const maxId = Math.max(
             ...nodesArr
               .map((n) => parseInt(n.id.replace(/\D/g, ""), 10))
-              .filter((id) => !isNaN(id))
+              .filter((id) => !isNaN(id)),
           );
           nextNodeId = maxId + 1;
         }
 
         set({
           nodes: rawNodes,
           edges: edgesArr,
-          settings: roadmapData?.settings || { background: { color: "#ffffff" } },
+          settings: roadmapData?.settings || {
+            background: { color: "#ffffff" },
+          },
           nextNodeId,
         });
       },
@@ -317,19 +332,25 @@ export const useEditorStore = create<EditorState>()(
       // Zundo options
       limit: 100,
       equality: (a, b) => a === b,
-    }
-  )
+    },
+  ),
 );
 
 // Hook for accessing temporal store (undo/redo)
-import { useStore } from 'zustand';
+import { useStore } from "zustand";
 
 export const useTemporalStore = () => {
   const undo = useEditorStore.temporal.getState().undo;
   const redo = useEditorStore.temporal.getState().redo;
-  const pastStates = useStore(useEditorStore.temporal, (state) => state.pastStates);
-  const futureStates = useStore(useEditorStore.temporal, (state) => state.futureStates);
-  
+  const pastStates = useStore(
+    useEditorStore.temporal,
+    (state) => state.pastStates,
+  );
+  const futureStates = useStore(
+    useEditorStore.temporal,
+    (state) => state.futureStates,
+  );
+
   return {
     undo,
     redo,