feat: category/collection detail screens + Inter font loading

New screens: - Category detail (workout/category/[id]): filtered workout list with SwiftUI segmented Picker for level sub-filter - Collection detail (collection/[id]): hero header with gradient, stats (workouts/minutes/calories), numbered workout list Root layout: - Inter font loading (400-900 weights) via @expo-google-fonts - SplashScreen integration for font loading gate - Route config for all screens with appropriate animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-20 13:24:35 +01:00
parent b0521ded5a
commit 2d24831f8e
4 changed files with 520 additions and 46 deletions
--- a/app/CLAUDE.md
+++ b/app/CLAUDE.md
@@ -0,0 +1,26 @@
+<claude-mem-context>
+# Recent Activity
+
+<!-- This section is auto-generated by claude-mem. Edit content outside the tags. -->
+
+### Feb 19, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5001 | 9:35 AM | 🔵 | Host Wrapper Located at Root Layout Level | ~153 |
+| #4964 | 9:23 AM | 🔴 | Added Host Wrapper to Root Layout | ~228 |
+| #4963 | 9:22 AM | ✅ | Root layout wraps Stack in View with pure black background | ~279 |
+| #4910 | 8:16 AM | 🟣 | Added Workout Detail and Complete Screen Routes | ~348 |
+
+### Feb 20, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #5224 | 1:24 PM | ✅ | Stage v1.1 files prepared for git commit - SwiftUI Button refactoring complete | ~434 |
+| #5206 | 1:03 PM | ⚖️ | SwiftUI component usage mandated for TabataFit app | ~349 |
+| #5115 | 8:57 AM | 🔵 | Root Layout Stack Configuration with Screen Animations | ~256 |
+| #5061 | 8:47 AM | 🔵 | Expo Router Tab Navigation Structure Found | ~196 |
+| #5053 | 8:23 AM | ✅ | Completed removal of all Host wrappers from application | ~255 |
+| #5052 | " | ✅ | Removed Host wrapper from root layout entirely | ~224 |
+| #5019 | 8:13 AM | 🔵 | Root layout properly wraps Stack with Host component | ~198 |
+</claude-mem-context>
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,60 +1,88 @@
-import { useEffect } from 'react';
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import * as SplashScreen from 'expo-splash-screen';
-import 'react-native-reanimated';
+/**
+ * TabataFit Root Layout
+ * Expo Router v3 + Inter font loading
+ */

-import { useColorScheme } from '@/hooks/use-color-scheme';
-import { useIsOnboardingComplete } from '@/src/features/onboarding/hooks/useOnboarding';
+import { useCallback } from 'react'
+import { Stack } from 'expo-router'
+import { StatusBar } from 'expo-status-bar'
+import { View } from 'react-native'
+import * as SplashScreen from 'expo-splash-screen'
+import {
+  useFonts,
+  Inter_400Regular,
+  Inter_500Medium,
+  Inter_600SemiBold,
+  Inter_700Bold,
+  Inter_900Black,
+} from '@expo-google-fonts/inter'

-// Prevent splash screen from auto-hiding
-SplashScreen.preventAutoHideAsync();
+import { DARK } from '@/src/shared/constants/colors'

