1. Tailwind migretion. 2. Backend Type Safety. 3. Context Refactoring.

src/components/Plans.tsx

@@ -2,21 +2,26 @@
 import React, { useState, useEffect } from 'react';
 import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Scale, Edit2, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical } from 'lucide-react';
 import { WorkoutPlan, ExerciseDef, PlannedSet, Language, ExerciseType } from '../types';
-import { getPlans, savePlan, deletePlan, getExercises, saveExercise } from '../services/storage';
+import { getExercises, saveExercise } from '../services/storage';
 import { t } from '../services/i18n';
 import { generateId } from '../utils/uuid';
+import { useAuth } from '../context/AuthContext';
+import { useSession } from '../context/SessionContext';
+import { useActiveWorkout } from '../context/ActiveWorkoutContext';
 
 import FilledInput from './FilledInput';
 import { toTitleCase } from '../utils/text';
 
 interface PlansProps {
-  userId: string;
-  onStartPlan: (plan: WorkoutPlan) => void;
   lang: Language;
 }
 
-const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
-  const [plans, setPlans] = useState<WorkoutPlan[]>([]);
+const Plans: React.FC<PlansProps> = ({ lang }) => {
+  const { currentUser } = useAuth();
+  const userId = currentUser?.id || '';
+  const { plans, savePlan, deletePlan } = useSession();
+  const { startSession } = useActiveWorkout();
+
   const [isEditing, setIsEditing] = useState(false);
 
   const [editId, setEditId] = useState<string | null>(null);
@@ -39,9 +44,6 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
 
   useEffect(() => {
     const loadData = async () => {
-      const fetchedPlans = await getPlans(userId);
-      setPlans(fetchedPlans);
-
       const fetchedExercises = await getExercises(userId);
       // Filter out archived exercises
       if (Array.isArray(fetchedExercises)) {
@@ -50,7 +52,7 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
         setAvailableExercises([]);
       }
     };
-    loadData();
+    if (userId) loadData();
   }, [userId]);
 
   const handleCreateNew = () => {
@@ -72,18 +74,14 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
   const handleSave = async () => {
     if (!name.trim() || !editId) return;
     const newPlan: WorkoutPlan = { id: editId, name, description, steps };
-    await savePlan(userId, newPlan);
-    const updated = await getPlans(userId);
-    setPlans(updated);
+    await savePlan(newPlan);
     setIsEditing(false);
   };
 
   const handleDelete = async (id: string, e: React.MouseEvent) => {
     e.stopPropagation();
     if (confirm(t('delete_confirm', lang))) {
-      await deletePlan(userId, id);
-      const updated = await getPlans(userId);
-      setPlans(updated);
+      await deletePlan(id);
     }
   };
 
@@ -391,7 +389,7 @@ const Plans: React.FC<PlansProps> = ({ userId, onStartPlan, lang }) => {
                   {plan.steps.length} {t('exercises_count', lang)}
                 </div>
                 <button
-                  onClick={() => onStartPlan(plan)}
+                  onClick={() => startSession(plan)}
                   className="flex items-center gap-2 bg-primary text-on-primary px-5 py-2 rounded-full text-sm font-medium hover:shadow-elevation-2 transition-all"
                 >
                   <PlayCircle size={18} />