feat: integrate theme and i18n across all screens

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

app/(tabs)/browse.tsx

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