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)/browse.tsx

@@ -1,32 +1,32 @@
 /**
- * TabataFit Browse Screen
- * React Native UI — wired to shared data
+ * TabataFit Browse Screen - Premium Redesign
+ * React Native UI with glassmorphism
  */
 
-import { View, StyleSheet, ScrollView, Pressable, Dimensions, Text as RNText } from 'react-native'
+import { View, StyleSheet, ScrollView, Pressable, Dimensions, TextInput } 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 {
   COLLECTIONS,
-  PROGRAMS,
   getFeaturedCollection,
-  COLLECTION_COLORS,
   WORKOUTS,
 } from '@/src/shared/data'
-import { useTranslatedCollections, useTranslatedPrograms, useTranslatedWorkouts } from '@/src/shared/data/useTranslatedData'
+import { useTranslatedCollections, useTranslatedWorkouts } 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 } 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')
 
@@ -40,18 +40,14 @@ const FONTS = {
   CAPTION_2: 11,
 }
 
-function TextButton({ children, onPress }: { children: string; onPress?: () => void }) {
-  return (
-    <Pressable onPress={onPress} hitSlop={8}>
-      <StyledText size={FONTS.SUBHEADLINE} color={BRAND.PRIMARY} weight="medium">
-        {children}
-      </StyledText>
-    </Pressable>
-  )
-}
-
-// New Releases: last 4 workouts
-const NEW_RELEASES = WORKOUTS.slice(-4)
+const CATEGORIES: { id: WorkoutCategory | 'all'; translationKey: string }[] = [
+  { id: 'all', translationKey: 'common:categories.all' },
+  { id: 'full-body', translationKey: 'common:categories.fullBody' },
+  { id: 'core', translationKey: 'common:categories.core' },
+  { id: 'upper-body', translationKey: 'common:categories.upperBody' },
+  { id: 'lower-body', translationKey: 'common:categories.lowerBody' },
+  { id: 'cardio', translationKey: 'common:categories.cardio' },
+]
 
 // ═══════════════════════════════════════════════════════════════════════════
 // MAIN SCREEN
@@ -65,10 +61,32 @@ export default function BrowseScreen() {
   const colors = useThemeColors()
   const styles = useMemo(() => createStyles(colors), [colors])
 
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategory, setSelectedCategory] = useState<WorkoutCategory | 'all'>('all')
+
   const featuredCollection = getFeaturedCollection()
   const translatedCollections = useTranslatedCollections(COLLECTIONS)
