millianlmx/tabatago
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Millian Lamiaux
2026-04-13 22:06:11 +02:00
parent 4458044d0e
commit 0990ec8e11
7 changed files with 72 additions and 1386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/(tabs)/_layout.tsx
View File

@@ -1,14 +1,14 @@
/**
* TabataFit Tab Layout
* Native iOS tabs with liquid glass effect
* 4 tabs: Home, Workouts, Activity, Profile
* Native liquid glass tab bar (iOS 26+) — Dark Medical design system
* 3 tabs: Home, Progress, Profile
* Redirects to onboarding if not completed
*/
import { Redirect } from 'expo-router'
import { NativeTabs, Icon, Label } from 'expo-router/unstable-native-tabs'
import { useTranslation } from 'react-i18next'
import { BRAND } from '@/src/shared/constants/colors'
import { BRAND, TEXT, NAVY } from '@/src/shared/constants/colors'
import { useUserStore } from '@/src/shared/stores'
export default function TabLayout() {
@@ -21,24 +21,25 @@ export default function TabLayout() {
return (
<NativeTabs
tintColor={BRAND.PRIMARY}
backgroundColor={NAVY[800]}
iconColor={{ default: TEXT.TERTIARY, selected: BRAND.PRIMARY }}
labelStyle={{
fontSize: 11,
fontWeight: '400',
color: TEXT.TERTIARY,
}}
>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger name="index" options={{ title: t('tabs.home') }}>
<Icon sf={{ default: 'house', selected: 'house.fill' }} />
<Label>{t('tabs.home')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="explore">
<Icon sf={{ default: 'flame', selected: 'flame.fill' }} />
<Label>{t('tabs.explore')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="activity">
<NativeTabs.Trigger name="activity" options={{ title: t('tabs.progression') }}>
<Icon sf={{ default: 'chart.bar', selected: 'chart.bar.fill' }} />
<Label>{t('tabs.activity')}</Label>
<Label>{t('tabs.progression')}</Label>
</NativeTabs.Trigger>
<NativeTabs.Trigger name="profile">
<NativeTabs.Trigger name="profile" options={{ title: t('tabs.profile') }}>
<Icon sf={{ default: 'person', selected: 'person.fill' }} />
<Label>{t('tabs.profile')}</Label>
</NativeTabs.Trigger>

152
app/(tabs)/activity.tsx
View File

@@ -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],
},
})
}

1005
app/(tabs)/explore.tsx
View File

File diff suppressed because it is too large Load Diff