feat: integrate theme and i18n across all screens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/(tabs)/index.tsx

@@ -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,
+    },
+  })
+}