History Export to CSV

src/components/History.tsx

@@ -2,12 +2,13 @@
 import React, { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useNavigate } from 'react-router-dom';
-import { Trash2, Calendar, Clock, ChevronDown, ChevronUp, History as HistoryIcon, Dumbbell, Ruler, Timer, Weight, Edit2, Gauge, Pencil, Save, MoreVertical, ClipboardList } from 'lucide-react';
+import { Trash2, Calendar, Clock, ChevronDown, ChevronUp, History as HistoryIcon, Dumbbell, Ruler, Timer, Weight, Edit2, Gauge, Pencil, Save, MoreVertical, ClipboardList, Download } from 'lucide-react';
 import { TopBar } from './ui/TopBar';
 import { WorkoutSession, ExerciseType, WorkoutSet, Language } from '../types';
 import { t } from '../services/i18n';
 import { formatSetMetrics } from '../utils/setFormatting';
 import { useSession } from '../context/SessionContext';
+import { generateCsv, downloadCsv } from '../utils/csvExport';
 import { useAuth } from '../context/AuthContext';
 import { getExercises } from '../services/storage';
 import { Button } from './ui/Button';
@@ -177,7 +178,24 @@ const History: React.FC<HistoryProps> = ({ lang }) => {
 
     return (
         <div className="h-full flex flex-col bg-surface">
-            <TopBar title={t('tab_history', lang)} icon={HistoryIcon} />
+            <TopBar
+                title={t('tab_history', lang)}
+                icon={HistoryIcon}
+                actions={
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => {
+                            const csvContent = generateCsv(sessions, exercises);
+                            downloadCsv(csvContent);
+                        }}
+                        title={t('export_csv', lang)}
+                        aria-label={t('export_csv', lang)}
+                    >
+                        <Download size={24} className="text-on-surface-variant hover:text-primary transition-colors" />
+                    </Button>
+                }
+            />
             <div className="flex-1 overflow-y-auto p-4 pb-20">
                 <div className="max-w-2xl mx-auto space-y-4">
                     {/* Regular Workout Sessions */}