feat: update mobile app screens

- Enhance browse tab with improved navigation
- Update home tab with new features
- Refactor profile tab
- Update paywall screen styling

app/(tabs)/index.tsx

@@ -1,16 +1,16 @@
 /**
- * TabataFit Home Screen
- * React Native UI — wired to shared data
+ * TabataFit Home Screen - Premium Redesign
+ * React Native UI with glassmorphism
  */
 
-import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText, Image as RNImage } from 'react-native'
+import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
 import { useRouter } from 'expo-router'
 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 { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHaptics } from '@/src/shared/hooks'
 import { useUserStore, useActivityStore } from '@/src/shared/stores'
@@ -22,50 +22,35 @@ import {
 } from '@/src/shared/data'
 import { useTranslatedWorkouts, useTranslatedCollections } from '@/src/shared/data/useTranslatedData'
 import { StyledText } from '@/src/shared/components/StyledText'
+import { WorkoutCard } from '@/src/shared/components/WorkoutCard'
+import { CollectionCard } from '@/src/shared/components/CollectionCard'
 
 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'
+import type { WorkoutCategory } from '@/src/shared/types'
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window')
-const CARD_WIDTH = SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2
 
 const FONTS = {
   LARGE_TITLE: 34,
   TITLE: 28,
   TITLE_2: 22,
   HEADLINE: 17,
-  BODY: 17,
   SUBHEADLINE: 15,
   CAPTION_1: 12,
   CAPTION_2: 11,
 }
 
-// ═══════════════════════════════════════════════════════════════════════════
-// HELPERS
-// ═══════════════════════════════════════════════════════════════════════════
-
-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="#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>
-    </Pressable>
-  )
-}
+const CATEGORIES: { id: WorkoutCategory | 'all'; key: string }[] = [
+  { id: 'all', key: 'all' },
+  { id: 'full-body', key: 'fullBody' },
+  { id: 'core', key: 'core' },
+  { id: 'upper-body', key: 'upperBody' },
+  { id: 'lower-body', key: 'lowerBody' },
+  { id: 'cardio', key: 'cardio' },
+]
 
 // ═══════════════════════════════════════════════════════════════════════════
 // MAIN SCREEN
@@ -82,8 +67,10 @@ export default function HomeScreen() {
   const history = useActivityStore((s) => s.history)
   const recentWorkouts = useMemo(() => history.slice(0, 3), [history])
 
+  const [selectedCategory, setSelectedCategory] = useState<WorkoutCategory | 'all'>('all')
+
   const featured = getFeaturedWorkouts()[0] ?? WORKOUTS[0]
-  const popular = getPopularWorkouts(4)
+  const popular = getPopularWorkouts(6)
   const translatedPopular = useTranslatedWorkouts(popular)
   const translatedCollections = useTranslatedCollections(COLLECTIONS)
 
@@ -94,13 +81,21 @@ export default function HomeScreen() {
     return t('greetings.evening')
   })()
 
-  const featuredTitle = t(`content:workouts.${featured.id}`, { defaultValue: featured.title })
-
   const handleWorkoutPress = (id: string) => {
     haptics.buttonTap()
     router.push(`/workout/${id}`)
   }
 
