refactor screens, navigation & player for new architecture

Simplify Home, Activity, Profile, Complete, Player, and Program screens to work with the new Supabase-driven data layer. Update root and tab layouts. Add Settings, Terms, and Zone routes. Add OfflineBanner component and progressStore. Update all player sub-components to use the refreshed design system tokens.
2026-04-21 21:50:48 +02:00
parent 04b83fc419
commit 5888aac08e
26 changed files with 1836 additions and 2772 deletions
--- a/app/terms.tsx
+++ b/app/terms.tsx
@@ -0,0 +1,106 @@
+/**
+ * TabataFit Terms of Service Screen
+ * Features: F-027, F-029, F-100, F-129
+ */
+
+import { useMemo } from 'react'
+import { View, StyleSheet, ScrollView } from 'react-native'
+import { Stack } from 'expo-router'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTranslation } from 'react-i18next'
+import { StyledText } from '@/src/shared/components/StyledText'
+import { useThemeColors } 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 { NAVY, BORDER_COLORS, GREEN } from '@/src/shared/constants/colors'
+
+const SECTIONS = [
+  'acceptance',
+  'service',
+  'subscriptions',
+  'cancellation',
+  'liability',
+  'contact',
+] as const
+
+export default function TermsScreen() {
+  const { t } = useTranslation()
+  const colors = useThemeColors()
+  const insets = useSafeAreaInsets()
+  const styles = useMemo(() => createStyles(colors), [colors])
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerShown: true,
+          headerStyle: { backgroundColor: colors.bg.base },
+          headerShadowVisible: false,
+          headerTitle: t('screens:terms.title'),
+          headerTintColor: colors.text.primary,
+          headerBackButtonDisplayMode: 'minimal',
+        }}
+      />
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={[
+          styles.content,
+          { paddingBottom: insets.bottom + SPACING[8] },
+        ]}
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        <StyledText preset="CAPTION_1" style={styles.lastUpdated}>
+          {t('screens:terms.lastUpdated')}
+        </StyledText>
+
+        {SECTIONS.map((section) => (
+          <View key={section} style={styles.section}>
+            <StyledText preset="HEADING_2" style={styles.sectionTitle}>
+              {t(`screens:terms.${section}.title`)}
+            </StyledText>
+            <StyledText preset="BODY" style={styles.sectionContent}>
+              {t(`screens:terms.${section}.content`)}
+            </StyledText>
+          </View>
+        ))}
+
+        <StyledText preset="CAPTION_1" style={styles.email}>
+          support@tabatafit.app
+        </StyledText>
+      </ScrollView>
+    </>
+  )
+}
+
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    content: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+      paddingTop: SPACING[4],
+      gap: SPACING[6],
+    },
+    lastUpdated: {
+      color: colors.text.tertiary,
+    },
+    section: {
+      gap: SPACING[2],
+    },
+    sectionTitle: {
+      color: colors.text.primary,
+    },
+    sectionContent: {
+      color: colors.text.secondary,
+      lineHeight: 24,
+    },
+    email: {
+      color: GREEN[500],
+      textAlign: 'center',
+      marginTop: SPACING[4],
+    },
+  })
+}