99d8fba852
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>
307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
/**
|
|
* TabataFit Activity Screen
|
|
* React Native + SwiftUI Islands — wired to shared data
|
|
*/
|
|
|
|
import { View, StyleSheet, ScrollView, Dimensions, Text as RNText } from 'react-native'
|
|
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 {
|
|
Host,
|
|
Gauge,
|
|
Text,
|
|
HStack,
|
|
VStack,
|
|
Chart,
|
|
List,
|
|
} from '@expo/ui/swift-ui'
|
|
|
|
import { useMemo } from 'react'
|
|
import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
|
import { getWorkoutById } from '@/src/shared/data'
|
|
import { ACHIEVEMENTS } from '@/src/shared/data'
|
|
import { StyledText } from '@/src/shared/components/StyledText'
|
|
|
|
import {
|
|
BRAND,
|
|
DARK,
|
|
TEXT as TEXT_COLORS,
|
|
GLASS,
|
|
GRADIENTS,
|
|
} from '@/src/shared/constants/colors'
|
|
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
|
|
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
|
|
|
const FONTS = {
|
|
LARGE_TITLE: 34,
|
|
TITLE_2: 22,
|
|
SUBHEADLINE: 15,
|
|
CAPTION_1: 12,
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// MAIN SCREEN
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
export default function ActivityScreen() {
|
|
const insets = useSafeAreaInsets()
|
|
const streak = useActivityStore((s) => s.streak)
|
|
const history = useActivityStore((s) => s.history)
|
|
const totalWorkouts = history.length
|
|
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
|
const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
|
|
const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
|
|
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
|
|
|
// Check achievements
|
|
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
|
|
switch (a.type) {
|
|
case 'workouts': return totalWorkouts >= a.requirement
|
|
case 'streak': return streak.longest >= a.requirement
|
|
case 'minutes': return totalMinutes >= a.requirement
|
|
case 'calories': return totalCalories >= a.requirement
|
|
default: return false
|
|
}
|
|
})
|
|
const displayAchievements = ACHIEVEMENTS.slice(0, 5).map(a => ({
|
|
...a,
|
|
unlocked: unlockedAchievements.some(u => u.id === a.id),
|
|
}))
|
|
|
|
// Format recent workout dates
|
|
const formatDate = (timestamp: number) => {
|
|
const now = Date.now()
|
|
const diff = now - timestamp
|
|
if (diff < 86400000) return 'Today'
|
|
if (diff < 172800000) return 'Yesterday'
|
|
return Math.floor(diff / 86400000) + ' days ago'
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT_COLORS.PRIMARY}>Activity</StyledText>
|
|
|
|
{/* Streak Banner */}
|
|
<View style={styles.streakBanner}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<View style={styles.streakContent}>
|
|
<Ionicons name="flame" size={32} color={TEXT_COLORS.PRIMARY} />
|
|
<View style={styles.streakText}>
|
|
<StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT_COLORS.PRIMARY}>
|
|
{(streak.current || 0) + ' Day Streak'}
|
|
</StyledText>
|
|
<StyledText size={FONTS.SUBHEADLINE} color={TEXT_COLORS.SECONDARY}>
|
|
{streak.current > 0 ? 'Keep it going!' : 'Start your streak today!'}
|
|
</StyledText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* SwiftUI Island: Stats Gauges */}
|
|
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.statsIsland}>
|
|
<HStack spacing={12}>
|
|
<VStack spacing={4}>
|
|
<Gauge
|
|
type="circularCapacity"
|
|
current={{ value: Math.min(totalWorkouts / 100, 1), label: String(totalWorkouts) }}
|
|
color={BRAND.PRIMARY}
|
|
/>
|
|
<Text size={11} color={TEXT_COLORS.TERTIARY}>Workouts</Text>
|
|
</VStack>
|
|
<VStack spacing={4}>
|
|
<Gauge
|
|
type="circularCapacity"
|
|
current={{ value: Math.min(totalMinutes / 300, 1), label: String(totalMinutes) }}
|
|
color="#5AC8FA"
|
|
/>
|
|
<Text size={11} color={TEXT_COLORS.TERTIARY}>Minutes</Text>
|
|
</VStack>
|
|
<VStack spacing={4}>
|
|
<Gauge
|
|
type="circularCapacity"
|
|
current={{ value: Math.min(totalCalories / 5000, 1), label: String(totalCalories) }}
|
|
color="#FFD60A"
|
|
/>
|
|
<Text size={11} color={TEXT_COLORS.TERTIARY}>Calories</Text>
|
|
</VStack>
|
|
<VStack spacing={4}>
|
|
<Gauge
|
|
type="circularCapacity"
|
|
current={{ value: Math.min(streak.longest / 30, 1), label: String(streak.longest) }}
|
|
color="#30D158"
|
|
/>
|
|
<Text size={11} color={TEXT_COLORS.TERTIARY}>Best Streak</Text>
|
|
</VStack>
|
|
</HStack>
|
|
</Host>
|
|
|
|
{/* SwiftUI Island: This Week Chart */}
|
|
<View style={styles.section}>
|
|
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>This Week</StyledText>
|
|
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.chartIsland}>
|
|
<Chart
|
|
type="bar"
|
|
data={weeklyActivity.map(d => ({
|
|
x: d.date,
|
|
y: d.completed ? 1 : 0,
|
|
color: d.completed ? BRAND.PRIMARY : '#333333',
|
|
}))}
|
|
barStyle={{ cornerRadius: 4 }}
|
|
style={{ height: 160 }}
|
|
/>
|
|
</Host>
|
|
</View>
|
|
|
|
{/* SwiftUI Island: Recent Workouts */}
|
|
{recentWorkouts.length > 0 && (
|
|
<View style={styles.section}>
|
|
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Recent</StyledText>
|
|
<Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 44 * recentWorkouts.length + 55 }}>
|
|
<List listStyle="insetGrouped" scrollEnabled={false}>
|
|
{recentWorkouts.map((result) => {
|
|
const workout = getWorkoutById(result.workoutId)
|
|
return (
|
|
<HStack key={result.id} spacing={12}>
|
|
<Text color={BRAND.PRIMARY} weight="bold">{workout?.title ?? 'Workout'}</Text>
|
|
<Text size={13} color={TEXT_COLORS.TERTIARY}>{formatDate(result.completedAt)}</Text>
|
|
<Text size={13} color={TEXT_COLORS.PRIMARY}>{result.durationMinutes + ' min'}</Text>
|
|
<Text size={13} color={BRAND.PRIMARY}>{result.calories + ' cal'}</Text>
|
|
</HStack>
|
|
)
|
|
})}
|
|
</List>
|
|
</Host>
|
|
</View>
|
|
)}
|
|
|
|
{/* Achievements */}
|
|
<View style={styles.section}>
|
|
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT_COLORS.PRIMARY}>Achievements</StyledText>
|
|
<View style={styles.achievementsGrid}>
|
|
{displayAchievements.map((achievement) => (
|
|
<View
|
|
key={achievement.id}
|
|
style={[styles.achievementBadge, !achievement.unlocked && styles.achievementLocked]}
|
|
>
|
|
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
|
|
<View style={[styles.achievementIcon, !achievement.unlocked && styles.achievementIconLocked]}>
|
|
<Ionicons
|
|
name={achievement.unlocked ? 'trophy' : 'lock-closed'}
|
|
size={24}
|
|
color={achievement.unlocked ? BRAND.PRIMARY : TEXT_COLORS.TERTIARY}
|
|
/>
|
|
</View>
|
|
<StyledText
|
|
size={FONTS.CAPTION_1}
|
|
weight={achievement.unlocked ? 'semibold' : 'regular'}
|
|
color={TEXT_COLORS.PRIMARY}
|
|
>
|
|
{achievement.title}
|
|
</StyledText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STYLES
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: DARK.BASE,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
|
},
|
|
|
|
// Streak Banner
|
|
streakBanner: {
|
|
height: 80,
|
|
borderRadius: RADIUS.GLASS_CARD,
|
|
overflow: 'hidden',
|
|
marginBottom: SPACING[6],
|
|
marginTop: SPACING[4],
|
|
},
|
|
streakContent: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: SPACING[5],
|
|
gap: SPACING[4],
|
|
},
|
|
streakText: {
|
|
flex: 1,
|
|
},
|
|
|
|
// Stats Island
|
|
statsIsland: {
|
|
marginBottom: SPACING[8],
|
|
},
|
|
|
|
// Chart Island
|
|
chartIsland: {
|
|
marginTop: SPACING[2],
|
|
},
|
|
|
|
// Section
|
|
section: {
|
|
marginBottom: SPACING[6],
|
|
},
|
|
|
|
// Achievements
|
|
achievementsGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: SPACING[3],
|
|
},
|
|
achievementBadge: {
|
|
width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3] * 2) / 3,
|
|
aspectRatio: 1,
|
|
borderRadius: RADIUS.LG,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.1)',
|
|
overflow: 'hidden',
|
|
},
|
|
achievementLocked: {
|
|
opacity: 0.5,
|
|
},
|
|
achievementIcon: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: 'rgba(255, 107, 53, 0.15)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: SPACING[2],
|
|
},
|
|
achievementIconLocked: {
|
|
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
},
|
|
})
|