From 7cef592d698673632fd2f7f981488b59c05bd9f1 Mon Sep 17 00:00:00 2001
From: Adarsh Singh <anexus5919@gmail.com>
Date: Mon, 22 Jun 2026 03:47:26 +0530
Subject: [PATCH] fix: wire the Welcome "Plans" button to the
 WorkoutPlansScreen

The Plans button called an empty onViewWorkoutPlans handler, and
WorkoutPlansScreen existed but was never imported or rendered, so the
button did nothing.

Add a workoutPlans screen (lazy-loaded, with a welcome transition),
route the button to it, and render WorkoutPlansScreen with the active-plan
state. Export ActivePlan so App can type that state.
---
 src/App.tsx                           | 21 ++++++++++++++++++---
 src/components/WorkoutPlansScreen.tsx |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index a5ae85a5..c0824d40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,6 +24,7 @@ import { useRegisterSW } from "virtual:pwa-register/react";
 import { estimateCalories, getSavedUserWeight } from "./utils/calorieEstimator";
 import { CursorGlow } from "./components/CursorGlow";
 import { PageErrorBoundary } from "./components/PageErrorBoundary";
+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 })));
@@ -38,6 +39,7 @@ const CalibrationScreen = lazy(() => import("./components/CalibrationScreen").th
 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 WorkoutPlansScreen = lazy(() => import("./components/WorkoutPlansScreen").then(m => ({ default: m.WorkoutPlansScreen })));
 
 type Screen =
   | "welcome"
@@ -54,12 +56,13 @@ type Screen =
   | "trophy"
   | "profile"
   | "fitness"
-  | "avatar";
+  | "avatar"
+  | "workoutPlans";
 
 type ScreenTransitionMap = Record<Screen, readonly Screen[]>;
 
 const SCREEN_TRANSITIONS: ScreenTransitionMap = {
-  welcome: ["calibration", "history", "trophy", "profile", "login", "fitness", "about", "contact", "avatar"],
+  welcome: ["calibration", "history", "trophy", "profile", "login", "fitness", "about", "contact", "avatar", "workoutPlans"],
   calibration: ["workout", "welcome", "login"],
   workout: ["summary", "welcome"],
   summary: ["replay", "welcome"],
@@ -74,6 +77,7 @@ const SCREEN_TRANSITIONS: ScreenTransitionMap = {
   about: ["welcome"],
   contact: ["welcome"],
   avatar: ["welcome"],
+  workoutPlans: ["welcome"],
 };
 
 const canTransitionTo = (from: Screen, to: Screen) => {
@@ -116,6 +120,7 @@ function App() {
   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);
 
@@ -357,7 +362,7 @@ function App() {
           onViewProfile={() => navigateTo("profile")}
           onViewFitnessCalculator={() => navigateTo("fitness")}
           onViewAvatarCustomization={() => navigateTo("avatar")}
-          onViewWorkoutPlans={() => {}}
+          onViewWorkoutPlans={() => navigateTo("workoutPlans")}
           leveling={leveling}
         />
       )}
@@ -443,6 +448,16 @@ function App() {
         {currentScreen === "fitness" && (
           <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" && (
diff --git a/src/components/WorkoutPlansScreen.tsx b/src/components/WorkoutPlansScreen.tsx
index 43b262c5..3fe9a5b1 100644
--- a/src/components/WorkoutPlansScreen.tsx
+++ b/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;