feat(workouts): add swipe-to-delete with gesture handler and pull-to-refresh

src/features/history/screens/HistoryScreen.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useState } from "react";
-import { View, Text, Pressable, FlatList } from "react-native";
+import { useCallback, useState } from "react";
+import { View, Text, Pressable, FlatList, Alert } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import { useFocusEffect } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import type { HistoryStackParamList } from "@navigation/types";
-import { getAllWorkouts } from "@db/operations";
+import { getAllWorkouts, deleteWorkout } from "@db/operations";
 import { formatTime } from "@utils/formatTime";
 import { formatDistance } from "@utils/formatDistance";
+import { SwipeableRow } from "@components/SwipeableRow";
 
 type WorkoutRow = {
   id: string;
@@ -20,16 +22,39 @@ type WorkoutRow = {
 export function HistoryScreen() {
   const navigation = useNavigation<NativeStackNavigationProp<HistoryStackParamList>>();
   const [workouts, setWorkouts] = useState<WorkoutRow[]>([]);
-
-  useEffect(() => {
-    loadWorkouts();
-  }, []);
+  const [refreshing, setRefreshing] = useState(false);
 
   const loadWorkouts = async () => {
     const data = await getAllWorkouts();
     setWorkouts((data as WorkoutRow[]).filter((w) => w.finishedAt));
   };
 
+  useFocusEffect(
+    useCallback(() => {
+      loadWorkouts();
+    }, [])
+  );
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    await loadWorkouts();
+    setRefreshing(false);
+  };
+
+  const onDelete = (id: string) => {
+    Alert.alert("Delete Workout", "Are you sure?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: async () => {
+          await deleteWorkout(id);
+          await loadWorkouts();
+        },
+      },
+    ]);
+  };
+
   const grouped = workouts.reduce<Record<string, WorkoutRow[]>>((acc, w) => {
     const date = new Date(w.startedAt).toLocaleDateString();
     if (!acc[date]) acc[date] = [];
@@ -41,19 +66,12 @@ export function HistoryScreen() {
 
   return (
     <View className="flex-1 bg-white">
-      <View className="p-4 pb-2">
-        <Pressable
-          onPress={() => navigation.navigate("Stats")}
-          className="bg-slate-100 rounded-2xl p-3 items-center mb-4"
-        >
-          <Text className="text-sky-600 font-semibold">View Statistics</Text>
-        </Pressable>
-      </View>
-
       <FlatList
         data={sections}
         keyExtractor={([date]) => date}
         contentContainerClassName="px-4 pb-8"
+        refreshing={refreshing}
+        onRefresh={onRefresh}
         ListEmptyComponent={
           <View className="py-12 items-center">
             <Text className="text-slate-400 text-lg">No completed workouts yet</Text>
@@ -65,30 +83,31 @@ export function HistoryScreen() {
               {date}
             </Text>
             {rows.map((w) => (
-              <Pressable
-                key={w.id}
-                onPress={() => navigation.navigate("SessionDetail", { sessionId: w.id })}
-                className="bg-slate-50 rounded-2xl p-4 mb-2 border border-slate-200"
-              >
-                <View className="flex-row justify-between items-center">
-                  <View>
-                    <Text className="font-semibold text-slate-900">
-                      {w.name || "Swim Session"}
-                    </Text>
-                    <Text className="text-slate-500 text-sm">
-                      {formatDistance(w.totalDistance ?? 0)}
-                      {w.totalDuration ? ` · ${formatTime(w.totalDuration)}` : ""}
-                      {w.calories ? ` · ${Math.round(w.calories)} kcal` : ""}
+              <SwipeableRow key={w.id} onDelete={() => onDelete(w.id)}>
+                <Pressable
+                  onPress={() => navigation.navigate("SessionDetail", { sessionId: w.id })}
+                  className="p-4"
+                >
+                  <View className="flex-row justify-between items-center">
+                    <View>
+                      <Text className="font-semibold text-slate-900">
+                        {w.name || "Swim Session"}
+                      </Text>
+                      <Text className="text-slate-500 text-sm">
+                        {formatDistance(w.totalDistance ?? 0)}
+                        {w.totalDuration ? ` · ${formatTime(w.totalDuration)}` : ""}
+                        {w.calories ? ` · ${Math.round(w.calories)} kcal` : ""}
+                      </Text>
+                    </View>
+                    <Text className="text-slate-400 text-xs">
+                      {new Date(w.startedAt).toLocaleTimeString([], {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
                     </Text>
                   </View>
-                  <Text className="text-slate-400 text-xs">
-                    {new Date(w.startedAt).toLocaleTimeString([], {
-                      hour: "2-digit",
-                      minute: "2-digit",
-                    })}
-                  </Text>
-                </View>
-              </Pressable>
+                </Pressable>
+              </SwipeableRow>
             ))}
           </View>
         )}