refactor screens, navigation & player for new architecture
Simplify Home, Activity, Profile, Complete, Player, and Program screens to work with the new Supabase-driven data layer. Update root and tab layouts. Add Settings, Terms, and Zone routes. Add OfflineBanner component and progressStore. Update all player sub-components to use the refreshed design system tokens.
This commit is contained in:
Millian Lamiaux
@@ -1,18 +1,18 @@
|
||||
/**
|
||||
* TabataFit Tab Layout
|
||||
* Native liquid glass tab bar (iOS 26+) — Dark Medical design system
|
||||
* 3 tabs: Home, Progress, Profile
|
||||
* Redirects to onboarding if not completed
|
||||
* TabataGo Tab Layout
|
||||
* Native liquid glass tab bar (iOS 26+) via expo-router/unstable-native-tabs
|
||||
* 3 tabs: Home, Activity, Profile
|
||||
*/
|
||||
|
||||
import { Redirect } from 'expo-router'
|
||||
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { BRAND, TEXT, NAVY } from '@/src/shared/constants/colors'
|
||||
import { useUserStore } from '@/src/shared/stores'
|
||||
|
||||
export default function TabLayout() {
|
||||
const { t } = useTranslation('screens')
|
||||
const { t } = useTranslation()
|
||||
const onboardingCompleted = useUserStore((s) => s.profile.onboardingCompleted)
|
||||
|
||||
if (!onboardingCompleted) {
|
||||
@@ -29,19 +29,19 @@ export default function TabLayout() {
|
||||
color: TEXT.TERTIARY,
|
||||
}}
|
||||
>
|
||||
<NativeTabs.Trigger name="index" options={{ title: t('tabs.home') }}>
|
||||
<NativeTabs.Trigger name="index" options={{ title: t('screens:tabs.home') }}>
|
||||
<Icon sf={{ default: 'house', selected: 'house.fill' }} />
|
||||
<Label>{t('tabs.home')}</Label>
|
||||
<Label>{t('screens:tabs.home')}</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="activity" options={{ title: t('tabs.progression') }}>
|
||||
<NativeTabs.Trigger name="activity" options={{ title: t('screens:tabs.progression') }}>
|
||||
<Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
|
||||
<Label>{t('tabs.progression')}</Label>
|
||||
<Label>{t('screens:tabs.progression')}</Label>
|
||||
</NativeTabs.Trigger>
|
||||
|
||||
<NativeTabs.Trigger name="profile" options={{ title: t('tabs.profile') }}>
|
||||
<NativeTabs.Trigger name="profile" options={{ title: t('screens:tabs.profile') }}>
|
||||
<Icon sf={{ default: 'person', selected: 'person.fill' }} />
|
||||
<Label>{t('tabs.profile')}</Label>
|
||||
<Label>{t('screens:tabs.profile')}</Label>
|
||||
</NativeTabs.Trigger>
|
||||
</NativeTabs>
|
||||
)
|
||||
|
||||
@@ -1,580 +1,179 @@
|
||||
/**
|
||||
* TabataFit Activity Screen
|
||||
* Premium stats dashboard — streak, rings, weekly chart, history
|
||||
* TabataGo Activity Tab
|
||||
* Streak, weekly sessions, program history — driven by progressStore.
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { View, Text, StyleSheet, ScrollView } from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
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 { NativeGauge } from '@/src/shared/components/native'
|
||||
import { NativeButton } from '@/src/shared/components/native'
|
||||
|
||||
import { useThemeColors, BRAND, PHASE } from '@/src/shared/theme'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { useProgressStore } from '@/src/shared/stores/progressStore'
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { GREEN, NAVY, BORDER_COLORS, TEXT } from '@/src/shared/constants/colors'
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STAT RING — Native SwiftUI Gauge
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StatRing({
|
||||
value,
|
||||
max,
|
||||
color,
|
||||
size = 52,
|
||||
}: {
|
||||
value: number
|
||||
max: number
|
||||
color: string
|
||||
size?: number
|
||||
}) {
|
||||
return (
|
||||
<NativeGauge value={value} maxValue={max} color={color} size={size} />
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STAT CARD
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function StatCard({
|
||||
label,
|
||||
value,
|
||||
max,
|
||||
color,
|
||||
icon,
|
||||
}: {
|
||||
label: string
|
||||
value: number
|
||||
max: number
|
||||
color: string
|
||||
icon: IconName
|
||||
}) {
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
return (
|
||||
<View style={styles.statCard}>
|
||||
<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>
|
||||
<Icon name={icon} size={18} tintColor={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]} />
|
||||
<StyledText
|
||||
size={11}
|
||||
weight={isToday ? 'bold' : 'regular'}
|
||||
color={isToday ? colors.text.primary : colors.text.hint}
|
||||
>
|
||||
{day}
|
||||
</StyledText>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// EMPTY STATE
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
|
||||
const { t } = useTranslation()
|
||||
const colors = useThemeColors()
|
||||
const styles = useMemo(() => createStyles(colors), [colors])
|
||||
|
||||
return (
|
||||
<View style={styles.emptyState}>
|
||||
<View style={styles.emptyIconCircle}>
|
||||
<Icon name="flame" size={48} tintColor={GREEN[500]} />
|
||||
</View>
|
||||
<StyledText size={22} weight="bold" color={colors.text.primary} style={styles.emptyTitle}>
|
||||
{t('screens:activity.emptyTitle')}
|
||||
</StyledText>
|
||||
<StyledText size={15} color={colors.text.tertiary} style={styles.emptySubtitle}>
|
||||
{t('screens:activity.emptySubtitle')}
|
||||
</StyledText>
|
||||
<View style={{ width: '100%', alignItems: 'center' }}>
|
||||
<NativeButton
|
||||
variant="primary"
|
||||
title={t('screens:activity.startFirstWorkout')}
|
||||
onPress={onStartWorkout}
|
||||
systemImage="play.fill"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const
|
||||
import { GREEN, NAVY, TEXT, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
|
||||
export default function ActivityScreen() {
|
||||
const { t } = useTranslation()
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
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, 5), [history])
|
||||
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
||||
|
||||
const today = new Date().getDay() // 0=Sun
|
||||
const history = useProgressStore(s => s.history)
|
||||
const streak = useProgressStore(s => s.streak)
|
||||
const weeklyCount = useProgressStore(s => s.getWeeklyCount())
|
||||
const completedCount = useProgressStore(s => s.getCompletedCount())
|
||||
|
||||
// Check achievements
|
||||
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
|
||||
switch (a.type) {
|
||||
case 'workouts': return totalWorkouts >= a.requirement
|
||||
case 'streak': return streak.longest >= a.requirement
|
||||
case 'minutes': return totalMinutes >= a.requirement
|
||||
case 'calories': return totalCalories >= a.requirement
|
||||
default: return false
|
||||
}
|
||||
})
|
||||
const displayAchievements = ACHIEVEMENTS.slice(0, 4).map(a => ({
|
||||
...a,
|
||||
unlocked: unlockedAchievements.some(u => u.id === a.id),
|
||||
}))
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
const now = Date.now()
|
||||
const diff = now - timestamp
|
||||
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) })
|
||||
}
|
||||
const totalMinutes = useMemo(
|
||||
() => history.reduce((sum, s) => sum + Math.round(s.durationSeconds / 60), 0),
|
||||
[history],
|
||||
)
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header */}
|
||||
<StyledText
|
||||
size={34}
|
||||
weight="bold"
|
||||
color={colors.text.primary}
|
||||
style={{ marginBottom: SPACING[6] }}
|
||||
>
|
||||
{t('screens:activity.title')}
|
||||
</StyledText>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={[styles.content, { paddingTop: insets.top + SPACING[4], paddingBottom: insets.bottom + SPACING[6] }]}
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
>
|
||||
<Text style={styles.title}>{t('screens:tabs.progression')}</Text>
|
||||
|
||||
{/* Empty state when no history */}
|
||||
{history.length === 0 ? (
|
||||
<EmptyState onStartWorkout={() => router.push('/(tabs)' as any)} />
|
||||
) : (
|
||||
<>
|
||||
{/* Streak Banner */}
|
||||
<View style={styles.streakBanner}>
|
||||
<View style={styles.streakRow}>
|
||||
<View style={styles.streakIconWrap}>
|
||||
<Icon name="flame.fill" size={28} tintColor={TEXT.PRIMARY} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<StyledText size={28} weight="bold" color={TEXT.PRIMARY}>
|
||||
{String(streak.current || 0)}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={TEXT.PRIMARY}>
|
||||
{t('screens:activity.dayStreak')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.streakMeta}>
|
||||
<StyledText size={11} color={TEXT.SECONDARY}>
|
||||
{t('screens:activity.longest')}
|
||||
</StyledText>
|
||||
<StyledText size={20} weight="bold" color={TEXT.PRIMARY}>
|
||||
{String(streak.longest)}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
{/* Streak hero */}
|
||||
<View style={styles.streakHero}>
|
||||
<Icon name="flame.fill" size={32} tintColor={GREEN[500]} />
|
||||
<Text selectable style={styles.streakCount}>{streak.current}</Text>
|
||||
<Text style={styles.streakLabel}>{t('screens:activity.dayStreak')}</Text>
|
||||
<Text style={styles.streakRecord}>
|
||||
{t('screens:activity.longest')}: {streak.longest}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Stats Grid — 2x2 */}
|
||||
<View style={styles.statsGrid}>
|
||||
<StatCard
|
||||
label={t('screens:activity.workouts')}
|
||||
value={totalWorkouts}
|
||||
max={100}
|
||||
color={GREEN[500]}
|
||||
icon="dumbbell"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.minutes')}
|
||||
value={totalMinutes}
|
||||
max={300}
|
||||
color={PHASE.REST}
|
||||
icon="clock"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.calories')}
|
||||
value={totalCalories}
|
||||
max={5000}
|
||||
color={GREEN[600]}
|
||||
icon="bolt"
|
||||
/>
|
||||
<StatCard
|
||||
label={t('screens:activity.bestStreak')}
|
||||
value={streak.longest}
|
||||
max={30}
|
||||
color={BRAND.SUCCESS}
|
||||
icon="arrow.up.right"
|
||||
/>
|
||||
</View>
|
||||
{/* Stats grid */}
|
||||
<View style={styles.grid}>
|
||||
<StatCard
|
||||
icon="checkmark.circle.fill"
|
||||
value={completedCount}
|
||||
label={t('screens:programs.completed')}
|
||||
color={GREEN[500]}
|
||||
/>
|
||||
<StatCard
|
||||
icon="calendar"
|
||||
value={weeklyCount}
|
||||
label={t('screens:activity.thisWeek')}
|
||||
color="#5AC8FA"
|
||||
/>
|
||||
<StatCard
|
||||
icon="clock.fill"
|
||||
value={totalMinutes}
|
||||
label={t('screens:player.minutes')}
|
||||
color="#FF6B35"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 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}>
|
||||
<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={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
||||
{t('screens:activity.recent')}
|
||||
</StyledText>
|
||||
<View style={styles.recentCard}>
|
||||
{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: GREEN[500] }]} />
|
||||
</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={GREEN[500]}>
|
||||
{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={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}>
|
||||
<View
|
||||
style={[
|
||||
styles.achievementIcon,
|
||||
a.unlocked
|
||||
? { backgroundColor: GREEN.DIM }
|
||||
: { backgroundColor: colors.bg.overlay1 },
|
||||
]}
|
||||
>
|
||||
<Icon
|
||||
name={a.unlocked ? 'trophy.fill' : 'lock.fill'}
|
||||
size={22}
|
||||
tintColor={a.unlocked ? GREEN[500] : colors.text.hint}
|
||||
/>
|
||||
</View>
|
||||
<StyledText
|
||||
size={11}
|
||||
weight="semibold"
|
||||
color={a.unlocked ? colors.text.primary : colors.text.hint}
|
||||
numberOfLines={1}
|
||||
style={{ marginTop: SPACING[2], textAlign: 'center' }}
|
||||
>
|
||||
{t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
|
||||
</StyledText>
|
||||
{/* Recent history */}
|
||||
{history.length > 0 && (
|
||||
<View style={styles.historySection}>
|
||||
<Text style={styles.sectionTitle}>{t('screens:activity.recent')}</Text>
|
||||
{history.slice(0, 10).map((session, i) => (
|
||||
<View key={i} style={styles.historyRow}>
|
||||
<Icon name="checkmark.circle.fill" size={18} tintColor={GREEN[500]} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.historyTitle} numberOfLines={1}>{session.programId}</Text>
|
||||
<Text style={styles.historyMeta}>
|
||||
{Math.round(session.durationSeconds / 60)} min
|
||||
{' · '}
|
||||
{new Date(session.completedAt).toLocaleDateString()}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{history.length === 0 && (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyTitle}>{t('screens:activity.emptyTitle')}</Text>
|
||||
<Text style={styles.emptySubtitle}>{t('screens:activity.emptySubtitle')}</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({ icon, value, label, color }: { icon: any; value: number; label: string; color: string }) {
|
||||
return (
|
||||
<View style={cardStyles.card}>
|
||||
<Icon name={icon} size={22} tintColor={color} />
|
||||
<Text selectable style={cardStyles.value}>{value}</Text>
|
||||
<Text style={cardStyles.label}>{label}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
const CARD_HALF = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
|
||||
const cardStyles = StyleSheet.create({
|
||||
card: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
padding: SPACING[3],
|
||||
borderRadius: RADIUS.LG,
|
||||
backgroundColor: NAVY[800],
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
gap: SPACING[1],
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
value: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY, fontVariant: ['tabular-nums'] },
|
||||
label: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
})
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
container: { flex: 1, backgroundColor: colors.bg.base },
|
||||
content: { paddingHorizontal: LAYOUT.SCREEN_PADDING },
|
||||
|
||||
// Streak
|
||||
streakBanner: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
marginBottom: SPACING[5],
|
||||
backgroundColor: GREEN[500],
|
||||
title: { ...TYPOGRAPHY.LARGE_TITLE, color: TEXT.PRIMARY, marginBottom: SPACING[5] },
|
||||
|
||||
streakHero: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[6],
|
||||
marginBottom: SPACING[4],
|
||||
backgroundColor: NAVY[800],
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
gap: SPACING[1],
|
||||
},
|
||||
streakRow: {
|
||||
streakCount: { ...TYPOGRAPHY.LARGE_TITLE, color: TEXT.PRIMARY, fontSize: 56, fontVariant: ['tabular-nums'] },
|
||||
streakLabel: { ...TYPOGRAPHY.HEADLINE, color: TEXT.SECONDARY },
|
||||
streakRecord: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: SPACING[1] },
|
||||
|
||||
grid: { flexDirection: 'row', gap: SPACING[3], marginBottom: SPACING[6] },
|
||||
|
||||
historySection: { gap: SPACING[2] },
|
||||
sectionTitle: {
|
||||
...TYPOGRAPHY.CAPTION_1,
|
||||
color: TEXT.TERTIARY,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
marginBottom: SPACING[1],
|
||||
},
|
||||
historyRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: SPACING[5],
|
||||
paddingVertical: SPACING[5],
|
||||
gap: SPACING[4],
|
||||
},
|
||||
streakIconWrap: {
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: RADIUS.FULL,
|
||||
backgroundColor: NAVY[900],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
streakMeta: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: NAVY[900],
|
||||
paddingHorizontal: SPACING[4],
|
||||
paddingVertical: SPACING[2],
|
||||
gap: SPACING[3],
|
||||
padding: SPACING[3],
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderRadius: RADIUS.MD,
|
||||
},
|
||||
|
||||
// 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.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
statCardInner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: SPACING[4],
|
||||
borderColor: colors.surface.default.borderColor,
|
||||
},
|
||||
historyTitle: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.PRIMARY },
|
||||
historyMeta: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.TERTIARY, marginTop: 2 },
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
|
||||
// Weekly
|
||||
weekCard: {
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
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: RADIUS.SM,
|
||||
backgroundColor: colors.bg.overlay2,
|
||||
},
|
||||
weekBarFilled: {
|
||||
backgroundColor: GREEN[500],
|
||||
},
|
||||
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.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
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: RADIUS.SM,
|
||||
},
|
||||
recentDivider: {
|
||||
height: StyleSheet.hairlineWidth,
|
||||
backgroundColor: colors.border.dim,
|
||||
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.border.dim,
|
||||
backgroundColor: NAVY[800],
|
||||
overflow: 'hidden',
|
||||
paddingHorizontal: SPACING[1],
|
||||
},
|
||||
achievementIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.FULL,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
// Empty State
|
||||
emptyState: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingTop: SPACING[10],
|
||||
paddingHorizontal: SPACING[6],
|
||||
},
|
||||
emptyIconCircle: {
|
||||
width: 96,
|
||||
height: 96,
|
||||
borderRadius: RADIUS.FULL,
|
||||
backgroundColor: GREEN.DIM,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
emptyTitle: {
|
||||
textAlign: 'center' as const,
|
||||
marginBottom: SPACING[2],
|
||||
},
|
||||
emptySubtitle: {
|
||||
textAlign: 'center' as const,
|
||||
lineHeight: 22,
|
||||
marginBottom: SPACING[8],
|
||||
},
|
||||
emptyCtaButton: {
|
||||
flexDirection: 'row' as const,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
height: 52,
|
||||
paddingHorizontal: SPACING[8],
|
||||
borderRadius: RADIUS.LG,
|
||||
overflow: 'hidden' as const,
|
||||
backgroundColor: GREEN[500],
|
||||
},
|
||||
emptyState: { alignItems: 'center', marginTop: SPACING[12], gap: SPACING[2] },
|
||||
emptyTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY },
|
||||
emptySubtitle: { ...TYPOGRAPHY.BODY, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,462 +1,212 @@
|
||||
/**
|
||||
* TabataFit Home Screen — Body Zone Workout Programs
|
||||
* Programs organized by Upper Body, Lower Body, Full Body
|
||||
* Dark Medical design system — navy backgrounds, green actions, no glass
|
||||
* TabataGo Home Screen
|
||||
* Mascot + 3 stat pills + 3 body zone cards + settings button.
|
||||
*/
|
||||
|
||||
import { View, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
||||
|
||||
import { useMemo, useState, useEffect, useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useHaptics } from '@/src/shared/hooks'
|
||||
import { useUserStore, useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
||||
import { useWorkoutProgramStore } from '@/src/shared/stores'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { Mascot } from '@/src/shared/components/Mascot'
|
||||
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import { BRAND, GREEN, TEXT, NAVY, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { useUserStore } from '@/src/shared/stores/userStore'
|
||||
import { useProgressStore } from '@/src/shared/stores/progressStore'
|
||||
import { BODY_ZONE_META, type BodyZone } from '@/src/shared/types/workoutProgram'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { fetchAllPrograms, buildWorkoutProgramId } from '@/src/shared/data/workoutPrograms'
|
||||
import type { WorkoutProgram, BodyZone } from '@/src/shared/types/workoutProgram'
|
||||
import { BODY_ZONE_META } from '@/src/shared/types/workoutProgram'
|
||||
import { TEXT, NAVY, GREEN, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
import { withOpacity } from '@/src/shared/utils/color'
|
||||
|
||||
// Feature flags — disable incomplete features
|
||||
const FEATURE_FLAGS = {
|
||||
ASSESSMENT_ENABLED: false, // Assessment player not yet implemented
|
||||
}
|
||||
|
||||
/** Body zone order for display */
|
||||
const BODY_ZONE_ORDER: BodyZone[] = ['upper-body', 'lower-body', 'full-body']
|
||||
|
||||
const AnimatedPressable = Pressable
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// BODY ZONE CARD (clickable, navigates to detail)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function BodyZoneCard({
|
||||
bodyZone,
|
||||
programCount,
|
||||
}: {
|
||||
bodyZone: BodyZone
|
||||
programCount: number
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
const meta = BODY_ZONE_META[bodyZone]
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/body-zone/${bodyZone}` as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={handlePress}
|
||||
style={({ pressed }) => [
|
||||
styles.bodyZoneCard,
|
||||
{
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderColor: colors.border.dim,
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
},
|
||||
]}
|
||||
testID={`zone-card-${bodyZone}`}
|
||||
>
|
||||
<View style={styles.bodyZoneCardInner}>
|
||||
<View style={[styles.bodyZoneCardIcon, { borderColor: meta.color }]}>
|
||||
<Icon name={meta.icon as IconName} size={20} tintColor={meta.color} />
|
||||
</View>
|
||||
<View style={styles.bodyZoneCardInfo}>
|
||||
<StyledText preset="TITLE_3" color={colors.text.primary}>
|
||||
{meta.label}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{programCount} programme{programCount !== 1 ? 's' : ''}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// CONTINUE SESSION CARD — adapted for workout programs
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function ContinueSessionCard({ programs }: { programs: WorkoutProgram[] }) {
|
||||
const { t } = useTranslation('screens')
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
|
||||
const recommended = useWorkoutProgramStore(
|
||||
useCallback((s) => s.getRecommendedNext(programs), [programs])
|
||||
)
|
||||
|
||||
if (!recommended) return null
|
||||
|
||||
const zoneMeta = BODY_ZONE_META[recommended.bodyZone]
|
||||
const accentColor = recommended.accentColor ?? zoneMeta.color
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push(`/workout/${buildWorkoutProgramId(recommended.id)}` as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable style={[styles.continueCard, { borderColor: colors.border.dim }]} onPress={handlePress} testID="continue-session-card">
|
||||
<View style={[styles.continueAccentLine, { backgroundColor: accentColor }]} />
|
||||
<View style={styles.continueContent}>
|
||||
<View style={styles.continueHeader}>
|
||||
<Icon name="play.circle" size={20} tintColor={accentColor} />
|
||||
<StyledText preset="CALLOUT" weight="semibold" color={colors.text.primary} style={{ flex: 1, marginLeft: SPACING[2] }}>
|
||||
{t('home.recommendedNext')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
||||
{recommended.title}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{zoneMeta.label} · {recommended.estimatedDuration} min · ~{recommended.estimatedCalories} kcal
|
||||
</StyledText>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// QUICK STATS ROW
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function QuickStats() {
|
||||
const { t } = useTranslation('screens')
|
||||
const colors = useThemeColors()
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
||||
const thisWeekCount = weeklyActivity.filter((d) => d.completed).length
|
||||
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
||||
|
||||
const stats = [
|
||||
{ icon: 'flame.fill' as const, value: streak.current, label: t('home.statsStreak'), color: GREEN['500'] },
|
||||
{ icon: 'calendar' as const, value: `${thisWeekCount}/7`, label: t('home.statsThisWeek'), color: BRAND.INFO },
|
||||
{ icon: 'clock' as const, value: totalMinutes, label: t('home.statsMinutes'), color: GREEN['500'] },
|
||||
]
|
||||
|
||||
return (
|
||||
<View style={styles.quickStatsRow}>
|
||||
{stats.map((stat) => (
|
||||
<View key={stat.label} style={styles.quickStatPill}>
|
||||
<Icon name={stat.icon} size={16} tintColor={stat.color} />
|
||||
<StyledText size={17} weight="bold" color={colors.text.primary} style={{ fontVariant: ['tabular-nums'] }}>
|
||||
{String(stat.value)}
|
||||
</StyledText>
|
||||
<StyledText size={11} color={colors.text.tertiary}>
|
||||
{stat.label}
|
||||
</StyledText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// KINE LINK CARD (bottom link to physio programs)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
function TabataLinkCard() {
|
||||
const { t } = useTranslation('screens')
|
||||
const router = useRouter()
|
||||
const haptics = useHaptics()
|
||||
const colors = useThemeColors()
|
||||
|
||||
const handlePress = () => {
|
||||
haptics.buttonTap()
|
||||
router.push('/program/debutant' as any)
|
||||
}
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={handlePress}
|
||||
style={({ pressed }) => [
|
||||
styles.tabataLinkCard,
|
||||
{
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderColor: colors.border.dim,
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.tabataLinkLeft}>
|
||||
<View style={[styles.tabataLinkIcon, { backgroundColor: GREEN.DIM }]}>
|
||||
<Icon name="heart.text.square" size={22} tintColor={GREEN['500']} />
|
||||
</View>
|
||||
<View style={styles.tabataLinkText}>
|
||||
<StyledText preset="HEADLINE" color={colors.text.primary}>
|
||||
{t('home.tabataPrograms')}
|
||||
</StyledText>
|
||||
<StyledText size={13} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{t('home.tabataProgramsSubtitle')}
|
||||
</StyledText>
|
||||
</View>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={18} tintColor={colors.text.tertiary} />
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// MAIN SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
const BODY_ZONES: BodyZone[] = ['upper-body', 'lower-body', 'full-body']
|
||||
|
||||
export default function HomeScreen() {
|
||||
const { t } = useTranslation('screens')
|
||||
const insets = useSafeAreaInsets()
|
||||
const router = useRouter()
|
||||
const colors = useThemeColors()
|
||||
const userName = useUserStore((s) => s.profile.name)
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
// Fetch workout programs
|
||||
const [programs, setPrograms] = useState<WorkoutProgram[]>([])
|
||||
const insets = useSafeAreaInsets()
|
||||
const { t } = useTranslation()
|
||||
|
||||
useEffect(() => {
|
||||
fetchAllPrograms().then(setPrograms)
|
||||
}, [])
|
||||
const firstName = useUserStore(s => s.profile.name)
|
||||
const streak = useProgressStore(s => s.streak.current)
|
||||
const weeklyCount = useProgressStore(s => s.getWeeklyCount())
|
||||
const completedCount = useProgressStore(s => s.getCompletedCount())
|
||||
|
||||
// Group programs by body zone
|
||||
const programsByZone = useMemo(() => {
|
||||
const grouped: Record<BodyZone, WorkoutProgram[]> = {
|
||||
'upper-body': [],
|
||||
'lower-body': [],
|
||||
'full-body': [],
|
||||
}
|
||||
for (const program of programs) {
|
||||
if (grouped[program.bodyZone]) {
|
||||
grouped[program.bodyZone].push(program)
|
||||
}
|
||||
}
|
||||
return grouped
|
||||
}, [programs])
|
||||
|
||||
const greeting = (() => {
|
||||
const hour = new Date().getHours()
|
||||
if (hour < 12) return t('common:greetings.morning')
|
||||
if (hour < 18) return t('common:greetings.afternoon')
|
||||
return t('common:greetings.evening')
|
||||
})()
|
||||
const nameSuffix = firstName ? `, ${firstName}` : ''
|
||||
const mascotMessage = streak > 0
|
||||
? t('screens:home.mascotStreak', { count: streak, name: nameSuffix })
|
||||
: t('screens:home.mascotReady', { name: nameSuffix })
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Hero Section */}
|
||||
<View style={styles.heroSection}>
|
||||
<View style={styles.heroRow}>
|
||||
<View style={styles.heroTextContent}>
|
||||
<View style={styles.heroGreetingRow}>
|
||||
<StyledText preset="CALLOUT" color={colors.text.tertiary}>
|
||||
{greeting}
|
||||
</StyledText>
|
||||
{/* Inline streak badge */}
|
||||
{streak.current > 0 && (
|
||||
<View style={styles.streakBadge}>
|
||||
<Icon name="flame.fill" size={13} tintColor={GREEN['500']} />
|
||||
<StyledText size={12} weight="bold" color={GREEN['500']} style={{ fontVariant: ['tabular-nums'] }}>
|
||||
{streak.current}
|
||||
</StyledText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<StyledText preset="LARGE_TITLE" color={colors.text.primary} style={styles.heroName}>
|
||||
{userName}
|
||||
</StyledText>
|
||||
<StyledText preset="FOOTNOTE" color={colors.text.secondary} style={styles.heroSubtitle}>
|
||||
{t('home.programsByZone')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<Mascot size={90} style={{ marginLeft: SPACING[3], marginTop: -15 }} />
|
||||
</View>
|
||||
</View>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={[styles.content, { paddingTop: insets.top + SPACING[4], paddingBottom: insets.bottom + SPACING[6] }]}
|
||||
>
|
||||
{/* Header with settings */}
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.brand}>TabataGo</Text>
|
||||
<Pressable onPress={() => router.push('/settings')} style={styles.iconBtn} hitSlop={8}>
|
||||
<Icon name="gearshape" size={22} tintColor={TEXT.PRIMARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Quick Stats Row */}
|
||||
<QuickStats />
|
||||
{/* Mascot */}
|
||||
<View style={styles.mascotWrap}>
|
||||
<Mascot message={mascotMessage} />
|
||||
</View>
|
||||
|
||||
{/* Continue Session (if in progress) */}
|
||||
<ContinueSessionCard programs={programs} />
|
||||
{/* Stats pills */}
|
||||
<View style={styles.statsRow}>
|
||||
<StatPill value={streak} label={t('screens:home.statsStreak')} icon="flame.fill" color="#FF6B35" />
|
||||
<StatPill value={weeklyCount} label={t('screens:home.statsThisWeek')} icon="calendar" color={GREEN[500]} />
|
||||
<StatPill value={completedCount} label={t('screens:home.statsCompleted')} icon="checkmark.seal.fill" color="#5AC8FA" />
|
||||
</View>
|
||||
|
||||
{/* Body Zone Cards */}
|
||||
{BODY_ZONE_ORDER.map((zone) => (
|
||||
<BodyZoneCard
|
||||
key={zone}
|
||||
bodyZone={zone}
|
||||
programCount={programsByZone[zone].length}
|
||||
/>
|
||||
{/* Body zone cards */}
|
||||
<Text style={styles.sectionTitle}>{t('screens:zone.chooseYourFocus')}</Text>
|
||||
<View style={styles.zoneList}>
|
||||
{BODY_ZONES.map(zone => (
|
||||
<ZoneCard key={zone} zone={zone} onPress={() => router.push(`/zone/${zone}`)} />
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Tabata Programs Link */}
|
||||
<TabataLinkCard />
|
||||
</ScrollView>
|
||||
function StatPill({
|
||||
value,
|
||||
label,
|
||||
icon,
|
||||
color,
|
||||
}: {
|
||||
value: number
|
||||
label: string
|
||||
icon: any
|
||||
color: string
|
||||
}) {
|
||||
return (
|
||||
<View style={[styles.pill, { borderColor: withOpacity(color, 0.4) }]}>
|
||||
<Icon name={icon} size={16} tintColor={color} />
|
||||
<Text style={styles.pillValue}>{value}</Text>
|
||||
<Text style={styles.pillLabel}>{label}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
function ZoneCard({ zone, onPress }: { zone: BodyZone; onPress: () => void }) {
|
||||
const meta = BODY_ZONE_META[zone]
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onPress}
|
||||
style={({ pressed }) => [
|
||||
styles.zoneCard,
|
||||
{ borderColor: withOpacity(meta.color, 0.3) },
|
||||
pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
|
||||
]}
|
||||
>
|
||||
{/* Colored top strip with large icon */}
|
||||
<View style={[styles.zoneTopStrip, { backgroundColor: withOpacity(meta.color, 0.12) }]}>
|
||||
<View style={[styles.zoneIconCircle, { backgroundColor: withOpacity(meta.color, 0.22) }]}>
|
||||
<Icon name={meta.icon as any} size={34} tintColor={meta.color} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Content area */}
|
||||
<View style={styles.zoneContent}>
|
||||
<Text style={styles.zoneTitle}>{meta.label}</Text>
|
||||
<Text style={styles.zoneDesc} numberOfLines={2}>
|
||||
{t(meta.descKey)}
|
||||
</Text>
|
||||
|
||||
{/* Bottom row: level badge + chevron */}
|
||||
<View style={styles.zoneFooter}>
|
||||
<View style={[styles.zoneBadge, { backgroundColor: withOpacity(meta.color, 0.15) }]}>
|
||||
<Text style={[styles.zoneBadgeText, { color: meta.color }]}>
|
||||
{t('screens:home.zoneLevels')}
|
||||
</Text>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={16} tintColor={TEXT.TERTIARY} />
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: NAVY[900],
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
||||
},
|
||||
container: { flex: 1, backgroundColor: NAVY[900] },
|
||||
content: { paddingHorizontal: SPACING[5] },
|
||||
|
||||
// Hero Section
|
||||
heroSection: {
|
||||
marginTop: SPACING[4],
|
||||
marginBottom: SPACING[7],
|
||||
},
|
||||
heroRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
heroTextContent: {
|
||||
flex: 1,
|
||||
},
|
||||
heroGreetingRow: {
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: SPACING[4],
|
||||
},
|
||||
streakBadge: {
|
||||
flexDirection: 'row',
|
||||
brand: { ...TYPOGRAPHY.TITLE_1, color: TEXT.PRIMARY, letterSpacing: -0.5 },
|
||||
iconBtn: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
alignItems: 'center',
|
||||
gap: SPACING[1],
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.PILL,
|
||||
backgroundColor: GREEN.DIM,
|
||||
borderWidth: 1,
|
||||
borderColor: GREEN.BORDER,
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
heroName: {
|
||||
marginTop: SPACING[1],
|
||||
},
|
||||
heroSubtitle: {
|
||||
marginTop: SPACING[2],
|
||||
},
|
||||
|
||||
// Quick Stats Row
|
||||
quickStatsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[7],
|
||||
},
|
||||
quickStatPill: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[4],
|
||||
borderRadius: RADIUS.LG,
|
||||
justifyContent: 'center',
|
||||
backgroundColor: NAVY[800],
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
borderCurve: 'continuous',
|
||||
gap: SPACING[1],
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
|
||||
// Continue Session Card
|
||||
continueCard: {
|
||||
borderRadius: RADIUS.XL,
|
||||
marginBottom: SPACING[7],
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
backgroundColor: NAVY[800],
|
||||
},
|
||||
continueAccentLine: {
|
||||
height: 3,
|
||||
width: '100%',
|
||||
},
|
||||
continueContent: {
|
||||
padding: SPACING[5],
|
||||
},
|
||||
continueHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: SPACING[3],
|
||||
},
|
||||
mascotWrap: { alignItems: 'center', marginVertical: SPACING[4] },
|
||||
|
||||
// Body Zone Card
|
||||
bodyZoneCard: {
|
||||
statsRow: { flexDirection: 'row', gap: SPACING[2], marginBottom: SPACING[6] },
|
||||
pill: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
paddingHorizontal: SPACING[2],
|
||||
borderRadius: RADIUS.MD,
|
||||
borderWidth: 1,
|
||||
backgroundColor: NAVY[800],
|
||||
gap: 4,
|
||||
},
|
||||
pillValue: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY, fontVariant: ['tabular-nums'] },
|
||||
pillLabel: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
|
||||
sectionTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY, marginBottom: SPACING[3] },
|
||||
zoneList: { gap: SPACING[4] },
|
||||
zoneCard: {
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
marginBottom: SPACING[3],
|
||||
backgroundColor: NAVY[800],
|
||||
overflow: 'hidden' as const,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
|
||||
},
|
||||
bodyZoneCardInner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
zoneTopStrip: {
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
paddingVertical: SPACING[5],
|
||||
},
|
||||
zoneIconCircle: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 36,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'center' as const,
|
||||
},
|
||||
zoneContent: {
|
||||
padding: SPACING[4],
|
||||
gap: SPACING[3],
|
||||
gap: SPACING[2],
|
||||
},
|
||||
bodyZoneCardIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.FULL,
|
||||
borderWidth: 1.5,
|
||||
borderCurve: 'continuous',
|
||||
backgroundColor: NAVY[800],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zoneTitle: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY },
|
||||
zoneDesc: { ...TYPOGRAPHY.SUBHEADLINE, color: TEXT.SECONDARY, lineHeight: 20 },
|
||||
zoneFooter: {
|
||||
flexDirection: 'row' as const,
|
||||
alignItems: 'center' as const,
|
||||
justifyContent: 'space-between' as const,
|
||||
marginTop: SPACING[1],
|
||||
},
|
||||
bodyZoneCardInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
|
||||
// Tabata Link Card
|
||||
tabataLinkCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: SPACING[4],
|
||||
borderRadius: RADIUS.XL,
|
||||
borderWidth: 1,
|
||||
borderCurve: 'continuous',
|
||||
marginBottom: SPACING[6],
|
||||
},
|
||||
tabataLinkLeft: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
gap: SPACING[3],
|
||||
},
|
||||
tabataLinkIcon: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
tabataLinkText: {
|
||||
flex: 1,
|
||||
zoneBadge: {
|
||||
paddingHorizontal: SPACING[3],
|
||||
paddingVertical: SPACING[1],
|
||||
borderRadius: RADIUS.SM,
|
||||
},
|
||||
zoneBadgeText: { ...TYPOGRAPHY.CAPTION_1, fontWeight: '600' as const },
|
||||
})
|
||||
|
||||
@@ -1,372 +1,181 @@
|
||||
/**
|
||||
* TabataFit Profile Screen — Native iOS
|
||||
* Dark Medical design with SwiftUI Islands
|
||||
* TabataGo Profile Tab
|
||||
* User info, subscription status, quick stats. Settings via form sheet.
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react'
|
||||
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import {
|
||||
View,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Pressable,
|
||||
} from 'react-native'
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||
import * as Linking from 'expo-linking'
|
||||
import Constants from 'expo-constants'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useUserStore, useActivityStore } from '@/src/shared/stores'
|
||||
import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
|
||||
import { Icon } from '@/src/shared/components/Icon'
|
||||
import { useUserStore } from '@/src/shared/stores/userStore'
|
||||
import { useProgressStore } from '@/src/shared/stores/progressStore'
|
||||
import { usePurchases } from '@/src/shared/hooks'
|
||||
import { useThemeColors } from '@/src/shared/theme'
|
||||
import type { ThemeColors } from '@/src/shared/theme/types'
|
||||
import { StyledText } from '@/src/shared/components/StyledText'
|
||||
import { SPACING } from '@/src/shared/constants/spacing'
|
||||
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
|
||||
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
||||
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
||||
import { DataDeletionModal } from '@/src/shared/components/DataDeletionModal'
|
||||
import { deleteSyncedData } from '@/src/shared/services/sync'
|
||||
import { GREEN, NAVY, TEXT } from '@/src/shared/constants/colors'
|
||||
import { FONT_FAMILY } from '@/src/shared/constants/typography'
|
||||
import {
|
||||
NativeList,
|
||||
NativeSection,
|
||||
NativeSwitch,
|
||||
NativeLabeledRow,
|
||||
NativeButton,
|
||||
} from '@/src/shared/components/native'
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COMPONENT: PROFILE SCREEN
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
import { GREEN, NAVY, TEXT, BORDER_COLORS } from '@/src/shared/constants/colors'
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { t } = useTranslation('screens')
|
||||
const { t } = useTranslation()
|
||||
const router = useRouter()
|
||||
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 updateProfile = useUserStore((s) => s.updateProfile)
|
||||
const setSyncStatus = useUserStore((s) => s.setSyncStatus)
|
||||
const { restorePurchases, isPremium } = usePurchases()
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
|
||||
const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')
|
||||
const avatarInitial = profile.name?.[0]?.toUpperCase() || 'U'
|
||||
const profile = useUserStore(s => s.profile)
|
||||
const { isPremium } = usePurchases()
|
||||
|
||||
const history = useActivityStore((s) => s.history)
|
||||
const streak = useActivityStore((s) => s.streak)
|
||||
const stats = useMemo(() => ({
|
||||
workouts: history.length,
|
||||
streak: streak.current,
|
||||
calories: history.reduce((sum, r) => sum + (r.calories ?? 0), 0),
|
||||
}), [history, streak])
|
||||
const completedCount = useProgressStore(s => s.getCompletedCount())
|
||||
const streak = useProgressStore(s => s.streak)
|
||||
const weeklyCount = useProgressStore(s => s.getWeeklyCount())
|
||||
|
||||
const handleSignOut = () => {
|
||||
updateProfile({
|
||||
name: '',
|
||||
email: '',
|
||||
subscription: 'free',
|
||||
onboardingCompleted: false,
|
||||
})
|
||||
router.replace('/onboarding')
|
||||
}
|
||||
|
||||
const handleRestore = async () => {
|
||||
await restorePurchases()
|
||||
}
|
||||
|
||||
const handleDeleteData = async () => {
|
||||
const result = await deleteSyncedData()
|
||||
if (result.success) {
|
||||
setSyncStatus('unsynced', null)
|
||||
setShowDeleteModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReminderToggle = async (enabled: boolean) => {
|
||||
if (enabled) {
|
||||
const granted = await requestNotificationPermissions()
|
||||
if (!granted) return
|
||||
}
|
||||
updateSettings({ reminders: enabled })
|
||||
}
|
||||
|
||||
const handleRateApp = () => {
|
||||
Linking.openURL('https://apps.apple.com/app/tabatafit/id1234567890')
|
||||
}
|
||||
|
||||
const handleContactUs = () => {
|
||||
Linking.openURL('mailto:contact@tabatafit.app')
|
||||
}
|
||||
|
||||
const handlePrivacyPolicy = () => {
|
||||
router.push('/privacy')
|
||||
}
|
||||
|
||||
const handleFAQ = () => {
|
||||
Linking.openURL('https://tabatafit.app/faq')
|
||||
}
|
||||
|
||||
const appVersion = Constants.expoConfig?.version ?? '1.0.0'
|
||||
const avatarLetter = profile.name?.[0]?.toUpperCase() || '?'
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 40 }]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
PROFILE HEADER
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
<View style={styles.headerContainer}>
|
||||
<View style={styles.avatarContainer}>
|
||||
<StyledText size={48} weight="bold" color={TEXT.PRIMARY}>
|
||||
{avatarInitial}
|
||||
</StyledText>
|
||||
<ScrollView
|
||||
style={styles.container}
|
||||
contentContainerStyle={[styles.content, { paddingTop: insets.top + SPACING[4], paddingBottom: insets.bottom + SPACING[6] }]}
|
||||
contentInsetAdjustmentBehavior="automatic"
|
||||
>
|
||||
{/* Avatar + name */}
|
||||
<View style={styles.profileHeader}>
|
||||
<View style={styles.avatar}>
|
||||
<Text style={styles.avatarLetter}>{avatarLetter}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.nameContainer}>
|
||||
<StyledText size={22} weight="semibold" style={{ textAlign: 'center' }}>
|
||||
{profile.name || t('profile.guest')}
|
||||
</StyledText>
|
||||
<View style={styles.planContainer}>
|
||||
<StyledText size={15} color={isPremium ? GREEN[500] : colors.text.tertiary}>
|
||||
{planLabel}
|
||||
</StyledText>
|
||||
{isPremium && (
|
||||
<StyledText size={12} color={GREEN[500]}>✓</StyledText>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statItem}>
|
||||
<StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
|
||||
🔥 {stats.workouts}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
|
||||
{t('profile.statsWorkouts')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
|
||||
📅 {stats.streak}
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
|
||||
{t('profile.statsStreak')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<View style={styles.statItem}>
|
||||
<StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
|
||||
⚡️ {Math.round(stats.calories / 1000)}k
|
||||
</StyledText>
|
||||
<StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
|
||||
{t('profile.statsCalories')}
|
||||
</StyledText>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.name}>{profile.name || t('screens:profile.guest')}</Text>
|
||||
<View style={[styles.planBadge, { borderColor: isPremium ? GREEN[500] : BORDER_COLORS.DIM }]}>
|
||||
<Text style={[styles.planText, { color: isPremium ? GREEN[500] : TEXT.TERTIARY }]}>
|
||||
{isPremium ? t('screens:settings.premium') : t('screens:settings.free')}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Pressable onPress={() => router.push('/settings')} hitSlop={8}>
|
||||
<Icon name="gearshape.fill" size={22} tintColor={TEXT.TERTIARY} />
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
UPGRADE CTA (FREE USERS ONLY)
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
{/* Stats row */}
|
||||
<View style={styles.statsRow}>
|
||||
<StatPill value={streak.current} label={t('screens:home.statsStreak')} icon="flame.fill" color="#FF6B35" />
|
||||
<StatPill value={weeklyCount} label={t('screens:activity.thisWeek')} icon="calendar" color="#5AC8FA" />
|
||||
<StatPill value={completedCount} label={t('screens:home.statsCompleted')} icon="checkmark.seal.fill" color={GREEN[500]} />
|
||||
</View>
|
||||
|
||||
{/* Upgrade banner (free users) */}
|
||||
{!isPremium && (
|
||||
<View style={styles.upgradeCard}>
|
||||
<Pressable onPress={() => router.push('/paywall')}>
|
||||
<View style={styles.premiumContent}>
|
||||
<StyledText size={17} weight="semibold" color={GREEN[500]}>
|
||||
✨ {t('profile.upgradeTitle')}
|
||||
</StyledText>
|
||||
<StyledText size={15} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
|
||||
{t('profile.upgradeDescription')}
|
||||
</StyledText>
|
||||
</View>
|
||||
<StyledText size={15} color={GREEN[500]} style={{ marginTop: SPACING[3] }}>
|
||||
{t('profile.learnMore')} →
|
||||
</StyledText>
|
||||
</Pressable>
|
||||
</View>
|
||||
<Pressable
|
||||
style={[styles.upgradeBanner, { borderColor: GREEN[500] }]}
|
||||
onPress={() => router.push('/paywall')}
|
||||
>
|
||||
<Icon name="sparkles" size={20} tintColor={GREEN[500]} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.upgradeTitle}>{t('screens:profile.upgradeTitle')}</Text>
|
||||
<Text style={styles.upgradeDesc}>{t('screens:profile.upgradeDescription')}</Text>
|
||||
</View>
|
||||
<Icon name="chevron.right" size={16} tintColor={TEXT.TERTIARY} />
|
||||
</Pressable>
|
||||
)}
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
WORKOUT SETTINGS — Native List
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
<NativeList>
|
||||
<NativeSection title={t('profile.sectionWorkout').toUpperCase()}>
|
||||
<NativeLabeledRow label={t('profile.hapticFeedback')}>
|
||||
<NativeSwitch
|
||||
value={settings.haptics}
|
||||
onValueChange={(v) => updateSettings({ haptics: v })}
|
||||
/>
|
||||
</NativeLabeledRow>
|
||||
<NativeLabeledRow label={t('profile.soundEffects')}>
|
||||
<NativeSwitch
|
||||
value={settings.soundEffects}
|
||||
onValueChange={(v) => updateSettings({ soundEffects: v })}
|
||||
/>
|
||||
</NativeLabeledRow>
|
||||
<NativeLabeledRow label={t('profile.voiceCoaching')}>
|
||||
<NativeSwitch
|
||||
value={settings.voiceCoaching}
|
||||
onValueChange={(v) => updateSettings({ voiceCoaching: v })}
|
||||
/>
|
||||
</NativeLabeledRow>
|
||||
</NativeSection>
|
||||
</NativeList>
|
||||
{/* Settings link */}
|
||||
<Pressable style={styles.settingsRow} onPress={() => router.push('/settings')}>
|
||||
<Icon name="gearshape" size={20} tintColor={TEXT.SECONDARY} />
|
||||
<Text style={styles.settingsLabel}>{t('screens:settings.title')}</Text>
|
||||
<Icon name="chevron.right" size={16} tintColor={TEXT.TERTIARY} />
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
NOTIFICATIONS — Native List
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
<NativeList>
|
||||
<NativeSection title={t('profile.sectionNotifications').toUpperCase()}>
|
||||
<NativeLabeledRow label={t('profile.dailyReminders')}>
|
||||
<NativeSwitch
|
||||
value={settings.reminders}
|
||||
onValueChange={handleReminderToggle}
|
||||
/>
|
||||
</NativeLabeledRow>
|
||||
{settings.reminders && (
|
||||
<NativeLabeledRow label={t('profile.reminderTime')} value={settings.reminderTime} />
|
||||
)}
|
||||
</NativeSection>
|
||||
</NativeList>
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
PERSONALIZATION (PREMIUM ONLY)
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
{isPremium && (
|
||||
<NativeList>
|
||||
<NativeSection title={t('profile.sectionPersonalization').toUpperCase()}>
|
||||
<NativeLabeledRow
|
||||
label={
|
||||
profile.syncStatus === 'synced'
|
||||
? t('profile.personalizationEnabled')
|
||||
: t('profile.personalizationDisabled')
|
||||
}
|
||||
value={profile.syncStatus === 'synced' ? '✓' : '○'}
|
||||
/>
|
||||
</NativeSection>
|
||||
</NativeList>
|
||||
)}
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
ABOUT — Native List
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
<NativeList>
|
||||
<NativeSection title={t('profile.sectionAbout').toUpperCase()}>
|
||||
<NativeLabeledRow
|
||||
label="Programmes Kiné"
|
||||
value="Rééducation et physiothérapie"
|
||||
chevron
|
||||
onPress={() => router.push('/program/debutant' as any)}
|
||||
/>
|
||||
<NativeLabeledRow label={t('profile.version')} value={appVersion} />
|
||||
<NativeLabeledRow label={t('profile.rateApp')} chevron onPress={handleRateApp} />
|
||||
<NativeLabeledRow label={t('profile.contactUs')} chevron onPress={handleContactUs} />
|
||||
<NativeLabeledRow label={t('profile.faq')} chevron onPress={handleFAQ} />
|
||||
<NativeLabeledRow label={t('profile.privacyPolicy')} chevron onPress={handlePrivacyPolicy} />
|
||||
</NativeSection>
|
||||
</NativeList>
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
ACCOUNT (PREMIUM ONLY)
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
{isPremium && (
|
||||
<NativeList>
|
||||
<NativeSection title={t('profile.sectionAccount').toUpperCase()}>
|
||||
<NativeLabeledRow label={t('profile.restorePurchases')} chevron onPress={handleRestore} />
|
||||
</NativeSection>
|
||||
</NativeList>
|
||||
)}
|
||||
|
||||
{/* ════════════════════════════════════════════════════════════════════
|
||||
SIGN OUT — Native Button
|
||||
═══════════════════════════════════════════════════════════════════ */}
|
||||
<View style={styles.signOutContainer}>
|
||||
<NativeButton
|
||||
variant="destructive"
|
||||
title={t('profile.signOut')}
|
||||
onPress={handleSignOut}
|
||||
/>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
<DataDeletionModal
|
||||
visible={showDeleteModal}
|
||||
onDelete={handleDeleteData}
|
||||
onCancel={() => setShowDeleteModal(false)}
|
||||
/>
|
||||
function StatPill({ value, label, icon, color }: { value: number; label: string; icon: any; color: string }) {
|
||||
return (
|
||||
<View style={pillStyles.pill}>
|
||||
<Icon name={icon} size={18} tintColor={color} />
|
||||
<Text selectable style={pillStyles.value}>{value}</Text>
|
||||
<Text style={pillStyles.label}>{label}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// STYLES
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
const pillStyles = StyleSheet.create({
|
||||
pill: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[3],
|
||||
borderRadius: RADIUS.MD,
|
||||
borderWidth: 1,
|
||||
backgroundColor: NAVY[800],
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
gap: 4,
|
||||
},
|
||||
value: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY, fontVariant: ['tabular-nums'] },
|
||||
label: { ...TYPOGRAPHY.CAPTION_2, color: TEXT.TERTIARY, textAlign: 'center' },
|
||||
})
|
||||
|
||||
function createStyles(colors: ThemeColors) {
|
||||
return StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.bg.base,
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
headerContainer: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: SPACING[6],
|
||||
paddingHorizontal: SPACING[4],
|
||||
},
|
||||
avatarContainer: {
|
||||
width: 90,
|
||||
height: 90,
|
||||
borderRadius: RADIUS.FULL,
|
||||
backgroundColor: NAVY[700],
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
nameContainer: {
|
||||
marginTop: SPACING[4],
|
||||
alignItems: 'center',
|
||||
},
|
||||
planContainer: {
|
||||
container: { flex: 1, backgroundColor: colors.bg.base },
|
||||
content: { paddingHorizontal: LAYOUT.SCREEN_PADDING },
|
||||
|
||||
profileHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: SPACING[1],
|
||||
gap: SPACING[1],
|
||||
gap: SPACING[3],
|
||||
marginBottom: SPACING[5],
|
||||
},
|
||||
statsContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
marginTop: SPACING[4],
|
||||
gap: SPACING[8],
|
||||
},
|
||||
statItem: {
|
||||
avatar: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: NAVY[700] ?? NAVY[800],
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
},
|
||||
upgradeCard: {
|
||||
marginHorizontal: SPACING[5],
|
||||
paddingVertical: SPACING[4],
|
||||
paddingHorizontal: SPACING[4],
|
||||
backgroundColor: NAVY[800],
|
||||
borderRadius: RADIUS.LG,
|
||||
borderCurve: 'continuous' as const,
|
||||
avatarLetter: { ...TYPOGRAPHY.TITLE_1, color: TEXT.PRIMARY },
|
||||
name: { ...TYPOGRAPHY.TITLE_2, color: TEXT.PRIMARY },
|
||||
planBadge: {
|
||||
alignSelf: 'flex-start',
|
||||
marginTop: 4,
|
||||
paddingHorizontal: SPACING[2],
|
||||
paddingVertical: 2,
|
||||
borderRadius: RADIUS.SM,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border.dim,
|
||||
},
|
||||
premiumContent: {
|
||||
gap: SPACING[1],
|
||||
planText: { ...TYPOGRAPHY.CAPTION_2, fontWeight: '600' },
|
||||
|
||||
statsRow: { flexDirection: 'row', gap: SPACING[2], marginBottom: SPACING[5] },
|
||||
|
||||
upgradeBanner: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
padding: SPACING[4],
|
||||
borderRadius: RADIUS.LG,
|
||||
borderWidth: 1,
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
marginBottom: SPACING[3],
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
signOutContainer: {
|
||||
marginTop: SPACING[5],
|
||||
marginHorizontal: SPACING[5],
|
||||
upgradeTitle: { ...TYPOGRAPHY.HEADLINE, color: TEXT.PRIMARY },
|
||||
upgradeDesc: { ...TYPOGRAPHY.CAPTION_1, color: TEXT.SECONDARY, marginTop: 2 },
|
||||
|
||||
settingsRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: SPACING[3],
|
||||
padding: SPACING[4],
|
||||
borderRadius: RADIUS.LG,
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.DIM,
|
||||
backgroundColor: colors.surface.default.backgroundColor,
|
||||
borderCurve: 'continuous',
|
||||
},
|
||||
settingsLabel: { ...TYPOGRAPHY.BODY, color: TEXT.PRIMARY, flex: 1 },
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user