Add "Learn from Mistakes" option to Analysis page

src/components/Analysis/AnalysisGameList.tsx

@@ -681,17 +681,11 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
             getCurrentGames().length === 0 &&
             !loading && (
               <div className="flex flex-1 items-start justify-center gap-1 py-2 md:items-center">
-                <span
-                  className={`material-symbols-outlined !text-xs ${selected === 'favorites' ? 'material-symbols-filled' : ''}`}
-                >
-                  star
-                </span>
-                <p className="text-xs text-secondary">
+                <p className="text-center text-xs text-secondary">
                   {selected === 'favorites'
-                    ? 'Hit the star to favorite games...'
-                    : 'Play more games...'}
+                    ? ' ⭐ Hit the star to favourite games...'
+                    : 'Play more games... ^. .^₎⟆'}
                 </p>
-                <p className="ml-2 text-xs text-secondary">₍^. .^₎⟆</p>
               </div>
             )}
         </div>

src/components/Analysis/ConfigurableScreens.tsx

@@ -1,8 +1,14 @@
 import { motion } from 'framer-motion'
 import React, { useState } from 'react'
 import { ConfigureAnalysis } from 'src/components/Analysis/ConfigureAnalysis'
+import { LearnFromMistakes } from 'src/components/Analysis/LearnFromMistakes'
 import { ExportGame } from 'src/components/Common/ExportGame'
-import { AnalyzedGame, GameNode } from 'src/types'
+import {
+  AnalyzedGame,
+  GameNode,
+  LearnFromMistakesState,
+  MistakePosition,
+} from 'src/types'
 
 interface Props {
   currentMaiaModel: string
@@ -13,12 +19,26 @@ interface Props {
   currentNode: GameNode
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
+  onLearnFromMistakes?: () => void
   isAnalysisInProgress?: boolean
+  isLearnFromMistakesActive?: boolean
   autoSave?: {
     hasUnsavedChanges: boolean
     isSaving: boolean
     status: 'saving' | 'unsaved' | 'saved'
   }
+  // Learn from mistakes props
+  learnFromMistakesState?: LearnFromMistakesState
+  learnFromMistakesCurrentInfo?: {
+    mistake: MistakePosition
+    progress: string
+    isLastMistake: boolean
+  } | null
+  onShowSolution?: () => void
+  onNextMistake?: () => void
+  onStopLearnFromMistakes?: () => void
+  onSelectPlayer?: (color: 'white' | 'black') => void
+  lastMoveResult?: 'correct' | 'incorrect' | 'not-learning'
 }
 
 export const ConfigurableScreens: React.FC<Props> = ({
@@ -30,8 +50,17 @@ export const ConfigurableScreens: React.FC<Props> = ({
   currentNode,
   onDeleteCustomGame,
   onAnalyzeEntireGame,
+  onLearnFromMistakes,
   isAnalysisInProgress,
+  isLearnFromMistakesActive,
   autoSave,
+  learnFromMistakesState,
+  learnFromMistakesCurrentInfo,
+  onShowSolution,
+  onNextMistake,
+  onStopLearnFromMistakes,
+  onSelectPlayer,
+  lastMoveResult,
 }) => {
   const screens = [
     {
@@ -46,6 +75,50 @@ export const ConfigurableScreens: React.FC<Props> = ({
 
   const [screen, setScreen] = useState(screens[0])
 
+  // If learn from mistakes is active, show only the learning interface
+  if (
+    isLearnFromMistakesActive &&
+    learnFromMistakesState &&
+    (learnFromMistakesCurrentInfo || learnFromMistakesState.showPlayerSelection)
+  ) {
+    return (
+      <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
+        <div className="red-scrollbar background-1/60 flex flex-1 flex-col items-start justify-start overflow-y-scroll">
+          <LearnFromMistakes
+            state={learnFromMistakesState}
+            currentInfo={learnFromMistakesCurrentInfo || null}
+            onShowSolution={
+              onShowSolution ||
+              (() => {
+                /* no-op */
+              })
+            }
+            onNext={
+              onNextMistake ||
+              (() => {
+                /* no-op */
+              })
+            }
+            onStop={
+              onStopLearnFromMistakes ||
+              (() => {
+                /* no-op */
+              })
+            }
+            onSelectPlayer={
+              onSelectPlayer ||
+              (() => {
+                /* no-op */
+              })
+            }
+            lastMoveResult={lastMoveResult || 'not-learning'}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Normal state with configure/export tabs
   return (
     <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
@@ -87,7 +160,9 @@ export const ConfigurableScreens: React.FC<Props> = ({
             game={game}
             onDeleteCustomGame={onDeleteCustomGame}
             onAnalyzeEntireGame={onAnalyzeEntireGame}
+            onLearnFromMistakes={onLearnFromMistakes}
             isAnalysisInProgress={isAnalysisInProgress}
+            isLearnFromMistakesActive={isLearnFromMistakesActive}
             autoSave={autoSave}
           />
         ) : screen.id === 'export' ? (

src/components/Analysis/ConfigureAnalysis.tsx

@@ -11,7 +11,9 @@ interface Props {
   game: AnalyzedGame
   onDeleteCustomGame?: () => void
   onAnalyzeEntireGame?: () => void
+  onLearnFromMistakes?: () => void
   isAnalysisInProgress?: boolean
+  isLearnFromMistakesActive?: boolean
   autoSave?: {
     hasUnsavedChanges: boolean
     isSaving: boolean
@@ -27,7 +29,9 @@ export const ConfigureAnalysis: React.FC<Props> = ({
   game,
   onDeleteCustomGame,
   onAnalyzeEntireGame,
+  onLearnFromMistakes,
   isAnalysisInProgress = false,
+  isLearnFromMistakesActive = false,
   autoSave,
 }: Props) => {
   const isCustomGame = game.type === 'custom-pgn' || game.type === 'custom-fen'
@@ -55,8 +59,8 @@ export const ConfigureAnalysis: React.FC<Props> = ({
       {onAnalyzeEntireGame && (
         <button
           onClick={onAnalyzeEntireGame}
-          disabled={isAnalysisInProgress}
-          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary"
+          disabled={isAnalysisInProgress || isLearnFromMistakesActive}
+          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
         >
           <div className="flex items-center justify-center gap-1.5">
             <span className="material-symbols-outlined !text-sm">
@@ -70,6 +74,22 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           </div>
         </button>
       )}
+      {onLearnFromMistakes && (
+        <button
+          onClick={onLearnFromMistakes}
+          disabled={isAnalysisInProgress || isLearnFromMistakesActive}
+          className="flex w-full items-center gap-1.5 rounded-sm bg-human-4/60 !px-2 !py-1 !text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <div className="flex items-center justify-center gap-1.5">
+            <span className="material-symbols-outlined !text-sm">school</span>
+            <span className="text-xs">
+              {isLearnFromMistakesActive
+                ? 'Learning in progress...'
+                : 'Learn from mistakes'}
+            </span>
+          </div>
+        </button>
+      )}
       {autoSave &&
         game.type !== 'custom-pgn' &&
         game.type !== 'custom-fen' &&