milllianlmx/tabatago
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate theme and i18n across all screens

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Millian Lamiaux
2026-02-21 00:05:14 +01:00
parent f17125e231
commit f80798069b
17 changed files with 3127 additions and 2402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.json
View File

@@ -40,7 +40,10 @@
}
}
],
"expo-video"
"expo-video",
"expo-notifications",
"expo-localization",
"./plugins/withStoreKitConfig"
],
"experiments": {
"typedRoutes": true,

21
app/(tabs)/_layout.tsx
View File

@@ -2,39 +2,50 @@
* TabataFit Tab Layout
* Native iOS tabs with liquid glass effect
* 5 tabs: Home, Workouts, Activity, Browse, Profile
* Redirects to onboarding if not completed
*/
import { Redirect } from 'expo-router'
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
import { useTranslation } from 'react-i18next'
import { BRAND } from '@/src/shared/constants/colors'
import { useUserStore } from '@/src/shared/stores'
export default function TabLayout() {
const { t } = useTranslation('screens')
const onboardingCompleted = useUserStore((s) => s.profile.onboardingCompleted)
if (!onboardingCompleted) {
return <Redirect href="/onboarding" />
}
return (
<NativeTabs
tintColor={BRAND.PRIMARY}
>
<NativeTabs.Trigger name="index">
<Icon sf={{ default: 'house', selected: 'house.fill' }} />
<Label>Home</Label>
<Label>{t('tabs.home')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="workouts">
<Icon sf={{ default: 'flame', selected: 'flame.fill' }} />
<Label>Workouts</Label>
<Label>{t('tabs.workouts')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="activity">
<Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
<Label>Activity</Label>
<Label>{t('tabs.activity')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="browse">
<Icon sf={{ default: 'square.grid.2x2', selected: 'square.grid.2x2.fill' }} />
<Label>Browse</Label>
<Label>{t('tabs.browse')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="profile">
<Icon sf={{ default: 'person', selected: 'person.fill' }} />
<Label>Profile</Label>
<Label>{t('tabs.profile')}</Label>
</NativeTabs.Trigger>
</NativeTabs>
)

639
app/(tabs)/activity.tsx
View File

@@ -1,62 +1,181 @@
/**
* TabataFit Activity Screen
* React Native + SwiftUI Islands — wired to shared data
* Premium stats dashboard — streak, rings, weekly chart, history
*/
import { View, StyleSheet, ScrollView, Dimensions, Text as RNText } from 'react-native'
import { View, StyleSheet, ScrollView, Dimensions } 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 { useTranslation } from 'react-i18next'
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 { useThemeColors, BRAND, PHASE, GRADIENTS } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
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,
// ═══════════════════════════════════════════════════════════════════════════
// STAT RING — Custom circular progress (pure RN, no SwiftUI)
// ═══════════════════════════════════════════════════════════════════════════
function StatRing({
value,
max,
color,
size = 64,
}: {
value: number
max: number
color: string
size?: number
}) {
const colors = useThemeColors()
const strokeWidth = 5
const radius = (size - strokeWidth) / 2
const circumference = 2 * Math.PI * radius
const progress = Math.min(value / max, 1)
const strokeDashoffset = circumference * (1 - progress)
// We'll use a View-based ring since SVG isn't available
// Use border trick for a circular progress indicator
return (
<View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
{/* Track */}
<View
style={{
position: 'absolute',
width: size,
height: size,
borderRadius: size / 2,
borderWidth: strokeWidth,
borderColor: colors.bg.overlay2,
}}
/>
{/* Fill — simplified: show a colored ring proportional to progress */}
<View
style={{
position: 'absolute',
width: size,
height: size,
borderRadius: size / 2,
borderWidth: strokeWidth,
borderColor: color,
borderTopColor: progress > 0.25 ? color : 'transparent',
borderRightColor: progress > 0.5 ? color : 'transparent',
borderBottomColor: progress > 0.75 ? color : 'transparent',
borderLeftColor: progress > 0 ? color : 'transparent',
transform: [{ rotate: '-90deg' }],
opacity: progress > 0 ? 1 : 0.3,
}}
/>
</View>
)
}
// ═══════════════════════════════════════════════════════════════════════════
// STAT CARD
// ═══════════════════════════════════════════════════════════════════════════
function StatCard({
label,
value,
max,
color,
icon,
}: {
label: string
value: number
max: number
color: string
icon: keyof typeof Ionicons.glyphMap
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<View style={styles.statCard}>
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.statCardInner}>
<StatRing value={value} max={max} color={color} size={52} />
<View style={{ flex: 1, marginLeft: SPACING[3] }}>
<StyledText size={24} weight="bold" color={colors.text.primary}>
{String(value)}
</StyledText>
<StyledText size={12} color={colors.text.tertiary}>
{label}
</StyledText>
</View>
<Ionicons name={icon} size={18} color={color} />
</View>
</View>
)
}
// ═══════════════════════════════════════════════════════════════════════════
// WEEKLY BAR
// ═══════════════════════════════════════════════════════════════════════════
function WeeklyBar({
day,
completed,
isToday,
}: {
day: string
completed: boolean
isToday: boolean
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<View style={styles.weekBarColumn}>
<View style={[styles.weekBar, completed && styles.weekBarFilled]}>
{completed && (
<LinearGradient
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
style={[StyleSheet.absoluteFill, { borderRadius: 4 }]}
/>
)}
</View>
<StyledText
size={11}
weight={isToday ? 'bold' : 'regular'}
color={isToday ? colors.text.primary : colors.text.hint}
>
{day}
</StyledText>
</View>
)
}
// ═══════════════════════════════════════════════════════════════════════════
// MAIN SCREEN
// ═══════════════════════════════════════════════════════════════════════════
const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const
export default function ActivityScreen() {
const { t } = useTranslation()
const insets = useSafeAreaInsets()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
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 recentWorkouts = useMemo(() => history.slice(0, 5), [history])
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
const today = new Date().getDay() // 0=Sun
// Check achievements
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
switch (a.type) {
@@ -67,18 +186,17 @@ export default function ActivityScreen() {
default: return false
}
})
const displayAchievements = ACHIEVEMENTS.slice(0, 5).map(a => ({
const displayAchievements = ACHIEVEMENTS.slice(0, 4).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'
if (diff < 86400000) return t('screens:activity.today')
if (diff < 172800000) return t('screens:activity.yesterday')
return t('screens:activity.daysAgo', { count: Math.floor(diff / 86400000) })
}
return (
@@ -89,7 +207,14 @@ export default function ActivityScreen() {
showsVerticalScrollIndicator={false}
>
{/* Header */}
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT_COLORS.PRIMARY}>Activity</StyledText>
<StyledText
size={34}
weight="bold"
color={colors.text.primary}
style={{ marginBottom: SPACING[6] }}
>
{t('screens:activity.title')}
</StyledText>
{/* Streak Banner */}
<View style={styles.streakBanner}>
@@ -99,119 +224,154 @@ export default function ActivityScreen() {
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'}
<View style={styles.streakRow}>
<View style={styles.streakIconWrap}>
<Ionicons name="flame" size={28} color="#FFFFFF" />
</View>
<View style={{ flex: 1 }}>
<StyledText size={28} weight="bold" color="#FFFFFF">
{String(streak.current || 0)}
</StyledText>
<StyledText size={FONTS.SUBHEADLINE} color={TEXT_COLORS.SECONDARY}>
{streak.current > 0 ? 'Keep it going!' : 'Start your streak today!'}
<StyledText size={13} color="rgba(255,255,255,0.8)">
{t('screens:activity.dayStreak')}
</StyledText>
</View>
<View style={styles.streakMeta}>
<StyledText size={11} color="rgba(255,255,255,0.6)">
{t('screens:activity.longest')}
</StyledText>
<StyledText size={20} weight="bold" color="#FFFFFF">
{String(streak.longest)}
</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>
{/* Stats Grid — 2x2 */}
<View style={styles.statsGrid}>
<StatCard
label={t('screens:activity.workouts')}
value={totalWorkouts}
max={100}
color={BRAND.PRIMARY}
icon="barbell-outline"
/>
<StatCard
label={t('screens:activity.minutes')}
value={totalMinutes}
max={300}
color={PHASE.REST}
icon="time-outline"
/>
<StatCard
label={t('screens:activity.calories')}
value={totalCalories}
max={5000}
color={BRAND.SECONDARY}
icon="flash-outline"
/>
<StatCard
label={t('screens:activity.bestStreak')}
value={streak.longest}
max={30}
color={BRAND.SUCCESS}
icon="trending-up-outline"
/>
</View>
{/* SwiftUI Island: Recent Workouts */}
{/* This Week */}
<View style={styles.section}>
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
{t('screens:activity.thisWeek')}
</StyledText>
<View style={styles.weekCard}>
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.weekBarsRow}>
{weeklyActivity.map((d, i) => (
<WeeklyBar
key={i}
day={t(DAY_KEYS[i])}
completed={d.completed}
isToday={i === today}
/>
))}
</View>
<View style={styles.weekSummary}>
<StyledText size={13} color={colors.text.tertiary}>
{t('screens:activity.ofDays', { completed: weeklyActivity.filter(d => d.completed).length })}
</StyledText>
</View>
</View>
</View>
{/* 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>
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
{t('screens:activity.recent')}
</StyledText>
<View style={styles.recentCard}>
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
{recentWorkouts.map((result, idx) => {
const workout = getWorkoutById(result.workoutId)
const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
return (
<View key={result.id}>
<View style={styles.recentRow}>
<View style={styles.recentDot}>
<View style={[styles.dot, { backgroundColor: BRAND.PRIMARY }]} />
</View>
<View style={{ flex: 1 }}>
<StyledText size={15} weight="semibold" color={colors.text.primary}>
{workoutTitle}
</StyledText>
<StyledText size={12} color={colors.text.tertiary}>
{formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
</StyledText>
</View>
<StyledText size={14} weight="semibold" color={BRAND.PRIMARY}>
{t('units.calUnit', { count: result.calories })}
</StyledText>
</View>
{idx < recentWorkouts.length - 1 && <View style={styles.recentDivider} />}
</View>
)
})}
</View>
</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]}>
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
{t('screens:activity.achievements')}
</StyledText>
<View style={styles.achievementsRow}>
{displayAchievements.map((a) => (
<View key={a.id} style={styles.achievementCard}>
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View
style={[
styles.achievementIcon,
a.unlocked
? { backgroundColor: 'rgba(255, 107, 53, 0.15)' }
: { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
]}
>
<Ionicons
name={achievement.unlocked ? 'trophy' : 'lock-closed'}
size={24}
color={achievement.unlocked ? BRAND.PRIMARY : TEXT_COLORS.TERTIARY}
name={a.unlocked ? 'trophy' : 'lock-closed'}
size={22}
color={a.unlocked ? BRAND.PRIMARY : colors.text.hint}
/>
</View>
<StyledText
size={FONTS.CAPTION_1}
weight={achievement.unlocked ? 'semibold' : 'regular'}
color={TEXT_COLORS.PRIMARY}
size={11}
weight="semibold"
color={a.unlocked ? colors.text.primary : colors.text.hint}
numberOfLines={1}
style={{ marginTop: SPACING[2], textAlign: 'center' }}
>
{achievement.title}
{t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
</StyledText>
</View>
))}
@@ -226,81 +386,168 @@ export default function ActivityScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
const CARD_HALF = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
// 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,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Stats Island
statsIsland: {
marginBottom: SPACING[8],
},
// Streak
streakBanner: {
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[5],
...colors.shadow.md,
},
streakRow: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: SPACING[5],
paddingVertical: SPACING[5],
gap: SPACING[4],
},
streakIconWrap: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: 'rgba(255,255,255,0.15)',
alignItems: 'center',
justifyContent: 'center',
},
streakMeta: {
alignItems: 'center',
backgroundColor: 'rgba(255,255,255,0.1)',
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[2],
borderRadius: RADIUS.MD,
},
// Chart Island
chartIsland: {
marginTop: SPACING[2],
},
// Stats 2x2
statsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: SPACING[3],
marginBottom: SPACING[6],
},
statCard: {
width: CARD_HALF,
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.bg.overlay2,
},
statCardInner: {
flexDirection: 'row',
alignItems: 'center',
padding: SPACING[4],
},
// Section
section: {
marginBottom: SPACING[6],
},
// 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)',
},
})
// Weekly
weekCard: {
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.bg.overlay2,
paddingTop: SPACING[5],
paddingBottom: SPACING[4],
},
weekBarsRow: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'flex-end',
paddingHorizontal: SPACING[4],
height: 100,
},
weekBarColumn: {
alignItems: 'center',
flex: 1,
gap: SPACING[2],
},
weekBar: {
width: 24,
height: 60,
borderRadius: 4,
backgroundColor: colors.border.glassLight,
overflow: 'hidden',
},
weekBarFilled: {
backgroundColor: BRAND.PRIMARY,
},
weekSummary: {
alignItems: 'center',
marginTop: SPACING[3],
paddingTop: SPACING[3],
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: colors.bg.overlay2,
marginHorizontal: SPACING[4],
},
// Recent
recentCard: {
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.bg.overlay2,
paddingVertical: SPACING[2],
},
recentRow: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[3],
},
recentDot: {
width: 24,
alignItems: 'center',
marginRight: SPACING[3],
},
dot: {
width: 8,
height: 8,
borderRadius: 4,
},
recentDivider: {
height: StyleSheet.hairlineWidth,
backgroundColor: colors.border.glassLight,
marginLeft: SPACING[4] + 24 + SPACING[3],
},
// Achievements
achievementsRow: {
flexDirection: 'row',
gap: SPACING[3],
},
achievementCard: {
flex: 1,
aspectRatio: 0.9,
borderRadius: RADIUS.LG,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: colors.bg.overlay2,
overflow: 'hidden',
paddingHorizontal: SPACING[1],
},
achievementIcon: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
},
})
}

410
app/(tabs)/browse.tsx
View File

@@ -10,6 +10,8 @@ import { LinearGradient } from 'expo-linear-gradient'
import { BlurView } from 'expo-blur'
import Ionicons from '@expo/vector-icons/Ionicons'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import {
COLLECTIONS,
@@ -17,17 +19,12 @@ import {
getFeaturedCollection,
COLLECTION_COLORS,
WORKOUTS,
getTrainerById,
} from '@/src/shared/data'
import { useTranslatedCollections, useTranslatedPrograms, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
import { StyledText } from '@/src/shared/components/StyledText'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -61,11 +58,17 @@ const NEW_RELEASES = WORKOUTS.slice(-4)
// ═══════════════════════════════════════════════════════════════════════════
export default function BrowseScreen() {
const { t } = useTranslation()
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const featuredCollection = getFeaturedCollection()
const translatedCollections = useTranslatedCollections(COLLECTIONS)
const translatedPrograms = useTranslatedPrograms(PROGRAMS)
const translatedNewReleases = useTranslatedWorkouts(NEW_RELEASES)
const handleWorkoutPress = (id: string) => {
haptics.buttonTap()
@@ -85,7 +88,7 @@ export default function BrowseScreen() {
showsVerticalScrollIndicator={false}
>
{/* Header */}
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Browse</StyledText>
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>{t('screens:browse.title')}</StyledText>
{/* Featured Collection */}
{featuredCollection && (
@@ -98,18 +101,18 @@ export default function BrowseScreen() {
/>
<View style={styles.featuredBadge}>
<Ionicons name="star" size={12} color={TEXT.PRIMARY} />
<RNText style={styles.featuredBadgeText}>FEATURED</RNText>
<Ionicons name="star" size={12} color="#FFFFFF" />
<RNText style={styles.featuredBadgeText}>{t('screens:browse.featured')}</RNText>
</View>
<View style={styles.featuredInfo}>
<StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>{featuredCollection.title}</StyledText>
<StyledText size={FONTS.HEADLINE} color={TEXT.SECONDARY}>{featuredCollection.description}</StyledText>
<StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">{t(`content:collections.${featuredCollection.id}.title`, { defaultValue: featuredCollection.title })}</StyledText>
<StyledText size={FONTS.HEADLINE} color="rgba(255,255,255,0.8)">{t(`content:collections.${featuredCollection.id}.description`, { defaultValue: featuredCollection.description })}</StyledText>
<View style={styles.featuredStats}>
<View style={styles.featuredStat}>
<Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
<StyledText size={FONTS.CAPTION_1} color={TEXT.PRIMARY}>{featuredCollection.workoutIds.length + ' workouts'}</StyledText>
<Ionicons name="fitness" size={14} color="#FFFFFF" />
<StyledText size={FONTS.CAPTION_1} color="#FFFFFF">{t('plurals.workout', { count: featuredCollection.workoutIds.length })}</StyledText>
</View>
</View>
</View>
@@ -118,9 +121,9 @@ export default function BrowseScreen() {
{/* Collections Grid */}
<View style={styles.section}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.collections')}</StyledText>
<View style={styles.collectionsGrid}>
{COLLECTIONS.map((collection) => {
{translatedCollections.map((collection) => {
const color = COLLECTION_COLORS[collection.id] ?? BRAND.PRIMARY
return (
<Pressable
@@ -128,15 +131,15 @@ export default function BrowseScreen() {
style={styles.collectionCard}
onPress={() => handleCollectionPress(collection.id)}
>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={[styles.collectionIconBg, { backgroundColor: `${color}20` }]}>
<RNText style={styles.collectionEmoji}>{collection.icon}</RNText>
</View>
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY} numberOfLines={1}>
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={colors.text.primary} numberOfLines={1}>
{collection.title}
</StyledText>
<StyledText size={FONTS.CAPTION_1} color={color}>
{collection.workoutIds.length + ' workouts'}
{t('plurals.workout', { count: collection.workoutIds.length })}
</StyledText>
</Pressable>
)
@@ -147,34 +150,34 @@ export default function BrowseScreen() {
{/* Programs */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Programs</StyledText>
<TextButton>See All</TextButton>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.programs')}</StyledText>
<TextButton>{t('seeAll')}</TextButton>
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.programsScroll}
>
{PROGRAMS.map((program) => (
{translatedPrograms.map((program) => (
<View key={program.id} style={styles.programCard}>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.programHeader}>
<View style={styles.programLevelBadge}>
<StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{program.level}</StyledText>
<StyledText size={FONTS.CAPTION_2} weight="semibold" color={colors.text.primary}>{t(`levels.${program.level.toLowerCase()}`)}</StyledText>
</View>
</View>
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{program.title}</StyledText>
<StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{program.title}</StyledText>
<View style={styles.programMeta}>
<View style={styles.programMetaItem}>
<Ionicons name="calendar" size={14} color={TEXT.TERTIARY} />
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.weeks + ' weeks'}</StyledText>
<Ionicons name="calendar" size={14} color={colors.text.tertiary} />
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.weeksCount', { count: program.weeks })}</StyledText>
</View>
<View style={styles.programMetaItem}>
<Ionicons name="repeat" size={14} color={TEXT.TERTIARY} />
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>{program.workoutsPerWeek + 'x /week'}</StyledText>
<Ionicons name="repeat" size={14} color={colors.text.tertiary} />
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.timesPerWeek', { count: program.workoutsPerWeek })}</StyledText>
</View>
</View>
</View>
@@ -185,29 +188,26 @@ export default function BrowseScreen() {
{/* New Releases */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>New Releases</StyledText>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.newReleases')}</StyledText>
</View>
{NEW_RELEASES.map((workout) => {
const trainer = getTrainerById(workout.trainerId)
return (
<Pressable
key={workout.id}
style={styles.releaseRow}
onPress={() => handleWorkoutPress(workout.id)}
>
<View style={[styles.releaseAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
<RNText style={styles.releaseInitial}>{trainer?.name[0] ?? 'T'}</RNText>
</View>
<View style={styles.releaseInfo}>
<StyledText size={FONTS.HEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY}>
{(trainer?.name ?? '') + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
</StyledText>
</View>
<Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
</Pressable>
)
})}
{translatedNewReleases.map((workout) => (
<Pressable
key={workout.id}
style={styles.releaseRow}
onPress={() => handleWorkoutPress(workout.id)}
>
<View style={[styles.releaseAvatar, { backgroundColor: BRAND.PRIMARY }]}>
<Ionicons name="flame" size={20} color="#FFFFFF" />
</View>
<View style={styles.releaseInfo}>
<StyledText size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
{t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
</StyledText>
</View>
<Ionicons name="play-circle" size={32} color={BRAND.PRIMARY} />
</Pressable>
))}
</View>
</ScrollView>
</View>
@@ -220,160 +220,162 @@ export default function BrowseScreen() {
const COLLECTION_CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Featured Collection
featuredCard: {
height: 200,
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[8],
marginTop: SPACING[4],
...SHADOW.lg,
},
featuredBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
paddingHorizontal: SPACING[2],
paddingVertical: SPACING[1],
borderRadius: RADIUS.SM,
alignSelf: 'flex-start',
margin: SPACING[4],
gap: SPACING[1],
},
featuredBadgeText: {
fontSize: 11,
fontWeight: 'bold',
color: TEXT.PRIMARY,
},
featuredInfo: {
position: 'absolute',
bottom: SPACING[5],
left: SPACING[5],
right: SPACING[5],
},
featuredStats: {
flexDirection: 'row',
gap: SPACING[4],
marginTop: SPACING[3],
},
featuredStat: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// Featured Collection
featuredCard: {
height: 200,
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[8],
marginTop: SPACING[4],
...colors.shadow.lg,
},
featuredBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
paddingHorizontal: SPACING[2],
paddingVertical: SPACING[1],
borderRadius: RADIUS.SM,
alignSelf: 'flex-start',
margin: SPACING[4],
gap: SPACING[1],
},
featuredBadgeText: {
fontSize: 11,
fontWeight: 'bold',
color: '#FFFFFF',
},
featuredInfo: {
position: 'absolute',
bottom: SPACING[5],
left: SPACING[5],
right: SPACING[5],
},
featuredStats: {
flexDirection: 'row',
gap: SPACING[4],
marginTop: SPACING[3],
},
featuredStat: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// Section
section: {
marginBottom: SPACING[6],
},
sectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[4],
},
// Section
section: {
marginBottom: SPACING[6],
},
sectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[4],
},
// Collections Grid
collectionsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: SPACING[3],
marginTop: SPACING[3],
},
collectionCard: {
width: COLLECTION_CARD_WIDTH,
paddingVertical: SPACING[4],
paddingHorizontal: SPACING[3],
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
gap: SPACING[1],
},
collectionIconBg: {
width: 44,
height: 44,
borderRadius: 12,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
},
collectionEmoji: {
fontSize: 22,
},
// Collections Grid
collectionsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: SPACING[3],
marginTop: SPACING[3],
},
collectionCard: {
width: COLLECTION_CARD_WIDTH,
paddingVertical: SPACING[4],
paddingHorizontal: SPACING[3],
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.border.glass,
gap: SPACING[1],
},
collectionIconBg: {
width: 44,
height: 44,
borderRadius: 12,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
},
collectionEmoji: {
fontSize: 22,
},
// Programs
programsScroll: {
gap: SPACING[3],
},
programCard: {
width: 200,
height: 140,
borderRadius: RADIUS.LG,
overflow: 'hidden',
padding: SPACING[4],
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
programHeader: {
flexDirection: 'row',
justifyContent: 'flex-end',
marginBottom: SPACING[2],
},
programLevelBadge: {
backgroundColor: 'rgba(255, 107, 53, 0.2)',
paddingHorizontal: SPACING[2],
paddingVertical: SPACING[1],
borderRadius: RADIUS.SM,
},
programMeta: {
flexDirection: 'row',
gap: SPACING[3],
marginTop: SPACING[3],
},
programMetaItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// Programs
programsScroll: {
gap: SPACING[3],
},
programCard: {
width: 200,
height: 140,
borderRadius: RADIUS.LG,
overflow: 'hidden',
padding: SPACING[4],
borderWidth: 1,
borderColor: colors.border.glass,
},
programHeader: {
flexDirection: 'row',
justifyContent: 'flex-end',
marginBottom: SPACING[2],
},
programLevelBadge: {
backgroundColor: 'rgba(255, 107, 53, 0.2)',
paddingHorizontal: SPACING[2],
paddingVertical: SPACING[1],
borderRadius: RADIUS.SM,
},
programMeta: {
flexDirection: 'row',
gap: SPACING[3],
marginTop: SPACING[3],
},
programMetaItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// New Releases
releaseRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: DARK.SURFACE,
borderRadius: RADIUS.LG,
marginBottom: SPACING[2],
gap: SPACING[3],
},
releaseAvatar: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
},
releaseInitial: {
fontSize: 18,
fontWeight: '700',
color: TEXT.PRIMARY,
},
releaseInfo: {
flex: 1,
gap: 2,
},
})
// New Releases
releaseRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: colors.bg.surface,
borderRadius: RADIUS.LG,
marginBottom: SPACING[2],
gap: SPACING[3],
},
releaseAvatar: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
},
releaseInitial: {
fontSize: 18,
fontWeight: '700',
color: '#FFFFFF',
},
releaseInfo: {
flex: 1,
gap: 2,
},
})
}

429
app/(tabs)/index.tsx
View File

@@ -11,25 +11,20 @@ import { BlurView } from 'expo-blur'
import Ionicons from '@expo/vector-icons/Ionicons'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { useUserStore, useActivityStore } from '@/src/shared/stores'
import {
getFeaturedWorkouts,
getPopularWorkouts,
getTrainerById,
COLLECTIONS,
WORKOUTS,
} from '@/src/shared/data'
import { useTranslatedWorkouts, useTranslatedCollections } from '@/src/shared/data/useTranslatedData'
import { StyledText } from '@/src/shared/components/StyledText'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
GRADIENTS,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -51,23 +46,20 @@ const FONTS = {
// HELPERS
// ═══════════════════════════════════════════════════════════════════════════
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 }) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<Pressable style={styles.primaryButton} onPress={onPress}>
<Ionicons name="play" size={16} color={TEXT.PRIMARY} style={styles.buttonIcon} />
<Ionicons name="play" size={16} color="#FFFFFF" style={styles.buttonIcon} />
<RNText style={styles.primaryButtonText}>{children}</RNText>
</Pressable>
)
}
function PlainButton({ children, onPress }: { children: string; onPress?: () => void }) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<Pressable onPress={onPress}>
<RNText style={styles.plainButtonText}>{children}</RNText>
@@ -80,16 +72,29 @@ function PlainButton({ children, onPress }: { children: string; onPress?: () =>
// ═══════════════════════════════════════════════════════════════════════════
export default function HomeScreen() {
const { t } = useTranslation()
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
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 translatedPopular = useTranslatedWorkouts(popular)
const translatedCollections = useTranslatedCollections(COLLECTIONS)
const greeting = (() => {
const hour = new Date().getHours()
if (hour < 12) return t('greetings.morning')
if (hour < 18) return t('greetings.afternoon')
return t('greetings.evening')
})()
const featuredTitle = t(`content:workouts.${featured.id}`, { defaultValue: featured.title })
const handleWorkoutPress = (id: string) => {
haptics.buttonTap()
@@ -105,11 +110,21 @@ export default function HomeScreen() {
>
{/* Header */}
<View style={styles.header}>
<StyledText size={FONTS.LARGE_TITLE} weight="semibold" color={TEXT.PRIMARY}>
{getGreeting() + ', ' + userName}
</StyledText>
<View style={{ flex: 1, marginRight: SPACING[3] }}>
<StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
{greeting}
</StyledText>
<StyledText
size={FONTS.LARGE_TITLE}
weight="bold"
color={colors.text.primary}
numberOfLines={1}
>
{userName}
</StyledText>
</View>
<Pressable style={styles.profileButton}>
<Ionicons name="person-circle-outline" size={32} color={TEXT.PRIMARY} />
<Ionicons name="person-circle-outline" size={32} color={colors.text.primary} />
</Pressable>
</View>
@@ -136,21 +151,21 @@ export default function HomeScreen() {
/>
<View style={styles.featuredBadge}>
<RNText style={styles.featuredBadgeText}>🔥 FEATURED</RNText>
<RNText style={styles.featuredBadgeText}>{'🔥 ' + t('screens:home.featured')}</RNText>
</View>
<View style={styles.featuredContent}>
<StyledText size={FONTS.TITLE} weight="bold" color={TEXT.PRIMARY}>
{featured.title}
<StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">
{featuredTitle}
</StyledText>
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.SECONDARY}>
{featured.duration + ' min • ' + featured.level + ' • ' + (featuredTrainer?.name ?? '')}
<StyledText size={FONTS.SUBHEADLINE} color="rgba(255,255,255,0.8)">
{t('workoutMeta', { duration: featured.duration, level: t(`levels.${featured.level.toLowerCase()}`), calories: featured.calories })}
</StyledText>
<View style={styles.featuredButtons}>
<PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>START</PrimaryButton>
<PrimaryButton onPress={() => handleWorkoutPress(featured.id)}>{t('start')}</PrimaryButton>
<Pressable style={styles.saveButton}>
<Ionicons name="heart-outline" size={24} color={TEXT.PRIMARY} />
<Ionicons name="heart-outline" size={24} color="#FFFFFF" />
</Pressable>
</View>
</View>
@@ -160,8 +175,8 @@ export default function HomeScreen() {
{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>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.recent')}</StyledText>
<PlainButton>{t('seeAll')}</PlainButton>
</View>
<ScrollView
horizontal
@@ -171,7 +186,7 @@ export default function HomeScreen() {
{recentWorkouts.map((result) => {
const workout = WORKOUTS.find(w => w.id === result.workoutId)
if (!workout) return null
const trainer = getTrainerById(workout.trainerId)
const workoutTitle = t(`content:workouts.${workout.id}`, { defaultValue: workout.title })
return (
<Pressable
key={result.id}
@@ -180,16 +195,14 @@ export default function HomeScreen() {
>
<View style={styles.continueThumb}>
<LinearGradient
colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
style={StyleSheet.absoluteFill}
/>
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
{trainer?.name[0] ?? 'T'}
</StyledText>
<Ionicons name="flame" size={32} color="#FFFFFF" />
</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 size={FONTS.SUBHEADLINE} weight="semibold" color={colors.text.primary}>{workoutTitle}</StyledText>
<StyledText size={FONTS.CAPTION_2} color={colors.text.tertiary}>
{t('calMin', { calories: result.calories, duration: result.durationMinutes })}
</StyledText>
</Pressable>
)
@@ -200,13 +213,13 @@ export default function HomeScreen() {
{/* Popular This Week */}
<View style={styles.section}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Popular This Week</StyledText>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.popularThisWeek')}</StyledText>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalScroll}
>
{popular.map((item) => (
{translatedPopular.map((item) => (
<Pressable
key={item.id}
style={styles.popularCard}
@@ -215,8 +228,8 @@ export default function HomeScreen() {
<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>
<StyledText size={FONTS.SUBHEADLINE} weight="medium" color={colors.text.primary}>{item.title}</StyledText>
<StyledText size={FONTS.CAPTION_2} color={colors.text.tertiary}>{t('units.minUnit', { count: item.duration })}</StyledText>
</Pressable>
))}
</ScrollView>
@@ -224,19 +237,19 @@ export default function HomeScreen() {
{/* Collections */}
<View style={styles.section}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Collections</StyledText>
{COLLECTIONS.map((item) => (
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.collections')}</StyledText>
{translatedCollections.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} />
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} 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 size={FONTS.HEADLINE} weight="semibold" color={colors.text.primary}>{item.title}</StyledText>
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
{t('plurals.workout', { count: item.workoutIds.length }) + ' \u00B7 ' + item.description}
</StyledText>
</View>
<Ionicons name="chevron-forward" size={20} color={TEXT.TERTIARY} />
<Ionicons name="chevron-forward" size={20} color={colors.text.tertiary} />
</View>
</Pressable>
))}
@@ -250,167 +263,169 @@ export default function HomeScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.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',
},
// Header
header: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[6],
},
profileButton: {
width: 40,
height: 40,
alignItems: 'center',
justifyContent: 'center',
},
// Buttons
primaryButton: {
flexDirection: 'row',
alignItems: 'center',
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,
},
// Buttons
primaryButton: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: BRAND.PRIMARY,
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[3],
borderRadius: RADIUS.SM,
},
buttonIcon: {
marginRight: SPACING[2],
},
primaryButtonText: {
fontSize: 14,
fontWeight: '600',
color: '#FFFFFF',
},
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',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
borderRadius: 22,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.15)',
},
// Featured
featuredCard: {
width: CARD_WIDTH,
height: 220,
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[8],
...colors.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: '#FFFFFF',
},
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',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
borderRadius: 22,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.15)',
},
// Sections
section: {
marginBottom: SPACING[8],
},
sectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[4],
},
horizontalScroll: {
gap: SPACING[3],
},
// Sections
section: {
marginBottom: SPACING[8],
},
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],
},
// 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)',
},
// Popular Card
popularCard: {
width: 120,
},
popularThumb: {
width: 120,
height: 120,
borderRadius: RADIUS.LG,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
borderWidth: 1,
borderColor: colors.border.glass,
backgroundColor: colors.bg.overlay1,
},
// 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,
},
})
// Collection Card
collectionCard: {
height: 80,
borderRadius: RADIUS.LG,
overflow: 'hidden',
marginBottom: SPACING[3],
borderWidth: 1,
borderColor: colors.border.glass,
},
collectionContent: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: SPACING[5],
},
collectionIcon: {
fontSize: 28,
marginRight: SPACING[4],
},
collectionText: {
flex: 1,
},
})
}

252
app/(tabs)/profile.tsx
View File

@@ -15,19 +15,18 @@ import {
Switch,
Text,
LabeledContent,
DateTimePicker,
Button,
} from '@expo/ui/swift-ui'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useUserStore } from '@/src/shared/stores'
import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
import { StyledText } from '@/src/shared/components/StyledText'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
GRADIENTS,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -44,14 +43,44 @@ const FONTS = {
// ═══════════════════════════════════════════════════════════════════════════
export default function ProfileScreen() {
const { t } = useTranslation('screens')
const insets = useSafeAreaInsets()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const profile = useUserStore((s) => s.profile)
const settings = useUserStore((s) => s.settings)
const updateSettings = useUserStore((s) => s.updateSettings)
const { restorePurchases } = usePurchases()
const isPremium = profile.subscription !== 'free'
const planLabel = isPremium ? 'TabataFit+' : 'Free'
const handleRestore = async () => {
await restorePurchases()
}
const handleReminderToggle = async (enabled: boolean) => {
if (enabled) {
const granted = await requestNotificationPermissions()
if (!granted) return
}
updateSettings({ reminders: enabled })
}
const handleTimeChange = (date: Date) => {
const hh = String(date.getHours()).padStart(2, '0')
const mm = String(date.getMinutes()).padStart(2, '0')
updateSettings({ reminderTime: `${hh}:${mm}` })
}
// Build initial date string for the picker (today at reminderTime)
const today = new Date()
const [rh, rm] = settings.reminderTime.split(':').map(Number)
const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
const pickerInitial = pickerDate.toISOString()
const settingsHeight = settings.reminders ? 430 : 385
return (
<View style={[styles.container, { paddingTop: insets.top }]}>
<ScrollView
@@ -60,32 +89,32 @@ export default function ProfileScreen() {
showsVerticalScrollIndicator={false}
>
{/* Header */}
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
Profile
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
{t('profile.title')}
</StyledText>
{/* Profile Card */}
<View style={styles.profileCard}>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.avatarContainer}>
<LinearGradient
colors={GRADIENTS.CTA}
style={StyleSheet.absoluteFill}
/>
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
{profile.name[0]}
</StyledText>
</View>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
{profile.name}
</StyledText>
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>
<StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
{profile.email}
</StyledText>
{isPremium && (
<View style={styles.premiumBadge}>
<Ionicons name="star" size={12} color={BRAND.PRIMARY} />
<StyledText size={FONTS.CAPTION_1} weight="semibold" color={TEXT.PRIMARY}>
<StyledText size={FONTS.CAPTION_1} weight="semibold" color={colors.text.primary}>
{planLabel}
</StyledText>
</View>
@@ -102,59 +131,82 @@ export default function ProfileScreen() {
style={StyleSheet.absoluteFill}
/>
<View style={styles.subscriptionContent}>
<Ionicons name="ribbon" size={24} color={TEXT.PRIMARY} />
<Ionicons name="ribbon" size={24} color="#FFFFFF" />
<View style={styles.subscriptionInfo}>
<StyledText size={FONTS.HEADLINE} weight="bold" color={TEXT.PRIMARY}>
<StyledText size={FONTS.HEADLINE} weight="bold" color="#FFFFFF">
{planLabel}
</StyledText>
<StyledText size={FONTS.CAPTION_1} color={TEXT.SECONDARY}>
{'Member since ' + profile.joinDate}
<StyledText size={FONTS.CAPTION_1} color="rgba(255,255,255,0.8)">
{t('profile.memberSince', { date: profile.joinDate })}
</StyledText>
</View>
</View>
</View>
)}
{/* SwiftUI Island: Settings */}
<Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 385 }}>
{/* SwiftUI Island: Subscription Section */}
<Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: 60, marginTop: -20 }}>
<List listStyle="insetGrouped" scrollEnabled={false}>
<Section title="WORKOUT">
<Section title={t('profile.sectionSubscription')}>
<Button
variant="borderless"
onPress={handleRestore}
color={colors.text.primary}
>
{t('profile.restorePurchases')}
</Button>
</Section>
</List>
</Host>
{/* SwiftUI Island: Settings */}
<Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: settingsHeight }}>
<List listStyle="insetGrouped" scrollEnabled={false}>
<Section title={t('profile.sectionWorkout')}>
<Switch
label="Haptic Feedback"
label={t('profile.hapticFeedback')}
value={settings.haptics}
onValueChange={(v) => updateSettings({ haptics: v })}
color={BRAND.PRIMARY}
/>
<Switch
label="Sound Effects"
label={t('profile.soundEffects')}
value={settings.soundEffects}
onValueChange={(v) => updateSettings({ soundEffects: v })}
color={BRAND.PRIMARY}
/>
<Switch
label="Voice Coaching"
label={t('profile.voiceCoaching')}
value={settings.voiceCoaching}
onValueChange={(v) => updateSettings({ voiceCoaching: v })}
color={BRAND.PRIMARY}
/>
</Section>
<Section title="NOTIFICATIONS">
<Section title={t('profile.sectionNotifications')}>
<Switch
label="Daily Reminders"
label={t('profile.dailyReminders')}
value={settings.reminders}
onValueChange={(v) => updateSettings({ reminders: v })}
onValueChange={handleReminderToggle}
color={BRAND.PRIMARY}
/>
<LabeledContent label="Reminder Time">
<Text color={TEXT.TERTIARY}>{settings.reminderTime.replace(':00', ':00 AM')}</Text>
</LabeledContent>
{settings.reminders && (
<LabeledContent label={t('profile.reminderTime')}>
<DateTimePicker
displayedComponents="hourAndMinute"
variant="compact"
initialDate={pickerInitial}
onDateSelected={handleTimeChange}
color={BRAND.PRIMARY}
/>
</LabeledContent>
)}
</Section>
</List>
</Host>
{/* Version */}
<StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY} style={styles.versionText}>
TabataFit v1.0.0
<StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary} style={styles.versionText}>
{t('profile.version')}
</StyledText>
</ScrollView>
</View>
@@ -165,72 +217,74 @@ export default function ProfileScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Profile Card
profileCard: {
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[6],
marginTop: SPACING[4],
alignItems: 'center',
paddingVertical: SPACING[6],
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
...SHADOW.md,
},
avatarContainer: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[3],
overflow: 'hidden',
},
premiumBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(255, 107, 53, 0.15)',
paddingHorizontal: SPACING[3],
paddingVertical: SPACING[1],
borderRadius: RADIUS.FULL,
marginTop: SPACING[3],
gap: SPACING[1],
},
// Profile Card
profileCard: {
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
marginBottom: SPACING[6],
marginTop: SPACING[4],
alignItems: 'center',
paddingVertical: SPACING[6],
borderWidth: 1,
borderColor: colors.border.glass,
...colors.shadow.md,
},
avatarContainer: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[3],
overflow: 'hidden',
},
premiumBadge: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(255, 107, 53, 0.15)',
paddingHorizontal: SPACING[3],
paddingVertical: SPACING[1],
borderRadius: RADIUS.FULL,
marginTop: SPACING[3],
gap: SPACING[1],
},
// Subscription Card
subscriptionCard: {
height: 80,
borderRadius: RADIUS.LG,
overflow: 'hidden',
marginBottom: SPACING[6],
...SHADOW.BRAND_GLOW,
},
subscriptionContent: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: SPACING[4],
gap: SPACING[3],
},
subscriptionInfo: {
flex: 1,
},
// Subscription Card
subscriptionCard: {
height: 80,
borderRadius: RADIUS.LG,
overflow: 'hidden',
marginBottom: SPACING[6],
...colors.shadow.BRAND_GLOW,
},
subscriptionContent: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: SPACING[4],
gap: SPACING[3],
},
subscriptionInfo: {
flex: 1,
},
// Version Text
versionText: {
textAlign: 'center',
marginTop: SPACING[6],
},
})
// Version Text
versionText: {
textAlign: 'center',
marginTop: SPACING[6],
},
})
}

