fix: wire the Welcome Plans button to the WorkoutPlansScreen

src/App.tsx

@@ -24,7 +24,7 @@
 import { estimateCalories, getSavedUserWeight } from "./utils/calorieEstimator";
 import { CursorGlow } from "./components/CursorGlow";
 import { PageErrorBoundary } from "./components/PageErrorBoundary";
-import { ExitConfirmModal } from "./components/ExitConfirmModal";
+import type { ActivePlan } from "./components/WorkoutPlansScreen";
 const WelcomeScreen = lazy(() => import("./components/WelcomeScreen").then(m => ({ default: m.WelcomeScreen })));
 const SummaryScreen = lazy(() => import("./components/SummaryScreen").then(m => ({ default: m.SummaryScreen })));
 const TrophyRoom = lazy(() => import("./components/TrophyRoom").then(m => ({ default: m.TrophyRoom })));
@@ -39,8 +39,7 @@
 const WorkoutScreen = lazy(() => import("./components/WorkoutScreen").then(m => ({ default: m.WorkoutScreen })));
 const ReplayScreen = lazy(() => import("./components/ReplayScreen").then(m => ({ default: m.ReplayScreen })));
 const AvatarCustomizationScreen = lazy(() => import("./components/AvatarCustomizationScreen").then(m => ({ default: m.AvatarCustomizationScreen })));
-const TutorialsScreen = lazy(() => import("./components/TutorialsScreen").then(m => ({ default: m.TutorialsScreen })));
-
+const WorkoutPlansScreen = lazy(() => import("./components/WorkoutPlansScreen").then(m => ({ default: m.WorkoutPlansScreen })));
 
 type Screen =
   | "welcome"
@@ -58,15 +57,12 @@
   | "profile"
   | "fitness"
   | "avatar"
-  | "privacy"
-  | "terms&conditions"
-  | "tutorials";
-
+  | "workoutPlans";
 
 type ScreenTransitionMap = Record<Screen, readonly Screen[]>;
 
 const SCREEN_TRANSITIONS: ScreenTransitionMap = {
-  welcome: ["calibration", "history", "trophy", "profile", "login", "fitness", "about", "contact", "avatar", "tutorials", "privacy", "terms&conditions"],
+  welcome: ["calibration", "history", "trophy", "profile", "login", "fitness", "about", "contact", "avatar", "workoutPlans"],
   calibration: ["workout", "welcome", "login"],
   workout: ["summary", "welcome"],
   summary: ["replay", "welcome"],
@@ -81,9 +77,7 @@
   about: ["welcome"],
   contact: ["welcome"],
   avatar: ["welcome"],
-  privacy: ["welcome"],
-  "terms&conditions": ["welcome"],
-  tutorials: ["welcome", "calibration"],
+  workoutPlans: ["welcome"],
 };
 
 
@@ -127,6 +121,7 @@
   const { theme, setTheme } = useTheme();
   const { user, loading: authLoading } = useAuth();
   const [currentScreen, setCurrentScreen] = useState<Screen>("welcome");
+  const [activePlan, setActivePlan] = useState<ActivePlan | null>(null);
 
   const streamRef = useRef<MediaStream | null>(null);
 
@@ -369,8 +364,7 @@
           onViewProfile={() => navigateTo("profile")}
           onViewFitnessCalculator={() => navigateTo("fitness")}
           onViewAvatarCustomization={() => navigateTo("avatar")}
-          onViewWorkoutPlans={() => {}}
-          onViewTutorials={() => navigateTo("tutorials")}
+          onViewWorkoutPlans={() => navigateTo("workoutPlans")}
           leveling={leveling}
         />
       )}
@@ -402,7 +396,7 @@
 
         {currentScreen === "battle" && (
           <PageErrorBoundary fallbackMessage="Failed to load Battle Mode. Please try again.">
             <BattleMode onBack={() => navigateTo("welcome")} />
           </PageErrorBoundary>
         )}
         {currentScreen === "workout" && (
@@ -463,7 +457,7 @@
 
         {currentScreen === "tutorials" && (
           <Suspense fallback={<div className="loading-fallback">Loading Tutorials...</div>}>
             <TutorialsScreen
               onBack={() => navigateTo("welcome")}
               onStartTryMode={(exerciseKey) => {
                 const config = exercises[exerciseKey];
@@ -480,6 +474,15 @@
           <FitnessCalculator onBack={() => navigateTo("welcome")} />
         )}
 
+        {currentScreen === "workoutPlans" && (
+          <PageErrorBoundary fallbackMessage="Failed to load workout plans. Please try again.">
+            <WorkoutPlansScreen
+              onBack={() => navigateTo("welcome")}
+              activePlan={activePlan}
+              setActivePlan={setActivePlan}
+            />
+          </PageErrorBoundary>
+        )}
       </Suspense>
 
       {currentScreen === "about" && (
@@ -525,7 +528,7 @@
         </div>
       )}
       {showExitModal && (
         <ExitConfirmModal
           message="Are you sure you want to end your session?"
           onStay={() => setShowExitModal(false)}
           onExit={() => {

src/components/WorkoutPlansScreen.tsx

@@ -7,7 +7,7 @@ import {
 } from "lucide-react";
 import { useTheme } from "../context/ThemeContext";
 
-interface ActivePlan {
+export interface ActivePlan {
   id: string;
   goal: string;
   level: string;