+  const handleCollectionPress = (id: string) => {
+    haptics.buttonTap()
+    router.push(`/collection/${id}`)
+  }
+
+  const filteredWorkouts = useMemo(() => {
+    if (selectedCategory === 'all') return translatedPopular
+    return translatedPopular.filter((w) => w.category === selectedCategory)
+  }, [translatedPopular, selectedCategory])
+
   return (
     <View style={[styles.container, { paddingTop: insets.top }]}>
       <ScrollView
@@ -108,151 +103,124 @@ export default function HomeScreen() {
         contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
         showsVerticalScrollIndicator={false}
       >
-        {/* Header */}
-        <View style={styles.header}>
-          <View style={{ flex: 1, marginRight: SPACING[3] }}>
-            <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
-              {greeting}
-            </StyledText>
+        {/* Hero Section */}
+        <View style={styles.heroSection}>
+          <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
+            {greeting}
+          </StyledText>
+          <View style={styles.heroHeader}>
             <StyledText
               size={FONTS.LARGE_TITLE}
               weight="bold"
               color={colors.text.primary}
-              numberOfLines={1}
+              style={styles.heroTitle}
             >
               {userName}
             </StyledText>
+            <Pressable style={styles.profileButton}>
+              <Ionicons name="person-circle-outline" size={40} color={colors.text.primary} />
+            </Pressable>
           </View>
-          <Pressable style={styles.profileButton}>
-            <Ionicons name="person-circle-outline" size={32} color={colors.text.primary} />
-          </Pressable>
         </View>
 
-        {/* Featured */}
-        <Pressable
-          style={styles.featuredCard}
-          onPress={() => handleWorkoutPress(featured.id)}
-        >
-          {featured.thumbnailUrl ? (
-            <RNImage
-              source={{ uri: featured.thumbnailUrl }}
-              style={StyleSheet.absoluteFill}
-              resizeMode="cover"
-            />
-          ) : (
-            <LinearGradient
-              colors={[BRAND.PRIMARY, BRAND.PRIMARY_DARK]}
-              style={StyleSheet.absoluteFill}
-            />
-          )}
-          <LinearGradient
-            colors={GRADIENTS.VIDEO_OVERLAY}
-            style={StyleSheet.absoluteFill}
-          />
-
-          <View style={styles.featuredBadge}>
-            <RNText style={styles.featuredBadgeText}>{'🔥 ' + t('screens:home.featured')}</RNText>
-          </View>
-
-          <View style={styles.featuredContent}>
-            <StyledText size={FONTS.TITLE} weight="bold" color="#FFFFFF">
-              {featuredTitle}
-            </StyledText>
-            <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)}>{t('start')}</PrimaryButton>
-              <Pressable style={styles.saveButton}>
-                <Ionicons name="heart-outline" size={24} color="#FFFFFF" />
-              </Pressable>
-            </View>
-          </View>
-        </Pressable>
-
-        {/* Continue Watching — from activity store */}
-        {recentWorkouts.length > 0 && (
-          <View style={styles.section}>
-            <View style={styles.sectionHeader}>
-              <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.recent')}</StyledText>
-              <PlainButton>{t('seeAll')}</PlainButton>
-            </View>
-            <ScrollView
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              contentContainerStyle={styles.horizontalScroll}
-            >
-              {recentWorkouts.map((result) => {
-                const workout = WORKOUTS.find(w => w.id === result.workoutId)
-                if (!workout) return null
-                const workoutTitle = t(`content:workouts.${workout.id}`, { defaultValue: workout.title })
-                return (
-                  <Pressable
-                    key={result.id}
-                    style={styles.continueCard}
-                    onPress={() => handleWorkoutPress(result.workoutId)}
-                  >
-                    <View style={styles.continueThumb}>
-                      <LinearGradient
-                        colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
-                        style={StyleSheet.absoluteFill}
-                      />
-                      <Ionicons name="flame" size={32} color="#FFFFFF" />
-                    </View>
-                    <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>
-                )
-              })}
-            </ScrollView>
-          </View>
-        )}
-
-        {/* Popular This Week */}
+        {/* Featured Workout */}
+        <View style={styles.section}>
+          <View style={styles.sectionHeader}>
+            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+              {t('screens:home.featured')}
+            </StyledText>
+          </View>
+          <WorkoutCard
+            workout={featured}
+            variant="featured"
+            onPress={() => handleWorkoutPress(featured.id)}
+          />
+        </View>
+
+        {/* Category Filter */}
         <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:home.popularThisWeek')}</StyledText>
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.horizontalScroll}
+            contentContainerStyle={styles.categoriesScroll}
           >
