feat: add boardcontroller to drillperformancemodal + prevent moving beyond drill moves

Author: kevinjosethomas

src/components/Openings/DrillPerformanceModal.tsx

@@ -22,6 +22,7 @@ import {
   Tooltip,
 } from 'recharts'
 import { ModalContainer, MovesContainer } from 'src/components'
+import { BoardController } from 'src/components/Board/BoardController'
 import { DrillPerformanceData, MoveAnalysis } from 'src/types/openings'
 import { MaiaRatingInsights } from './MaiaRatingInsights'
 import { WindowSizeContext, TreeControllerContext } from 'src/contexts'
@@ -92,6 +93,7 @@ const AnimatedGameReplay: React.FC<{
 }> = ({ openingFen, playerColor, gameTree, openingEndNode }) => {
   const [currentFen, setCurrentFen] = useState(openingFen)
   const [currentNode, setCurrentNode] = useState<GameNode | null>(null)
+  const [orientation, setOrientation] = useState<'white' | 'black'>(playerColor)
 
   const treeController = useContext(TreeControllerContext)
 
@@ -109,6 +111,25 @@ const AnimatedGameReplay: React.FC<{
     }
   }, [treeController.currentNode])
 
+  // Ensure we don't navigate before the opening end as the "root" for this view
+  const goToPreviousNode = useCallback(() => {
+    if (!treeController.currentNode) return
+    if (treeController.currentNode.fen === openingEndNode.fen) return
+    if (treeController.currentNode.parent) {
+      treeController.goToNode(treeController.currentNode.parent)
+    }
+  }, [treeController, openingEndNode.fen])
+
+  const goToNextNode = useCallback(() => {
+    if (!treeController.currentNode?.mainChild) return
+    treeController.goToNode(treeController.currentNode.mainChild)
+  }, [treeController])
+
+  const goToRootNode = useCallback(() => {
+    // Treat the opening end node as the root for this modal
+    treeController.goToNode(openingEndNode)
+  }, [treeController, openingEndNode])
+
   // Get arrows for optimal moves from the current position
   const getArrowsForCurrentMove = useCallback((): DrawShape[] => {
     if (!currentNode) return []
@@ -201,7 +222,7 @@ const AnimatedGameReplay: React.FC<{
             config={{
               viewOnly: true,
               fen: currentFen,
-              orientation: playerColor,
+              orientation,
               coordinates: true,
               animation: { enabled: true, duration: 200 },
               drawable: {
@@ -229,17 +250,31 @@ const AnimatedGameReplay: React.FC<{
         </div>
       </div>
 
-      {/* Move History - Use MovesContainer for consistency */}
       <div className="flex min-h-0 flex-1 flex-col border-t border-white/10">
         <MovesContainer
           game={{
             id: 'drill-performance',
             tree: gameTree,
           }}
           startFromNode={openingEndNode}
+          restrictNavigationBefore={openingEndNode}
           showAnnotations={true}
           showVariations={false}
         />
+        <BoardController
+          orientation={orientation}
+          setOrientation={setOrientation}
+          currentNode={currentNode}
+          plyCount={0}
+          goToNode={treeController.goToNode}
+          goToNextNode={goToNextNode}
+          goToPreviousNode={goToPreviousNode}
+          goToRootNode={goToRootNode}
+          gameTree={gameTree}
+          disablePrevious={currentNode?.fen === openingEndNode.fen}
+          disableKeyboardNavigation={true}
+          embedded
+        />
       </div>
     </div>
   )
@@ -346,7 +381,7 @@ const CustomTooltip: React.FC<{
   }
 
   return (
-    <div className="rounded border border-white/10 from-white/10 to-white/5 bg-gradient-to-br p-3 backdrop-blur-md">
+    <div className="rounded border border-white/10 bg-gradient-to-br from-white/10 to-white/5 p-3 backdrop-blur-md">
       <p className="text-sm font-medium text-primary">
         {data.san ? `${moveNotation} ${data.san}` : `${moveNotation}`}
       </p>

src/components/Openings/OpeningDrillSidebar.tsx

@@ -44,11 +44,11 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
     : 'flex h-full w-full max-w-full flex-col border-r border-white/10 bg-background-1'
 
   const sectionHeaderClass = embedded
-    ? 'px-4 pt-4 w-full'
+    ? 'px-4 py-4 w-full'
     : 'border-b border-white/10 p-4 w-full'
 
   const listHeaderClass = embedded
-    ? 'px-4 pb-2'
+    ? 'px-4 py-2'
     : 'border-b border-white/10 px-3 py-2'
 
   const tree = useContext(TreeControllerContext)
@@ -84,7 +84,7 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
           Current Drill
         </h2>
         {currentDrill ? (
-          <div className="space-y-2">
+          <div className="flex flex-col gap-1">
             <div>
               <p className="text-sm font-medium text-white/95">
                 {currentDrill.opening.name}