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

src/components/History.tsx

@@ -3,16 +3,16 @@ import React, { useState } from 'react';
 import { Calendar, Clock, TrendingUp, Gauge, Pencil, Trash2, X, Save, ArrowRight, ArrowUp, Timer, Activity, Dumbbell, Percent } from 'lucide-react';
 import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
 import { t } from '../services/i18n';
+import { useSession } from '../context/SessionContext';
 
 interface HistoryProps {
-    sessions: WorkoutSession[];
-    onUpdateSession?: (session: WorkoutSession) => void;
-    onDeleteSession?: (sessionId: string) => void;
     lang: Language;
 }
 
-const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSession, lang }) => {
+const History: React.FC<HistoryProps> = ({ lang }) => {
+    const { sessions, updateSession, deleteSession } = useSession();
     const [editingSession, setEditingSession] = useState<WorkoutSession | null>(null);
+
     const [deletingId, setDeletingId] = useState<string | null>(null);
     const [deletingSetInfo, setDeletingSetInfo] = useState<{ sessionId: string, setId: string } | null>(null);
 
@@ -60,10 +60,15 @@ const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSe
         return `${minutes}m`;
     };
 
-    const handleSaveEdit = () => {
-        if (editingSession && onUpdateSession) {
-            onUpdateSession(editingSession);
-            setEditingSession(null);
+
+    const handleSaveEdit = async () => {
+        if (editingSession) {
+            try {
+                await updateSession(editingSession);
+                setEditingSession(null);
+            } catch (e) {
+                console.error("Failed to update session", e);
+            }
         }
     };
 
@@ -83,11 +88,15 @@ const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSe
         });
     };
 
-    const handleConfirmDelete = () => {
-        if (deletingId && onDeleteSession) {
-            onDeleteSession(deletingId);
-            setDeletingId(null);
-        } else if (deletingSetInfo && onUpdateSession) {
+    const handleConfirmDelete = async () => {
+        if (deletingId) {
+            try {
+                await deleteSession(deletingId);
+                setDeletingId(null);
+            } catch (e) {
+                console.error("Failed to delete session", e);
+            }
+        } else if (deletingSetInfo) {
             // Find the session
             const session = sessions.find(s => s.id === deletingSetInfo.sessionId);
             if (session) {
@@ -96,7 +105,11 @@ const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSe
                     ...session,
                     sets: session.sets.filter(s => s.id !== deletingSetInfo.setId)
                 };
-                onUpdateSession(updatedSession);
+                try {
+                    await updateSession(updatedSession);
+                } catch (e) {
+                    console.error("Failed to update session after set delete", e);
+                }
             }
             setDeletingSetInfo(null);
         }
@@ -104,6 +117,7 @@ const History: React.FC<HistoryProps> = ({ sessions, onUpdateSession, onDeleteSe
 
 
 
+
     if (sessions.length === 0) {
         return (
             <div className="flex flex-col items-center justify-center h-full text-on-surface-variant p-8 text-center">