feat: add view summary option after drills are complete

Author: kevinjosethomas

src/components/Openings/OpeningDrillSidebar.tsx

@@ -122,11 +122,6 @@ export const OpeningDrillSidebar: React.FC<Props> = ({
             </div>
           ) : (
             <div className="flex flex-col">
-              {onLoadCompletedDrill && (
-                <div className="px-3 py-2 text-xs text-secondary">
-                  Click on any drill below to analyze it
-                </div>
-              )}
               {completedDrills.map((completedDrill, index) => {
                 const accuracy =
                   completedDrill.totalMoves > 0

src/hooks/useOpeningDrillController/useOpeningDrillController.ts

@@ -341,6 +341,11 @@ export const useOpeningDrillController = (
     setContinueAnalyzingMode(true) // Allow moves beyond target count
   }, [])
 
+  // Show final summary modal
+  const showSummary = useCallback(() => {
+    setShowFinalModal(true)
+  }, [])
+
   // Reset drill session for new openings
   const resetDrillSession = useCallback(() => {
     setAllDrillsCompleted(false)
@@ -899,5 +904,8 @@ export const useOpeningDrillController = (
 
     // Load a specific completed drill for analysis
     loadCompletedDrill,
+
+    // Show final summary modal
+    showSummary,
   }
 }

src/pages/openings/index.tsx

@@ -497,6 +497,14 @@ const OpeningsPage: NextPage = () => {
                     Next Drill
                   </button>
                 )}
+              {controller.areAllDrillsCompleted && (
+                <button
+                  onClick={controller.showSummary}
+                  className="rounded bg-human-3 px-4 py-2 text-sm font-medium transition-colors hover:bg-human-3/80"
+                >
+                  View Summary
+                </button>
+              )}
             </div>
           )}
         </div>
@@ -583,6 +591,14 @@ const OpeningsPage: NextPage = () => {
                 Next
               </button>
             )}
+          {controller.areAllDrillsCompleted && (
+            <button
+              onClick={controller.showSummary}
+              className="rounded bg-human-3 px-4 py-2 text-sm font-medium"
+            >
+              Summary
+            </button>
+          )}
         </div>
 
         {/* Mobile progress */}