feat: 5 tab screens wired to centralized data layer
All tabs use shared data, stores, and SwiftUI islands: - Home: greeting from userStore, featured/popular workouts, recent activity from activityStore, tappable collections - Workouts: 50 workouts with SwiftUI Picker category filter, trainer avatars, workout grid, "See All" links to categories - Activity: streak banner, SwiftUI Gauges (workouts/minutes/ calories/best streak), weekly Chart, achievements grid - Browse: featured collection hero, collection grid with emoji icons, programs carousel, new releases list - Profile: user card, subscription banner, SwiftUI List with workout/notification settings (Switches persist via Zustand) Tab layout uses NativeTabs with SF Symbols and haptic feedback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Millian Lamiaux
@@ -1,156 +1,416 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import {
|
||||
Animated,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import { useRouter, Redirect } from 'expo-router'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
/**
|
||||
* TabataFit Home Screen
|
||||
* React Native UI — wired to shared data
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText, Image as RNImage } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { LinearGradient } from 'expo-linear-gradient'
|
||||
import { BlurView } from 'expo-blur'
|
||||
import Ionicons from '@expo/vector-icons/Ionicons'
|
||||
|
||||
import { BRAND, TEXT, APP_GRADIENTS, ACCENT } from '@/src/shared/constants/colors'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SHADOW, TEXT_SHADOW } from '@/src/shared/constants/shadows'
|
||||
import { DURATION, EASING } from '@/src/shared/constants/animations'
|
||||
import { useIsOnboardingComplete } from '@/src/features/onboarding/hooks/useOnboarding'
|
||||
import { useMemo } from 'react'
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useUserStore, useActivityStore } from '@/src/shared/stores'
|
||||
import {
|
||||
getFeaturedWorkouts,
|
||||
getPopularWorkouts,
|
||||
getTrainerById,
|
||||
COLLECTIONS,
|
||||
WORKOUTS,
|
||||
} from '@/src/shared/data'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter()
|
||||
const insets = useSafeAreaInsets()
|
||||
const isOnboardingComplete = useIsOnboardingComplete()
|
||||
import {
|
||||
BRAND,
|
||||
DARK,
|
||||
TEXT,
|
||||
GLASS,
|
||||
SHADOW,
|
||||
GRADIENTS,
|
||||
} from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
|
||||
const glowAnim = useRef(new Animated.Value(0)).current
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
const CARD_WIDTH = SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2
|
||||
|
||||
// Show nothing while Zustand hydrates
|
||||
if (isOnboardingComplete === undefined) {
|
||||
return null
|
||||
}
|
||||
const FONTS = {
|
||||
LARGE_TITLE: 34,
|
||||
TITLE: 28,
|
||||
TITLE_2: 22,
|
||||
HEADLINE: 17,
|
||||
BODY: 17,
|
||||
SUBHEADLINE: 15,
|
||||
CAPTION_1: 12,
|
||||
CAPTION_2: 11,
|
||||
}
|
||||
|
||||
// Redirect to onboarding if not complete
|
||||
if (isOnboardingComplete === false) {
|
||||
return <Redirect href="/onboarding" />
|
||||
}
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// HELPERS
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
useEffect(() => {
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(glowAnim, {
|
||||
toValue: 1,
|
||||
duration: DURATION.BREATH,
|
||||
easing: EASING.STANDARD,
|
||||
useNativeDriver: false,
|
||||
}),
|
||||
Animated.timing(glowAnim, {
|
||||
toValue: 0,
|
||||
duration: DURATION.BREATH,
|
||||
easing: EASING.STANDARD,
|
||||
useNativeDriver: false,
|
||||
}),
|
||||
])
|
||||
).start()
|
||||
}, [])
|
||||
|
||||
const glowOpacity = glowAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0.15, 0.4],
|
||||
})
|
||||
|
||||
const glowScale = glowAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [1, 1.12],
|
||||
})
|
||||
function getGreeting() {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 12) return 'Good morning'
|
||||
if (hour < 18) return 'Good afternoon'
|
||||
return 'Good evening'
|
||||
}
|
||||
|
||||
function PrimaryButton({ children, onPress }: { children: string; onPress?: () => void }) {
|
||||
return (
|
||||
<LinearGradient
|
||||
colors={APP_GRADIENTS.HOME}
|
||||
style={[styles.container, { paddingTop: insets.top + 40 }]}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
>
|
||||
<StatusBar style="light" />
|
||||
|
||||
<View style={styles.brandArea}>
|
||||
<Text style={styles.title}>TABATA</Text>
|
||||
<Text style={styles.subtitle}>GO</Text>
|
||||
<Text style={styles.tagline}>4 minutes. Tout donner.</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.buttonArea}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.buttonGlow,
|
||||
{ opacity: glowOpacity, transform: [{ scale: glowScale }] },
|
||||
]}
|
||||
/>
|
||||
<Pressable
|
||||
style={({ pressed }) => [
|
||||
styles.startButton,
|
||||
pressed && styles.startButtonPressed,
|
||||
]}
|
||||
onPress={() => router.push('/timer')}
|
||||
>
|
||||
<Text style={styles.startButtonText}>START</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<Pressable style={styles.primaryButton} onPress={onPress}>
|
||||
<Ionicons name="play" size={16} color={TEXT.PRIMARY} style={styles.buttonIcon} />
|
||||
<RNText style={styles.primaryButtonText}>{children}</RNText>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
function PlainButton({ children, onPress }: { children: string; onPress?: () => void }) {
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
<RNText style={styles.plainButtonText}>{children}</RNText>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export default function HomeScreen() {
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const userName = useUserStore((s) => s.profile.name)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
|
||||
|
||||
const featured = getFeaturedWorkouts()[0] ?? WORKOUTS[0]
|
||||
const featuredTrainer = getTrainerById(featured.trainerId)
|
||||
const popular = getPopularWorkouts(4)
|
||||
|
||||
const handleWorkoutPress = (id: string) => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${id}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<View style={styles.header}>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="semibold" color={TEXT.PRIMARY}>
|
||||
{getGreeting() + ', ' + userName}
|
||||
</StyledText>
|
||||
<Pressable style={styles.profileButton}>
|
||||
<Ionicons name="person-circle-outline" size={32} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Featured */}
|
||||
<Pressable
|
||||
style={styles.featuredCard}
|
||||
onPress={() => handleWorkoutPress(featured.id)}
|
||||
>
|
||||
{featured.thumbnailUrl ? (
|
||||
<RNImage
|
||||
source={{ uri: featured.thumbnailUrl }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
) : (
|
||||
<LinearGradient
|
||||
colors={[BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
)}
|
||||
<LinearGradient
|
||||
colors={GRADIENTS.VIDEO_OVERLAY}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
|
||||
<View style={styles.featuredBadge}>
|
||||
<RNText style={styles.featuredBadgeText}>🔥 FEATURED</RNText>
|
||||
</View>
|
||||
|
||||
<View style={styles.featuredContent}>
|
||||
<StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{featured.title}
|
||||
</StyledText>
|
||||
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.SECONDARY}>
|
||||
{featured.duration + ' min • ' + featured.level + ' • ' + (featuredTrainer?.name ?? '')}
|
||||
</StyledText>
|
||||
|
||||
<View style={styles.featuredButtons}>
|
||||
<PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>START</PrimaryButton>
|
||||
<Pressable style={styles.saveButton}>
|
||||
<Ionicons name="heart-outline" size={24} color={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{/* Continue Watching — from activity store */}
|
||||
{recentWorkouts.length > 0 && (
|
||||
<View style={styles.section}>
|
||||
<View style={styles.sectionHeader}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Recent</StyledText>
|
||||
<PlainButton>See All</PlainButton>
|
||||
</View>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.horizontalScroll}
|
||||
>
|
||||
{recentWorkouts.map((result) => {
|
||||
const workout = WORKOUTS.find(w => w.id === result.workoutId)
|
||||
if (!workout) return null
|
||||
const trainer = getTrainerById(workout.trainerId)
|
||||
return (
|
||||
<Pressable
|
||||
key={result.id}
|
||||
style={styles.continueCard}
|
||||
onPress={() => handleWorkoutPress(result.workoutId)}
|
||||
>
|
||||
<View style={styles.continueThumb}>
|
||||
<LinearGradient
|
||||
colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
|
||||
{trainer?.name[0] ?? 'T'}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>
|
||||
{result.calories + ' cal • ' + result.durationMinutes + ' min'}
|
||||
</StyledText>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</ScrollView>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Popular This Week */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Popular This Week</StyledText>
|
||||
<ScrollView
|
||||
horizontal
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.horizontalScroll}
|
||||
>
|
||||
{popular.map((item) => (
|
||||
<Pressable
|
||||
key={item.id}
|
||||
style={styles.popularCard}
|
||||
onPress={() => handleWorkoutPress(item.id)}
|
||||
>
|
||||
<View style={styles.popularThumb}>
|
||||
<Ionicons name="flame" size={24} color={BRAND.PRIMARY} />
|
||||
</View>
|
||||
<StyledText size={FONTS.SUBHEADLINE} weight="medium" color={TEXT.PRIMARY}>{item.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{item.duration + ' min'}</StyledText>
|
||||
</Pressable>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
{/* Collections */}
|
||||
<View style={styles.section}>
|
||||
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
|
||||
{COLLECTIONS.map((item) => (
|
||||
<Pressable key={item.id} style={styles.collectionCard} onPress={() => { haptics.buttonTap(); router.push(`/collection/${item.id}`) }}>
|
||||
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
|
||||
<View style={styles.collectionContent}>
|
||||
<RNText style={styles.collectionIcon}>{item.icon}</RNText>
|
||||
<View style={styles.collectionText}>
|
||||
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{item.title}</StyledText>
|
||||
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
|
||||
{item.workoutIds.length + ' workouts • ' + item.description}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={20} color={TEXT.TERTIARY} />
|
||||
</View>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: DARK.BASE,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
|
||||
// Header
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
profileButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
brandArea: {
|
||||
|
||||
// Buttons
|
||||
primaryButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
...TYPOGRAPHY.brandTitle,
|
||||
color: BRAND.PRIMARY,
|
||||
...TEXT_SHADOW.BRAND,
|
||||
},
|
||||
subtitle: {
|
||||
...TYPOGRAPHY.displaySmall,
|
||||
color: TEXT.PRIMARY,
|
||||
marginTop: -6,
|
||||
},
|
||||
tagline: {
|
||||
...TYPOGRAPHY.caption,
|
||||
color: TEXT.HINT,
|
||||
fontStyle: 'italic',
|
||||
marginTop: 12,
|
||||
},
|
||||
buttonArea: {
|
||||
marginTop: 72,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonGlow: {
|
||||
position: 'absolute',
|
||||
width: 172,
|
||||
height: 172,
|
||||
borderRadius: 86,
|
||||
backgroundColor: ACCENT.ORANGE,
|
||||
},
|
||||
startButton: {
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: 80,
|
||||
backgroundColor: BRAND.PRIMARY,
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[3],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
buttonIcon: {
|
||||
marginRight: SPACING[2],
|
||||
},
|
||||
primaryButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
plainButtonText: {
|
||||
fontSize: FONTS.BODY,
|
||||
color: BRAND.PRIMARY,
|
||||
},
|
||||
|
||||
// Featured
|
||||
featuredCard: {
|
||||
width: CARD_WIDTH,
|
||||
height: 220,
|
||||
borderRadius: RADIUS.GLASS_CARD,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[8],
|
||||
...SHADOW.lg,
|
||||
},
|
||||
featuredBadge: {
|
||||
position: 'absolute',
|
||||
top: SPACING[4],
|
||||
left: SPACING[4],
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
},
|
||||
featuredBadgeText: {
|
||||
fontSize: 11,
|
||||
fontWeight: 'bold',
|
||||
color: TEXT.PRIMARY,
|
||||
},
|
||||
featuredContent: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: SPACING[5],
|
||||
},
|
||||
featuredButtons: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
marginTop: SPACING[4],
|
||||
},
|
||||
saveButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
...SHADOW.BRAND_GLOW,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
startButtonPressed: {
|
||||
transform: [{ scale: 0.95 }],
|
||||
|
||||
// Sections
|
||||
section: {
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
startButtonText: {
|
||||
...TYPOGRAPHY.buttonHero,
|
||||
color: TEXT.PRIMARY,
|
||||
letterSpacing: 4,
|
||||
sectionHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
horizontalScroll: {
|
||||
gap: SPACING[3],
|
||||
},
|
||||
|
||||
// Continue Card
|
||||
continueCard: {
|
||||
width: 140,
|
||||
},
|
||||
continueThumb: {
|
||||
width: 140,
|
||||
height: 200,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
|
||||
// Popular Card
|
||||
popularCard: {
|
||||
width: 120,
|
||||
},
|
||||
popularThumb: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
borderRadius: RADIUS.LG,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[2],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||||
},
|
||||
|
||||
// Collection Card
|
||||
collectionCard: {
|
||||
height: 80,
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[3],
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
collectionContent: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[5],
|
||||
},
|
||||
collectionIcon: {
|
||||
fontSize: 28,
|
||||
marginRight: SPACING[4],
|
||||
},
|
||||
collectionText: {
|
||||
flex: 1,
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user