483
app/(tabs)/workouts.tsx
View File

@@ -1,40 +1,134 @@
/**
* TabataFit Workouts Screen
* React Native + SwiftUI Islands — wired to shared data
* Premium workout browser — scrollable category pills, trainers, workout grid
*/
import { useState } from 'react'
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
import { useState, useRef, useMemo } from 'react'
import { View, StyleSheet, ScrollView, Pressable, Dimensions, Animated } 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 { Host, Picker } from '@expo/ui/swift-ui'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { WORKOUTS, TRAINERS, CATEGORIES, getTrainerById } from '@/src/shared/data'
import { WORKOUTS } from '@/src/shared/data'
import { useTranslatedCategories, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
import { StyledText } from '@/src/shared/components/StyledText'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
const { width: SCREEN_WIDTH } = Dimensions.get('window')
const CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
const FONTS = {
LARGE_TITLE: 34,
TITLE_2: 22,
HEADLINE: 17,
SUBHEADLINE: 15,
CAPTION_1: 12,
CAPTION_2: 11,
// ═══════════════════════════════════════════════════════════════════════════
// CATEGORY PILL
// ═══════════════════════════════════════════════════════════════════════════
function CategoryPill({
label,
selected,
onPress,
}: {
label: string
selected: boolean
onPress: () => void
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<Pressable
style={[styles.pill, selected && styles.pillSelected]}
onPress={onPress}
>
{selected && (
<LinearGradient
colors={GRADIENTS.CTA}
style={[StyleSheet.absoluteFill, { borderRadius: 20 }]}
/>
)}
<StyledText
size={14}
weight={selected ? 'semibold' : 'regular'}
color={selected ? '#FFFFFF' : colors.text.tertiary}
>
{label}
</StyledText>
</Pressable>
)
}
// ═══════════════════════════════════════════════════════════════════════════
// WORKOUT CARD
// ═══════════════════════════════════════════════════════════════════════════
function WorkoutCard({
title,
duration,
level,
levelLabel,
onPress,
}: {
title: string
duration: number
level: string
levelLabel: string
onPress: () => void
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
return (
<Pressable style={styles.workoutCard} onPress={onPress}>
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
{/* Subtle gradient accent at top */}
<LinearGradient
colors={[levelColor(level, colors) + '30', 'transparent']}
style={styles.cardGradient}
/>
{/* Duration badge */}
<View style={styles.durationBadge}>
<Ionicons name="time-outline" size={10} color={colors.text.secondary} />
<StyledText size={11} weight="semibold" color={colors.text.secondary} style={{ marginLeft: 3 }}>
{duration + ' min'}
</StyledText>
</View>
{/* Play button */}
<View style={styles.playArea}>
<View style={styles.playCircle}>
<Ionicons name="play" size={18} color={colors.text.primary} />
</View>
</View>
{/* Info */}
<View style={styles.workoutInfo}>
<StyledText size={14} weight="semibold" color={colors.text.primary} numberOfLines={2}>
{title}
</StyledText>
<View style={styles.levelRow}>
<View style={[styles.levelDot, { backgroundColor: levelColor(level, colors) }]} />
<StyledText size={11} color={colors.text.tertiary}>
{levelLabel}
</StyledText>
</View>
</View>
</Pressable>
)
}
function levelColor(level: string, colors: ThemeColors): string {
switch (level.toLowerCase()) {
case 'beginner': return BRAND.SUCCESS
case 'intermediate': return BRAND.SECONDARY
case 'advanced': return BRAND.DANGER
default: return colors.text.tertiary
}
}
// ═══════════════════════════════════════════════════════════════════════════
@@ -42,22 +136,28 @@ const FONTS = {
// ═══════════════════════════════════════════════════════════════════════════
export default function WorkoutsScreen() {
const { t } = useTranslation()
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const [selectedCategoryIndex, setSelectedCategoryIndex] = useState(0)
const selectedCategory = CATEGORIES[selectedCategoryIndex].id
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const [selectedCategory, setSelectedCategory] = useState('all')
const categories = useTranslatedCategories()
const filteredWorkouts = selectedCategory === 'all'
? WORKOUTS
: WORKOUTS.filter(w => w.category === selectedCategory)
const translatedFiltered = useTranslatedWorkouts(filteredWorkouts)
const handleWorkoutPress = (id: string) => {
haptics.buttonTap()
router.push(`/workout/${id}`)
}
const selectedLabel = categories.find(c => c.id === selectedCategory)?.label ?? t('screens:workouts.allWorkouts')
return (
<View style={[styles.container, { paddingTop: insets.top }]}>
<ScrollView
@@ -67,89 +167,57 @@ export default function WorkoutsScreen() {
>
{/* Header */}
<View style={styles.header}>
<StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>Workouts</StyledText>
<StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>{WORKOUTS.length + ' workouts available'}</StyledText>
<StyledText size={34} weight="bold" color={colors.text.primary}>
{t('screens:workouts.title')}
</StyledText>
<StyledText size={15} color={colors.text.tertiary}>
{t('screens:workouts.available', { count: WORKOUTS.length })}
</StyledText>
</View>
{/* SwiftUI Island: Category Picker */}
<Host matchContents useViewportSizeMeasurement colorScheme="dark" style={styles.pickerIsland}>
<Picker
variant="segmented"
options={CATEGORIES.map(c => c.label)}
selectedIndex={selectedCategoryIndex}
onOptionSelected={(e) => {
haptics.selection()
setSelectedCategoryIndex(e.nativeEvent.index)
}}
color={BRAND.PRIMARY}
/>
</Host>
{/* Trainers */}
<View style={styles.section}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>Trainers</StyledText>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.trainersScroll}
>
{TRAINERS.map((trainer) => (
<Pressable key={trainer.id} style={styles.trainerCard}>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<View style={[styles.trainerAvatar, { backgroundColor: trainer.color }]}>
<StyledText size={FONTS.TITLE_2} weight="bold" color={TEXT.PRIMARY}>{trainer.name[0]}</StyledText>
</View>
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{trainer.name}</StyledText>
<StyledText size={FONTS.CAPTION_2} color={TEXT.TERTIARY}>{trainer.specialty}</StyledText>
</Pressable>
))}
</ScrollView>
</View>
{/* Category Pills — horizontal scroll, no truncation */}
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.pillsRow}
style={styles.pillsScroll}
>
{categories.map((cat) => (
<CategoryPill
key={cat.id}
label={cat.label}
selected={selectedCategory === cat.id}
onPress={() => {
haptics.selection()
setSelectedCategory(cat.id)
}}
/>
))}
</ScrollView>
{/* Workouts Grid */}
<View style={styles.section}>
<View style={styles.sectionHeader}>
<StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
{selectedCategory === 'all' ? 'All Workouts' : (CATEGORIES.find(c => c.id === selectedCategory)?.label ?? 'All Workouts')}
<StyledText size={20} weight="semibold" color={colors.text.primary}>
{selectedCategory === 'all' ? t('screens:workouts.allWorkouts') : selectedLabel}
</StyledText>
{selectedCategory !== 'all' && (
<Pressable onPress={() => { haptics.buttonTap(); router.push(`/workout/category/${selectedCategory}`) }}>
<StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">See All</StyledText>
<StyledText size={14} color={BRAND.PRIMARY} weight="medium">{t('seeAll')}</StyledText>
</Pressable>
)}
</View>
<View style={styles.workoutsGrid}>
{filteredWorkouts.map((workout) => {
const trainer = getTrainerById(workout.trainerId)
return (
<Pressable
key={workout.id}
style={styles.workoutCard}
onPress={() => handleWorkoutPress(workout.id)}
>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<View style={styles.durationBadge}>
<StyledText size={FONTS.CAPTION_2} weight="semibold" color={TEXT.PRIMARY}>{workout.duration + ' min'}</StyledText>
</View>
<View style={[styles.workoutTrainerBadge, { backgroundColor: trainer?.color }]}>
<StyledText size={FONTS.CAPTION_1} weight="bold" color={TEXT.PRIMARY}>{trainer?.name[0] ?? 'T'}</StyledText>
</View>
<View style={styles.playOverlay}>
<View style={styles.playCircle}>
<Ionicons name="play" size={20} color={TEXT.PRIMARY} />
</View>
</View>
<View style={styles.workoutInfo}>
<StyledText size={FONTS.SUBHEADLINE} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
<StyledText size={FONTS.CAPTION_1} color={BRAND.PRIMARY}>{workout.level}</StyledText>
</View>
</Pressable>
)
})}
{translatedFiltered.map((workout) => (
<WorkoutCard
key={workout.id}
title={workout.title}
duration={workout.duration}
level={workout.level}
levelLabel={t(`levels.${workout.level.toLowerCase()}`)}
onPress={() => handleWorkoutPress(workout.id)}
/>
))}
</View>
</View>
</ScrollView>
@@ -161,119 +229,126 @@ export default function WorkoutsScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Header
header: {
marginBottom: SPACING[6],
},
// Header
header: {
marginBottom: SPACING[4],
},
// Picker Island
pickerIsland: {
marginBottom: SPACING[6],
},
// Pills
pillsScroll: {
marginHorizontal: -LAYOUT.SCREEN_PADDING,
marginBottom: SPACING[6],
},
pillsRow: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
gap: SPACING[2],
},
pill: {
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[2],
borderRadius: 20,
backgroundColor: colors.bg.surface,
borderWidth: 1,
borderColor: colors.border.glassLight,
},
pillSelected: {
borderColor: BRAND.PRIMARY,
backgroundColor: 'transparent',
},
// Section
section: {
marginBottom: SPACING[8],
},
sectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[2],
},
// Section
section: {
marginBottom: SPACING[6],
},
sectionHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: SPACING[4],
},
// Trainers
trainersScroll: {
gap: SPACING[3],
},
trainerCard: {
width: 100,
alignItems: 'center',
paddingVertical: SPACING[4],
borderRadius: RADIUS.LG,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
overflow: 'hidden',
},
trainerAvatar: {
width: 48,
height: 48,
borderRadius: 24,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
},
// Workouts Grid
workoutsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: SPACING[3],
},
workoutCard: {
width: CARD_WIDTH,
height: 180,
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
...SHADOW.md,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
durationBadge: {
position: 'absolute',
top: SPACING[2],
right: SPACING[2],
backgroundColor: 'rgba(0, 0, 0, 0.5)',
paddingHorizontal: SPACING[2],
paddingVertical: SPACING[1],
borderRadius: RADIUS.SM,
},
workoutTrainerBadge: {
position: 'absolute',
top: SPACING[2],
left: SPACING[2],
width: 28,
height: 28,
borderRadius: 14,
alignItems: 'center',
justifyContent: 'center',
},
playOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 60,
alignItems: 'center',
justifyContent: 'center',
},
playCircle: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: 'rgba(255, 255, 255, 0.2)',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.3)',
},
workoutInfo: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
padding: SPACING[3],
},
})
// Workouts Grid
workoutsGrid: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: SPACING[3],
},
workoutCard: {
width: CARD_WIDTH,
height: 190,
borderRadius: RADIUS.GLASS_CARD,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.bg.overlay2,
},
cardGradient: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
height: 80,
},
durationBadge: {
position: 'absolute',
top: SPACING[3],
right: SPACING[3],
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
paddingHorizontal: SPACING[2],
paddingVertical: 3,
borderRadius: RADIUS.SM,
},
playArea: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 64,
alignItems: 'center',
justifyContent: 'center',
},
playCircle: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: colors.border.glassStrong,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.25)',
},
workoutInfo: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
padding: SPACING[3],
paddingTop: SPACING[2],
},
levelRow: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 3,
gap: 5,
},
levelDot: {
width: 6,
height: 6,
borderRadius: 3,
},
})
}

