feat: add download model modal blocker to train page

Author: kevinjosethomas

src/components/Analysis/DownloadModelModal.tsx

@@ -76,6 +76,12 @@ export const DownloadModelModal: React.FC<Props> = ({
               />
             </div>
           ) : null}
+          <Link
+            href="/"
+            className="order-2 flex h-8 cursor-pointer select-none items-center gap-1 self-end rounded bg-background-2 px-3 text-sm transition duration-200 hover:bg-background-3 md:order-3 md:h-10 md:px-4 md:text-base"
+          >
+            <p>Return Home</p>
+          </Link>
           <div
             tabIndex={0}
             role="button"

src/pages/train.tsx

@@ -16,6 +16,8 @@ import { useRouter } from 'next/router'
 import type { Key } from 'chessground/types'
 import type { DrawShape } from 'chessground/draw'
 import { Chess, PieceSymbol } from 'chess.ts'
+import { AnimatePresence } from 'framer-motion'
+import toast from 'react-hot-toast'
 import {
   getTrainingGame,
   logPuzzleGuesses,
@@ -32,6 +34,7 @@ import {
   AuthenticatedWrapper,
   GameBoard,
   PromotionOverlay,
+  DownloadModelModal,
   Highlight,
   MoveMap,
   BlunderMeter,
@@ -255,6 +258,7 @@ const Train: React.FC<Props> = ({
   const [hoverArrow, setHoverArrow] = useState<DrawShape | null>(null)
   const [arrows, setArrows] = useState<DrawShape[]>([])
   const analysisSyncedRef = useRef(false)
+  const toastId = useRef<string | null>(null)
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
   >(null)
@@ -286,6 +290,27 @@ const Train: React.FC<Props> = ({
     }
   }, [showAnalysis, analysisController, controller.currentNode])
 
+  // Toast notifications for Maia model status
+  useEffect(() => {
+    return () => {
+      toast.dismiss()
+    }
+  }, [])
+
+  useEffect(() => {
+    if (analysisController.maiaStatus === 'loading' && !toastId.current) {
+      toastId.current = toast.loading('Loading Maia Model...')
+    } else if (analysisController.maiaStatus === 'ready') {
+      if (toastId.current) {
+        toast.success('Loaded Maia! Analysis is ready', {
+          id: toastId.current,
+        })
+      } else {
+        toast.success('Loaded Maia! Analysis is ready')
+      }
+    }
+  }, [analysisController.maiaStatus])
+
   const onSelectSquare = useCallback(
     (square: Key) => {
       if (!showAnalysis) {
@@ -1045,6 +1070,15 @@ const Train: React.FC<Props> = ({
           content="Collection of chess training and analysis tools centered around Maia."
         />
       </Head>
+      <AnimatePresence>
+        {analysisController.maiaStatus === 'no-cache' ||
+        analysisController.maiaStatus === 'downloading' ? (
+          <DownloadModelModal
+            progress={analysisController.maiaProgress}
+            download={analysisController.downloadMaia}
+          />
+        ) : null}
+      </AnimatePresence>
       <TrainingControllerContext.Provider value={controller}>
         {trainingGame && (isMobile ? mobileLayout : desktopLayout)}
       </TrainingControllerContext.Provider>