feat: integrate theme and i18n across all screens

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

app/collection/[id].tsx

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