-            {translatedPopular.map((item) => (
+            {CATEGORIES.map((cat) => (
               <Pressable
-                key={item.id}
-                style={styles.popularCard}
-                onPress={() => handleWorkoutPress(item.id)}
+                key={cat.id}
+                style={[
+                  styles.categoryChip,
+                  selectedCategory === cat.id && styles.categoryChipActive,
+                ]}
+                onPress={() => {
+                  haptics.buttonTap()
+                  setSelectedCategory(cat.id)
+                }}
               >
-                <View style={styles.popularThumb}>
-                  <Ionicons name="flame" size={24} color={BRAND.PRIMARY} />
-                </View>
-                <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>
+                {selectedCategory === cat.id && (
+                  <BlurView
+                    intensity={colors.glass.blurMedium}
+                    tint={colors.glass.blurTint}
+                    style={StyleSheet.absoluteFill}
+                  />
+                )}
+                <StyledText
+                  size={14}
+                  weight={selectedCategory === cat.id ? 'semibold' : 'medium'}
+                  color={selectedCategory === cat.id ? colors.text.primary : colors.text.secondary}
+                >
+                  {t(`categories.${cat.key}`)}
+                </StyledText>
               </Pressable>
             ))}
           </ScrollView>
         </View>
 
-        {/* Collections */}
+        {/* Popular Workouts - Horizontal */}
+        {filteredWorkouts.length > 0 && (
+          <View style={styles.section}>
+            <View style={styles.sectionHeader}>
+              <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+                {t('screens:home.popularThisWeek')}
+              </StyledText>
+              <Pressable hitSlop={8}>
+                <StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">
+                  {t('seeAll')}
+                </StyledText>
+              </Pressable>
+            </View>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.workoutsScroll}
+            >
+              {filteredWorkouts.map((workout) => (
+                <WorkoutCard
+                  key={workout.id}
+                  workout={workout}
+                  variant="horizontal"
+                  onPress={() => handleWorkoutPress(workout.id)}
+                />
+              ))}
+            </ScrollView>
+          </View>
+        )}
+
+        {/* Collections Grid */}
         <View style={styles.section}>
-          <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={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={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={colors.text.tertiary} />
-              </View>
-            </Pressable>
-          ))}
+          <View style={styles.sectionHeader}>
+            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+              {t('screens:home.collections')}
+            </StyledText>
+          </View>
+          <View style={styles.collectionsGrid}>
+            {translatedCollections.map((collection) => (
+              <CollectionCard
+                key={collection.id}
+                collection={collection}
+                onPress={() => handleCollectionPress(collection.id)}
+              />
+            ))}
+          </View>
         </View>
       </ScrollView>
     </View>
@@ -276,89 +244,25 @@ function createStyles(colors: ThemeColors) {
       paddingHorizontal: LAYOUT.SCREEN_PADDING,
     },
 
-    // Header
-    header: {
+    // Hero Section
+    heroSection: {
+      marginBottom: SPACING[6],
+    },
+    heroHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      marginBottom: SPACING[6],
+      marginTop: SPACING[2],
+    },
+    heroTitle: {
+      flex: 1,
+      marginRight: SPACING[3],
     },
     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: '#FFFFFF',
-    },
-    plainButtonText: {
-      fontSize: FONTS.BODY,
-      color: BRAND.PRIMARY,
-    },
-
-    // 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
@@ -371,61 +275,36 @@ function createStyles(colors: ThemeColors) {
       alignItems: 'center',
       marginBottom: SPACING[4],
     },
-    horizontalScroll: {
+
+    // Categories
+    categoriesScroll: {
+      gap: SPACING[2],
+      paddingRight: SPACING[4],
+    },
+    categoryChip: {
+      paddingHorizontal: SPACING[4],
+      paddingVertical: SPACING[2],
+      borderRadius: RADIUS.FULL,
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+    },
+    categoryChipActive: {
+      borderColor: BRAND.PRIMARY,
+      backgroundColor: `${BRAND.PRIMARY}30`,
+    },
+
+    // Workouts Scroll
+    workoutsScroll: {
       gap: SPACING[3],
+      paddingRight: SPACING[4],
     },
 
-    // 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: colors.border.glass,
-      backgroundColor: colors.bg.overlay1,
-    },
-
-    // Collection Card
-    collectionCard: {
-      height: 80,
-      borderRadius: RADIUS.LG,
-      overflow: 'hidden',
-      marginBottom: SPACING[3],
-      borderWidth: 1,
-      borderColor: colors.border.glass,
-    },
-    collectionContent: {
-      flex: 1,
+    // Collections Grid
+    collectionsGrid: {
       flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: SPACING[5],
-    },
-    collectionIcon: {
-      fontSize: 28,
-      marginRight: SPACING[4],
-    },
-    collectionText: {
-      flex: 1,
+      flexWrap: 'wrap',
+      gap: SPACING[3],
     },
   })
 }