refactor: remove explore tab, simplify to 3-tab layout (Home, Progress, Profile)

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

app/(tabs)/activity.tsx

@@ -6,10 +6,7 @@
 import { View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { LinearGradient } from 'expo-linear-gradient'
-import { BlurView } from 'expo-blur'
 import { Icon, type IconName } from '@/src/shared/components/Icon'
-import Svg, { Circle } from 'react-native-svg'
 
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -17,62 +14,34 @@ import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
 import { getWorkoutById } from '@/src/shared/data'
 import { ACHIEVEMENTS } from '@/src/shared/data'
 import { StyledText } from '@/src/shared/components/StyledText'
+import { NativeGauge } from '@/src/shared/components/native'
+import { NativeButton } from '@/src/shared/components/native'
 
-import { useThemeColors, BRAND, PHASE, GRADIENTS } from '@/src/shared/theme'
+import { useThemeColors, BRAND, PHASE } 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 { GREEN, NAVY, BORDER_COLORS, TEXT } from '@/src/shared/constants/colors'
 
 const { width: SCREEN_WIDTH } = Dimensions.get('window')
 
 // ═══════════════════════════════════════════════════════════════════════════
-// STAT RING — Custom circular progress (pure RN, no SwiftUI)
+// STAT RING — Native SwiftUI Gauge
 // ═══════════════════════════════════════════════════════════════════════════
 
 function StatRing({
   value,
   max,
   color,
-  size = 64,
+  size = 52,
 }: {
   value: number
   max: number
   color: string
   size?: number
 }) {
-  const colors = useThemeColors()
-  const strokeWidth = 5
-  const radius = (size - strokeWidth) / 2
-  const circumference = 2 * Math.PI * radius
-  const progress = Math.min(value / max, 1)
-  const strokeDashoffset = circumference * (1 - progress)
-
   return (
-    <Svg width={size} height={size}>
-      {/* Track */}
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke={colors.bg.overlay2}
-        strokeWidth={strokeWidth}
-        fill="none"
-      />
-      {/* Progress */}
-      <Circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        stroke={color}
-        strokeWidth={strokeWidth}
-        fill="none"
-        strokeDasharray={circumference}
-        strokeDashoffset={strokeDashoffset}
-        strokeLinecap="round"
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-        opacity={progress > 0 ? 1 : 0.3}
-      />
-    </Svg>
+    <NativeGauge value={value} maxValue={max} color={color} size={size} />
   )
 }
 
@@ -97,7 +66,6 @@ function StatCard({
   const styles = useMemo(() => createStyles(colors), [colors])
   return (
     <View style={styles.statCard}>
-      <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
       <View style={styles.statCardInner}>
         <StatRing value={value} max={max} color={color} size={52} />
         <View style={{ flex: 1, marginLeft: SPACING[3] }}>
@@ -131,14 +99,7 @@ function WeeklyBar({
   const styles = useMemo(() => createStyles(colors), [colors])
   return (
     <View style={styles.weekBarColumn}>
-      <View style={[styles.weekBar, completed && styles.weekBarFilled]}>
-        {completed && (
-          <LinearGradient
-            colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
-            style={[StyleSheet.absoluteFill, { borderRadius: 4 }]}
-          />
-        )}
-      </View>
+      <View style={[styles.weekBar, completed && styles.weekBarFilled]} />
       <StyledText
         size={11}
         weight={isToday ? 'bold' : 'regular'}
@@ -162,7 +123,7 @@ function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
   return (
     <View style={styles.emptyState}>
       <View style={styles.emptyIconCircle}>
-        <Icon name="flame" size={48} tintColor={BRAND.PRIMARY} />
+        <Icon name="flame" size={48} tintColor={GREEN[500]} />
       </View>
       <StyledText size={22} weight="bold" color={colors.text.primary} style={styles.emptyTitle}>
         {t('screens:activity.emptyTitle')}
@@ -170,18 +131,14 @@ function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
       <StyledText size={15} color={colors.text.tertiary} style={styles.emptySubtitle}>
         {t('screens:activity.emptySubtitle')}
       </StyledText>
-      <Pressable style={styles.emptyCtaButton} onPress={onStartWorkout}>
-        <LinearGradient
-          colors={GRADIENTS.CTA}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={StyleSheet.absoluteFill}
+      <View style={{ width: '100%', alignItems: 'center' }}>
+        <NativeButton
+          variant="primary"
+          title={t('screens:activity.startFirstWorkout')}
+          onPress={onStartWorkout}
+          systemImage="play.fill"
         />
-        <Icon name="play.fill" size={18} tintColor="#FFFFFF" style={{ marginRight: SPACING[2] }} />
-        <StyledText size={16} weight="semibold" color="#FFFFFF">
-          {t('screens:activity.startFirstWorkout')}
-        </StyledText>
-      </Pressable>
+      </View>
     </View>
   )
 }
@@ -235,7 +192,7 @@ export default function ActivityScreen() {
     <View style={[styles.container, { paddingTop: insets.top }]}>
       <ScrollView
         style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 20 }]}
         showsVerticalScrollIndicator={false}
       >
         {/* Header */}
@@ -250,34 +207,28 @@ export default function ActivityScreen() {
 
         {/* Empty state when no history */}
         {history.length === 0 ? (
-          <EmptyState onStartWorkout={() => router.push('/(tabs)/explore' as any)} />
+          <EmptyState onStartWorkout={() => router.push('/(tabs)' as any)} />
         ) : (
         <>
         {/* Streak Banner */}
         <View style={styles.streakBanner}>
-          <LinearGradient
-            colors={GRADIENTS.CTA}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            style={StyleSheet.absoluteFill}
-          />
           <View style={styles.streakRow}>
             <View style={styles.streakIconWrap}>
-              <Icon name="flame.fill" size={28} tintColor="#FFFFFF" />
+              <Icon name="flame.fill" size={28} tintColor={TEXT.PRIMARY} />
             </View>
             <View style={{ flex: 1 }}>
-              <StyledText size={28} weight="bold" color="#FFFFFF">
+              <StyledText size={28} weight="bold" color={TEXT.PRIMARY}>
                 {String(streak.current || 0)}
               </StyledText>
-              <StyledText size={13} color="rgba(255,255,255,0.8)">
+              <StyledText size={13} color={TEXT.PRIMARY}>
                 {t('screens:activity.dayStreak')}
               </StyledText>
             </View>
             <View style={styles.streakMeta}>
-              <StyledText size={11} color="rgba(255,255,255,0.6)">
+              <StyledText size={11} color={TEXT.SECONDARY}>
                 {t('screens:activity.longest')}
               </StyledText>
-              <StyledText size={20} weight="bold" color="#FFFFFF">
+              <StyledText size={20} weight="bold" color={TEXT.PRIMARY}>
                 {String(streak.longest)}
               </StyledText>
             </View>
@@ -290,7 +241,7 @@ export default function ActivityScreen() {
             label={t('screens:activity.workouts')}
             value={totalWorkouts}
             max={100}
-            color={BRAND.PRIMARY}
+            color={GREEN[500]}
             icon="dumbbell"
           />
           <StatCard
@@ -304,7 +255,7 @@ export default function ActivityScreen() {
             label={t('screens:activity.calories')}
             value={totalCalories}
             max={5000}
-            color={BRAND.SECONDARY}
+            color={GREEN[600]}
             icon="bolt"
           />
           <StatCard
@@ -322,7 +273,6 @@ export default function ActivityScreen() {
             {t('screens:activity.thisWeek')}
           </StyledText>
           <View style={styles.weekCard}>
-            <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
             <View style={styles.weekBarsRow}>
               {weeklyActivity.map((d, i) => (
                 <WeeklyBar
@@ -348,7 +298,6 @@ export default function ActivityScreen() {
               {t('screens:activity.recent')}
             </StyledText>
             <View style={styles.recentCard}>
-              <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
               {recentWorkouts.map((result, idx) => {
                 const workout = getWorkoutById(result.workoutId)
                 const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
@@ -356,7 +305,7 @@ export default function ActivityScreen() {
                   <View key={result.id}>
                     <View style={styles.recentRow}>
                       <View style={styles.recentDot}>
-                        <View style={[styles.dot, { backgroundColor: BRAND.PRIMARY }]} />
+                        <View style={[styles.dot, { backgroundColor: GREEN[500] }]} />
                       </View>
                       <View style={{ flex: 1 }}>
                         <StyledText size={15} weight="semibold" color={colors.text.primary}>
@@ -366,7 +315,7 @@ export default function ActivityScreen() {
                           {formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
                         </StyledText>
                       </View>
-                      <StyledText size={14} weight="semibold" color={BRAND.PRIMARY}>
+                      <StyledText size={14} weight="semibold" color={GREEN[500]}>
                         {t('units.calUnit', { count: result.calories })}
                       </StyledText>
                     </View>
@@ -386,19 +335,18 @@ export default function ActivityScreen() {
           <View style={styles.achievementsRow}>
             {displayAchievements.map((a) => (
               <View key={a.id} style={styles.achievementCard}>
-                <BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
                 <View
                   style={[
                     styles.achievementIcon,
                     a.unlocked
-                      ? { backgroundColor: 'rgba(255, 107, 53, 0.15)' }
-                      : { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
+                      ? { backgroundColor: GREEN.DIM }
+                      : { backgroundColor: colors.bg.overlay1 },
                   ]}
                 >
                   <Icon
                     name={a.unlocked ? 'trophy.fill' : 'lock.fill'}
                     size={22}
-                    tintColor={a.unlocked ? BRAND.PRIMARY : colors.text.hint}
+                    tintColor={a.unlocked ? GREEN[500] : colors.text.hint}
                   />
                 </View>
                 <StyledText
@@ -442,10 +390,10 @@ function createStyles(colors: ThemeColors) {
 
     // Streak
     streakBanner: {
-      borderRadius: RADIUS.GLASS_CARD,
+      borderRadius: RADIUS.LG,
       overflow: 'hidden',
       marginBottom: SPACING[5],
-      ...colors.shadow.md,
+      backgroundColor: GREEN[500],
     },
     streakRow: {
       flexDirection: 'row',
@@ -457,14 +405,14 @@ function createStyles(colors: ThemeColors) {
     streakIconWrap: {
       width: 48,
       height: 48,
-      borderRadius: 24,
-      backgroundColor: 'rgba(255,255,255,0.15)',
+      borderRadius: RADIUS.FULL,
+      backgroundColor: NAVY[900],
       alignItems: 'center',
       justifyContent: 'center',
     },
     streakMeta: {
       alignItems: 'center',
-      backgroundColor: 'rgba(255,255,255,0.1)',
+      backgroundColor: NAVY[900],
       paddingHorizontal: SPACING[4],
       paddingVertical: SPACING[2],
       borderRadius: RADIUS.MD,
@@ -482,7 +430,8 @@ function createStyles(colors: ThemeColors) {
       borderRadius: RADIUS.LG,
       overflow: 'hidden',
       borderWidth: 1,
-      borderColor: colors.bg.overlay2,
+      borderColor: colors.border.dim,
+      backgroundColor: NAVY[800],
     },
     statCardInner: {
       flexDirection: 'row',
@@ -500,7 +449,8 @@ function createStyles(colors: ThemeColors) {
       borderRadius: RADIUS.LG,
       overflow: 'hidden',
       borderWidth: 1,
-      borderColor: colors.bg.overlay2,
+      borderColor: colors.border.dim,
+      backgroundColor: NAVY[800],
       paddingTop: SPACING[5],
       paddingBottom: SPACING[4],
     },
@@ -519,12 +469,11 @@ function createStyles(colors: ThemeColors) {
     weekBar: {
       width: 24,
       height: 60,
-      borderRadius: 4,
-      backgroundColor: colors.border.glassLight,
-      overflow: 'hidden',
+      borderRadius: RADIUS.SM,
+      backgroundColor: colors.bg.overlay2,
     },
     weekBarFilled: {
-      backgroundColor: BRAND.PRIMARY,
+      backgroundColor: GREEN[500],
     },
     weekSummary: {
       alignItems: 'center',
@@ -540,7 +489,8 @@ function createStyles(colors: ThemeColors) {
       borderRadius: RADIUS.LG,
       overflow: 'hidden',
       borderWidth: 1,
-      borderColor: colors.bg.overlay2,
+      borderColor: colors.border.dim,
+      backgroundColor: NAVY[800],
       paddingVertical: SPACING[2],
     },
     recentRow: {
@@ -557,11 +507,11 @@ function createStyles(colors: ThemeColors) {
     dot: {
       width: 8,
       height: 8,
-      borderRadius: 4,
+      borderRadius: RADIUS.SM,
     },
     recentDivider: {
       height: StyleSheet.hairlineWidth,
-      backgroundColor: colors.border.glassLight,
+      backgroundColor: colors.border.dim,
       marginLeft: SPACING[4] + 24 + SPACING[3],
     },
 
@@ -577,14 +527,15 @@ function createStyles(colors: ThemeColors) {
       alignItems: 'center',
       justifyContent: 'center',
       borderWidth: 1,
-      borderColor: colors.bg.overlay2,
+      borderColor: colors.border.dim,
+      backgroundColor: NAVY[800],
       overflow: 'hidden',
       paddingHorizontal: SPACING[1],
     },
     achievementIcon: {
       width: 44,
       height: 44,
-      borderRadius: 22,
+      borderRadius: RADIUS.FULL,
       alignItems: 'center',
       justifyContent: 'center',
     },
@@ -600,8 +551,8 @@ function createStyles(colors: ThemeColors) {
     emptyIconCircle: {
       width: 96,
       height: 96,
-      borderRadius: 48,
-      backgroundColor: `${BRAND.PRIMARY}15`,
+      borderRadius: RADIUS.FULL,
+      backgroundColor: GREEN.DIM,
       alignItems: 'center',
       justifyContent: 'center',
       marginBottom: SPACING[6],
@@ -623,6 +574,7 @@ function createStyles(colors: ThemeColors) {
       paddingHorizontal: SPACING[8],
       borderRadius: RADIUS.LG,
       overflow: 'hidden' as const,
+      backgroundColor: GREEN[500],
     },
   })
 }