791f432334
- Phase 0: Rename all Kine references to Tabata (types, files, imports, i18n, analytics events) - Phase 1: Add test coverage for tabataProgramStore, workoutProgramStore, and color utils (47 tests) - Phase 2: Remove all `any` types from production code with proper typed replacements - Phase 3: Replace ~60 raw console.* calls with __DEV__-gated logger utility - Phase 4: Verify .DS_Store housekeeping (already clean) 0 TypeScript errors, 583/583 tests passing.
463 lines
16 KiB
TypeScript
463 lines
16 KiB
TypeScript
/**
|
|
* TabataFit Home Screen — Body Zone Workout Programs
|
|
* Programs organized by Upper Body, Lower Body, Full Body
|
|
* Dark Medical design system — navy backgrounds, green actions, no glass
|
|
*/
|
|
|
|
import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
|
|
import { useRouter } from 'expo-router'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
|
|
|
import { useMemo, useState, useEffect, useCallback } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useHaptics } from '@/src/shared/hooks'
|
|
import { useUserStore, useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
|
import { useWorkoutProgramStore } from '@/src/shared/stores'
|
|
import { StyledText } from '@/src/shared/components/StyledText'
|
|
import { Mascot } from '@/src/shared/components/Mascot'
|
|
|
|
import { useThemeColors } from '@/src/shared/theme'
|
|
import { BRAND, GREEN, TEXT, NAVY, BORDER_COLORS } from '@/src/shared/constants/colors'
|
|
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
import { fetchAllPrograms, buildWorkoutProgramId } from '@/src/shared/data/workoutPrograms'
|
|
import type { WorkoutProgram, BodyZone } from '@/src/shared/types/workoutProgram'
|
|
import { BODY_ZONE_META } from '@/src/shared/types/workoutProgram'
|
|
|
|
// Feature flags — disable incomplete features
|
|
const FEATURE_FLAGS = {
|
|
ASSESSMENT_ENABLED: false, // Assessment player not yet implemented
|
|
}
|
|
|
|
/** Body zone order for display */
|
|
const BODY_ZONE_ORDER: BodyZone[] = ['upper-body', 'lower-body', 'full-body']
|
|
|
|
const AnimatedPressable = Pressable
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// BODY ZONE CARD (clickable, navigates to detail)
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function BodyZoneCard({
|
|
bodyZone,
|
|
programCount,
|
|
}: {
|
|
bodyZone: BodyZone
|
|
programCount: number
|
|
}) {
|
|
const router = useRouter()
|
|
const haptics = useHaptics()
|
|
const colors = useThemeColors()
|
|
const meta = BODY_ZONE_META[bodyZone]
|
|
|
|
const handlePress = () => {
|
|
haptics.buttonTap()
|
|
router.push(`/workout/body-zone/${bodyZone}` as any)
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.bodyZoneCard,
|
|
{
|
|
backgroundColor: colors.surface.default.backgroundColor,
|
|
borderColor: colors.border.dim,
|
|
opacity: pressed ? 0.85 : 1,
|
|
},
|
|
]}
|
|
testID={`zone-card-${bodyZone}`}
|
|
>
|
|
<View style={styles.bodyZoneCardInner}>
|
|
<View style={[styles.bodyZoneCardIcon, { borderColor: meta.color }]}>
|
|
<Icon name={meta.icon as IconName} size={20} tintColor={meta.color} />
|
|
</View>
|
|
<View style={styles.bodyZoneCardInfo}>
|
|
<StyledText preset="TITLE_3" color={colors.text.primary}>
|
|
{meta.label}
|
|
</StyledText>
|
|
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
|
{programCount} programme{programCount !== 1 ? 's' : ''}
|
|
</StyledText>
|
|
</View>
|
|
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// CONTINUE SESSION CARD — adapted for workout programs
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function ContinueSessionCard({ programs }: { programs: WorkoutProgram[] }) {
|
|
const { t } = useTranslation('screens')
|
|
const router = useRouter()
|
|
const haptics = useHaptics()
|
|
const colors = useThemeColors()
|
|
|
|
const recommended = useWorkoutProgramStore(
|
|
useCallback((s) => s.getRecommendedNext(programs), [programs])
|
|
)
|
|
|
|
if (!recommended) return null
|
|
|
|
const zoneMeta = BODY_ZONE_META[recommended.bodyZone]
|
|
const accentColor = recommended.accentColor ?? zoneMeta.color
|
|
|
|
const handlePress = () => {
|
|
haptics.buttonTap()
|
|
router.push(`/workout/${buildWorkoutProgramId(recommended.id)}` as any)
|
|
}
|
|
|
|
return (
|
|
<Pressable style={[styles.continueCard, { borderColor: colors.border.dim }]} onPress={handlePress} testID="continue-session-card">
|
|
<View style={[styles.continueAccentLine, { backgroundColor: accentColor }]} />
|
|
<View style={styles.continueContent}>
|
|
<View style={styles.continueHeader}>
|
|
<Icon name="play.circle" size={20} tintColor={accentColor} />
|
|
<StyledText preset="CALLOUT" weight="semibold" color={colors.text.primary} style={{ flex: 1, marginLeft: SPACING[2] }}>
|
|
{t('home.recommendedNext')}
|
|
</StyledText>
|
|
</View>
|
|
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
|
{recommended.title}
|
|
</StyledText>
|
|
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
|
{zoneMeta.label} · {recommended.estimatedDuration} min · ~{recommended.estimatedCalories} kcal
|
|
</StyledText>
|
|
</View>
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// QUICK STATS ROW
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function QuickStats() {
|
|
const { t } = useTranslation('screens')
|
|
const colors = useThemeColors()
|
|
const streak = useActivityStore((s) => s.streak)
|
|
const history = useActivityStore((s) => s.history)
|
|
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
|
const thisWeekCount = weeklyActivity.filter((d) => d.completed).length
|
|
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
|
|
|
const stats = [
|
|
{ icon: 'flame.fill' as const, value: streak.current, label: t('home.statsStreak'), color: GREEN['500'] },
|
|
{ icon: 'calendar' as const, value: `${thisWeekCount}/7`, label: t('home.statsThisWeek'), color: BRAND.INFO },
|
|
{ icon: 'clock' as const, value: totalMinutes, label: t('home.statsMinutes'), color: GREEN['500'] },
|
|
]
|
|
|
|
return (
|
|
<View style={styles.quickStatsRow}>
|
|
{stats.map((stat) => (
|
|
<View key={stat.label} style={styles.quickStatPill}>
|
|
<Icon name={stat.icon} size={16} tintColor={stat.color} />
|
|
<StyledText size={17} weight="bold" color={colors.text.primary} style={{ fontVariant: ['tabular-nums'] }}>
|
|
{String(stat.value)}
|
|
</StyledText>
|
|
<StyledText size={11} color={colors.text.tertiary}>
|
|
{stat.label}
|
|
</StyledText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// KINE LINK CARD (bottom link to physio programs)
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function TabataLinkCard() {
|
|
const { t } = useTranslation('screens')
|
|
const router = useRouter()
|
|
const haptics = useHaptics()
|
|
const colors = useThemeColors()
|
|
|
|
const handlePress = () => {
|
|
haptics.buttonTap()
|
|
router.push('/program/debutant' as any)
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={handlePress}
|
|
style={({ pressed }) => [
|
|
styles.tabataLinkCard,
|
|
{
|
|
backgroundColor: colors.surface.default.backgroundColor,
|
|
borderColor: colors.border.dim,
|
|
opacity: pressed ? 0.85 : 1,
|
|
},
|
|
]}
|
|
>
|
|
<View style={styles.tabataLinkLeft}>
|
|
<View style={[styles.tabataLinkIcon, { backgroundColor: GREEN.DIM }]}>
|
|
<Icon name="heart.text.square" size={22} tintColor={GREEN['500']} />
|
|
</View>
|
|
<View style={styles.tabataLinkText}>
|
|
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
|
{t('home.tabataPrograms')}
|
|
</StyledText>
|
|
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
|
{t('home.tabataProgramsSubtitle')}
|
|
</StyledText>
|
|
</View>
|
|
</View>
|
|
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// MAIN SCREEN
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
export default function HomeScreen() {
|
|
const { t } = useTranslation('screens')
|
|
const insets = useSafeAreaInsets()
|
|
const router = useRouter()
|
|
const colors = useThemeColors()
|
|
const userName = useUserStore((s) => s.profile.name)
|
|
const streak = useActivityStore((s) => s.streak)
|
|
// Fetch workout programs
|
|
const [programs, setPrograms] = useState<WorkoutProgram[]>([])
|
|
|
|
useEffect(() => {
|
|
fetchAllPrograms().then(setPrograms)
|
|
}, [])
|
|
|
|
// Group programs by body zone
|
|
const programsByZone = useMemo(() => {
|
|
const grouped: Record<BodyZone, WorkoutProgram[]> = {
|
|
'upper-body': [],
|
|
'lower-body': [],
|
|
'full-body': [],
|
|
}
|
|
for (const program of programs) {
|
|
if (grouped[program.bodyZone]) {
|
|
grouped[program.bodyZone].push(program)
|
|
}
|
|
}
|
|
return grouped
|
|
}, [programs])
|
|
|
|
const greeting = (() => {
|
|
const hour = new Date().getHours()
|
|
if (hour < 12) return t('common:greetings.morning')
|
|
if (hour < 18) return t('common:greetings.afternoon')
|
|
return t('common:greetings.evening')
|
|
})()
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Hero Section */}
|
|
<View style={styles.heroSection}>
|
|
<View style={styles.heroRow}>
|
|
<View style={styles.heroTextContent}>
|
|
<View style={styles.heroGreetingRow}>
|
|
<StyledText preset="CALLOUT" color={colors.text.tertiary}>
|
|
{greeting}
|
|
</StyledText>
|
|
{/* Inline streak badge */}
|
|
{streak.current > 0 && (
|
|
<View style={styles.streakBadge}>
|
|
<Icon name="flame.fill" size={13} tintColor={GREEN['500']} />
|
|
<StyledText size={12} weight="bold" color={GREEN['500']} style={{ fontVariant: ['tabular-nums'] }}>
|
|
{streak.current}
|
|
</StyledText>
|
|
</View>
|
|
)}
|
|
</View>
|
|
<StyledText preset="LARGE_TITLE" color={colors.text.primary} style={styles.heroName}>
|
|
{userName}
|
|
</StyledText>
|
|
<StyledText preset="FOOTNOTE" color={colors.text.secondary} style={styles.heroSubtitle}>
|
|
{t('home.programsByZone')}
|
|
</StyledText>
|
|
</View>
|
|
<Mascot size={90} style={{ marginLeft: SPACING[3], marginTop: -15 }} />
|
|
</View>
|
|
</View>
|
|
|
|
{/* Quick Stats Row */}
|
|
<QuickStats />
|
|
|
|
{/* Continue Session (if in progress) */}
|
|
<ContinueSessionCard programs={programs} />
|
|
|
|
{/* Body Zone Cards */}
|
|
{BODY_ZONE_ORDER.map((zone) => (
|
|
<BodyZoneCard
|
|
key={zone}
|
|
bodyZone={zone}
|
|
programCount={programsByZone[zone].length}
|
|
/>
|
|
))}
|
|
|
|
{/* Tabata Programs Link */}
|
|
<TabataLinkCard />
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STYLES
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: NAVY[900],
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
|
},
|
|
|
|
// Hero Section
|
|
heroSection: {
|
|
marginTop: SPACING[4],
|
|
marginBottom: SPACING[7],
|
|
},
|
|
heroRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'space-between',
|
|
},
|
|
heroTextContent: {
|
|
flex: 1,
|
|
},
|
|
heroGreetingRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
streakBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: SPACING[1],
|
|
paddingHorizontal: SPACING[3],
|
|
paddingVertical: SPACING[1],
|
|
borderRadius: RADIUS.PILL,
|
|
backgroundColor: GREEN.DIM,
|
|
borderWidth: 1,
|
|
borderColor: GREEN.BORDER,
|
|
borderCurve: 'continuous',
|
|
},
|
|
heroName: {
|
|
marginTop: SPACING[1],
|
|
},
|
|
heroSubtitle: {
|
|
marginTop: SPACING[2],
|
|
},
|
|
|
|
// Quick Stats Row
|
|
quickStatsRow: {
|
|
flexDirection: 'row',
|
|
gap: SPACING[3],
|
|
marginBottom: SPACING[7],
|
|
},
|
|
quickStatPill: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
paddingVertical: SPACING[4],
|
|
borderRadius: RADIUS.LG,
|
|
borderWidth: 1,
|
|
borderColor: BORDER_COLORS.DIM,
|
|
borderCurve: 'continuous',
|
|
gap: SPACING[1],
|
|
backgroundColor: NAVY[800],
|
|
},
|
|
|
|
// Continue Session Card
|
|
continueCard: {
|
|
borderRadius: RADIUS.XL,
|
|
marginBottom: SPACING[7],
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderCurve: 'continuous',
|
|
backgroundColor: NAVY[800],
|
|
},
|
|
continueAccentLine: {
|
|
height: 3,
|
|
width: '100%',
|
|
},
|
|
continueContent: {
|
|
padding: SPACING[5],
|
|
},
|
|
continueHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: SPACING[3],
|
|
},
|
|
|
|
// Body Zone Card
|
|
bodyZoneCard: {
|
|
borderRadius: RADIUS.XL,
|
|
borderWidth: 1,
|
|
borderCurve: 'continuous',
|
|
marginBottom: SPACING[3],
|
|
},
|
|
bodyZoneCardInner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: SPACING[4],
|
|
gap: SPACING[3],
|
|
},
|
|
bodyZoneCardIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: RADIUS.FULL,
|
|
borderWidth: 1.5,
|
|
borderCurve: 'continuous',
|
|
backgroundColor: NAVY[800],
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
bodyZoneCardInfo: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Tabata Link Card
|
|
tabataLinkCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: SPACING[4],
|
|
borderRadius: RADIUS.XL,
|
|
borderWidth: 1,
|
|
borderCurve: 'continuous',
|
|
marginBottom: SPACING[6],
|
|
},
|
|
tabataLinkLeft: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
gap: SPACING[3],
|
|
},
|
|
tabataLinkIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: RADIUS.LG,
|
|
borderCurve: 'continuous',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
tabataLinkText: {
|
|
flex: 1,
|
|
},
|
|
})
|