feat: autosave

frontend/src/app/canvas/useCanvasGraph.ts

@@ -1,38 +1,89 @@
 /**
  * Hook for canvas graph state and persistence. Wraps useGraphStateWithHistory
- * with initial graph from project storage (or example). Save is explicit via save().
- * Keeps CanvasPage focused on composition and layout.
+ * with initial graph from project storage (or example). Save is explicit via save();
+ * autosave runs on an interval (~10s) and saves when the graph has changed.
  */
 
-import { useCallback, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useGraphStateWithHistory } from '@/hooks/useGraphStateWithHistory'
 import { getInitialGraph } from '@/app/canvas/canvasGraphUtils'
+import { useCanvasStore } from '@/app/canvas/canvasStore'
 import { saveGraphToStorage, PROJECT_VERSION } from '@/app/pleroma/projectGraphStorage'
 import type { AppNode, AppEdge } from '@/lib/graph/nodeTypes'
 
+export type SaveStatus = 'saved' | 'unsaved' | 'saving'
+
 export type UseCanvasGraphResult = ReturnType<typeof useGraphStateWithHistory> & {
   /** Persist current nodes/edges to storage. No-op when projectId is missing. */
   save: () => void
+  /** For menubar: show "Unsaved changes" | "Saving…" | "All changes saved". */
+  saveStatus: SaveStatus
 }
 
+const AUTOSAVE_INTERVAL_MS = 10_000
+
 export function useCanvasGraph(projectId: string | undefined): UseCanvasGraphResult {
   const initialGraph = useMemo(() => getInitialGraph(projectId), [projectId])
   const result = useGraphStateWithHistory(initialGraph.nodes, initialGraph.edges)
   const { nodes, edges } = result
 
+  const storeNodes = useCanvasStore((s) => s.graph.nodes)
+  const storeEdges = useCanvasStore((s) => s.graph.edges)
+
   const nodesRef = useRef(nodes)
   const edgesRef = useRef(edges)
   nodesRef.current = nodes
   edgesRef.current = edges
 
-  const save = useCallback(() => {
+  const [isSaving, setIsSaving] = useState(false)
+  const lastSavedSnapshotRef = useRef(
+    JSON.stringify({ nodes: initialGraph.nodes, edges: initialGraph.edges })
+  )
+
+  const serializedFromStore = useMemo(
+    () => JSON.stringify({ nodes: storeNodes, edges: storeEdges }),
+    [storeNodes, storeEdges]
+  )
+  const isDirty = serializedFromStore !== lastSavedSnapshotRef.current
+  const saveStatus: SaveStatus = isSaving ? 'saving' : isDirty ? 'unsaved' : 'saved'
+
+  const performSave = useCallback(() => {
     if (!projectId) return
+    const current = JSON.stringify({
+      nodes: nodesRef.current,
+      edges: edgesRef.current,
+    })
+    if (current === lastSavedSnapshotRef.current) return
+    setIsSaving(true)
     saveGraphToStorage(projectId, {
       version: PROJECT_VERSION,
       nodes: nodesRef.current,
       edges: edgesRef.current,
     })
+    lastSavedSnapshotRef.current = current
+    setIsSaving(false)
   }, [projectId])
 
-  return { ...result, save }
+  const save = useCallback(() => {
+    if (!projectId) return
+    setIsSaving(true)
+    saveGraphToStorage(projectId, {
+      version: PROJECT_VERSION,
+      nodes: nodesRef.current,
+      edges: edgesRef.current,
+    })
+    lastSavedSnapshotRef.current = JSON.stringify({
+      nodes: nodesRef.current,
+      edges: edgesRef.current,
+    })
+    setIsSaving(false)
+  }, [projectId])
+
+  useEffect(() => {
+    if (!projectId) return
+    const id = setInterval(performSave, AUTOSAVE_INTERVAL_MS)
+    return () => clearInterval(id)
+  }, [projectId, performSave])
+
+  return { ...result, save, saveStatus }
 }