-export const unstable_settings = {
-  anchor: '(tabs)',
-};
+SplashScreen.preventAutoHideAsync()

 export default function RootLayout() {
-  const colorScheme = useColorScheme();
-  const isOnboardingComplete = useIsOnboardingComplete();
+  const [fontsLoaded] = useFonts({
+    Inter_400Regular,
+    Inter_500Medium,
+    Inter_600SemiBold,
+    Inter_700Bold,
+    Inter_900Black,
+  })

-  // Hide splash screen once we have a definite state
-  useEffect(() => {
-    if (isOnboardingComplete !== undefined) {
-      SplashScreen.hideAsync();
+  const onLayoutRootView = useCallback(async () => {
+    if (fontsLoaded) {
+      await SplashScreen.hideAsync()
    }
-  }, [isOnboardingComplete]);
+  }, [fontsLoaded])

-  // Show nothing while Zustand hydrates from AsyncStorage
-  if (isOnboardingComplete === undefined) {
-    return null;
+  if (!fontsLoaded) {
+    return null
  }

  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen
-          name="onboarding"
-          options={{
+    <View style={{ flex: 1, backgroundColor: DARK.BASE }} onLayout={onLayoutRootView}>
+      <StatusBar style="light" />
+      <Stack
+          screenOptions={{
            headerShown: false,
-            presentation: 'fullScreenModal',
-            animation: 'fade',
-            gestureEnabled: false,
+            contentStyle: { backgroundColor: DARK.BASE },
+            animation: 'slide_from_right',
          }}
-        />
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen
-          name="timer"
-          options={{
-            headerShown: false,
-            presentation: 'fullScreenModal',
-            animation: 'fade',
-          }}
-        />
-        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
-  );
+        >
+          <Stack.Screen name="(tabs)" />
+          <Stack.Screen
+            name="workout/[id]"
+            options={{
+              animation: 'slide_from_bottom',
+            }}
+          />
+          <Stack.Screen
+            name="workout/category/[id]"
+            options={{
+              animation: 'slide_from_right',
+            }}
+          />
+          <Stack.Screen
+            name="collection/[id]"
+            options={{
+              animation: 'slide_from_right',
+            }}
+          />
+          <Stack.Screen
+            name="player/[id]"
+            options={{
+              presentation: 'fullScreenModal',
+              animation: 'fade',
+            }}
+          />
+          <Stack.Screen
+            name="complete/[id]"
+            options={{
+              animation: 'fade',
+            }}
+          />
+        </Stack>
+    </View>
+  )
 }
--- a/app/collection/[id].tsx
+++ b/app/collection/[id].tsx
@@ -0,0 +1,211 @@
+/**
+ * TabataFit Collection Detail Screen
+ * Shows collection info + ordered workout list
+ */
+
+import { useMemo } from 'react'
+import { View, StyleSheet, ScrollView, Pressable, Text as RNText } from 'react-native'
+import { useRouter, useLocalSearchParams } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { LinearGradient } from 'expo-linear-gradient'
+import Ionicons from '@expo/vector-icons/Ionicons'
+
+import { useHaptics } from '@/src/shared/hooks'
+import { getCollectionById, getCollectionWorkouts, getTrainerById, COLLECTION_COLORS } from '@/src/shared/data'
+import { StyledText } from '@/src/shared/components/StyledText'
+
+import {
+  BRAND,
+  DARK,
+  TEXT,
+} from '@/src/shared/constants/colors'
+import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
+import { RADIUS } from '@/src/shared/constants/borderRadius'
+
+export default function CollectionDetailScreen() {
+  const insets = useSafeAreaInsets()
+  const router = useRouter()
+  const haptics = useHaptics()
+  const { id } = useLocalSearchParams<{ id: string }>()
+
+  const collection = id ? getCollectionById(id) : null
+  const workouts = useMemo(
+    () => id ? getCollectionWorkouts(id) : [],
+    [id]
+  )
+  const collectionColor = COLLECTION_COLORS[id ?? ''] ?? BRAND.PRIMARY
+
+  const handleBack = () => {
+    haptics.selection()
+    router.back()
+  }
+
+  const handleWorkoutPress = (workoutId: string) => {
+    haptics.buttonTap()
+    router.push(`/workout/${workoutId}`)
+  }
+
+  if (!collection) {
+    return (
+      <View style={[styles.container, { paddingTop: insets.top, alignItems: 'center', justifyContent: 'center' }]}>
+        <RNText style={{ color: TEXT.PRIMARY, fontSize: 17 }}>Collection not found</RNText>
+      </View>
+    )
+  }
+
+  const totalMinutes = workouts.reduce((sum, w) => sum + (w?.duration ?? 0), 0)
+  const totalCalories = workouts.reduce((sum, w) => sum + (w?.calories ?? 0), 0)
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Hero Header */}
+        <View style={styles.hero}>
+          <LinearGradient
+            colors={collection.gradient ?? [collectionColor, BRAND.PRIMARY_DARK]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={StyleSheet.absoluteFill}
+          />
+
+          <Pressable onPress={handleBack} style={styles.backButton}>
+            <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
+          </Pressable>
+
+          <View style={styles.heroContent}>
+            <RNText style={styles.heroIcon}>{collection.icon}</RNText>
+            <StyledText size={28} weight="bold" color={TEXT.PRIMARY}>{collection.title}</StyledText>
+            <StyledText size={15} color={TEXT.SECONDARY}>{collection.description}</StyledText>
+
+            <View style={styles.heroStats}>
+              <View style={styles.heroStat}>
+                <Ionicons name="fitness" size={14} color={TEXT.PRIMARY} />
+                <StyledText size={13} color={TEXT.PRIMARY}>{workouts.length + ' workouts'}</StyledText>
+              </View>
+              <View style={styles.heroStat}>
+                <Ionicons name="time" size={14} color={TEXT.PRIMARY} />
+                <StyledText size={13} color={TEXT.PRIMARY}>{totalMinutes + ' min total'}</StyledText>
+              </View>
+              <View style={styles.heroStat}>
+                <Ionicons name="flame" size={14} color={TEXT.PRIMARY} />
+                <StyledText size={13} color={TEXT.PRIMARY}>{totalCalories + ' cal'}</StyledText>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* Workout List */}
+        <View style={styles.workoutList}>
+          {workouts.map((workout, index) => {
+            if (!workout) return null
+            const trainer = getTrainerById(workout.trainerId)
+            return (
+              <Pressable
+                key={workout.id}
+                style={styles.workoutCard}
+                onPress={() => handleWorkoutPress(workout.id)}
+              >
+                <View style={[styles.workoutNumber, { backgroundColor: `${collectionColor}20` }]}>
+                  <RNText style={[styles.workoutNumberText, { color: collectionColor }]}>{index + 1}</RNText>
+                </View>
+                <View style={styles.workoutInfo}>
+                  <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
+                  <StyledText size={13} color={TEXT.TERTIARY}>
+                    {trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
+                  </StyledText>
+                </View>
+                <View style={styles.workoutMeta}>
+                  <StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
+                  <Ionicons name="play-circle" size={28} color={collectionColor} />
+                </View>
+              </Pressable>
+            )
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: DARK.BASE,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {},
+
+  // Hero
+  hero: {
+    height: 260,
+    overflow: 'hidden',
+  },
+  backButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: SPACING[3],
+  },
+  heroContent: {
+    position: 'absolute',
+    bottom: SPACING[5],
+    left: SPACING[5],
+    right: SPACING[5],
+  },
+  heroIcon: {
+    fontSize: 40,
+    marginBottom: SPACING[2],
+  },
+  heroStats: {
+    flexDirection: 'row',
+    gap: SPACING[4],
+    marginTop: SPACING[3],
+  },
+  heroStat: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[1],
+  },
+
+  // Workout List
+  workoutList: {
+    paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    paddingTop: SPACING[4],
+    gap: SPACING[2],
+  },
+  workoutCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: SPACING[3],
+    paddingHorizontal: SPACING[4],
+    backgroundColor: DARK.SURFACE,
+    borderRadius: RADIUS.LG,
+    gap: SPACING[3],
+  },
+  workoutNumber: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  workoutNumberText: {
+    fontSize: 15,
+    fontWeight: '700',
+  },
+  workoutInfo: {
+    flex: 1,
+    gap: 2,
+  },
+  workoutMeta: {
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+})
--- a/app/workout/category/[id].tsx
+++ b/app/workout/category/[id].tsx
@@ -0,0 +1,209 @@
+/**
+ * TabataFit Category Detail Screen
+ * Filtered workout list for a specific category with level sub-filter
+ */
+
+import { useState, useMemo } from 'react'
+import { View, StyleSheet, ScrollView, Pressable, Text as RNText } from 'react-native'
+import { useRouter, useLocalSearchParams } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import Ionicons from '@expo/vector-icons/Ionicons'
+import {
+  Host,
+  Picker,
+} from '@expo/ui/swift-ui'
+
+import { useHaptics } from '@/src/shared/hooks'
+import { getWorkoutsByCategory, getTrainerById, CATEGORIES } from '@/src/shared/data'
+import { StyledText } from '@/src/shared/components/StyledText'
+import type { WorkoutCategory, WorkoutLevel } from '@/src/shared/types'
+
+import {
+  BRAND,
+  DARK,
+  TEXT,
+} from '@/src/shared/constants/colors'
+import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
+import { RADIUS } from '@/src/shared/constants/borderRadius'
+
+const LEVELS: { id: WorkoutLevel | 'all'; label: string }[] = [
+  { id: 'all', label: 'All Levels' },
+  { id: 'Beginner', label: 'Beginner' },
+  { id: 'Intermediate', label: 'Intermediate' },
+  { id: 'Advanced', label: 'Advanced' },
+]
+
+export default function CategoryDetailScreen() {
+  const insets = useSafeAreaInsets()
+  const router = useRouter()
+  const haptics = useHaptics()
+  const { id } = useLocalSearchParams<{ id: string }>()
+
+  const [selectedLevelIndex, setSelectedLevelIndex] = useState(0)
+
+  const selectedLevel = LEVELS[selectedLevelIndex].id
+  const category = CATEGORIES.find(c => c.id === id)
+  const categoryLabel = category?.label ?? id ?? 'Category'
+
+  const allWorkouts = useMemo(
+    () => (id && id !== 'all') ? getWorkoutsByCategory(id as WorkoutCategory) : [],
+    [id]
+  )
+
+  const filteredWorkouts = useMemo(() => {
+    if (selectedLevel === 'all') return allWorkouts
+    return allWorkouts.filter(w => w.level === selectedLevel)
+  }, [allWorkouts, selectedLevel])
+
+  const handleBack = () => {
+    haptics.selection()
+    router.back()
+  }
+
+  const handleWorkoutPress = (workoutId: string) => {
+    haptics.buttonTap()
+    router.push(`/workout/${workoutId}`)
+  }
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Pressable onPress={handleBack} style={styles.backButton}>
+          <Ionicons name="chevron-back" size={24} color={TEXT.PRIMARY} />
+        </Pressable>
+        <StyledText size={22} weight="bold" color={TEXT.PRIMARY}>{categoryLabel}</StyledText>
+        <View style={styles.backButton} />
+      </View>
+
+      {/* Level Filter */}
+      <View style={styles.filterContainer}>
+        <Host matchContents useViewportSizeMeasurement colorScheme="dark">
+          <Picker
+            selectedIndex={selectedLevelIndex}
+            onOptionSelected={(e) => {
+              haptics.selection()
+              setSelectedLevelIndex(e.nativeEvent.index)
+            }}
+            variant="segmented"
+            options={LEVELS.map(l => l.label)}
+            color={BRAND.PRIMARY}
+          />
+        </Host>
+      </View>
+
+      <StyledText
+        size={13}
+        color={TEXT.TERTIARY}
+        style={{ paddingHorizontal: LAYOUT.SCREEN_PADDING, marginBottom: SPACING[3] }}
+      >
+        {filteredWorkouts.length + ' workouts'}
+      </StyledText>
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
+        showsVerticalScrollIndicator={false}
+      >
+        {filteredWorkouts.map((workout) => {
+          const trainer = getTrainerById(workout.trainerId)
+          return (
+            <Pressable
+              key={workout.id}
+              style={styles.workoutCard}
+              onPress={() => handleWorkoutPress(workout.id)}
+            >
+              <View style={[styles.workoutAvatar, { backgroundColor: trainer?.color ?? BRAND.PRIMARY }]}>
+                <RNText style={styles.workoutInitial}>{trainer?.name[0] ?? 'T'}</RNText>
+              </View>
+              <View style={styles.workoutInfo}>
+                <StyledText size={17} weight="semibold" color={TEXT.PRIMARY}>{workout.title}</StyledText>
+                <StyledText size={13} color={TEXT.TERTIARY}>
+                  {trainer?.name + ' \u00B7 ' + workout.duration + ' min \u00B7 ' + workout.level}
+                </StyledText>
+              </View>
+              <View style={styles.workoutMeta}>
+                <StyledText size={13} color={BRAND.PRIMARY}>{workout.calories + ' cal'}</StyledText>
+                <Ionicons name="chevron-forward" size={16} color={TEXT.TERTIARY} />
+              </View>
+            </Pressable>
+          )
+        })}
+
+        {filteredWorkouts.length === 0 && (
+          <View style={styles.emptyState}>
+            <Ionicons name="barbell-outline" size={48} color={TEXT.TERTIARY} />
+            <StyledText size={17} color={TEXT.TERTIARY} style={{ marginTop: SPACING[3] }}>
+              No workouts found
+            </StyledText>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: DARK.BASE,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    paddingVertical: SPACING[3],
+  },
+  backButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  filterContainer: {
+    paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    marginBottom: SPACING[4],
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: LAYOUT.SCREEN_PADDING,
+  },
+  workoutCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: SPACING[3],
+    paddingHorizontal: SPACING[4],
+    backgroundColor: DARK.SURFACE,
+    borderRadius: RADIUS.LG,
+    marginBottom: SPACING[2],
+    gap: SPACING[3],
+  },
+  workoutAvatar: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  workoutInitial: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: TEXT.PRIMARY,
+  },
+  workoutInfo: {
+    flex: 1,
+    gap: 2,
+  },
+  workoutMeta: {
+    alignItems: 'flex-end',
+    gap: 4,
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: SPACING[12],
+  },
+})