refactor(components): simplify SwipeableRow gesture handling and add vertical scroll conflict prevention

src/components/SwipeableRow.tsx

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 import { View, Text, Pressable, Animated, StyleSheet } from "react-native";
-import { PanGestureHandler, State } from "react-native-gesture-handler";
+import { PanGestureHandler, State, PanGestureHandlerGestureEvent } from "react-native-gesture-handler";
 
 type SwipeableRowProps = {
   children: React.ReactNode;
@@ -8,36 +8,33 @@ type SwipeableRowProps = {
   deleteLabel?: string;
 };
 
+const MAX_LEFT = -80;
+
 export function SwipeableRow({ children, onDelete, deleteLabel = "Delete" }: SwipeableRowProps) {
   const translateX = useRef(new Animated.Value(0)).current;
-  const lastOffset = useRef(0);
+  const offset = useRef(0);
 
-  const onGestureEvent = Animated.event([{ nativeEvent: { translationX: translateX } }], {
-    useNativeDriver: true,
-  });
+  const onGestureEvent = (event: PanGestureHandlerGestureEvent) => {
+    const raw = event.nativeEvent.translationX;
+    const clamped = Math.max(MAX_LEFT, Math.min(0, offset.current + raw));
+    translateX.setValue(clamped);
+  };
 
-  const onHandlerStateChange = (event: any) => {
+  const onHandlerStateChange = (event: PanGestureHandlerGestureEvent) => {
     if (event.oldState === State.ACTIVE) {
       const { translationX } = event.nativeEvent;
-      const newOffset = lastOffset.current + translationX;
+      const final = Math.max(MAX_LEFT, Math.min(0, offset.current + translationX));
 
-      if (newOffset < -80) {
-        Animated.spring(translateX, {
-          toValue: -80,
-          useNativeDriver: true,
-        }).start();
-        lastOffset.current = -80;
-      } else {
-        Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: true,
-        }).start();
-        lastOffset.current = 0;
-      }
+      Animated.spring(translateX, {
+        toValue: final,
+        useNativeDriver: true,
+      }).start();
+      offset.current = final;
     }
   };
 
   const handleDelete = () => {
+    offset.current = -400;
     Animated.timing(translateX, {
       toValue: -400,
       duration: 200,
@@ -57,6 +54,7 @@ export function SwipeableRow({ children, onDelete, deleteLabel = "Delete" }: Swi
       <PanGestureHandler
         onGestureEvent={onGestureEvent}
         onHandlerStateChange={onHandlerStateChange}
+        failOffsetY={[-5, 5]}
       >
         <Animated.View style={[styles.foreground, { transform: [{ translateX }] }]}>
           {children}

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>
-      }
     />
   );
 }

src/i18n/de/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Durchschn. Herzfrequenz",
   "calories": "Kalorien",
   "pace": "Tempo",
+  "lengths": "Bahnen",
+  "avgPace": "Ø Tempo",
   "setRep": "Set {{set}} · Wiederholung {{rep}}",
   "watchStatus": {
     "ready": "Watch bereit",

src/i18n/dk/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Gns. puls",
   "calories": "Kalorier",
   "pace": "Tempo",
+  "lengths": "Baner",
+  "avgPace": "Snit-tempo",
   "setRep": "Sæt {{set}} · Gentagelse {{rep}}",
   "watchStatus": {
     "ready": "Watch klar",

src/i18n/en/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Avg Heart Rate",
   "calories": "Calories",
   "pace": "Pace",
+  "lengths": "Lengths",
+  "avgPace": "Avg pace",
   "setRep": "Set {{set}} · Rep {{rep}}",
   "watchStatus": {
     "ready": "Watch ready",

src/i18n/es/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Freq. card. media",
   "calories": "Calorías",
   "pace": "Ritmo",
+  "lengths": "Tiradas",
+  "avgPace": "Ritmo medio",
   "setRep": "Serie {{set}} · Repetición {{rep}}",
   "watchStatus": {
     "ready": "Watch lista",

src/i18n/fr/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Fréq. cardiaque moy.",
   "calories": "Calories",
   "pace": "Rythme",
+  "lengths": "Longueurs",
+  "avgPace": "Rythme moy.",
   "setRep": "Série {{set}} · Répétition {{rep}}",
   "watchStatus": {
     "ready": "Watch prête",

src/i18n/it/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Freq. card. media",
   "calories": "Calorie",
   "pace": "Ritmo",
+  "lengths": "Vasche",
+  "avgPace": "Passo medio",
   "setRep": "Serie {{set}} · Ripetizione {{rep}}",
   "watchStatus": {
     "ready": "Watch pronta",

src/i18n/nl/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Gem. hartslag",
   "calories": "Calorieën",
   "pace": "Tempo",
+  "lengths": "Banen",
+  "avgPace": "Gem. tempo",
   "setRep": "Set {{set}} · Herhaling {{rep}}",
   "watchStatus": {
     "ready": "Watch gereed",

src/i18n/pl/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Śr. tętno",
   "calories": "Kalorie",
   "pace": "Tempo",
+  "lengths": "Długości",
+  "avgPace": "Śr. tempo",
   "setRep": "Serie {{set}} · Powtórzenie {{rep}}",
   "watchStatus": {
     "ready": "Watch gotowa",

src/i18n/pt/active-workout.json

@@ -17,6 +17,8 @@
   "avgHeartRate": "Freq. card. média",
   "calories": "Calorias",
   "pace": "Ritmo",
+  "lengths": "Comprimentos",
+  "avgPace": "Ritmo médio",
   "setRep": "Série {{set}} · Repetição {{rep}}",
   "watchStatus": {
     "ready": "Watch pronta",