refactor: extract player components, add stack headers, add tests
- Extract player UI into src/features/player/ components (TimerRing, BurnBar, etc.) - Add transparent stack headers for workout/[id] and program/[id] screens - Refactor workout/[id], program/[id], complete/[id] screens - Add player feature tests and useTimer integration tests - Add data layer exports and test setup improvements
This commit is contained in:
Millian Lamiaux
@@ -1,35 +1,40 @@
|
||||
/**
|
||||
* TabataFit Program Detail Screen
|
||||
* Shows week progression and workout list
|
||||
* Clean scrollable layout — native header, Apple Fitness+ style
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import React, { useEffect, useRef } from 'react'
|
||||
import {
|
||||
View,
|
||||
Text as RNText,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
Pressable,
|
||||
Animated,
|
||||
} from 'react-native'
|
||||
import { Stack, useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useProgramStore } from '@/src/shared/stores'
|
||||
import { PROGRAMS } from '@/src/shared/data/programs'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
import { track } from '@/src/shared/services/analytics'
|
||||
|
||||
import { useThemeColors, BRAND } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { SPRING } from '@/src/shared/constants/animations'
|
||||
import type { ProgramId } from '@/src/shared/types'
|
||||
import type { IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 28,
|
||||
TITLE: 24,
|
||||
TITLE_2: 20,
|
||||
HEADLINE: 17,
|
||||
BODY: 16,
|
||||
CAPTION: 13,
|
||||
SMALL: 12,
|
||||
// Per-program accent colors (matches home screen cards)
|
||||
const PROGRAM_ACCENT: Record<ProgramId, { color: string; icon: IconName }> = {
|
||||
'upper-body': { color: '#FF6B35', icon: 'dumbbell' },
|
||||
'lower-body': { color: '#30D158', icon: 'figure.walk' },
|
||||
'full-body': { color: '#5AC8FA', icon: 'flame' },
|
||||
}
|
||||
|
||||
export default function ProgramDetailScreen() {
|
||||
@@ -40,25 +45,53 @@ export default function ProgramDetailScreen() {
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
|
||||
const isDark = colors.colorScheme === 'dark'
|
||||
|
||||
const program = PROGRAMS[programId]
|
||||
const accent = PROGRAM_ACCENT[programId] ?? PROGRAM_ACCENT['full-body']
|
||||
const selectProgram = useProgramStore((s) => s.selectProgram)
|
||||
const progress = useProgramStore((s) => s.programsProgress[programId])
|
||||
const isWeekUnlocked = useProgramStore((s) => s.isWeekUnlocked)
|
||||
const getCurrentWorkout = useProgramStore((s) => s.getCurrentWorkout)
|
||||
const completion = useProgramStore((s) => s.getProgramCompletion(programId))
|
||||
|
||||
// CTA entrance animation
|
||||
const ctaAnim = useRef(new Animated.Value(0)).current
|
||||
useEffect(() => {
|
||||
Animated.sequence([
|
||||
Animated.delay(300),
|
||||
Animated.spring(ctaAnim, {
|
||||
toValue: 1,
|
||||
...SPRING.GENTLE,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
]).start()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (program) {
|
||||
track('program_detail_viewed', {
|
||||
program_id: programId,
|
||||
program_title: program.title,
|
||||
})
|
||||
}
|
||||
}, [programId])
|
||||
|
||||
if (!program) {
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<StyledText color={colors.text.primary}>Program not found</StyledText>
|
||||
</View>
|
||||
<>
|
||||
<Stack.Screen options={{ headerTitle: '' }} />
|
||||
<View style={[s.container, s.centered, { backgroundColor: colors.bg.base }]}>
|
||||
<RNText style={[TYPOGRAPHY.BODY, { color: colors.text.primary }]}>
|
||||
{t('programs.notFound', { defaultValue: 'Program not found' })}
|
||||
</RNText>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const handleStartProgram = () => {
|
||||
haptics.buttonTap()
|
||||
haptics.phaseChange()
|
||||
selectProgram(programId)
|
||||
const currentWorkout = getCurrentWorkout(programId)
|
||||
if (currentWorkout) {
|
||||
@@ -66,460 +99,494 @@ export default function ProgramDetailScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleWorkoutPress = (workoutId: string, weekNumber: number) => {
|
||||
const handleWorkoutPress = (workoutId: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${workoutId}`)
|
||||
}
|
||||
|
||||
const hasStarted = progress.completedWorkoutIds.length > 0
|
||||
const ctaBg = isDark ? '#FFFFFF' : '#000000'
|
||||
const ctaTextColor = isDark ? '#000000' : '#FFFFFF'
|
||||
|
||||
const ctaLabel = hasStarted
|
||||
? progress.isProgramCompleted
|
||||
? t('programs.restartProgram')
|
||||
: t('programs.continueTraining')
|
||||
: t('programs.startProgram')
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<Pressable style={styles.backButton} onPress={() => router.back()}>
|
||||
<Icon name="arrow.left" size={24} color={colors.text.primary} />
|
||||
</Pressable>
|
||||
<StyledText size={FONTS.TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.title}
|
||||
</StyledText>
|
||||
<View style={styles.placeholder} />
|
||||
</View>
|
||||
<>
|
||||
<Stack.Screen options={{ headerTitle: '' }} />
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 120 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Program Overview */}
|
||||
<View style={styles.overviewSection}>
|
||||
<StyledText size={FONTS.BODY} color={colors.text.secondary} style={styles.description}>
|
||||
<View style={[s.container, { backgroundColor: colors.bg.base }]}>
|
||||
<ScrollView
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
contentContainerStyle={[
|
||||
s.scrollContent,
|
||||
{ paddingBottom: insets.bottom + 100 },
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Icon + Title */}
|
||||
<View style={s.titleRow}>
|
||||
<View style={[s.programIcon, { backgroundColor: accent.color + '18' }]}>
|
||||
<Icon name={accent.icon} size={22} tintColor={accent.color} />
|
||||
</View>
|
||||
<View style={s.titleContent}>
|
||||
<RNText selectable style={[s.title, { color: colors.text.primary }]}>
|
||||
{program.title}
|
||||
</RNText>
|
||||
<RNText style={[s.subtitle, { color: colors.text.tertiary }]}>
|
||||
{program.durationWeeks} {t('programs.weeks')} · {program.totalWorkouts} {t('programs.workouts')}
|
||||
</RNText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Description */}
|
||||
<RNText style={[s.description, { color: colors.text.secondary }]}>
|
||||
{program.description}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
|
||||
{/* Stats Row */}
|
||||
<View style={styles.statsRow}>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.durationWeeks}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.weeks')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
{program.totalWorkouts}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.workouts')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statBox}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
|
||||
4
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary}>
|
||||
{t('programs.minutes')}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Equipment */}
|
||||
<View style={styles.equipmentSection}>
|
||||
<StyledText size={FONTS.CAPTION} weight="semibold" color={colors.text.secondary}>
|
||||
{t('programs.equipment')}
|
||||
</StyledText>
|
||||
<View style={styles.equipmentList}>
|
||||
{program.equipment.required.map((item) => (
|
||||
<View key={item} style={styles.equipmentTag}>
|
||||
<StyledText size={12} color={colors.text.primary}>
|
||||
{item}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
{program.equipment.optional.map((item) => (
|
||||
<View key={item} style={[styles.equipmentTag, styles.optionalTag]}>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{item} {t('programs.optional')}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Focus Areas */}
|
||||
<View style={styles.focusSection}>
|
||||
<StyledText size={FONTS.CAPTION} weight="semibold" color={colors.text.secondary}>
|
||||
{t('programs.focusAreas')}
|
||||
</StyledText>
|
||||
<View style={styles.focusList}>
|
||||
{program.focusAreas.map((area) => (
|
||||
<View key={area} style={styles.focusTag}>
|
||||
<StyledText size={12} color={colors.text.primary}>
|
||||
{area}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Progress Overview */}
|
||||
{progress.completedWorkoutIds.length > 0 && (
|
||||
<View style={styles.progressSection}>
|
||||
<View style={styles.progressHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
|
||||
{t('programs.yourProgress')}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.BODY} weight="semibold" color={BRAND.PRIMARY}>
|
||||
{completion}%
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.progressBarContainer}>
|
||||
<View style={[styles.progressBar, { backgroundColor: colors.bg.surface }]}>
|
||||
<View
|
||||
style={[
|
||||
styles.progressFill,
|
||||
{
|
||||
width: `${completion}%`,
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{/* Stats Card */}
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface }]}>
|
||||
<View style={s.statsRow}>
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
{program.durationWeeks}
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.weeks')}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.statDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
{program.totalWorkouts}
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.workouts')}
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.statDivider, { backgroundColor: colors.border.glassLight }]} />
|
||||
<View style={s.statItem}>
|
||||
<RNText style={[s.statValue, { color: accent.color }]}>
|
||||
4
|
||||
</RNText>
|
||||
<RNText style={[s.statLabel, { color: colors.text.tertiary }]}>
|
||||
{t('programs.minutes')}
|
||||
</RNText>
|
||||
</View>
|
||||
</View>
|
||||
<StyledText size={FONTS.CAPTION} color={colors.text.tertiary}>
|
||||
{progress.completedWorkoutIds.length} {t('programs.of')} {program.totalWorkouts} {t('programs.workoutsComplete')}
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Weeks */}
|
||||
<View style={styles.weeksSection}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary} style={styles.weeksTitle}>
|
||||
{/* Equipment & Focus */}
|
||||
<View style={s.tagsSection}>
|
||||
{program.equipment.required.length > 0 && (
|
||||
<>
|
||||
<RNText style={[s.tagSectionLabel, { color: colors.text.secondary }]}>
|
||||
{t('programs.equipment')}
|
||||
</RNText>
|
||||
<View style={s.tagRow}>
|
||||
{program.equipment.required.map((item) => (
|
||||
<View key={item} style={[s.tag, { backgroundColor: colors.bg.surface }]}>
|
||||
<RNText style={[s.tagText, { color: colors.text.primary }]}>
|
||||
{item}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
{program.equipment.optional.map((item) => (
|
||||
<View key={item} style={[s.tag, { backgroundColor: colors.bg.surface, opacity: 0.7 }]}>
|
||||
<RNText style={[s.tagText, { color: colors.text.tertiary }]}>
|
||||
{item} {t('programs.optional')}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
|
||||
<RNText style={[s.tagSectionLabel, { color: colors.text.secondary, marginTop: SPACING[4] }]}>
|
||||
{t('programs.focusAreas')}
|
||||
</RNText>
|
||||
<View style={s.tagRow}>
|
||||
{program.focusAreas.map((area) => (
|
||||
<View key={area} style={[s.tag, { backgroundColor: accent.color + '15' }]}>
|
||||
<RNText style={[s.tagText, { color: accent.color }]}>
|
||||
{area}
|
||||
</RNText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Separator */}
|
||||
<View style={[s.separator, { backgroundColor: colors.border.glassLight }]} />
|
||||
|
||||
{/* Progress (if started) */}
|
||||
{hasStarted && (
|
||||
<View style={[s.card, { backgroundColor: colors.bg.surface, marginBottom: SPACING[5] }]}>
|
||||
<View style={s.progressHeader}>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: colors.text.primary }]}>
|
||||
{t('programs.yourProgress')}
|
||||
</RNText>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: accent.color, fontVariant: ['tabular-nums'] }]}>
|
||||
{completion}%
|
||||
</RNText>
|
||||
</View>
|
||||
<View style={[s.progressTrack, { backgroundColor: colors.border.glassLight }]}>
|
||||
<View
|
||||
style={[
|
||||
s.progressFill,
|
||||
{
|
||||
width: `${completion}%`,
|
||||
backgroundColor: accent.color,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
<RNText style={[TYPOGRAPHY.FOOTNOTE, { color: colors.text.tertiary, marginTop: SPACING[2] }]}>
|
||||
{progress.completedWorkoutIds.length} {t('programs.of')} {program.totalWorkouts} {t('programs.workoutsComplete')}
|
||||
</RNText>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Training Plan */}
|
||||
<RNText style={[s.sectionTitle, { color: colors.text.primary }]}>
|
||||
{t('programs.trainingPlan')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
|
||||
{program.weeks.map((week) => {
|
||||
const isUnlocked = isWeekUnlocked(programId, week.weekNumber)
|
||||
const isCurrentWeek = progress.currentWeek === week.weekNumber
|
||||
const weekCompletion = week.workouts.filter(w =>
|
||||
const weekCompletion = week.workouts.filter((w) =>
|
||||
progress.completedWorkoutIds.includes(w.id)
|
||||
).length
|
||||
|
||||
return (
|
||||
<View key={week.weekNumber} style={styles.weekCard}>
|
||||
<View
|
||||
key={week.weekNumber}
|
||||
style={[s.card, { backgroundColor: colors.bg.surface, marginBottom: SPACING[3] }]}
|
||||
>
|
||||
{/* Week Header */}
|
||||
<View style={styles.weekHeader}>
|
||||
<View style={styles.weekTitleRow}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>
|
||||
<View style={s.weekHeader}>
|
||||
<View style={s.weekTitleRow}>
|
||||
<RNText style={[TYPOGRAPHY.HEADLINE, { color: colors.text.primary, flex: 1 }]}>
|
||||
{week.title}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
{!isUnlocked && (
|
||||
<Icon name="lock.fill" size={16} color={colors.text.tertiary} />
|
||||
<Icon name="lock.fill" size={16} color={colors.text.hint} />
|
||||
)}
|
||||
{isCurrentWeek && isUnlocked && (
|
||||
<View style={styles.currentBadge}>
|
||||
<StyledText size={11} weight="semibold" color="#FFFFFF">
|
||||
<View style={[s.currentBadge, { backgroundColor: accent.color }]}>
|
||||
<RNText style={[s.currentBadgeText, { color: '#FFFFFF' }]}>
|
||||
{t('programs.current')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<StyledText size={FONTS.CAPTION} color={colors.text.secondary}>
|
||||
<RNText style={[TYPOGRAPHY.FOOTNOTE, { color: colors.text.secondary, marginTop: 2 }]}>
|
||||
{week.description}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
{weekCompletion > 0 && (
|
||||
<StyledText size={FONTS.SMALL} color={colors.text.tertiary} style={styles.weekProgress}>
|
||||
<RNText style={[TYPOGRAPHY.CAPTION_1, { color: colors.text.hint, marginTop: SPACING[2] }]}>
|
||||
{weekCompletion}/{week.workouts.length} {t('programs.complete')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Week Workouts */}
|
||||
{isUnlocked && (
|
||||
<View style={styles.workoutsList}>
|
||||
{week.workouts.map((workout, index) => {
|
||||
const isCompleted = progress.completedWorkoutIds.includes(workout.id)
|
||||
const isLocked = !isCompleted && index > 0 &&
|
||||
!progress.completedWorkoutIds.includes(week.workouts[index - 1].id) &&
|
||||
week.weekNumber === progress.currentWeek
|
||||
{isUnlocked &&
|
||||
week.workouts.map((workout, index) => {
|
||||
const isCompleted = progress.completedWorkoutIds.includes(workout.id)
|
||||
const isWorkoutLocked =
|
||||
!isCompleted &&
|
||||
index > 0 &&
|
||||
!progress.completedWorkoutIds.includes(week.workouts[index - 1].id) &&
|
||||
week.weekNumber === progress.currentWeek
|
||||
|
||||
return (
|
||||
return (
|
||||
<View key={workout.id}>
|
||||
<View style={[s.workoutSep, { backgroundColor: colors.border.glassLight }]} />
|
||||
<Pressable
|
||||
key={workout.id}
|
||||
style={[
|
||||
styles.workoutItem,
|
||||
isCompleted && styles.workoutCompleted,
|
||||
isLocked && styles.workoutLocked,
|
||||
style={({ pressed }) => [
|
||||
s.workoutRow,
|
||||
isWorkoutLocked && { opacity: 0.4 },
|
||||
pressed && !isWorkoutLocked && { opacity: 0.6 },
|
||||
]}
|
||||
onPress={() => !isLocked && handleWorkoutPress(workout.id, week.weekNumber)}
|
||||
disabled={isLocked}
|
||||
onPress={() => !isWorkoutLocked && handleWorkoutPress(workout.id)}
|
||||
disabled={isWorkoutLocked}
|
||||
>
|
||||
<View style={styles.workoutNumber}>
|
||||
<View style={s.workoutIcon}>
|
||||
{isCompleted ? (
|
||||
<Icon name="checkmark.circle.fill" size={24} color={BRAND.SUCCESS} />
|
||||
) : isLocked ? (
|
||||
<Icon name="lock.fill" size={20} color={colors.text.tertiary} />
|
||||
<Icon name="checkmark.circle.fill" size={22} color={BRAND.SUCCESS} />
|
||||
) : isWorkoutLocked ? (
|
||||
<Icon name="lock.fill" size={18} color={colors.text.hint} />
|
||||
) : (
|
||||
<StyledText size={14} weight="semibold" color={colors.text.primary}>
|
||||
<RNText style={[s.workoutIndex, { color: colors.text.tertiary }]}>
|
||||
{index + 1}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.workoutInfo}>
|
||||
<StyledText
|
||||
size={14}
|
||||
weight={isCompleted ? "medium" : "semibold"}
|
||||
color={isLocked ? colors.text.tertiary : colors.text.primary}
|
||||
style={isCompleted && styles.completedText}
|
||||
<View style={s.workoutInfo}>
|
||||
<RNText
|
||||
style={[
|
||||
TYPOGRAPHY.BODY,
|
||||
{ color: isWorkoutLocked ? colors.text.hint : colors.text.primary },
|
||||
isCompleted && { textDecorationLine: 'line-through' },
|
||||
]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{workout.title}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary}>
|
||||
{workout.exercises.length} {t('programs.exercises')} • {workout.duration} {t('programs.min')}
|
||||
</StyledText>
|
||||
</RNText>
|
||||
<RNText style={[TYPOGRAPHY.CAPTION_1, { color: colors.text.tertiary }]}>
|
||||
{workout.exercises.length} {t('programs.exercises')} · {workout.duration} {t('programs.min')}
|
||||
</RNText>
|
||||
</View>
|
||||
{!isLocked && !isCompleted && (
|
||||
<Icon name="chevron.right" size={20} color={colors.text.tertiary} />
|
||||
{!isWorkoutLocked && !isCompleted && (
|
||||
<Icon name="chevron.right" size={16} color={colors.text.hint} />
|
||||
)}
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</ScrollView>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
|
||||
<Pressable style={styles.ctaButton} onPress={handleStartProgram}>
|
||||
<LinearGradient
|
||||
colors={['#FF6B35', '#FF3B30']}
|
||||
style={styles.ctaGradient}
|
||||
{/* CTA */}
|
||||
<Animated.View
|
||||
style={[
|
||||
s.bottomBar,
|
||||
{
|
||||
backgroundColor: colors.bg.base,
|
||||
paddingBottom: insets.bottom + SPACING[3],
|
||||
opacity: ctaAnim,
|
||||
transform: [
|
||||
{
|
||||
translateY: ctaAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [30, 0],
|
||||
}),
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Pressable
|
||||
style={({ pressed }) => [
|
||||
s.ctaButton,
|
||||
{ backgroundColor: ctaBg },
|
||||
pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
|
||||
]}
|
||||
onPress={handleStartProgram}
|
||||
>
|
||||
<StyledText size={16} weight="bold" color="#FFFFFF">
|
||||
{progress.completedWorkoutIds.length === 0
|
||||
? t('programs.startProgram')
|
||||
: progress.isProgramCompleted
|
||||
? t('programs.restartProgram')
|
||||
: t('programs.continueTraining')
|
||||
}
|
||||
</StyledText>
|
||||
<Icon name="arrow.right" size={20} color="#FFFFFF" style={styles.ctaIcon} />
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
<RNText style={[s.ctaText, { color: ctaTextColor }]}>
|
||||
{ctaLabel}
|
||||
</RNText>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
// ─── Styles ──────────────────────────────────────────────────────────────────
|
||||
|
||||
// Header
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingVertical: SPACING[3],
|
||||
},
|
||||
backButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
placeholder: {
|
||||
width: 40,
|
||||
},
|
||||
const s = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
centered: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Overview
|
||||
overviewSection: {
|
||||
marginTop: SPACING[2],
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
description: {
|
||||
marginBottom: SPACING[5],
|
||||
lineHeight: 24,
|
||||
},
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
marginBottom: SPACING[5],
|
||||
paddingVertical: SPACING[4],
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
},
|
||||
statBox: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
// Title
|
||||
titleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
programIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.MD,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
titleContent: {
|
||||
flex: 1,
|
||||
},
|
||||
title: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
},
|
||||
subtitle: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
marginTop: 2,
|
||||
},
|
||||
|
||||
// Equipment
|
||||
equipmentSection: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
equipmentList: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
equipmentTag: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
optionalTag: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
// Description
|
||||
description: {
|
||||
...TYPOGRAPHY.BODY,
|
||||
lineHeight: 24,
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
|
||||
// Focus
|
||||
focusSection: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
focusList: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
focusTag: {
|
||||
backgroundColor: `${BRAND.PRIMARY}15`,
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
// Card
|
||||
card: {
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
overflow: 'hidden',
|
||||
padding: SPACING[4],
|
||||
},
|
||||
|
||||
// Progress
|
||||
progressSection: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
padding: SPACING[4],
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
progressHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
progressBarContainer: {
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
progressBar: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 4,
|
||||
},
|
||||
// Stats
|
||||
statsRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
statItem: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
},
|
||||
statValue: {
|
||||
...TYPOGRAPHY.TITLE_1,
|
||||
fontVariant: ['tabular-nums'],
|
||||
},
|
||||
statLabel: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
textTransform: 'uppercase' as const,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
statDivider: {
|
||||
width: StyleSheet.hairlineWidth,
|
||||
height: 32,
|
||||
},
|
||||
|
||||
// Weeks
|
||||
weeksSection: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
weeksTitle: {
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
weekCard: {
|
||||
backgroundColor: colors.bg.surface,
|
||||
borderRadius: RADIUS.LG,
|
||||
marginBottom: SPACING[4],
|
||||
overflow: 'hidden',
|
||||
},
|
||||
weekHeader: {
|
||||
padding: SPACING[4],
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: colors.border.glass,
|
||||
},
|
||||
weekTitleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
currentBadge: {
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: 2,
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
weekProgress: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
// Tags
|
||||
tagsSection: {
|
||||
marginTop: SPACING[5],
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
tagSectionLabel: {
|
||||
...TYPOGRAPHY.FOOTNOTE,
|
||||
fontWeight: '600',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
tagRow: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: SPACING[2],
|
||||
},
|
||||
tag: {
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.FULL,
|
||||
},
|
||||
tagText: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
},
|
||||
|
||||
// Workouts List
|
||||
workoutsList: {
|
||||
padding: SPACING[2],
|
||||
},
|
||||
workoutItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[3],
|
||||
borderRadius: RADIUS.MD,
|
||||
},
|
||||
workoutCompleted: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
workoutLocked: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
workoutNumber: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: SPACING[3],
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
completedText: {
|
||||
textDecorationLine: 'line-through',
|
||||
},
|
||||
// Separator
|
||||
separator: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
|
||||
// Bottom Bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: colors.bg.base,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[3],
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border.glass,
|
||||
},
|
||||
ctaButton: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
ctaGradient: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: SPACING[4],
|
||||
},
|
||||
ctaIcon: {
|
||||
marginLeft: SPACING[2],
|
||||
},
|
||||
})
|
||||
}
|
||||
// Progress
|
||||
progressHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
progressTrack: {
|
||||
height: 6,
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 3,
|
||||
},
|
||||
|
||||
// Section title
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.TITLE_2,
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
|
||||
// Week header
|
||||
weekHeader: {
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
weekTitleRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[2],
|
||||
},
|
||||
currentBadge: {
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: 2,
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
currentBadgeText: {
|
||||
...TYPOGRAPHY.CAPTION_2,
|
||||
fontWeight: '600',
|
||||
},
|
||||
|
||||
// Workout row
|
||||
workoutSep: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
marginLeft: SPACING[4] + 28,
|
||||
},
|
||||
workoutRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
gap: SPACING[3],
|
||||
},
|
||||
workoutIcon: {
|
||||
width: 28,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
workoutIndex: {
|
||||
...TYPOGRAPHY.SUBHEADLINE,
|
||||
fontVariant: ['tabular-nums'],
|
||||
fontWeight: '600',
|
||||
},
|
||||
workoutInfo: {
|
||||
flex: 1,
|
||||
gap: 2,
|
||||
},
|
||||
|
||||
// Bottom bar
|
||||
bottomBar: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
paddingTop: SPACING[3],
|
||||
},
|
||||
ctaButton: {
|
||||
height: 54,
|
||||
borderRadius: RADIUS.MD,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'row',
|
||||
},
|
||||
ctaText: {
|
||||
...TYPOGRAPHY.BUTTON_LARGE,
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user