-  const translatedPrograms = useTranslatedPrograms(PROGRAMS)
-  const translatedNewReleases = useTranslatedWorkouts(NEW_RELEASES)
+  const translatedWorkouts = useTranslatedWorkouts(WORKOUTS)
+
+  // Filter workouts based on search and category
+  const filteredWorkouts = useMemo(() => {
+    let filtered = translatedWorkouts
+
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase()
+      filtered = filtered.filter(
+        (w) =>
+          w.title.toLowerCase().includes(query) ||
+          w.category.toLowerCase().includes(query)
+      )
+    }
+
+    if (selectedCategory !== 'all') {
+      filtered = filtered.filter((w) => w.category === selectedCategory)
+    }
+
+    return filtered
+  }, [translatedWorkouts, searchQuery, selectedCategory])
 
   const handleWorkoutPress = (id: string) => {
     haptics.buttonTap()
@@ -88,126 +106,151 @@ export default function BrowseScreen() {
         showsVerticalScrollIndicator={false}
       >
         {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>{t('screens:browse.title')}</StyledText>
+        <View style={styles.header}>
+          <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
+            {t('screens:browse.title')}
+          </StyledText>
+        </View>
+
+        {/* Search Bar */}
+        <View style={styles.searchContainer}>
+          <BlurView
+            intensity={colors.glass.blurLight}
+            tint={colors.glass.blurTint}
+            style={StyleSheet.absoluteFill}
+          />
+          <Ionicons name="search" size={20} color={colors.text.tertiary} />
+          <TextInput
+            style={styles.searchInput}
+            placeholder={t('screens:browse.searchPlaceholder') || 'Search workouts...'}
+            placeholderTextColor={colors.text.tertiary}
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+          />
+          {searchQuery.length > 0 && (
+            <Pressable
+              onPress={() => setSearchQuery('')}
+              hitSlop={8}
+            >
+              <Ionicons name="close-circle" size={20} color={colors.text.tertiary} />
+            </Pressable>
+          )}
+        </View>
+
+        {/* Category Filter Chips */}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.categoriesScroll}
+          style={styles.categoriesContainer}
+        >
+          {CATEGORIES.map((cat) => (
+            <Pressable
+              key={cat.id}
+              style={[
+                styles.categoryChip,
+                selectedCategory === cat.id && styles.categoryChipActive,
+              ]}
+              onPress={() => {
+                haptics.buttonTap()
+                setSelectedCategory(cat.id)
+              }}
+            >
+              {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 ? '#FFFFFF' : colors.text.secondary}
+              >
+                {t(cat.translationKey)}
+              </StyledText>
+            </Pressable>
+          ))}
+        </ScrollView>
 
         {/* Featured Collection */}
-        {featuredCollection && (
-          <Pressable style={styles.featuredCard} onPress={() => handleCollectionPress(featuredCollection.id)}>
-            <LinearGradient
-              colors={featuredCollection.gradient ?? [BRAND.PRIMARY, '#FF3B30']}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 1 }}
-              style={StyleSheet.absoluteFill}
+        {featuredCollection && !searchQuery && selectedCategory === 'all' && (
+          <View style={styles.section}>
+            <View style={styles.sectionHeader}>
+              <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+                {t('screens:browse.featured')}
+              </StyledText>
+            </View>
+            <CollectionCard
+              collection={featuredCollection}
+              onPress={() => handleCollectionPress(featuredCollection.id)}
             />
-
-            <View style={styles.featuredBadge}>
-              <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="#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="#FFFFFF" />
-                  <StyledText size={FONTS.CAPTION_1} color="#FFFFFF">{t('plurals.workout', { count: featuredCollection.workoutIds.length })}</StyledText>
-                </View>
-              </View>
-            </View>
-          </Pressable>
+          </View>
         )}
 
         {/* Collections Grid */}
-        <View style={styles.section}>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.collections')}</StyledText>
-          <View style={styles.collectionsGrid}>
-            {translatedCollections.map((collection) => {
-              const color = COLLECTION_COLORS[collection.id] ?? BRAND.PRIMARY
-              return (
-                <Pressable
+        {!searchQuery && selectedCategory === 'all' && (
+          <View style={styles.section}>
+            <View style={styles.sectionHeader}>
+              <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+                {t('screens:browse.collections')}
+              </StyledText>
+            </View>
+            <View style={styles.collectionsGrid}>
+              {translatedCollections.map((collection) => (
+                <CollectionCard
                   key={collection.id}
-                  style={styles.collectionCard}
+                  collection={collection}
                   onPress={() => handleCollectionPress(collection.id)}
-                >
-                  <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={colors.text.primary} numberOfLines={1}>
-                    {collection.title}
-                  </StyledText>
-                  <StyledText size={FONTS.CAPTION_1} color={color}>
-                    {t('plurals.workout', { count: collection.workoutIds.length })}
-                  </StyledText>
-                </Pressable>
-              )
-            })}
+                />
+              ))}
+            </View>
           </View>
-        </View>
+        )}
 
-        {/* Programs */}
+        {/* All Workouts Grid */}
         <View style={styles.section}>
           <View style={styles.sectionHeader}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.programs')}</StyledText>
-            <TextButton>{t('seeAll')}</TextButton>
+            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
+              {searchQuery ? t('screens:browse.searchResults') || 'Results' : t('screens:browse.allWorkouts') || 'All Workouts'}
+            </StyledText>
+            <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>
+              {filteredWorkouts.length} {t('plurals.workout', { count: filteredWorkouts.length })}
+            </StyledText>
           </View>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.programsScroll}
-          >
-            {translatedPrograms.map((program) => (
-              <View key={program.id} style={styles.programCard}>
-                <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={colors.text.primary}>{t(`levels.${program.level.toLowerCase()}`)}</StyledText>
-                  </View>
-                </View>
-
-                <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={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={colors.text.tertiary} />
-                    <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary}>{t('screens:browse.timesPerWeek', { count: program.workoutsPerWeek })}</StyledText>
-                  </View>
-                </View>
-              </View>
-            ))}
-          </ScrollView>
-        </View>
-
-        {/* New Releases */}
-        <View style={styles.section}>
-          <View style={styles.sectionHeader}>
-            <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>{t('screens:browse.newReleases')}</StyledText>
-          </View>
-          {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>
-          ))}
+          {filteredWorkouts.length > 0 ? (
+            <View style={styles.workoutsGrid}>
+              {filteredWorkouts.map((workout) => (
+                <WorkoutCard
+                  key={workout.id}
+                  workout={workout}
+                  variant="grid"
+                  onPress={() => handleWorkoutPress(workout.id)}
+                />
+              ))}
+            </View>
+          ) : (
+            <View style={styles.emptyState}>
+              <Ionicons name="fitness-outline" size={48} color={colors.text.tertiary} />
+              <StyledText
+                size={FONTS.HEADLINE}
+                weight="medium"
+                color={colors.text.secondary}
+                style={{ marginTop: SPACING[4] }}
+              >
+                {t('screens:browse.noResults') || 'No workouts found'}
+              </StyledText>
+              <StyledText
+                size={FONTS.SUBHEADLINE}
+                color={colors.text.tertiary}
+                style={{ marginTop: SPACING[2], textAlign: 'center' }}
+              >
+                {t('screens:browse.tryDifferentSearch') || 'Try a different search or category'}
+              </StyledText>
+            </View>
+          )}
         </View>
       </ScrollView>
     </View>
