feat: add save/autosave indicator

Author: kevinjosethomas

src/components/Analysis/ConfigurableScreens.tsx

@@ -14,6 +14,11 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   isAnalysisInProgress?: boolean
+  autoSave?: {
+    hasUnsavedChanges: boolean
+    isSaving: boolean
+    status: 'saving' | 'unsaved' | 'saved'
+  }
 }
 
 export const ConfigurableScreens: React.FC<Props> = ({
@@ -26,6 +31,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   isAnalysisInProgress,
+  autoSave,
 }) => {
   const screens = [
     {
@@ -82,6 +88,7 @@ export const ConfigurableScreens: React.FC<Props> = ({
             onDeleteCustomGame={onDeleteCustomGame}
             onAnalyzeEntireGame={onAnalyzeEntireGame}
             isAnalysisInProgress={isAnalysisInProgress}
+            autoSave={autoSave}
           />
         ) : screen.id === 'export' ? (
           <div className="flex w-full flex-col p-3">

src/components/Analysis/ConfigureAnalysis.tsx

@@ -1,6 +1,4 @@
-import Link from 'next/link'
 import React from 'react'
-import { useLocalStorage } from 'src/hooks'
 import { AnalyzedGame } from 'src/types'
 
 import { ContinueAgainstMaia } from 'src/components'
@@ -14,6 +12,11 @@ interface Props {
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
   isAnalysisInProgress?: boolean
+  autoSave?: {
+    hasUnsavedChanges: boolean
+    isSaving: boolean
+    status: 'saving' | 'unsaved' | 'saved'
+  }
 }
 
 export const ConfigureAnalysis: React.FC<Props> = ({
@@ -25,6 +28,7 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   onDeleteCustomGame,
   onAnalyzeEntireGame,
   isAnalysisInProgress = false,
+  autoSave,
 }: Props) => {
   const isCustomGame = game.type === 'custom-pgn' || game.type === 'custom-fen'
 
@@ -66,6 +70,43 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           </div>
         </button>
       )}
+      {autoSave &&
+        game.type !== 'custom-pgn' &&
+        game.type !== 'custom-fen' &&
+        game.type !== 'tournament' && (
+          <div className="mt-2 w-full">
+            <div className="flex items-center gap-1.5">
+              {autoSave.status === 'saving' && (
+                <>
+                  <div className="h-2 w-2 animate-spin rounded-full border border-secondary border-t-primary"></div>
+                  <span className="text-xs text-secondary">
+                    Saving analysis...
+                  </span>
+                </>
+              )}
+              {autoSave.status === 'unsaved' && (
+                <>
+                  <span className="material-symbols-outlined !text-sm text-orange-400">
+                    sync_problem
+                  </span>
+                  <span className="text-xs text-orange-400">
+                    Unsaved analysis. Will auto-save...
+                  </span>
+                </>
+              )}
+              {autoSave.status === 'saved' && (
+                <>
+                  <span className="material-symbols-outlined !text-sm text-green-400">
+                    cloud_done
+                  </span>
+                  <span className="text-xs text-green-400">
+                    Analysis auto-saved
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        )}
       {isCustomGame && onDeleteCustomGame && (
         <div className="mt-2 w-full">
           <button

src/hooks/useAnalysisController/useAnalysisController.ts

@@ -84,6 +84,8 @@ export const useAnalysisController = (
   })
 
   const [lastSavedCacheKey, setLastSavedCacheKey] = useState<string>('')
+  const [hasUnsavedAnalysis, setHasUnsavedAnalysis] = useState(false)
+  const [isAutoSaving, setIsAutoSaving] = useState(false)
   const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null)
 
   const saveAnalysisToBackend = useCallback(async () => {
@@ -96,10 +98,17 @@ export const useAnalysisController = (
       return
     }
 
+    // Don't save if there are no unsaved changes
+    if (!hasUnsavedAnalysis) {
+      return
+    }
+
     try {
+      setIsAutoSaving(true)
       const analysisData = collectEngineAnalysisData(game.tree)
 
       if (analysisData.length === 0) {
+        setIsAutoSaving(false)
         return
       }
 
@@ -108,16 +117,19 @@ export const useAnalysisController = (
       )
 
       if (!hasMeaningfulAnalysis) {
+        setIsAutoSaving(false)
         return
       }
 
       const cacheKey = generateAnalysisCacheKey(analysisData)
       if (cacheKey === lastSavedCacheKey) {
+        setIsAutoSaving(false)
         return
       }
 
       await storeEngineAnalysis(game.id, analysisData)
       setLastSavedCacheKey(cacheKey)
+      setHasUnsavedAnalysis(false) // Mark as saved
       console.log(
         'Analysis saved to backend:',
         analysisData.length,
@@ -126,8 +138,10 @@ export const useAnalysisController = (
     } catch (error) {
       console.warn('Failed to save analysis to backend:', error)
       // Don't show error to user as this is background functionality
+    } finally {
+      setIsAutoSaving(false)
     }
-  }, [game.id, game.type, game.tree, lastSavedCacheKey])
+  }, [game.id, game.type, game.tree, lastSavedCacheKey, hasUnsavedAnalysis])
 
   const saveAnalysisToBackendRef = useRef(saveAnalysisToBackend)
   saveAnalysisToBackendRef.current = saveAnalysisToBackend
@@ -174,9 +188,20 @@ export const useAnalysisController = (
 
   // Load stored analysis when game changes
   useEffect(() => {
+    // Reset states for new game
+    setHasUnsavedAnalysis(false)
+    setIsAutoSaving(false)
+    setLastSavedCacheKey('')
     loadStoredAnalysis()
   }, [loadStoredAnalysis])
 
+  // Mark analysis as unsaved when new analysis comes in
+  useEffect(() => {
+    if (analysisState > 0) {
+      setHasUnsavedAnalysis(true)
+    }
+  }, [analysisState])
+
   // Setup auto-save timer
   useEffect(() => {
     // Clear existing timer
@@ -481,6 +506,15 @@ export const useAnalysisController = (
       isEnginesReady: stockfish.isReady() && maia.status === 'ready',
       saveAnalysis: saveAnalysisToBackend,
       loadStoredAnalysis,
+      autoSave: {
+        hasUnsavedChanges: hasUnsavedAnalysis,
+        isSaving: isAutoSaving,
+        status: isAutoSaving
+          ? 'saving'
+          : hasUnsavedAnalysis
+            ? 'unsaved'
+            : 'saved',
+      },
     },
   }
 }

src/pages/analysis/[...id].tsx

@@ -819,6 +819,7 @@ const Analysis: React.FC<Props> = ({
             onDeleteCustomGame={handleDeleteCustomGame}
             onAnalyzeEntireGame={handleAnalyzeEntireGame}
             isAnalysisInProgress={controller.gameAnalysis.progress.isAnalyzing}
+            autoSave={controller.gameAnalysis.autoSave}
           />
         </motion.div>
         <motion.div
@@ -1409,6 +1410,7 @@ const Analysis: React.FC<Props> = ({
               isAnalysisInProgress={
                 controller.gameAnalysis.progress.isAnalyzing
               }
+              autoSave={controller.gameAnalysis.autoSave}
               currentNode={controller.currentNode as GameNode}
             />
           </motion.div>