feat(workout-summary): add lengths, avg pace, and per-set pool pace stats; fix swipe direction

src/features/active-workout/components/WorkoutSummary.tsx

@@ -1,14 +1,23 @@
-import { View, Text, ScrollView, Pressable, type ReactNode } from "react-native";
+import { View, Text, ScrollView, Pressable } from "react-native";
 import { useTranslation } from "react-i18next";
 import { formatTime, formatPace } from "@utils/formatTime";
 import { formatDistance } from "@utils/formatDistance";
 import { STROKE_COLORS } from "@constants/strokes";
 
+function formatPoolPace(seconds: number, poolLength: number): string {
+  if (poolLength === 0) return "--:--";
+  const pace = seconds / poolLength;
+  const mins = Math.floor(pace / 60);
+  const secs = Math.floor(pace % 60);
+  return `${mins}:${String(secs).padStart(2, "0")}`;
+}
+
 type Set = {
   stroke: string;
   distancePerRep: number;
   repCount: number;
   position: number;
+  poolPace?: number | null;
 };
 
 type Lap = {
@@ -25,14 +34,15 @@ type Props = {
   date?: string;
   totalDistance: number;
   totalDuration: number;
+  totalLengths?: number | null;
   calories?: number | null;
   avgHeartRate?: number | null;
+  avgPace?: number | null;
   poolLength: number;
   sets: Set[];
   laps: Lap[];
   avgSwolf: number | null;
   onDone?: () => void;
-  rightAction?: ReactNode;
 };
 
 export function WorkoutSummary({
@@ -40,14 +50,15 @@ export function WorkoutSummary({
   date,
   totalDistance,
   totalDuration,
+  totalLengths,
   calories,
   avgHeartRate,
+  avgPace,
   poolLength,
   sets,
   laps,
   avgSwolf,
   onDone,
-  rightAction,
 }: Props) {
   const { t } = useTranslation("active-workout");
   const { t: tc } = useTranslation("common");
@@ -65,7 +76,6 @@ export function WorkoutSummary({
               {date || tc("pool", { length: poolLength })}
             </Text>
           </View>
-          {rightAction}
         </View>
 
         {/* Stats grid */}
@@ -99,8 +109,25 @@ export function WorkoutSummary({
               <Text className="text-xs text-slate-500 mt-1">{t("avgHeartRate")}</Text>
             </View>
           )}
+          {totalLengths != null && totalLengths > 0 && (
+            <View className="flex-1 bg-sky-50 rounded-2xl p-4 items-center">
+              <Text className="text-2xl font-bold text-sky-600">{totalLengths}</Text>
+              <Text className="text-xs text-slate-500 mt-1">{t("lengths")}</Text>
+            </View>
+          )}
         </View>
 
+        {avgPace != null && avgPace > 0 && (
+          <View className="flex-row gap-3 mb-4">
+            <View className="flex-1 bg-sky-50 rounded-2xl p-4 items-center">
+              <Text className="text-2xl font-bold text-sky-600">
+                {formatPace(totalDistance, totalDuration)}
+              </Text>
+              <Text className="text-xs text-slate-500 mt-1">{t("avgPace")}</Text>
+            </View>
+          </View>
+        )}
+
         {/* SWOLF */}
         {avgSwolf != null && avgSwolf > 0 && (
           <View className="bg-slate-50 rounded-2xl p-4 mb-4 flex-row justify-between items-center">
@@ -129,9 +156,16 @@ export function WorkoutSummary({
                     {tc(`stroke.${set.stroke.toLowerCase()}`)}
                   </Text>
                 </View>
-                <Text className="text-slate-600">
-                  {set.repCount}×{set.distancePerRep}m
-                </Text>
+                <View className="items-end">
+                  <Text className="text-slate-600">
+                    {set.repCount}×{set.distancePerRep}m
+                  </Text>
+                  {set.poolPace != null && set.poolPace > 0 && (
+                    <Text className="text-slate-400 text-xs">
+                      {formatPoolPace(set.poolPace, poolLength)}/pool
+                    </Text>
+                  )}
+                </View>
               </View>
             ))}
           </>

src/features/active-workout/screens/PostSwimScreen.tsx

@@ -56,6 +56,24 @@ export function PostSwimScreen() {
         ? Math.round(laps.reduce((acc, l) => acc + (l.swolf ?? 0), 0) / laps.length)
         : null;
 
+    const totalLengths =
+      workout.totalDistance && workout.poolLength
+        ? Math.round(workout.totalDistance / workout.poolLength)
+        : null;
+
+    const avgPace =
+      workout.totalDistance && totalDuration
+        ? workout.totalDistance / totalDuration
+        : null;
+
+    const setsWithPace = (workout.sets ?? []).map((set: any) => {
+      const setLaps = laps.filter((l: any) => l.setPosition === set.position);
+      const setDuration = setLaps.reduce((acc: number, l: any) => acc + l.duration, 0);
+      const setDistance = setLaps.reduce((acc: number, l: any) => acc + l.distance, 0);
+      const poolPace = setDistance > 0 ? setDuration / setDistance : null;
+      return { ...set, poolPace };
+    });
+
     setData({
       name: workout.name,
       poolLength: workout.poolLength,
@@ -63,9 +81,11 @@ export function PostSwimScreen() {
       totalDuration,
       calories: workout.calories,
       avgHeartRate: workout.avgHeartRate,
-      sets: workout.sets ?? [],
+      sets: setsWithPace,
       laps,
       avgSwolf,
+      totalLengths,
+      avgPace,
     });
   };
 
@@ -82,8 +102,10 @@ export function PostSwimScreen() {
       name={data.name}
       totalDistance={data.totalDistance}
       totalDuration={data.totalDuration}
+      totalLengths={data.totalLengths}
       calories={data.calories}
       avgHeartRate={data.avgHeartRate}
+      avgPace={data.avgPace}
       poolLength={data.poolLength}
       sets={data.sets}
       laps={data.laps}

src/features/history/screens/SessionDetailScreen.tsx

@@ -60,6 +60,18 @@ export function SessionDetailScreen({ route }: HistoryStackProps<"SessionDetail"
     ]);
   };
 
+  useEffect(() => {
+    if (workout) {
+      navigation.setOptions({
+        headerRight: () => (
+          <Pressable onPress={handleDelete} hitSlop={8}>
+            <Text style={{ color: "#fff", fontSize: 18 }}>🗑</Text>
+          </Pressable>
+        ),
+      });
+    }
+  }, [workout]);
+
   if (!workout) {
     return (
       <View className="flex-1 bg-white items-center justify-center">
@@ -75,23 +87,38 @@ export function SessionDetailScreen({ route }: HistoryStackProps<"SessionDetail"
         )
       : null;
 
+  const totalLengths =
+    workout.totalDistance && workout.poolLength
+      ? Math.round(workout.totalDistance / workout.poolLength)
+      : null;
+
+  const avgPace =
+    workout.totalDistance && workout.totalDuration
+      ? workout.totalDistance / workout.totalDuration
+      : null;
+
+  const setsWithPace = workout.sets.map((set) => {
+    const setLaps = workout.laps.filter((l) => l.setPosition === set.position);
+    const setDuration = setLaps.reduce((acc, l) => acc + l.duration, 0);
+    const setDistance = setLaps.reduce((acc, l) => acc + l.distance, 0);
+    const poolPace = setDistance > 0 ? setDuration / setDistance : null;
+    return { ...set, poolPace };
+  });
+
   return (
     <WorkoutSummary
       name={workout.name}
       date={new Date(workout.startedAt).toLocaleDateString()}
       totalDistance={workout.totalDistance ?? 0}
       totalDuration={workout.totalDuration ?? 0}
+      totalLengths={totalLengths}
       calories={workout.calories}
       avgHeartRate={workout.avgHeartRate}
+      avgPace={avgPace}
       poolLength={workout.poolLength}
-      sets={workout.sets}
+      sets={setsWithPace}
       laps={workout.laps}
       avgSwolf={avgSwolf}
-      rightAction={
-        <Pressable onPress={handleDelete} className="bg-red-50 rounded-xl p-2.5">
-          <Text className="text-red-500 text-lg">🗑</Text>
-        </Pressable>
-      }
     />
   );
 }