168
app/_layout.tsx
View File

@@ -1,13 +1,18 @@
/**
* TabataFit Root Layout
* Expo Router v3 + Inter font loading
* Waits for font + store hydration before rendering
*/
import { useCallback } from 'react'
import '@/src/shared/i18n'
import '@/src/shared/i18n/types'
import { useState, useEffect, useCallback } from 'react'
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import { View } from 'react-native'
import * as SplashScreen from 'expo-splash-screen'
import * as Notifications from 'expo-notifications'
import {
useFonts,
Inter_400Regular,
@@ -17,11 +22,29 @@ import {
Inter_900Black,
} from '@expo-google-fonts/inter'
import { DARK } from '@/src/shared/constants/colors'
import { PostHogProvider } from 'posthog-react-native'
import { ThemeProvider, useThemeColors } from '@/src/shared/theme'
import { useUserStore } from '@/src/shared/stores'
import { useNotifications } from '@/src/shared/hooks'
import { initializePurchases } from '@/src/shared/services/purchases'
import { initializeAnalytics, getPostHogClient } from '@/src/shared/services/analytics'
Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: false,
shouldPlaySound: false,
shouldSetBadge: false,
shouldShowBanner: false,
shouldShowList: false,
}),
})
SplashScreen.preventAutoHideAsync()
export default function RootLayout() {
function RootLayoutInner() {
const colors = useThemeColors()
const [fontsLoaded] = useFonts({
Inter_400Regular,
Inter_500Medium,
@@ -30,59 +53,106 @@ export default function RootLayout() {
Inter_900Black,
})
useNotifications()
// Wait for persisted store to hydrate from AsyncStorage
const [hydrated, setHydrated] = useState(useUserStore.persist.hasHydrated())
useEffect(() => {
const unsub = useUserStore.persist.onFinishHydration(() => setHydrated(true))
return unsub
}, [])
// Initialize RevenueCat + PostHog after hydration
useEffect(() => {
if (hydrated) {
initializePurchases().catch((err) => {
console.error('Failed to initialize RevenueCat:', err)
})
initializeAnalytics().catch((err) => {
console.error('Failed to initialize PostHog:', err)
})
}
}, [hydrated])
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
if (fontsLoaded && hydrated) {
await SplashScreen.hideAsync()
}
}, [fontsLoaded])
}, [fontsLoaded, hydrated])
if (!fontsLoaded) {
if (!fontsLoaded || !hydrated) {
return null
}
const content = (
<View style={{ flex: 1, backgroundColor: colors.bg.base }} onLayout={onLayoutRootView}>
<StatusBar style={colors.statusBarStyle} />
<Stack
screenOptions={{
headerShown: false,
contentStyle: { backgroundColor: colors.bg.base },
animation: 'slide_from_right',
}}
>
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="onboarding"
options={{
animation: 'fade',
}}
/>
<Stack.Screen
name="workout/[id]"
options={{
animation: 'slide_from_bottom',
}}
/>
<Stack.Screen
name="workout/category/[id]"
options={{
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="collection/[id]"
options={{
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="player/[id]"
options={{
presentation: 'fullScreenModal',
animation: 'fade',
}}
/>
<Stack.Screen
name="complete/[id]"
options={{
animation: 'fade',
}}
/>
</Stack>
</View>
)
// Skip PostHogProvider in dev to avoid SDK errors without a real API key
if (__DEV__) {
return content
}
return (
<View style={{ flex: 1, backgroundColor: DARK.BASE }} onLayout={onLayoutRootView}>
<StatusBar style="light" />
<Stack
screenOptions={{
headerShown: false,
contentStyle: { backgroundColor: DARK.BASE },
animation: 'slide_from_right',
}}
>
<Stack.Screen name="(tabs)" />
<Stack.Screen
name="workout/[id]"
options={{
animation: 'slide_from_bottom',
}}
/>
<Stack.Screen
name="workout/category/[id]"
options={{
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="collection/[id]"
options={{
animation: 'slide_from_right',
}}
/>
<Stack.Screen
name="player/[id]"
options={{
presentation: 'fullScreenModal',
animation: 'fade',
}}
/>
<Stack.Screen
name="complete/[id]"
options={{
animation: 'fade',
}}
/>
</Stack>
</View>
<PostHogProvider client={getPostHogClient() ?? undefined} autocapture={{ captureScreens: true }}>
{content}
</PostHogProvider>
)
}
export default function RootLayout() {
return (
<ThemeProvider>
<RootLayoutInner />
</ThemeProvider>
)
}

212
app/collection/[id].tsx
View File

@@ -10,15 +10,15 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { LinearGradient } from 'expo-linear-gradient'
import Ionicons from '@expo/vector-icons/Ionicons'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { getCollectionById, getCollectionWorkouts, getTrainerById, COLLECTION_COLORS } from '@/src/shared/data'
import { getCollectionById, getCollectionWorkouts, COLLECTION_COLORS } from '@/src/shared/data'
import { useTranslatedCollections, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
import { StyledText } from '@/src/shared/components/StyledText'
import {
BRAND,
DARK,
TEXT,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
@@ -26,13 +26,20 @@ export default function CollectionDetailScreen() {
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const { t } = useTranslation()
const { id } = useLocalSearchParams<{ id: string }>()
const collection = id ? getCollectionById(id) : null
const workouts = useMemo(
() => id ? getCollectionWorkouts(id) : [],
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const rawCollection = id ? getCollectionById(id) : null
const translatedCollections = useTranslatedCollections(rawCollection ? [rawCollection] : [])
const collection = translatedCollections.length > 0 ? translatedCollections[0] : null
const rawWorkouts = useMemo(
() => id ? getCollectionWorkouts(id).filter((w): w is NonNullable<typeof w> => w != null) : [],
[id]
)
const workouts = useTranslatedWorkouts(rawWorkouts)
const collectionColor = COLLECTION_COLORS[id ?? ''] ?? BRAND.PRIMARY
const handleBack = () => {
@@ -48,7 +55,7 @@ export default function CollectionDetailScreen() {
if (!collection) {
return (
<View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
<RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Collection not found</RNText>
<RNText style={{ color: colors.text.primary, fontSize: 17 }}>{t('screens:collection.notFound')}</RNText>
</View>
)
}
@@ -63,7 +70,7 @@ export default function CollectionDetailScreen() {
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
showsVerticalScrollIndicator={false}
>
{/* Hero Header */}
{/* Hero Header — on gradient, text stays white */}
<View style={styles.hero}>
<LinearGradient
colors={collection.gradient ?? [collectionColor, BRAND.PRIMARY_DARK]}
@@ -73,36 +80,35 @@ export default function CollectionDetailScreen() {
/>
<Pressable onPress={handleBack} style={styles.backButton}>
<Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
<Ionicons name="chevron-back" size={24} color="#FFFFFF" />
</Pressable>
<View style={styles.heroContent}>
<RNText style={styles.heroIcon}>{collection.icon}</RNText>
<StyledText size={28} weight="bold" color={TEXT.PRIMARY}>{collection.title}</StyledText>
<StyledText size={15} color={TEXT.SECONDARY}>{collection.description}</StyledText>
<StyledText size={28} weight="bold" color="#FFFFFF">{collection.title}</StyledText>
<StyledText size={15} color="rgba(255, 255, 255, 0.8)">{collection.description}</StyledText>
<View style={styles.heroStats}>
<View style={styles.heroStat}>
<Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
<StyledText size={13} color={TEXT.PRIMARY}>{workouts.length + ' workouts'}</StyledText>
<Ionicons name="fitness" size={14} color="#FFFFFF" />
<StyledText size={13} color="#FFFFFF">{t('plurals.workout', { count: workouts.length })}</StyledText>
</View>
<View style={styles.heroStat}>
<Ionicons name="time" size={14} color={TEXT.PRIMARY} />
<StyledText size={13} color={TEXT.PRIMARY}>{totalMinutes + ' min total'}</StyledText>
<Ionicons name="time" size={14} color="#FFFFFF" />
<StyledText size={13} color="#FFFFFF">{t('screens:collection.minTotal', { count: totalMinutes })}</StyledText>
</View>
<View style={styles.heroStat}>
<Ionicons name="flame" size={14} color={TEXT.PRIMARY} />
<StyledText size={13} color={TEXT.PRIMARY}>{totalCalories + ' cal'}</StyledText>
<Ionicons name="flame" size={14} color="#FFFFFF" />
<StyledText size={13} color="#FFFFFF">{t('units.calUnit', { count: totalCalories })}</StyledText>
</View>
</View>
</View>
</View>
{/* Workout List */}
{/* Workout List — on base bg, use theme tokens */}
<View style={styles.workoutList}>
{workouts.map((workout, index) => {
if (!workout) return null
const trainer = getTrainerById(workout.trainerId)
return (
<Pressable
key={workout.id}
@@ -113,13 +119,13 @@ export default function CollectionDetailScreen() {
<RNText style={[styles.workoutNumberText, { color: collectionColor }]}>{index + 1}</RNText>
</View>
<View style={styles.workoutInfo}>
<StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
<StyledText size={13} color={TEXT.TERTIARY}>
{trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
<StyledText size={17} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
<StyledText size={13} color={colors.text.tertiary}>
{t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
</StyledText>
</View>
<View style={styles.workoutMeta}>
<StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
<StyledText size={13} color={BRAND.PRIMARY}>{t('units.calUnit', { count: workout.calories })}</StyledText>
<Ionicons name="play-circle" size={28} color={collectionColor} />
</View>
</Pressable>
@@ -131,81 +137,83 @@ export default function CollectionDetailScreen() {
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {},
// Hero
hero: {
height: 260,
overflow: 'hidden',
},
backButton: {
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
margin: SPACING[3],
},
heroContent: {
position: 'absolute',
bottom: SPACING[5],
left: SPACING[5],
right: SPACING[5],
},
heroIcon: {
fontSize: 40,
marginBottom: SPACING[2],
},
heroStats: {
flexDirection: 'row',
gap: SPACING[4],
marginTop: SPACING[3],
},
heroStat: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// Hero
hero: {
height: 260,
overflow: 'hidden',
},
backButton: {
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
margin: SPACING[3],
},
heroContent: {
position: 'absolute',
bottom: SPACING[5],
left: SPACING[5],
right: SPACING[5],
},
heroIcon: {
fontSize: 40,
marginBottom: SPACING[2],
},
heroStats: {
flexDirection: 'row',
gap: SPACING[4],
marginTop: SPACING[3],
},
heroStat: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
// Workout List
workoutList: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
gap: SPACING[2],
},
workoutCard: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: DARK.SURFACE,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
workoutNumber: {
width: 32,
height: 32,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
},
workoutNumberText: {
fontSize: 15,
fontWeight: '700',
},
workoutInfo: {
flex: 1,
gap: 2,
},
workoutMeta: {
alignItems: 'flex-end',
gap: 4,
},
})
// Workout List
workoutList: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
gap: SPACING[2],
},
workoutCard: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: colors.bg.surface,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
workoutNumber: {
width: 32,
height: 32,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
},
workoutNumberText: {
fontSize: 15,
fontWeight: '700',
},
workoutInfo: {
flex: 1,
gap: 2,
},
workoutMeta: {
alignItems: 'flex-end',
gap: 4,
},
})
}

576
app/complete/[id].tsx
View File

@@ -3,7 +3,7 @@
* Celebration with real data from activity store
*/
import { useRef, useEffect } from 'react'
import { useRef, useEffect, useMemo } from 'react'
import {
View,
Text as RNText,
@@ -20,17 +20,15 @@ import { BlurView } from 'expo-blur'
import Ionicons from '@expo/vector-icons/Ionicons'
import * as Sharing from 'expo-sharing'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { useActivityStore } from '@/src/shared/stores'
import { getWorkoutById, getTrainerById, getPopularWorkouts } from '@/src/shared/data'
import { getWorkoutById, getPopularWorkouts } from '@/src/shared/data'
import { useTranslatedWorkout, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
} from '@/src/shared/constants/colors'
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'
@@ -51,6 +49,8 @@ function SecondaryButton({
children: React.ReactNode
icon?: keyof typeof Ionicons.glyphMap
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const scaleAnim = useRef(new Animated.Value(1)).current
const handlePressIn = () => {
@@ -77,7 +77,7 @@ function SecondaryButton({
style={{ width: '100%' }}
>
<Animated.View style={[styles.secondaryButton, { transform: [{ scale: scaleAnim }] }]}>
{icon && <Ionicons name={icon} size={18} color={TEXT.PRIMARY} style={styles.buttonIcon} />}
{icon && <Ionicons name={icon} size={18} color={colors.text.primary} style={styles.buttonIcon} />}
<RNText style={styles.secondaryButtonText}>{children}</RNText>
</Animated.View>
</Pressable>
@@ -91,6 +91,8 @@ function PrimaryButton({
onPress: () => void
children: React.ReactNode
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const scaleAnim = useRef(new Animated.Value(1)).current
const handlePressIn = () => {
@@ -134,6 +136,8 @@ function PrimaryButton({
// ═══════════════════════════════════════════════════════════════════════════
function CelebrationRings() {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const ring1Anim = useRef(new Animated.Value(0)).current
const ring2Anim = useRef(new Animated.Value(0)).current
const ring3Anim = useRef(new Animated.Value(0)).current
@@ -190,6 +194,8 @@ function StatCard({
icon: keyof typeof Ionicons.glyphMap
delay?: number
}) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const scaleAnim = useRef(new Animated.Value(0)).current
useEffect(() => {
@@ -205,7 +211,7 @@ function StatCard({
return (
<Animated.View style={[styles.statCard, { transform: [{ scale: scaleAnim }] }]}>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<Ionicons name={icon} size={24} color={BRAND.PRIMARY} />
<RNText style={styles.statValue}>{value}</RNText>
<RNText style={styles.statLabel}>{label}</RNText>
@@ -214,6 +220,9 @@ function StatCard({
}
function BurnBarResult({ percentile }: { percentile: number }) {
const { t } = useTranslation()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const barAnim = useRef(new Animated.Value(0)).current
useEffect(() => {
@@ -232,8 +241,8 @@ function BurnBarResult({ percentile }: { percentile: number }) {
return (
<View style={styles.burnBarContainer}>
<RNText style={styles.burnBarTitle}>Burn Bar</RNText>
<RNText style={styles.burnBarResult}>You beat {percentile}% of users!</RNText>
<RNText style={styles.burnBarTitle}>{t('screens:complete.burnBar')}</RNText>
<RNText style={styles.burnBarResult}>{t('screens:complete.burnBarResult', { percentile })}</RNText>
<View style={styles.burnBarTrack}>
<Animated.View style={[styles.burnBarFill, { width: barWidth }]} />
</View>
@@ -249,9 +258,14 @@ export default function WorkoutCompleteScreen() {
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const { t } = useTranslation()
const { id } = useLocalSearchParams<{ id: string }>()
const workout = getWorkoutById(id ?? '1')
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const rawWorkout = getWorkoutById(id ?? '1')
const workout = useTranslatedWorkout(rawWorkout)
const streak = useActivityStore((s) => s.streak)
const history = useActivityStore((s) => s.history)
const recentWorkouts = history.slice(0, 1)
@@ -262,7 +276,8 @@ export default function WorkoutCompleteScreen() {
const resultMinutes = latestResult?.durationMinutes ?? workout?.duration ?? 4
// Recommended workouts (different from current)
const recommended = getPopularWorkouts(4).filter(w => w.id !== id).slice(0, 3)
const rawRecommended = getPopularWorkouts(4).filter(w => w.id !== id).slice(0, 3)
const recommended = useTranslatedWorkouts(rawRecommended)
const handleGoHome = () => {
haptics.buttonTap()
@@ -274,7 +289,7 @@ export default function WorkoutCompleteScreen() {
const isAvailable = await Sharing.isAvailableAsync()
if (isAvailable) {
await Sharing.shareAsync('https://tabatafit.app', {
dialogTitle: `I just completed ${workout?.title ?? 'a workout'}! 🔥 ${resultCalories} calories in ${resultMinutes} minutes.`,
dialogTitle: t('screens:complete.shareText', { title: workout?.title ?? 'a workout', calories: resultCalories, duration: resultMinutes }),
})
}
}
@@ -297,15 +312,15 @@ export default function WorkoutCompleteScreen() {
{/* Celebration */}
<View style={styles.celebrationSection}>
<RNText style={styles.celebrationEmoji}>🎉</RNText>
<RNText style={styles.celebrationTitle}>WORKOUT COMPLETE</RNText>
<RNText style={styles.celebrationTitle}>{t('screens:complete.title')}</RNText>
<CelebrationRings />
</View>
{/* Stats Grid */}
<View style={styles.statsGrid}>
<StatCard value={resultCalories} label="CALORIES" icon="flame" delay={100} />
<StatCard value={resultMinutes} label="MINUTES" icon="time" delay={200} />
<StatCard value="100%" label="COMPLETE" icon="checkmark-circle" delay={300} />
<StatCard value={resultCalories} label={t('screens:complete.caloriesLabel')} icon="flame" delay={100} />
<StatCard value={resultMinutes} label={t('screens:complete.minutesLabel')} icon="time" delay={200} />
<StatCard value="100%" label={t('screens:complete.completeLabel')} icon="checkmark-circle" delay={300} />
</View>
{/* Burn Bar */}
@@ -319,8 +334,8 @@ export default function WorkoutCompleteScreen() {
<Ionicons name="flame" size={32} color={BRAND.PRIMARY} />
</View>
<View style={styles.streakInfo}>
<RNText style={styles.streakTitle}>{streak.current} Day Streak!</RNText>
<RNText style={styles.streakSubtitle}>Keep the momentum going!</RNText>
<RNText style={styles.streakTitle}>{t('screens:complete.streakTitle', { count: streak.current })}</RNText>
<RNText style={styles.streakSubtitle}>{t('screens:complete.streakSubtitle')}</RNText>
</View>
</View>
@@ -329,7 +344,7 @@ export default function WorkoutCompleteScreen() {
{/* Share Button */}
<View style={styles.shareSection}>
<SecondaryButton onPress={handleShare} icon="share-outline">
Share Your Workout
{t('screens:complete.shareWorkout')}
</SecondaryButton>
</View>
@@ -337,39 +352,36 @@ export default function WorkoutCompleteScreen() {
{/* Recommended */}
<View style={styles.recommendedSection}>
<RNText style={styles.recommendedTitle}>Recommended Next</RNText>
<RNText style={styles.recommendedTitle}>{t('screens:complete.recommendedNext')}</RNText>
<View style={styles.recommendedGrid}>
{recommended.map((w) => {
const trainer = getTrainerById(w.trainerId)
return (
<Pressable
key={w.id}
onPress={() => handleWorkoutPress(w.id)}
style={styles.recommendedCard}
>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<View style={styles.recommendedThumb}>
<LinearGradient
colors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
style={StyleSheet.absoluteFill}
/>
<RNText style={styles.recommendedInitial}>{trainer?.name[0] ?? 'T'}</RNText>
</View>
<RNText style={styles.recommendedTitleText} numberOfLines={1}>{w.title}</RNText>
<RNText style={styles.recommendedDurationText}>{w.duration} min</RNText>
</Pressable>
)
})}
{recommended.map((w) => (
<Pressable
key={w.id}
onPress={() => handleWorkoutPress(w.id)}
style={styles.recommendedCard}
>
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.recommendedThumb}>
<LinearGradient
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
style={StyleSheet.absoluteFill}
/>
<Ionicons name="flame" size={24} color="#FFFFFF" />
</View>
<RNText style={styles.recommendedTitleText} numberOfLines={1}>{w.title}</RNText>
<RNText style={styles.recommendedDurationText}>{t('units.minUnit', { count: w.duration })}</RNText>
</Pressable>
))}
</View>
</View>
</ScrollView>
{/* Fixed Bottom Button */}
<View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
<BlurView intensity={GLASS.BLUR_HEAVY} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurHeavy} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.homeButtonContainer}>
<PrimaryButton onPress={handleGoHome}>
Back to Home
{t('screens:complete.backToHome')}
</PrimaryButton>
</View>
</View>
@@ -381,246 +393,248 @@ export default function WorkoutCompleteScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Buttons
secondaryButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
borderRadius: RADIUS.LG,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.3)',
backgroundColor: 'transparent',
},
secondaryButtonText: {
...TYPOGRAPHY.BODY,
color: TEXT.PRIMARY,
fontWeight: '600',
},
primaryButton: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[4],
paddingHorizontal: SPACING[6],
borderRadius: RADIUS.LG,
overflow: 'hidden',
},
primaryButtonText: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
fontWeight: '700',
},
buttonIcon: {
marginRight: SPACING[2],
},
// Buttons
secondaryButton: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
borderRadius: RADIUS.LG,
borderWidth: 1,
borderColor: colors.border.glassStrong,
backgroundColor: 'transparent',
},
secondaryButtonText: {
...TYPOGRAPHY.BODY,
color: colors.text.primary,
fontWeight: '600',
},
primaryButton: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[4],
paddingHorizontal: SPACING[6],
borderRadius: RADIUS.LG,
overflow: 'hidden',
},
primaryButtonText: {
...TYPOGRAPHY.HEADLINE,
color: '#FFFFFF',
fontWeight: '700',
},
buttonIcon: {
marginRight: SPACING[2],
},
// Celebration
celebrationSection: {
alignItems: 'center',
paddingVertical: SPACING[8],
},
celebrationEmoji: {
fontSize: 64,
marginBottom: SPACING[4],
},
celebrationTitle: {
...TYPOGRAPHY.TITLE_1,
color: TEXT.PRIMARY,
letterSpacing: 2,
},
ringsContainer: {
flexDirection: 'row',
marginTop: SPACING[6],
gap: SPACING[4],
},
ring: {
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 2,
borderColor: 'rgba(255, 255, 255, 0.2)',
},
ring1: {
borderColor: BRAND.PRIMARY,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
},
ring2: {
borderColor: '#30D158',
backgroundColor: 'rgba(48, 209, 88, 0.15)',
},
ring3: {
borderColor: '#5AC8FA',
backgroundColor: 'rgba(90, 200, 250, 0.15)',
},
ringEmoji: {
fontSize: 28,
},
// Celebration
celebrationSection: {
alignItems: 'center',
paddingVertical: SPACING[8],
},
celebrationEmoji: {
fontSize: 64,
marginBottom: SPACING[4],
},
celebrationTitle: {
...TYPOGRAPHY.TITLE_1,
color: colors.text.primary,
letterSpacing: 2,
},
ringsContainer: {
flexDirection: 'row',
marginTop: SPACING[6],
gap: SPACING[4],
},
ring: {
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: colors.border.glass,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 2,
borderColor: colors.border.glassStrong,
},
ring1: {
borderColor: BRAND.PRIMARY,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
},
ring2: {
borderColor: '#30D158',
backgroundColor: 'rgba(48, 209, 88, 0.15)',
},
ring3: {
borderColor: '#5AC8FA',
backgroundColor: 'rgba(90, 200, 250, 0.15)',
},
ringEmoji: {
fontSize: 28,
},
// Stats Grid
statsGrid: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: SPACING[6],
},
statCard: {
width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[4]) / 3,
padding: SPACING[3],
borderRadius: RADIUS.LG,
alignItems: 'center',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
overflow: 'hidden',
},
statValue: {
...TYPOGRAPHY.TITLE_1,
color: TEXT.PRIMARY,
marginTop: SPACING[2],
},
statLabel: {
...TYPOGRAPHY.CAPTION_2,
color: TEXT.TERTIARY,
marginTop: SPACING[1],
},
// Stats Grid
statsGrid: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: SPACING[6],
},
statCard: {
width: (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[4]) / 3,
padding: SPACING[3],
borderRadius: RADIUS.LG,
alignItems: 'center',
borderWidth: 1,
borderColor: colors.border.glass,
overflow: 'hidden',
},
statValue: {
...TYPOGRAPHY.TITLE_1,
color: colors.text.primary,
marginTop: SPACING[2],
},
statLabel: {
...TYPOGRAPHY.CAPTION_2,
color: colors.text.tertiary,
marginTop: SPACING[1],
},
// Burn Bar
burnBarContainer: {
marginBottom: SPACING[6],
},
burnBarTitle: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
},
burnBarResult: {
...TYPOGRAPHY.BODY,
color: BRAND.PRIMARY,
marginTop: SPACING[1],
marginBottom: SPACING[3],
},
burnBarTrack: {
height: 8,
backgroundColor: DARK.SURFACE,
borderRadius: 4,
overflow: 'hidden',
},
burnBarFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 4,
},
// Burn Bar
burnBarContainer: {
marginBottom: SPACING[6],
},
burnBarTitle: {
...TYPOGRAPHY.HEADLINE,
color: colors.text.tertiary,
},
burnBarResult: {
...TYPOGRAPHY.BODY,
color: BRAND.PRIMARY,
marginTop: SPACING[1],
marginBottom: SPACING[3],
},
burnBarTrack: {
height: 8,
backgroundColor: colors.bg.surface,
borderRadius: 4,
overflow: 'hidden',
},
burnBarFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 4,
},
// Divider
divider: {
height: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
marginVertical: SPACING[2],
},
// Divider
divider: {
height: 1,
backgroundColor: colors.border.glass,
marginVertical: SPACING[2],
},
// Streak
streakSection: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[4],
gap: SPACING[4],
},
streakBadge: {
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
streakInfo: {
flex: 1,
},
streakTitle: {
...TYPOGRAPHY.TITLE_2,
color: TEXT.PRIMARY,
},
streakSubtitle: {
...TYPOGRAPHY.BODY,
color: TEXT.TERTIARY,
marginTop: SPACING[1],
},
// Streak
streakSection: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[4],
gap: SPACING[4],
},
streakBadge: {
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
streakInfo: {
flex: 1,
},
streakTitle: {
...TYPOGRAPHY.TITLE_2,
color: colors.text.primary,
},
streakSubtitle: {
...TYPOGRAPHY.BODY,
color: colors.text.tertiary,
marginTop: SPACING[1],
},
// Share
shareSection: {
paddingVertical: SPACING[4],
alignItems: 'center',
},
// Share
shareSection: {
paddingVertical: SPACING[4],
alignItems: 'center',
},
// Recommended
recommendedSection: {
paddingVertical: SPACING[4],
},
recommendedTitle: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
marginBottom: SPACING[4],
},
recommendedGrid: {
flexDirection: 'row',
gap: SPACING[3],
},
recommendedCard: {
flex: 1,
padding: SPACING[3],
borderRadius: RADIUS.LG,
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
overflow: 'hidden',
},
recommendedThumb: {
width: '100%',
aspectRatio: 1,
borderRadius: RADIUS.MD,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
overflow: 'hidden',
},
recommendedInitial: {
...TYPOGRAPHY.TITLE_1,
color: TEXT.PRIMARY,
},
recommendedTitleText: {
...TYPOGRAPHY.CARD_TITLE,
color: TEXT.PRIMARY,
},
recommendedDurationText: {
...TYPOGRAPHY.CARD_METADATA,
color: TEXT.TERTIARY,
},
// Recommended
recommendedSection: {
paddingVertical: SPACING[4],
},
recommendedTitle: {
...TYPOGRAPHY.HEADLINE,
color: colors.text.primary,
marginBottom: SPACING[4],
},
recommendedGrid: {
flexDirection: 'row',
gap: SPACING[3],
},
recommendedCard: {
flex: 1,
padding: SPACING[3],
borderRadius: RADIUS.LG,
borderWidth: 1,
borderColor: colors.border.glass,
overflow: 'hidden',
},
recommendedThumb: {
width: '100%',
aspectRatio: 1,
borderRadius: RADIUS.MD,
alignItems: 'center',
justifyContent: 'center',
marginBottom: SPACING[2],
overflow: 'hidden',
},
recommendedInitial: {
...TYPOGRAPHY.TITLE_1,
color: colors.text.primary,
},
recommendedTitleText: {
...TYPOGRAPHY.CARD_TITLE,
color: colors.text.primary,
},
recommendedDurationText: {
...TYPOGRAPHY.CARD_METADATA,
color: colors.text.tertiary,
},
// Bottom Bar
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
borderTopWidth: 1,
borderTopColor: 'rgba(255, 255, 255, 0.1)',
},
homeButtonContainer: {
height: 56,
justifyContent: 'center',
},
})
// Bottom Bar
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
borderTopWidth: 1,
borderTopColor: colors.border.glass,
},
homeButtonContainer: {
height: 56,
justifyContent: 'center',
},
})
}

727
app/onboarding.tsx
View File

File diff suppressed because it is too large Load Diff

729
app/player/[id].tsx
View File

@@ -2,18 +2,21 @@
* TabataFit Player Screen
* Full-screen workout player with timer overlay
* Wired to shared data + useTimer hook
* FORCE DARK — always uses darkColors regardless of system theme
*/
import React, { useRef, useEffect, useCallback, useState } from 'react'
import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react'
import {
View,
Text,
StyleSheet,
Pressable,
Animated,
Easing,
Dimensions,
StatusBar,
} from 'react-native'
import Svg, { Circle } from 'react-native-svg'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { LinearGradient } from 'expo-linear-gradient'
@@ -21,25 +24,22 @@ import { BlurView } from 'expo-blur'
import { useKeepAwake } from 'expo-keep-awake'
import Ionicons from '@expo/vector-icons/Ionicons'
import { useTranslation } from 'react-i18next'
import { useTimer } from '@/src/shared/hooks/useTimer'
import { useHaptics } from '@/src/shared/hooks/useHaptics'
import { useAudio } from '@/src/shared/hooks/useAudio'
import { useActivityStore } from '@/src/shared/stores'
import { getWorkoutById, getTrainerById } from '@/src/shared/data'
import { getWorkoutById } from '@/src/shared/data'
import { useTranslatedWorkout } from '@/src/shared/data/useTranslatedData'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
PHASE_COLORS,
GRADIENTS,
} from '@/src/shared/constants/colors'
import { track } from '@/src/shared/services/analytics'
import { BRAND, PHASE_COLORS, GRADIENTS, darkColors } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { DURATION, EASE, SPRING } from '@/src/shared/constants/animations'
import { SPRING } from '@/src/shared/constants/animations'
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
@@ -49,6 +49,8 @@ const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window')
type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'
const AnimatedCircle = Animated.createAnimatedComponent(Circle)
function TimerRing({
progress,
phase,
@@ -58,48 +60,78 @@ function TimerRing({
phase: TimerPhase
size?: number
}) {
const colors = darkColors
const strokeWidth = 12
const radius = (size - strokeWidth) / 2
const circumference = 2 * Math.PI * radius
const phaseColor = PHASE_COLORS[phase].fill
const animatedProgress = useRef(new Animated.Value(0)).current
const prevProgress = useRef(0)
useEffect(() => {
// If progress jumped backwards (new phase started), snap instantly
if (progress < prevProgress.current - 0.05) {
animatedProgress.setValue(progress)
} else {
Animated.timing(animatedProgress, {
toValue: progress,
duration: 1000,
easing: Easing.linear,
useNativeDriver: false,
}).start()
}
prevProgress.current = progress
}, [progress])
const strokeDashoffset = animatedProgress.interpolate({
inputRange: [0, 1],
outputRange: [circumference, 0],
})
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
return (
<View style={[timerStyles.timerRingContainer, { width: size, height: size }]}>
<View
style={[
timerStyles.timerRingBg,
{
width: size,
height: size,
borderRadius: size / 2,
borderWidth: strokeWidth,
},
]}
/>
<View style={timerStyles.timerRingContent}>
<View
style={[
timerStyles.timerProgressRing,
{
width: size - strokeWidth * 2,
height: size - strokeWidth * 2,
borderRadius: (size - strokeWidth * 2) / 2,
borderColor: phaseColor,
borderTopWidth: strokeWidth,
opacity: progress,
},
]}
<Svg width={size} height={size}>
{/* Background track */}
<Circle
cx={size / 2}
cy={size / 2}
r={radius}
stroke={colors.border.glass}
strokeWidth={strokeWidth}
fill="none"
/>
</View>
{/* Progress arc */}
<AnimatedCircle
cx={size / 2}
cy={size / 2}
r={radius}
stroke={phaseColor}
strokeWidth={strokeWidth}
fill="none"
strokeLinecap="round"
strokeDasharray={circumference}
strokeDashoffset={strokeDashoffset}
rotation="-90"
origin={`${size / 2}, ${size / 2}`}
/>
</Svg>
</View>
)
}
function PhaseIndicator({ phase }: { phase: TimerPhase }) {
const { t } = useTranslation()
const colors = darkColors
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
const phaseColor = PHASE_COLORS[phase].fill
const phaseLabels: Record<TimerPhase, string> = {
PREP: 'GET READY',
WORK: 'WORK',
REST: 'REST',
COMPLETE: 'COMPLETE',
PREP: t('screens:player.phases.prep'),
WORK: t('screens:player.phases.work'),
REST: t('screens:player.phases.rest'),
COMPLETE: t('screens:player.phases.complete'),
}
return (
@@ -116,13 +148,16 @@ function ExerciseDisplay({
exercise: string
nextExercise?: string
}) {
const { t } = useTranslation()
const colors = darkColors
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
return (
<View style={timerStyles.exerciseDisplay}>
<Text style={timerStyles.currentExerciseLabel}>Current</Text>
<Text style={timerStyles.currentExerciseLabel}>{t('screens:player.current')}</Text>
<Text style={timerStyles.currentExercise}>{exercise}</Text>
{nextExercise && (
<View style={timerStyles.nextExerciseContainer}>
<Text style={timerStyles.nextExerciseLabel}>Next: </Text>
<Text style={timerStyles.nextExerciseLabel}>{t('screens:player.next')}</Text>
<Text style={timerStyles.nextExercise}>{nextExercise}</Text>
</View>
)}
@@ -131,10 +166,13 @@ function ExerciseDisplay({
}
function RoundIndicator({ current, total }: { current: number; total: number }) {
const { t } = useTranslation()
const colors = darkColors
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
return (
<View style={timerStyles.roundIndicator}>
<Text style={timerStyles.roundText}>
Round <Text style={timerStyles.roundCurrent}>{current}</Text>/{total}
{t('screens:player.round')} <Text style={timerStyles.roundCurrent}>{current}</Text>/{total}
</Text>
</View>
)
@@ -151,6 +189,8 @@ function ControlButton({
size?: number
variant?: 'primary' | 'secondary' | 'danger'
}) {
const colors = darkColors
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
const scaleAnim = useRef(new Animated.Value(1)).current
const handlePressIn = () => {
@@ -174,7 +214,7 @@ function ControlButton({
? BRAND.PRIMARY
: variant === 'danger'
? '#FF3B30'
: 'rgba(255, 255, 255, 0.1)'
: colors.border.glass
return (
<Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
@@ -185,7 +225,7 @@ function ControlButton({
style={[timerStyles.controlButton, { width: size, height: size, borderRadius: size / 2 }]}
>
<View style={[timerStyles.controlButtonBg, { backgroundColor }]} />
<Ionicons name={icon} size={size * 0.4} color={TEXT.PRIMARY} />
<Ionicons name={icon} size={size * 0.4} color={colors.text.primary} />
</Pressable>
</Animated.View>
)
@@ -198,19 +238,22 @@ function BurnBar({
currentCalories: number
avgCalories: number
}) {
const { t } = useTranslation()
const colors = darkColors
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
const percentage = Math.min((currentCalories / avgCalories) * 100, 100)
return (
<View style={timerStyles.burnBar}>
<View style={timerStyles.burnBarHeader}>
<Text style={timerStyles.burnBarLabel}>Burn Bar</Text>
<Text style={timerStyles.burnBarValue}>{currentCalories} cal</Text>
<Text style={timerStyles.burnBarLabel}>{t('screens:player.burnBar')}</Text>
<Text style={timerStyles.burnBarValue}>{t('units.calUnit', { count: currentCalories })}</Text>
</View>
<View style={timerStyles.burnBarTrack}>
<View style={[timerStyles.burnBarFill, { width: `${percentage}%` }]} />
<View style={[timerStyles.burnBarAvg, { left: '50%' }]} />
</View>
<Text style={timerStyles.burnBarAvgLabel}>Community avg: {avgCalories} cal</Text>
<Text style={timerStyles.burnBarAvgLabel}>{t('screens:player.communityAvg', { calories: avgCalories })}</Text>
</View>
)
}
@@ -225,44 +268,57 @@ export default function PlayerScreen() {
const { id } = useLocalSearchParams<{ id: string }>()
const insets = useSafeAreaInsets()
const haptics = useHaptics()
const { t } = useTranslation()
const addWorkoutResult = useActivityStore((s) => s.addWorkoutResult)
const workout = getWorkoutById(id ?? '1')
const trainer = workout ? getTrainerById(workout.trainerId) : null
const colors = darkColors
const styles = useMemo(() => createStyles(colors), [colors])
const timerStyles = useMemo(() => createTimerStyles(colors), [colors])
const timer = useTimer(workout ?? null)
const rawWorkout = getWorkoutById(id ?? '1')
const workout = useTranslatedWorkout(rawWorkout)
const timer = useTimer(rawWorkout ?? null)
const audio = useAudio()
const [showControls, setShowControls] = useState(true)
// Animation refs
const timerScaleAnim = useRef(new Animated.Value(0.8)).current
const glowAnim = useRef(new Animated.Value(0)).current
const phaseColor = PHASE_COLORS[timer.phase].fill
// Format time
const formatTime = (seconds: number) => {
const mins = Math.floor(seconds / 60)
const secs = seconds % 60
return mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `${secs}`
return `${mins}:${secs.toString().padStart(2, '0')}`
}
// Start timer
const startTimer = useCallback(() => {
timer.start()
haptics.buttonTap()
}, [timer, haptics])
if (workout) {
track('workout_started', {
workout_id: workout.id,
workout_title: workout.title,
duration: workout.duration,
level: workout.level,
})
}
}, [timer, haptics, workout])
// Pause/Resume
const togglePause = useCallback(() => {
const workoutId = workout?.id ?? id ?? ''
if (timer.isPaused) {
timer.resume()
track('workout_resumed', { workout_id: workoutId })
} else {
timer.pause()
track('workout_paused', { workout_id: workoutId })
}
haptics.selection()
}, [timer, haptics])
}, [timer, haptics, workout, id])
// Stop workout
const stopWorkout = useCallback(() => {
@@ -274,6 +330,15 @@ export default function PlayerScreen() {
// Complete workout - go to celebration screen
const completeWorkout = useCallback(() => {
haptics.workoutComplete()
if (workout) {
track('workout_completed', {
workout_id: workout.id,
workout_title: workout.title,
calories: timer.calories,
duration: workout.duration,
rounds: workout.rounds,
})
}
if (workout) {
addWorkoutResult({
id: Date.now().toString(),
@@ -301,30 +366,12 @@ export default function PlayerScreen() {
// Entrance animation
useEffect(() => {
Animated.parallel([
Animated.spring(timerScaleAnim, {
toValue: 1,
friction: 6,
tension: 100,
useNativeDriver: true,
}),
Animated.loop(
Animated.sequence([
Animated.timing(glowAnim, {
toValue: 1,
duration: DURATION.BREATH,
easing: EASE.EASE_IN_OUT,
useNativeDriver: false,
}),
Animated.timing(glowAnim, {
toValue: 0,
duration: DURATION.BREATH,
easing: EASE.EASE_IN_OUT,
useNativeDriver: false,
}),
])
),
]).start()
Animated.spring(timerScaleAnim, {
toValue: 1,
friction: 6,
tension: 100,
useNativeDriver: true,
}).start()
}, [])
// Phase change animation + audio
@@ -351,28 +398,18 @@ export default function PlayerScreen() {
}
}, [timer.timeRemaining])
const glowOpacity = glowAnim.interpolate({
inputRange: [0, 1],
outputRange: [0.3, 0.6],
})
return (
<View style={styles.container}>
<StatusBar hidden />
{/* Background gradient */}
<LinearGradient
colors={[DARK.BASE, DARK.SURFACE]}
colors={[colors.bg.base, colors.bg.surface]}
style={StyleSheet.absoluteFill}
/>
{/* Phase glow */}
<Animated.View
style={[
styles.phaseGlow,
{ opacity: glowOpacity, backgroundColor: phaseColor },
]}
/>
{/* Phase background color */}
<View style={[styles.phaseBackground, { backgroundColor: phaseColor }]} />
{/* Main content */}
<Pressable style={styles.content} onPress={toggleControls}>
@@ -380,12 +417,12 @@ export default function PlayerScreen() {
{showControls && (
<View style={[styles.header, { paddingTop: insets.top + SPACING[4] }]}>
<Pressable onPress={stopWorkout} style={styles.closeButton}>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<Ionicons name="close" size={24} color={TEXT.PRIMARY} />
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<Ionicons name="close" size={24} color={colors.text.primary} />
</Pressable>
<View style={styles.headerCenter}>
<Text style={styles.workoutTitle}>{workout?.title ?? 'Workout'}</Text>
<Text style={styles.workoutTrainer}>with {trainer?.name ?? 'Coach'}</Text>
<Text style={styles.workoutTrainer}>{t('durationLevel', { duration: workout?.duration ?? 0, level: t(`levels.${(workout?.level ?? 'beginner').toLowerCase()}`) })}</Text>
</View>
<View style={styles.closeButton} />
</View>
@@ -418,20 +455,20 @@ export default function PlayerScreen() {
{/* Complete state */}
{timer.isComplete && (
<View style={styles.completeContainer}>
<Text style={styles.completeTitle}>Workout Complete!</Text>
<Text style={styles.completeSubtitle}>Great job!</Text>
<Text style={styles.completeTitle}>{t('screens:player.workoutComplete')}</Text>
<Text style={styles.completeSubtitle}>{t('screens:player.greatJob')}</Text>
<View style={styles.completeStats}>
<View style={styles.completeStat}>
<Text style={styles.completeStatValue}>{timer.totalRounds}</Text>
<Text style={styles.completeStatLabel}>Rounds</Text>
<Text style={styles.completeStatLabel}>{t('screens:player.rounds')}</Text>
</View>
<View style={styles.completeStat}>
<Text style={styles.completeStatValue}>{timer.calories}</Text>
<Text style={styles.completeStatLabel}>Calories</Text>
<Text style={styles.completeStatLabel}>{t('screens:player.calories')}</Text>
</View>
<View style={styles.completeStat}>
<Text style={styles.completeStatValue}>{workout?.duration ?? 4}</Text>
<Text style={styles.completeStatLabel}>Minutes</Text>
<Text style={styles.completeStatLabel}>{t('screens:player.minutes')}</Text>
</View>
</View>
</View>
@@ -484,7 +521,7 @@ export default function PlayerScreen() {
{/* Burn Bar */}
{showControls && timer.isRunning && !timer.isComplete && (
<View style={[styles.burnBarContainer, { bottom: insets.bottom + 140 }]}>
<BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<BurnBar currentCalories={timer.calories} avgCalories={workout?.calories ?? 45} />
</View>
)}
@@ -497,260 +534,250 @@ export default function PlayerScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const timerStyles = StyleSheet.create({
timerRingContainer: {
alignItems: 'center',
justifyContent: 'center',
},
timerRingBg: {
borderColor: 'rgba(255, 255, 255, 0.1)',
position: 'absolute',
},
timerRingContent: {
position: 'absolute',
},
timerProgressRing: {
position: 'absolute',
},
timerTextContainer: {
position: 'absolute',
alignItems: 'center',
},
phaseIndicator: {
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[1],
borderRadius: RADIUS.FULL,
marginBottom: SPACING[2],
},
phaseText: {
...TYPOGRAPHY.CALLOUT,
fontWeight: '700',
letterSpacing: 1,
},
timerTime: {
...TYPOGRAPHY.TIMER_NUMBER,
color: TEXT.PRIMARY,
},
roundIndicator: {
marginTop: SPACING[2],
},
roundText: {
...TYPOGRAPHY.BODY,
color: TEXT.TERTIARY,
},
roundCurrent: {
color: TEXT.PRIMARY,
fontWeight: '700',
},
function createTimerStyles(colors: ThemeColors) {
return StyleSheet.create({
timerRingContainer: {
alignItems: 'center',
justifyContent: 'center',
},
timerTextContainer: {
position: 'absolute',
alignItems: 'center',
},
phaseIndicator: {
paddingHorizontal: SPACING[4],
paddingVertical: SPACING[1],
borderRadius: RADIUS.FULL,
marginBottom: SPACING[2],
},
phaseText: {
...TYPOGRAPHY.CALLOUT,
fontWeight: '700',
letterSpacing: 1,
},
timerTime: {
...TYPOGRAPHY.TIMER_NUMBER,
color: colors.text.primary,
},
roundIndicator: {
marginTop: SPACING[2],
},
roundText: {
...TYPOGRAPHY.BODY,
color: colors.text.tertiary,
},
roundCurrent: {
color: colors.text.primary,
fontWeight: '700',
},
// Exercise
exerciseDisplay: {
alignItems: 'center',
marginTop: SPACING[6],
paddingHorizontal: SPACING[6],
},
currentExerciseLabel: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
textTransform: 'uppercase',
letterSpacing: 1,
},
currentExercise: {
...TYPOGRAPHY.TITLE_1,
color: TEXT.PRIMARY,
textAlign: 'center',
marginTop: SPACING[1],
},
nextExerciseContainer: {
flexDirection: 'row',
marginTop: SPACING[2],
},
nextExerciseLabel: {
...TYPOGRAPHY.BODY,
color: TEXT.TERTIARY,
},
nextExercise: {
...TYPOGRAPHY.BODY,
color: BRAND.PRIMARY,
},
// Exercise
exerciseDisplay: {
alignItems: 'center',
marginTop: SPACING[6],
paddingHorizontal: SPACING[6],
},
currentExerciseLabel: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
textTransform: 'uppercase',
letterSpacing: 1,
},
currentExercise: {
...TYPOGRAPHY.TITLE_1,
color: colors.text.primary,
textAlign: 'center',
marginTop: SPACING[1],
},
nextExerciseContainer: {
flexDirection: 'row',
marginTop: SPACING[2],
},
nextExerciseLabel: {
...TYPOGRAPHY.BODY,
color: colors.text.tertiary,
},
nextExercise: {
...TYPOGRAPHY.BODY,
color: BRAND.PRIMARY,
},
// Controls
controlButton: {
alignItems: 'center',
justifyContent: 'center',
},
controlButtonBg: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 100,
},
// Controls
controlButton: {
alignItems: 'center',
justifyContent: 'center',
},
controlButtonBg: {
position: 'absolute',
width: '100%',
height: '100%',
borderRadius: 100,
},
// Burn Bar
burnBar: {},
burnBarHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: SPACING[2],
},
burnBarLabel: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
},
burnBarValue: {
...TYPOGRAPHY.CALLOUT,
color: BRAND.PRIMARY,
fontWeight: '600',
},
burnBarTrack: {
height: 6,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
borderRadius: 3,
overflow: 'hidden',
},
burnBarFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 3,
},
burnBarAvg: {
position: 'absolute',
top: -2,
width: 2,
height: 10,
backgroundColor: TEXT.TERTIARY,
},
burnBarAvgLabel: {
...TYPOGRAPHY.CAPTION_2,
color: TEXT.TERTIARY,
marginTop: SPACING[1],
textAlign: 'right',
},
})
// Burn Bar
burnBar: {},
burnBarHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: SPACING[2],
},
burnBarLabel: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
},
burnBarValue: {
...TYPOGRAPHY.CALLOUT,
color: BRAND.PRIMARY,
fontWeight: '600',
},
burnBarTrack: {
height: 6,
backgroundColor: colors.border.glass,
borderRadius: 3,
overflow: 'hidden',
},
burnBarFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 3,
},
burnBarAvg: {
position: 'absolute',
top: -2,
width: 2,
height: 10,
backgroundColor: colors.text.tertiary,
},
burnBarAvgLabel: {
...TYPOGRAPHY.CAPTION_2,
color: colors.text.tertiary,
marginTop: SPACING[1],
textAlign: 'right',
},
})
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
phaseGlow: {
position: 'absolute',
top: -100,
left: -100,
right: -100,
bottom: -100,
borderRadius: 500,
},
content: {
flex: 1,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
phaseBackground: {
...StyleSheet.absoluteFillObject,
opacity: 0.15,
},
content: {
flex: 1,
},
// Header
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: SPACING[4],
},
closeButton: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
headerCenter: {
alignItems: 'center',
},
workoutTitle: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
},
workoutTrainer: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
},
// Header
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: SPACING[4],
},
closeButton: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.border.glass,
},
headerCenter: {
alignItems: 'center',
},
workoutTitle: {
...TYPOGRAPHY.HEADLINE,
color: colors.text.primary,
},
workoutTrainer: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
},
// Timer
timerContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: SPACING[8],
},
// Timer
timerContainer: {
alignItems: 'center',
justifyContent: 'center',
marginTop: SPACING[8],
},
// Controls
controls: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
alignItems: 'center',
},
controlsRow: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[6],
},
// Controls
controls: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
alignItems: 'center',
},
controlsRow: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[6],
},
// Burn Bar
burnBarContainer: {
position: 'absolute',
left: SPACING[4],
right: SPACING[4],
height: 72,
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
padding: SPACING[3],
},
// Burn Bar
burnBarContainer: {
position: 'absolute',
left: SPACING[4],
right: SPACING[4],
height: 72,
borderRadius: RADIUS.LG,
overflow: 'hidden',
borderWidth: 1,
borderColor: colors.border.glass,
padding: SPACING[3],
},
// Complete
completeContainer: {
alignItems: 'center',
marginTop: SPACING[8],
},
completeTitle: {
...TYPOGRAPHY.LARGE_TITLE,
color: TEXT.PRIMARY,
},
completeSubtitle: {
...TYPOGRAPHY.TITLE_3,
color: BRAND.PRIMARY,
marginTop: SPACING[1],
},
completeStats: {
flexDirection: 'row',
marginTop: SPACING[6],
gap: SPACING[8],
},
completeStat: {
alignItems: 'center',
},
completeStatValue: {
...TYPOGRAPHY.TITLE_1,
color: TEXT.PRIMARY,
},
completeStatLabel: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
marginTop: SPACING[1],
},
doneButton: {
width: 200,
height: 56,
borderRadius: RADIUS.GLASS_BUTTON,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
...SHADOW.BRAND_GLOW,
},
doneButtonText: {
...TYPOGRAPHY.BUTTON_MEDIUM,
color: TEXT.PRIMARY,
letterSpacing: 1,
},
})
// Complete
completeContainer: {
alignItems: 'center',
marginTop: SPACING[8],
},
completeTitle: {
...TYPOGRAPHY.LARGE_TITLE,
color: colors.text.primary,
},
completeSubtitle: {
...TYPOGRAPHY.TITLE_3,
color: BRAND.PRIMARY,
marginTop: SPACING[1],
},
completeStats: {
flexDirection: 'row',
marginTop: SPACING[6],
gap: SPACING[8],
},
completeStat: {
alignItems: 'center',
},
completeStatValue: {
...TYPOGRAPHY.TITLE_1,
color: colors.text.primary,
},
completeStatLabel: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
marginTop: SPACING[1],
},
doneButton: {
width: 200,
height: 56,
borderRadius: RADIUS.GLASS_BUTTON,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
...colors.shadow.BRAND_GLOW,
},
doneButtonText: {
...TYPOGRAPHY.BUTTON_MEDIUM,
color: colors.text.primary,
letterSpacing: 1,
},
})
}

531
app/workout/[id].tsx
View File

@@ -3,25 +3,23 @@
* Dynamic data via route params
*/
import { useState } from 'react'
import { useState, useEffect, useMemo } from 'react'
import { View, Text as RNText, StyleSheet, ScrollView, Pressable } from 'react-native'
import { useRouter, useLocalSearchParams } 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 { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { getWorkoutById, getTrainerById } from '@/src/shared/data'
import { track } from '@/src/shared/services/analytics'
import { getWorkoutById } from '@/src/shared/data'
import { useTranslatedWorkout, useMusicVibeLabel } from '@/src/shared/data/useTranslatedData'
import { VideoPlayer } from '@/src/shared/components/VideoPlayer'
import {
BRAND,
DARK,
TEXT,
GLASS,
SHADOW,
} from '@/src/shared/constants/colors'
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'
@@ -34,20 +32,36 @@ export default function WorkoutDetailScreen() {
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const { t } = useTranslation()
const { id } = useLocalSearchParams<{ id: string }>()
const [isSaved, setIsSaved] = useState(false)
const workout = getWorkoutById(id ?? '1')
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const rawWorkout = getWorkoutById(id ?? '1')
const workout = useTranslatedWorkout(rawWorkout)
const musicVibeLabel = useMusicVibeLabel(rawWorkout?.musicVibe ?? '')
useEffect(() => {
if (workout) {
track('workout_detail_viewed', {
workout_id: workout.id,
workout_title: workout.title,
level: workout.level,
duration: workout.duration,
})
}
}, [workout?.id])
if (!workout) {
return (
<View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
<RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Workout not found</RNText>
<RNText style={{ color: colors.text.primary, fontSize: 17 }}>{t('screens:workout.notFound')}</RNText>
</View>
)
}
const trainer = getTrainerById(workout.trainerId)
const handleStartWorkout = () => {
haptics.phaseChange()
router.push(`/player/${workout.id}`)
@@ -76,7 +90,7 @@ export default function WorkoutDetailScreen() {
<View style={styles.videoPreview}>
<VideoPlayer
videoUrl={workout.videoUrl}
gradientColors={[trainer?.color ?? BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
gradientColors={[BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
mode="preview"
style={StyleSheet.absoluteFill}
/>
@@ -85,33 +99,33 @@ export default function WorkoutDetailScreen() {
style={StyleSheet.absoluteFill}
/>
{/* Header overlay */}
{/* Header overlay — on video, keep white */}
<View style={styles.headerOverlay}>
<Pressable onPress={handleGoBack} style={styles.headerButton}>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<Ionicons name="chevron-back" size={24} color="#FFFFFF" />
</Pressable>
<View style={styles.headerRight}>
<Pressable onPress={toggleSave} style={styles.headerButton}>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<Ionicons
name={isSaved ? 'heart' : 'heart-outline'}
size={24}
color={isSaved ? '#FF3B30' : TEXT.PRIMARY}
color={isSaved ? '#FF3B30' : '#FFFFFF'}
/>
</Pressable>
<Pressable style={styles.headerButton}>
<BlurView intensity={GLASS.BLUR_LIGHT} tint="dark" style={StyleSheet.absoluteFill} />
<Ionicons name="ellipsis-horizontal" size={24} color={TEXT.PRIMARY} />
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<Ionicons name="ellipsis-horizontal" size={24} color="#FFFFFF" />
</Pressable>
</View>
</View>
{/* Trainer preview */}
{/* Workout icon — on brand bg, keep white */}
<View style={styles.trainerPreview}>
<View style={[styles.trainerAvatarLarge, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
<RNText style={styles.trainerInitial}>{trainer?.name[0] ?? 'T'}</RNText>
<View style={[styles.trainerAvatarLarge, { backgroundColor: BRAND.PRIMARY }]}>
<Ionicons name="flame" size={36} color="#FFFFFF" />
</View>
</View>
</View>
@@ -122,24 +136,19 @@ export default function WorkoutDetailScreen() {
{/* Quick stats */}
<View style={styles.quickStats}>
<View style={styles.statItem}>
<Ionicons name="person" size={16} color={BRAND.PRIMARY} />
<RNText style={styles.statText}>{trainer?.name ?? ''}</RNText>
</View>
<RNText style={styles.statDot}>•</RNText>
<View style={styles.statItem}>
<Ionicons name="barbell" size={16} color={BRAND.PRIMARY} />
<RNText style={styles.statText}>{workout.level}</RNText>
<RNText style={styles.statText}>{t(`levels.${workout.level.toLowerCase()}`)}</RNText>
</View>
<RNText style={styles.statDot}>•</RNText>
<View style={styles.statItem}>
<Ionicons name="time" size={16} color={BRAND.PRIMARY} />
<RNText style={styles.statText}>{workout.duration} min</RNText>
<RNText style={styles.statText}>{t('units.minUnit', { count: workout.duration })}</RNText>
</View>
<RNText style={styles.statDot}>•</RNText>
<View style={styles.statItem}>
<Ionicons name="flame" size={16} color={BRAND.PRIMARY} />
<RNText style={styles.statText}>{workout.calories} cal</RNText>
<RNText style={styles.statText}>{t('units.calUnit', { count: workout.calories })}</RNText>
</View>
</View>
</View>
@@ -148,7 +157,7 @@ export default function WorkoutDetailScreen() {
{/* Equipment */}
<View style={styles.section}>
<RNText style={styles.sectionTitle}>What You'll Need</RNText>
<RNText style={styles.sectionTitle}>{t('screens:workout.whatYoullNeed')}</RNText>
{workout.equipment.map((item, index) => (
<View key={index} style={styles.equipmentItem}>
<Ionicons name="checkmark-circle" size={20} color="#30D158" />
@@ -161,7 +170,7 @@ export default function WorkoutDetailScreen() {
{/* Exercises */}
<View style={styles.section}>
<RNText style={styles.sectionTitle}>Exercises ({workout.rounds} rounds)</RNText>
<RNText style={styles.sectionTitle}>{t('screens:workout.exercises', { count: workout.rounds })}</RNText>
<View style={styles.exercisesList}>
{workout.exercises.map((exercise, index) => (
<View key={index} style={styles.exerciseRow}>
@@ -173,8 +182,8 @@ export default function WorkoutDetailScreen() {
</View>
))}
<View style={styles.repeatNote}>
<Ionicons name="repeat" size={16} color={TEXT.TERTIARY} />
<RNText style={styles.repeatText}>Repeat × {repeatCount} rounds</RNText>
<Ionicons name="repeat" size={16} color={colors.text.tertiary} />
<RNText style={styles.repeatText}>{t('screens:workout.repeatRounds', { count: repeatCount })}</RNText>
</View>
</View>
</View>
@@ -183,14 +192,14 @@ export default function WorkoutDetailScreen() {
{/* Music */}
<View style={styles.section}>
<RNText style={styles.sectionTitle}>Music</RNText>
<RNText style={styles.sectionTitle}>{t('screens:workout.music')}</RNText>
<View style={styles.musicCard}>
<View style={styles.musicIcon}>
<Ionicons name="musical-notes" size={24} color={BRAND.PRIMARY} />
</View>
<View style={styles.musicInfo}>
<RNText style={styles.musicName}>{workout.musicVibe.charAt(0).toUpperCase() + workout.musicVibe.slice(1)} Mix</RNText>
<RNText style={styles.musicDescription}>Curated for your workout</RNText>
<RNText style={styles.musicName}>{t('screens:workout.musicMix', { vibe: musicVibeLabel })}</RNText>
<RNText style={styles.musicDescription}>{t('screens:workout.curatedForWorkout')}</RNText>
</View>
</View>
</View>
@@ -198,7 +207,7 @@ export default function WorkoutDetailScreen() {
{/* Fixed Start Button */}
<View style={[styles.bottomBar, { paddingBottom: insets.bottom + SPACING[4] }]}>
<BlurView intensity={GLASS.BLUR_HEAVY} tint="dark" style={StyleSheet.absoluteFill} />
<BlurView intensity={colors.glass.blurHeavy} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
<View style={styles.startButtonContainer}>
<Pressable
style={({ pressed }) => [
@@ -207,7 +216,7 @@ export default function WorkoutDetailScreen() {
]}
onPress={handleStartWorkout}
>
<RNText style={styles.startButtonText}>START WORKOUT</RNText>
<RNText style={styles.startButtonText}>{t('screens:workout.startWorkout')}</RNText>
</Pressable>
</View>
</View>
@@ -219,231 +228,233 @@ export default function WorkoutDetailScreen() {
// STYLES
// ═══════════════════════════════════════════════════════════════════════════
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
// Video Preview
videoPreview: {
height: 280,
marginHorizontal: -LAYOUT.SCREEN_PADDING,
marginBottom: SPACING[4],
backgroundColor: DARK.SURFACE,
},
headerOverlay: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: SPACING[4],
},
headerButton: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
headerRight: {
flexDirection: 'row',
gap: SPACING[2],
},
trainerPreview: {
position: 'absolute',
bottom: SPACING[4],
left: 0,
right: 0,
alignItems: 'center',
},
trainerAvatarLarge: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 3,
borderColor: TEXT.PRIMARY,
},
trainerInitial: {
...TYPOGRAPHY.HERO,
color: TEXT.PRIMARY,
},
// Video Preview
videoPreview: {
height: 280,
marginHorizontal: -LAYOUT.SCREEN_PADDING,
marginBottom: SPACING[4],
backgroundColor: colors.bg.surface,
},
headerOverlay: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: SPACING[4],
},
headerButton: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
borderWidth: 1,
borderColor: 'rgba(255, 255, 255, 0.1)',
},
headerRight: {
flexDirection: 'row',
gap: SPACING[2],
},
trainerPreview: {
position: 'absolute',
bottom: SPACING[4],
left: 0,
right: 0,
alignItems: 'center',
},
trainerAvatarLarge: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
borderWidth: 3,
borderColor: '#FFFFFF',
},
trainerInitial: {
...TYPOGRAPHY.HERO,
color: '#FFFFFF',
},
// Title Section
titleSection: {
marginBottom: SPACING[4],
},
title: {
...TYPOGRAPHY.LARGE_TITLE,
color: TEXT.PRIMARY,
marginBottom: SPACING[3],
},
quickStats: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
gap: SPACING[2],
},
statItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
statText: {
...TYPOGRAPHY.BODY,
color: TEXT.SECONDARY,
},
statDot: {
color: TEXT.TERTIARY,
},
// Title Section
titleSection: {
marginBottom: SPACING[4],
},
title: {
...TYPOGRAPHY.LARGE_TITLE,
color: colors.text.primary,
marginBottom: SPACING[3],
},
quickStats: {
flexDirection: 'row',
alignItems: 'center',
flexWrap: 'wrap',
gap: SPACING[2],
},
statItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[1],
},
statText: {
...TYPOGRAPHY.BODY,
color: colors.text.secondary,
},
statDot: {
color: colors.text.tertiary,
},
// Divider
divider: {
height: 1,
backgroundColor: 'rgba(255, 255, 255, 0.1)',
marginVertical: SPACING[2],
},
// Divider
divider: {
height: 1,
backgroundColor: colors.border.glass,
marginVertical: SPACING[2],
},
// Section
section: {
paddingVertical: SPACING[4],
},
sectionTitle: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
marginBottom: SPACING[3],
},
// Section
section: {
paddingVertical: SPACING[4],
},
sectionTitle: {
...TYPOGRAPHY.HEADLINE,
color: colors.text.primary,
marginBottom: SPACING[3],
},
// Equipment
equipmentItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[3],
marginBottom: SPACING[2],
},
equipmentText: {
...TYPOGRAPHY.BODY,
color: TEXT.SECONDARY,
},
// Equipment
equipmentItem: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[3],
marginBottom: SPACING[2],
},
equipmentText: {
...TYPOGRAPHY.BODY,
color: colors.text.secondary,
},
// Exercises
exercisesList: {
gap: SPACING[2],
},
exerciseRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: DARK.SURFACE,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
exerciseNumber: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
exerciseNumberText: {
...TYPOGRAPHY.CALLOUT,
color: BRAND.PRIMARY,
fontWeight: '700',
},
exerciseName: {
...TYPOGRAPHY.BODY,
color: TEXT.PRIMARY,
flex: 1,
},
exerciseDuration: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
},
repeatNote: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[2],
marginTop: SPACING[2],
paddingHorizontal: SPACING[2],
},
repeatText: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
},
// Exercises
exercisesList: {
gap: SPACING[2],
},
exerciseRow: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: colors.bg.surface,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
exerciseNumber: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
exerciseNumberText: {
...TYPOGRAPHY.CALLOUT,
color: BRAND.PRIMARY,
fontWeight: '700',
},
exerciseName: {
...TYPOGRAPHY.BODY,
color: colors.text.primary,
flex: 1,
},
exerciseDuration: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
},
repeatNote: {
flexDirection: 'row',
alignItems: 'center',
gap: SPACING[2],
marginTop: SPACING[2],
paddingHorizontal: SPACING[2],
},
repeatText: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
},
// Music
musicCard: {
flexDirection: 'row',
alignItems: 'center',
padding: SPACING[4],
backgroundColor: DARK.SURFACE,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
musicIcon: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
musicInfo: {
flex: 1,
},
musicName: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
},
musicDescription: {
...TYPOGRAPHY.CAPTION_1,
color: TEXT.TERTIARY,
marginTop: 2,
},
// Music
musicCard: {
flexDirection: 'row',
alignItems: 'center',
padding: SPACING[4],
backgroundColor: colors.bg.surface,
borderRadius: RADIUS.LG,
gap: SPACING[3],
},
musicIcon: {
width: 48,
height: 48,
borderRadius: 24,
backgroundColor: 'rgba(255, 107, 53, 0.15)',
alignItems: 'center',
justifyContent: 'center',
},
musicInfo: {
flex: 1,
},
musicName: {
...TYPOGRAPHY.HEADLINE,
color: colors.text.primary,
},
musicDescription: {
...TYPOGRAPHY.CAPTION_1,
color: colors.text.tertiary,
marginTop: 2,
},
// Bottom Bar
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
borderTopWidth: 1,
borderTopColor: 'rgba(255, 255, 255, 0.1)',
},
startButtonContainer: {
height: 56,
justifyContent: 'center',
},
// Bottom Bar
bottomBar: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[4],
borderTopWidth: 1,
borderTopColor: colors.border.glass,
},
startButtonContainer: {
height: 56,
justifyContent: 'center',
},
// Start Button
startButton: {
height: 56,
borderRadius: RADIUS.LG,
backgroundColor: BRAND.PRIMARY,
alignItems: 'center',
justifyContent: 'center',
},
startButtonPressed: {
backgroundColor: BRAND.PRIMARY_DARK,
transform: [{ scale: 0.98 }],
},
startButtonText: {
...TYPOGRAPHY.HEADLINE,
color: TEXT.PRIMARY,
letterSpacing: 1,
},
})
// Start Button
startButton: {
height: 56,
borderRadius: RADIUS.LG,
backgroundColor: BRAND.PRIMARY,
alignItems: 'center',
justifyContent: 'center',
},
startButtonPressed: {
backgroundColor: BRAND.PRIMARY_DARK,
transform: [{ scale: 0.98 }],
},
startButtonText: {
...TYPOGRAPHY.HEADLINE,
color: '#FFFFFF',
letterSpacing: 1,
},
})
}

207
app/workout/category/[id].tsx
View File

@@ -13,36 +13,44 @@ import {
Picker,
} from '@expo/ui/swift-ui'
import { useTranslation } from 'react-i18next'
import { useHaptics } from '@/src/shared/hooks'
import { getWorkoutsByCategory, getTrainerById, CATEGORIES } from '@/src/shared/data'
import { getWorkoutsByCategory, CATEGORIES } from '@/src/shared/data'
import { useTranslatedCategories, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
import { StyledText } from '@/src/shared/components/StyledText'
import type { WorkoutCategory, WorkoutLevel } from '@/src/shared/types'
import {
BRAND,
DARK,
TEXT,
} from '@/src/shared/constants/colors'
import { useThemeColors, BRAND } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
const LEVELS: { id: WorkoutLevel | 'all'; label: string }[] = [
{ id: 'all', label: 'All Levels' },
{ id: 'Beginner', label: 'Beginner' },
{ id: 'Intermediate', label: 'Intermediate' },
{ id: 'Advanced', label: 'Advanced' },
]
const LEVEL_IDS: (WorkoutLevel | 'all')[] = ['all', 'Beginner', 'Intermediate', 'Advanced']
export default function CategoryDetailScreen() {
const insets = useSafeAreaInsets()
const router = useRouter()
const haptics = useHaptics()
const { t } = useTranslation()
const { id } = useLocalSearchParams<{ id: string }>()
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const [selectedLevelIndex, setSelectedLevelIndex] = useState(0)
const selectedLevel = LEVELS[selectedLevelIndex].id
const category = CATEGORIES.find(c => c.id === id)
const translatedCategories = useTranslatedCategories()
const levelLabels = [
t('screens:category.allLevels'),
t('levels.beginner'),
t('levels.intermediate'),
t('levels.advanced'),
]
const selectedLevel = LEVEL_IDS[selectedLevelIndex]
const category = translatedCategories.find(c => c.id === id)
const categoryLabel = category?.label ?? id ?? 'Category'
const allWorkouts = useMemo(
@@ -55,6 +63,8 @@ export default function CategoryDetailScreen() {
return allWorkouts.filter(w => w.level === selectedLevel)
}, [allWorkouts, selectedLevel])
const translatedWorkouts = useTranslatedWorkouts(filteredWorkouts)
const handleBack = () => {
haptics.selection()
router.back()
@@ -70,15 +80,15 @@ export default function CategoryDetailScreen() {
{/* Header */}
<View style={styles.header}>
<Pressable onPress={handleBack} style={styles.backButton}>
<Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
<Ionicons name="chevron-back" size={24} color={colors.text.primary} />
</Pressable>
<StyledText size={22} weight="bold" color={TEXT.PRIMARY}>{categoryLabel}</StyledText>
<StyledText size={22} weight="bold" color={colors.text.primary}>{categoryLabel}</StyledText>
<View style={styles.backButton} />
</View>
{/* Level Filter */}
<View style={styles.filterContainer}>
<Host matchContents useViewportSizeMeasurement colorScheme="dark">
<Host matchContents useViewportSizeMeasurement colorScheme={colors.colorScheme}>
<Picker
selectedIndex={selectedLevelIndex}
onOptionSelected={(e) => {
@@ -86,7 +96,7 @@ export default function CategoryDetailScreen() {
setSelectedLevelIndex(e.nativeEvent.index)
}}
variant="segmented"
options={LEVELS.map(l => l.label)}
options={levelLabels}
color={BRAND.PRIMARY}
/>
</Host>
@@ -94,10 +104,10 @@ export default function CategoryDetailScreen() {
<StyledText
size={13}
color={TEXT.TERTIARY}
color={colors.text.tertiary}
style={{ paddingHorizontal: LAYOUT.SCREEN_PADDING, marginBottom: SPACING[3] }}
>
{filteredWorkouts.length + ' workouts'}
{t('plurals.workout', { count: translatedWorkouts.length })}
</StyledText>
<ScrollView
@@ -105,35 +115,32 @@ export default function CategoryDetailScreen() {
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
showsVerticalScrollIndicator={false}
>
{filteredWorkouts.map((workout) => {
const trainer = getTrainerById(workout.trainerId)
return (
{translatedWorkouts.map((workout) => (
<Pressable
key={workout.id}
style={styles.workoutCard}
onPress={() => handleWorkoutPress(workout.id)}
>
<View style={[styles.workoutAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
<RNText style={styles.workoutInitial}>{trainer?.name[0] ?? 'T'}</RNText>
<View style={[styles.workoutAvatar, { backgroundColor: BRAND.PRIMARY }]}>
<Ionicons name="flame" size={20} color="#FFFFFF" />
</View>
<View style={styles.workoutInfo}>
<StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
<StyledText size={13} color={TEXT.TERTIARY}>
{trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
<StyledText size={17} weight="semibold" color={colors.text.primary}>{workout.title}</StyledText>
<StyledText size={13} color={colors.text.tertiary}>
{t('durationLevel', { duration: workout.duration, level: t(`levels.${workout.level.toLowerCase()}`) })}
</StyledText>
</View>
<View style={styles.workoutMeta}>
<StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
<Ionicons name="chevron-forward" size={16} color={TEXT.TERTIARY} />
<StyledText size={13} color={BRAND.PRIMARY}>{t('units.calUnit', { count: workout.calories })}</StyledText>
<Ionicons name="chevron-forward" size={16} color={colors.text.tertiary} />
</View>
</Pressable>
)
})}
))}
{filteredWorkouts.length === 0 && (
{translatedWorkouts.length === 0 && (
<View style={styles.emptyState}>
<Ionicons name="barbell-outline" size={48} color={TEXT.TERTIARY} />
<StyledText size={17} color={TEXT.TERTIARY} style={{ marginTop: SPACING[3] }}>
<Ionicons name="barbell-outline" size={48} color={colors.text.tertiary} />
<StyledText size={17} color={colors.text.tertiary} style={{ marginTop: SPACING[3] }}>
No workouts found
</StyledText>
</View>
@@ -143,67 +150,69 @@ export default function CategoryDetailScreen() {
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingVertical: SPACING[3],
},
backButton: {
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
},
filterContainer: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
marginBottom: SPACING[4],
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
workoutCard: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: DARK.SURFACE,
borderRadius: RADIUS.LG,
marginBottom: SPACING[2],
gap: SPACING[3],
},
workoutAvatar: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
},
workoutInitial: {
fontSize: 18,
fontWeight: '700',
color: TEXT.PRIMARY,
},
workoutInfo: {
flex: 1,
gap: 2,
},
workoutMeta: {
alignItems: 'flex-end',
gap: 4,
},
emptyState: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[12],
},
})
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingVertical: SPACING[3],
},
backButton: {
width: 44,
height: 44,
alignItems: 'center',
justifyContent: 'center',
},
filterContainer: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
marginBottom: SPACING[4],
},
scrollView: {
flex: 1,
},
scrollContent: {
paddingHorizontal: LAYOUT.SCREEN_PADDING,
},
workoutCard: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: SPACING[3],
paddingHorizontal: SPACING[4],
backgroundColor: colors.bg.surface,
borderRadius: RADIUS.LG,
marginBottom: SPACING[2],
gap: SPACING[3],
},
workoutAvatar: {
width: 44,
height: 44,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
},
workoutInitial: {
fontSize: 18,
fontWeight: '700',
color: colors.text.primary,
},
workoutInfo: {
flex: 1,
gap: 2,
},
workoutMeta: {
alignItems: 'flex-end',
gap: 4,
},
emptyState: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: SPACING[12],
},
})
}

74
src/shared/components/GlassCard.tsx
View File

@@ -1,13 +1,14 @@
/**
* GlassCard - Liquid Glass Container
* iOS 18.4 inspired glassmorphism
* iOS 18.4 inspired glassmorphism — theme-aware
*/
import { ReactNode } from 'react'
import { ReactNode, useMemo } from 'react'
import { StyleSheet, View, ViewStyle } from 'react-native'
import { BlurView } from 'expo-blur'
import { DARK, GLASS, SHADOW, BORDER } from '../constants/colors'
import { useThemeColors } from '../theme'
import type { ThemeColors } from '../theme/types'
import { RADIUS } from '../constants/borderRadius'
type GlassVariant = 'base' | 'elevated' | 'inset' | 'tinted'
@@ -20,34 +21,38 @@ interface GlassCardProps {
blurIntensity?: number
}
const variantStyles: Record<GlassVariant, ViewStyle> = {
base: {
backgroundColor: GLASS.BASE.backgroundColor,
borderColor: GLASS.BASE.borderColor,
borderWidth: GLASS.BASE.borderWidth,
},
elevated: {
backgroundColor: GLASS.ELEVATED.backgroundColor,
borderColor: GLASS.ELEVATED.borderColor,
borderWidth: GLASS.ELEVATED.borderWidth,
},
inset: {
backgroundColor: GLASS.INSET.backgroundColor,
borderColor: GLASS.INSET.borderColor,
borderWidth: GLASS.INSET.borderWidth,
},
tinted: {
backgroundColor: GLASS.TINTED.backgroundColor,
borderColor: GLASS.TINTED.borderColor,
borderWidth: GLASS.TINTED.borderWidth,
},
function getVariantStyles(colors: ThemeColors): Record<GlassVariant, ViewStyle> {
return {
base: {
backgroundColor: colors.glass.base.backgroundColor,
borderColor: colors.glass.base.borderColor,
borderWidth: colors.glass.base.borderWidth,
},
elevated: {
backgroundColor: colors.glass.elevated.backgroundColor,
borderColor: colors.glass.elevated.borderColor,
borderWidth: colors.glass.elevated.borderWidth,
},
inset: {
backgroundColor: colors.glass.inset.backgroundColor,
borderColor: colors.glass.inset.borderColor,
borderWidth: colors.glass.inset.borderWidth,
},
tinted: {
backgroundColor: colors.glass.tinted.backgroundColor,
borderColor: colors.glass.tinted.borderColor,
borderWidth: colors.glass.tinted.borderWidth,
},
}
}
const shadowStyles: Record<GlassVariant, ViewStyle> = {
base: SHADOW.sm,
elevated: SHADOW.md,
inset: {},
tinted: SHADOW.sm,
function getShadowStyles(colors: ThemeColors): Record<GlassVariant, ViewStyle> {
return {
base: colors.shadow.sm,
elevated: colors.shadow.md,
inset: {},
tinted: colors.shadow.sm,
}
}
export function GlassCard({
@@ -55,17 +60,22 @@ export function GlassCard({
variant = 'base',
style,
hasBlur = true,
blurIntensity = GLASS.BLUR_MEDIUM,
blurIntensity,
}: GlassCardProps) {
const colors = useThemeColors()
const variantStyles = useMemo(() => getVariantStyles(colors), [colors])
const shadowStyles = useMemo(() => getShadowStyles(colors), [colors])
const glassStyle = variantStyles[variant]
const shadowStyle = shadowStyles[variant]
const intensity = blurIntensity ?? colors.glass.blurMedium
if (hasBlur) {
return (
<View style={[styles.container, glassStyle, shadowStyle, style]}>
<BlurView
intensity={blurIntensity}
tint="dark"
intensity={intensity}
tint={colors.glass.blurTint}
style={StyleSheet.absoluteFill}
/>
<View style={styles.content}>{children}</View>

55
src/shared/components/OnboardingStep.tsx
View File

@@ -3,10 +3,11 @@
* Reusable wrapper for each onboarding screen — progress bar, animation, layout
*/
import { useRef, useEffect } from 'react'
import { useRef, useEffect, useMemo } from 'react'
import { View, StyleSheet, Animated, Dimensions } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { DARK, BRAND, TEXT } from '../constants/colors'
import { useThemeColors, BRAND } from '../theme'
import type { ThemeColors } from '../theme/types'
import { SPACING, LAYOUT } from '../constants/spacing'
import { DURATION, EASE } from '../constants/animations'
@@ -19,6 +20,8 @@ interface OnboardingStepProps {
}
export function OnboardingStep({ step, totalSteps, children }: OnboardingStepProps) {
const colors = useThemeColors()
const styles = useMemo(() => createStyles(colors), [colors])
const insets = useSafeAreaInsets()
const slideAnim = useRef(new Animated.Value(SCREEN_WIDTH)).current
const fadeAnim = useRef(new Animated.Value(0)).current
@@ -83,26 +86,28 @@ export function OnboardingStep({ step, totalSteps, children }: OnboardingStepPro
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: DARK.BASE,
},
progressTrack: {
height: 3,
backgroundColor: DARK.SURFACE,
marginHorizontal: LAYOUT.SCREEN_PADDING,
borderRadius: 2,
overflow: 'hidden',
},
progressFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 2,
},
content: {
flex: 1,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[8],
},
})
function createStyles(colors: ThemeColors) {
return StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.bg.base,
},
progressTrack: {
height: 3,
backgroundColor: colors.bg.surface,
marginHorizontal: LAYOUT.SCREEN_PADDING,
borderRadius: 2,
overflow: 'hidden',
},
progressFill: {
height: '100%',
backgroundColor: BRAND.PRIMARY,
borderRadius: 2,
},
content: {
flex: 1,
paddingHorizontal: LAYOUT.SCREEN_PADDING,
paddingTop: SPACING[8],
},
})
}

11
src/shared/components/StyledText.tsx
View File

@@ -1,10 +1,10 @@
/**
* TabataFit StyledText
* Unified text component — replaces 5 local copies
* Unified text component — uses theme for default color
*/
import { Text as RNText, TextStyle, StyleProp } from 'react-native'
import { TEXT } from '../constants/colors'
import { useThemeColors } from '../theme'
type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
@@ -28,17 +28,20 @@ export function StyledText({
children,
size = 17,
weight = 'regular',
color = TEXT.PRIMARY,
color,
style,
numberOfLines,
}: StyledTextProps) {
const colors = useThemeColors()
const resolvedColor = color ?? colors.text.primary
return (
<RNText
style={[
{
fontSize: size,
fontWeight: WEIGHT_MAP[weight],
color,
color: resolvedColor,
},
style,
]}