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

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',
},
})
}