@@ -218,8 +261,6 @@ export default function BrowseScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════
 
-const COLLECTION_CARD_WIDTH = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
-
 function createStyles(colors: ThemeColors) {
   return StyleSheet.create({
     container: {
@@ -233,52 +274,57 @@ function createStyles(colors: ThemeColors) {
       paddingHorizontal: LAYOUT.SCREEN_PADDING,
     },
 
-    // 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],
+    // Header
+    header: {
+      marginBottom: SPACING[4],
     },
 
-    // Section
-    section: {
+    // Search Bar
+    searchContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      height: 48,
+      borderRadius: RADIUS.LG,
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      paddingHorizontal: SPACING[4],
+      marginBottom: SPACING[4],
+      overflow: 'hidden',
+    },
+    searchInput: {
+      flex: 1,
+      marginLeft: SPACING[3],
+      marginRight: SPACING[2],
+      fontSize: FONTS.HEADLINE,
+      color: colors.text.primary,
+      height: '100%',
+    },
+
+    // Categories
+    categoriesContainer: {
       marginBottom: SPACING[6],
     },
+    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`,
+    },
+
+    // Sections
+    section: {
+      marginBottom: SPACING[8],
+    },
     sectionHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
@@ -286,96 +332,25 @@ function createStyles(colors: ThemeColors) {
       marginBottom: SPACING[4],
     },
 
-    // Collections Grid
+    // Collections
     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: {
+    // Workouts Grid
+    workoutsGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
       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: colors.bg.surface,
-      borderRadius: RADIUS.LG,
-      marginBottom: SPACING[2],
-      gap: SPACING[3],
-    },
-    releaseAvatar: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
+    // Empty State
+    emptyState: {
       alignItems: 'center',
       justifyContent: 'center',
-    },
-    releaseInitial: {
-      fontSize: 18,
-      fontWeight: '700',
-      color: '#FFFFFF',
-    },
-    releaseInfo: {
-      flex: 1,
-      gap: 2,
+      paddingVertical: SPACING[12],
     },
   })
 }