refactor: code quality cleanup — remove any types, add logger, rename Kine to Tabata

- Phase 0: Rename all Kine references to Tabata (types, files, imports, i18n, analytics events)
- Phase 1: Add test coverage for tabataProgramStore, workoutProgramStore, and color utils (47 tests)
- Phase 2: Remove all `any` types from production code with proper typed replacements
- Phase 3: Replace ~60 raw console.* calls with __DEV__-gated logger utility
- Phase 4: Verify .DS_Store housekeeping (already clean)

0 TypeScript errors, 583/583 tests passing.

app/(tabs)/CLAUDE.md

@@ -16,18 +16,28 @@
 | #5040 | " | ✅ | Removed opening Host tag from browse screen | ~159 |
 | #5039 | 8:21 AM | ✅ | Removed closing Host tag from activity screen | ~193 |
 | #5038 | " | ✅ | Removed opening Host tag from activity screen | ~154 |
-| #5037 | " | ✅ | Removed closing Host tag from workouts screen | ~195 |
-| #5036 | " | ✅ | Removed opening Host tag from workouts screen | ~164 |
-| #5035 | " | ✅ | Removed closing Host tag from home screen JSX | ~197 |
-| #5034 | " | ✅ | Removed Host wrapper from home screen JSX | ~139 |
-| #5031 | 8:19 AM | ✅ | Removed Host import from profile screen | ~184 |
-| #5030 | " | ✅ | Removed Host import from browse screen | ~190 |
-| #5029 | 8:18 AM | ✅ | Removed Host import from activity screen | ~183 |
-| #5028 | " | ✅ | Removed Host import from workouts screen | ~189 |
-| #5027 | " | ✅ | Removed Host import from home screen index.tsx | ~180 |
-| #5024 | " | 🔵 | Activity screen properly wraps content with Host component | ~237 |
-| #5023 | " | 🔵 | Profile screen properly wraps content with Host component | ~246 |
-| #5022 | 8:14 AM | 🔵 | Browse screen properly wraps content with Host component | ~217 |
-| #5021 | " | 🔵 | Workouts screen properly wraps content with Host component | ~228 |
-| #5020 | 8:13 AM | 🔵 | Home screen properly wraps content with Host component | ~238 |
+
+### Apr 11, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #6124 | 7:41 PM | 🔵 | Home screen uses theme-based colors properly | ~229 |
+
+### Apr 13, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #6166 | 10:03 PM | ✅ | Updated Tab Layout Documentation | ~137 |
+| #6154 | 10:01 PM | 🔵 | Explored Explore Tab Structure | ~174 |
+
+### Apr 17, 2026
+
+| ID | Time | T | Title | Read |
+|----|------|---|-------|------|
+| #6349 | 9:48 AM | 🔄 | Removed usePurchases import from home screen | ~271 |
+| #6348 | " | 🔄 | Removed usePurchases hook from home screen | ~277 |
+| #6346 | 9:47 AM | 🔄 | Cleaned up unused imports in home screen after removing direct program navigation | ~321 |
+| #6343 | 9:46 AM | 🔄 | Refactored home screen body zone sections to clickable cards | ~400 |
+| #6342 | 9:44 AM | 🔄 | Removed direct program navigation handler from home screen | ~305 |
+| #6336 | 9:39 AM | 🔵 | Reviewed complete home screen implementation for body-zone workout programs | ~386 |
 </claude-mem-context>

app/(tabs)/profile.tsx

@@ -1,6 +1,6 @@
 /**
- * TabataFit Profile Screen — Premium React Native
- * Apple Fitness+ inspired design, pure React Native components
+ * TabataFit Profile Screen — Native iOS
+ * Dark Medical design with SwiftUI Islands
  */
 
 import { useRouter } from 'expo-router'
@@ -9,7 +9,6 @@ import {
   ScrollView,
   StyleSheet,
   Pressable,
-  Switch,
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import * as Linking from 'expo-linking'
@@ -18,13 +17,22 @@ import { useTranslation } from 'react-i18next'
 import { useMemo, useState } from 'react'
 import { useUserStore, useActivityStore } from '@/src/shared/stores'
 import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
-import { useThemeColors, BRAND } from '@/src/shared/theme'
+import { useThemeColors } from '@/src/shared/theme'
 import type { ThemeColors } from '@/src/shared/theme/types'
 import { StyledText } from '@/src/shared/components/StyledText'
-import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
+import { SPACING } from '@/src/shared/constants/spacing'
 import { RADIUS } from '@/src/shared/constants/borderRadius'
 import { DataDeletionModal } from '@/src/shared/components/DataDeletionModal'
 import { deleteSyncedData } from '@/src/shared/services/sync'
+import { GREEN, NAVY, TEXT } from '@/src/shared/constants/colors'
+import { FONT_FAMILY } from '@/src/shared/constants/typography'
+import {
+  NativeList,
+  NativeSection,
+  NativeSwitch,
+  NativeLabeledRow,
+  NativeButton,
+} from '@/src/shared/components/native'
 
 // ═══════════════════════════════════════════════════════════════════════════
 // COMPONENT: PROFILE SCREEN
@@ -47,7 +55,6 @@ export default function ProfileScreen() {
   const planLabel = isPremium ? 'TabataFit+' : t('profile.freePlan')
   const avatarInitial = profile.name?.[0]?.toUpperCase() || 'U'
 
-  // Real stats from activity store
   const history = useActivityStore((s) => s.history)
   const streak = useActivityStore((s) => s.streak)
   const stats = useMemo(() => ({
@@ -102,71 +109,63 @@ export default function ProfileScreen() {
     Linking.openURL('https://tabatafit.app/faq')
   }
 
-  // App version
   const appVersion = Constants.expoConfig?.version ?? '1.0.0'
 
   return (
     <View style={[styles.container, { paddingTop: insets.top }]}>
       <ScrollView
         style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
+        contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 40 }]}
         showsVerticalScrollIndicator={false}
       >
       {/* ════════════════════════════════════════════════════════════════════
-          PROFILE HEADER CARD
+          PROFILE HEADER
       ═══════════════════════════════════════════════════════════════════ */}
-      <View style={styles.section}>
-        <View style={styles.headerContainer}>
-          {/* Avatar with gradient background */}
-          <View style={styles.avatarContainer}>
-            <StyledText size={48} weight="bold" color="#FFFFFF">
-              {avatarInitial}
+      <View style={styles.headerContainer}>
+        <View style={styles.avatarContainer}>
+          <StyledText size={48} weight="bold" color={TEXT.PRIMARY}>
+            {avatarInitial}
+          </StyledText>
+        </View>
+
+        <View style={styles.nameContainer}>
+          <StyledText size={22} weight="semibold" style={{ textAlign: 'center' }}>
+            {profile.name || t('profile.guest')}
+          </StyledText>
+          <View style={styles.planContainer}>
+            <StyledText size={15} color={isPremium ? GREEN[500] : colors.text.tertiary}>
+              {planLabel}
+            </StyledText>
+            {isPremium && (
+              <StyledText size={12} color={GREEN[500]}>✓</StyledText>
+            )}
+          </View>
+        </View>
+
+        <View style={styles.statsContainer}>
+          <View style={styles.statItem}>
+            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
+              🔥 {stats.workouts}
+            </StyledText>
+            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
+              {t('profile.statsWorkouts')}
             </StyledText>
           </View>
-
-          {/* Name & Plan */}
-          <View style={styles.nameContainer}>
-            <StyledText size={22} weight="semibold" style={{ textAlign: 'center' }}>
-              {profile.name || t('profile.guest')}
+          <View style={styles.statItem}>
+            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
+              📅 {stats.streak}
+            </StyledText>
+            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
+              {t('profile.statsStreak')}
             </StyledText>
-            <View style={styles.planContainer}>
-              <StyledText size={15} color={isPremium ? BRAND.PRIMARY : colors.text.tertiary}>
-                {planLabel}
-              </StyledText>
-              {isPremium && (
-                <StyledText size={12} color={BRAND.PRIMARY}>
-                  ✓
-                </StyledText>
-              )}
-            </View>
           </View>
-
-          {/* Stats Row */}
-          <View style={styles.statsContainer}>
-            <View style={styles.statItem}>
-              <StyledText size={20} weight="bold" color={BRAND.PRIMARY} style={{ textAlign: 'center' }}>
-                🔥 {stats.workouts}
-              </StyledText>
-              <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
-                {t('profile.statsWorkouts')}
-              </StyledText>
-            </View>
-            <View style={styles.statItem}>
-              <StyledText size={20} weight="bold" color={BRAND.PRIMARY} style={{ textAlign: 'center' }}>
-                📅 {stats.streak}
-              </StyledText>
-              <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
-                {t('profile.statsStreak')}
-              </StyledText>
-            </View>
-            <View style={styles.statItem}>
-              <StyledText size={20} weight="bold" color={BRAND.PRIMARY} style={{ textAlign: 'center' }}>
-                ⚡️ {Math.round(stats.calories / 1000)}k
-              </StyledText>
-              <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
-                {t('profile.statsCalories')}
-              </StyledText>
-            </View>
+          <View style={styles.statItem}>
+            <StyledText size={20} weight="bold" color={GREEN[500]} style={{ textAlign: 'center' }}>
+              ⚡️ {Math.round(stats.calories / 1000)}k
+            </StyledText>
+            <StyledText size={12} color={colors.text.tertiary} style={{ textAlign: 'center' }}>
+              {t('profile.statsCalories')}
+            </StyledText>
           </View>
         </View>
       </View>
@@ -175,20 +174,17 @@ export default function ProfileScreen() {
           UPGRADE CTA (FREE USERS ONLY)
       ═══════════════════════════════════════════════════════════════════ */}
       {!isPremium && (
-        <View style={styles.section}>
-          <Pressable
-            style={styles.premiumContainer}
-            onPress={() => router.push('/paywall')}
-          >
+        <View style={styles.upgradeCard}>
+          <Pressable onPress={() => router.push('/paywall')}>
             <View style={styles.premiumContent}>
-              <StyledText size={17} weight="semibold" color={BRAND.PRIMARY}>
+              <StyledText size={17} weight="semibold" color={GREEN[500]}>
                 ✨ {t('profile.upgradeTitle')}
               </StyledText>
               <StyledText size={15} color={colors.text.tertiary} style={{ marginTop: SPACING[1] }}>
                 {t('profile.upgradeDescription')}
               </StyledText>
             </View>
-            <StyledText size={15} color={BRAND.PRIMARY} style={{ marginTop: SPACING[3] }}>
+            <StyledText size={15} color={GREEN[500]} style={{ marginTop: SPACING[3] }}>
               {t('profile.learnMore')} →
             </StyledText>
           </Pressable>
@@ -196,136 +192,108 @@ export default function ProfileScreen() {
       )}
 
       {/* ════════════════════════════════════════════════════════════════════
-          WORKOUT SETTINGS
+          WORKOUT SETTINGS — Native List
       ═══════════════════════════════════════════════════════════════════ */}
-      <StyledText style={styles.sectionHeader}>{t('profile.sectionWorkout')}</StyledText>
-      <View style={styles.section}>
-        <View style={styles.row}>
-          <StyledText style={styles.rowLabel}>{t('profile.hapticFeedback')}</StyledText>
-          <Switch
-            value={settings.haptics}
-            onValueChange={(v) => updateSettings({ haptics: v })}
-            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
-            thumbColor="#FFFFFF"
-          />
-        </View>
-        <View style={styles.row}>
-          <StyledText style={styles.rowLabel}>{t('profile.soundEffects')}</StyledText>
-          <Switch
-            value={settings.soundEffects}
-            onValueChange={(v) => updateSettings({ soundEffects: v })}
-            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
-            thumbColor="#FFFFFF"
-          />
-        </View>
-        <View style={[styles.row, styles.rowLast]}>
-          <StyledText style={styles.rowLabel}>{t('profile.voiceCoaching')}</StyledText>
-          <Switch
-            value={settings.voiceCoaching}
-            onValueChange={(v) => updateSettings({ voiceCoaching: v })}
-            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
-            thumbColor="#FFFFFF"
-          />
-        </View>
-      </View>
+      <NativeList>
+        <NativeSection title={t('profile.sectionWorkout').toUpperCase()}>
+          <NativeLabeledRow label={t('profile.hapticFeedback')}>
+            <NativeSwitch
+              value={settings.haptics}
+              onValueChange={(v) => updateSettings({ haptics: v })}
+            />
+          </NativeLabeledRow>
+          <NativeLabeledRow label={t('profile.soundEffects')}>
+            <NativeSwitch
+              value={settings.soundEffects}
+              onValueChange={(v) => updateSettings({ soundEffects: v })}
+            />
+          </NativeLabeledRow>
+          <NativeLabeledRow label={t('profile.voiceCoaching')}>
+            <NativeSwitch
+              value={settings.voiceCoaching}
+              onValueChange={(v) => updateSettings({ voiceCoaching: v })}
+            />
+          </NativeLabeledRow>
+        </NativeSection>
+      </NativeList>
 
       {/* ════════════════════════════════════════════════════════════════════
-          NOTIFICATIONS
+          NOTIFICATIONS — Native List
       ═══════════════════════════════════════════════════════════════════ */}
-      <StyledText style={styles.sectionHeader}>{t('profile.sectionNotifications')}</StyledText>
-      <View style={styles.section}>
-        <View style={styles.row}>
-          <StyledText style={styles.rowLabel}>{t('profile.dailyReminders')}</StyledText>
-          <Switch
-            value={settings.reminders}
-            onValueChange={handleReminderToggle}
-            trackColor={{ false: colors.bg.overlay1, true: BRAND.PRIMARY }}
-            thumbColor="#FFFFFF"
-          />
-        </View>
-        {settings.reminders && (
-          <View style={styles.rowTime}>
-            <StyledText style={styles.rowLabel}>{t('profile.reminderTime')}</StyledText>
-            <StyledText style={styles.rowValue}>{settings.reminderTime}</StyledText>
-          </View>
-        )}
-      </View>
+      <NativeList>
+        <NativeSection title={t('profile.sectionNotifications').toUpperCase()}>
+          <NativeLabeledRow label={t('profile.dailyReminders')}>
+            <NativeSwitch
+              value={settings.reminders}
+              onValueChange={handleReminderToggle}
+            />
+          </NativeLabeledRow>
+          {settings.reminders && (
+            <NativeLabeledRow label={t('profile.reminderTime')} value={settings.reminderTime} />
+          )}
+        </NativeSection>
+      </NativeList>
 
       {/* ════════════════════════════════════════════════════════════════════
           PERSONALIZATION (PREMIUM ONLY)
       ═══════════════════════════════════════════════════════════════════ */}
       {isPremium && (
-        <>
-          <StyledText style={styles.sectionHeader}>{t('profile.sectionPersonalization')}</StyledText>
-          <View style={styles.section}>
-            <View style={[styles.row, styles.rowLast]}>
-              <StyledText style={styles.rowLabel}>
-                {profile.syncStatus === 'synced' ? t('profile.personalizationEnabled') : t('profile.personalizationDisabled')}
-              </StyledText>
-              <StyledText
-                size={14}
-                color={profile.syncStatus === 'synced' ? BRAND.SUCCESS : colors.text.tertiary}
-              >
-                {profile.syncStatus === 'synced' ? '✓' : '○'}
-              </StyledText>
-            </View>
-          </View>
-        </>
+        <NativeList>
+          <NativeSection title={t('profile.sectionPersonalization').toUpperCase()}>
+            <NativeLabeledRow
+              label={
+                profile.syncStatus === 'synced'
+                  ? t('profile.personalizationEnabled')
+                  : t('profile.personalizationDisabled')
+              }
+              value={profile.syncStatus === 'synced' ? '✓' : '○'}
+            />
+          </NativeSection>
+        </NativeList>
       )}
 
       {/* ════════════════════════════════════════════════════════════════════
-          ABOUT
+          ABOUT — Native List
       ═══════════════════════════════════════════════════════════════════ */}
-      <StyledText style={styles.sectionHeader}>{t('profile.sectionAbout')}</StyledText>
-      <View style={styles.section}>
-        <View style={styles.row}>
-          <StyledText style={styles.rowLabel}>{t('profile.version')}</StyledText>
-          <StyledText style={styles.rowValue}>{appVersion}</StyledText>
-        </View>
-        <Pressable style={styles.row} onPress={handleRateApp}>
-          <StyledText style={styles.rowLabel}>{t('profile.rateApp')}</StyledText>
-          <StyledText style={styles.rowValue}>›</StyledText>
-        </Pressable>
-        <Pressable style={styles.row} onPress={handleContactUs}>
-          <StyledText style={styles.rowLabel}>{t('profile.contactUs')}</StyledText>
-          <StyledText style={styles.rowValue}>›</StyledText>
-        </Pressable>
-        <Pressable style={styles.row} onPress={handleFAQ}>
-          <StyledText style={styles.rowLabel}>{t('profile.faq')}</StyledText>
-          <StyledText style={styles.rowValue}>›</StyledText>
-        </Pressable>
-        <Pressable style={[styles.row, styles.rowLast]} onPress={handlePrivacyPolicy}>
-          <StyledText style={styles.rowLabel}>{t('profile.privacyPolicy')}</StyledText>
-          <StyledText style={styles.rowValue}>›</StyledText>
-        </Pressable>
-      </View>
+      <NativeList>
+        <NativeSection title={t('profile.sectionAbout').toUpperCase()}>
+          <NativeLabeledRow
+            label="Programmes Kiné"
+            value="Rééducation et physiothérapie"
+            chevron
+            onPress={() => router.push('/program/debutant' as any)}
+          />
+          <NativeLabeledRow label={t('profile.version')} value={appVersion} />
+          <NativeLabeledRow label={t('profile.rateApp')} chevron onPress={handleRateApp} />
+          <NativeLabeledRow label={t('profile.contactUs')} chevron onPress={handleContactUs} />
+          <NativeLabeledRow label={t('profile.faq')} chevron onPress={handleFAQ} />
+          <NativeLabeledRow label={t('profile.privacyPolicy')} chevron onPress={handlePrivacyPolicy} />
+        </NativeSection>
+      </NativeList>
 
       {/* ════════════════════════════════════════════════════════════════════
-          ACCOUNT (PREMIUM USERS ONLY)
+          ACCOUNT (PREMIUM ONLY)
       ═══════════════════════════════════════════════════════════════════ */}
       {isPremium && (
-        <>
-          <StyledText style={styles.sectionHeader}>{t('profile.sectionAccount')}</StyledText>
-          <View style={styles.section}>
-            <Pressable style={[styles.row, styles.rowLast]} onPress={handleRestore}>
-              <StyledText style={styles.rowLabel}>{t('profile.restorePurchases')}</StyledText>
-              <StyledText style={styles.rowValue}>›</StyledText>
-            </Pressable>
-          </View>
-        </>
+        <NativeList>
+          <NativeSection title={t('profile.sectionAccount').toUpperCase()}>
+            <NativeLabeledRow label={t('profile.restorePurchases')} chevron onPress={handleRestore} />
+          </NativeSection>
+        </NativeList>
       )}
 
       {/* ════════════════════════════════════════════════════════════════════
-          SIGN OUT
+          SIGN OUT — Native Button
       ═══════════════════════════════════════════════════════════════════ */}
-      <View style={[styles.section, styles.signOutSection]}>
-        <Pressable style={styles.button} onPress={handleSignOut}>
-          <StyledText style={styles.destructive}>{t('profile.signOut')}</StyledText>
-        </Pressable>
+      <View style={styles.signOutContainer}>
+        <NativeButton
+          variant="destructive"
+          title={t('profile.signOut')}
+          onPress={handleSignOut}
+        />
       </View>
       </ScrollView>
 
-      {/* Data Deletion Modal */}
       <DataDeletionModal
         visible={showDeleteModal}
         onDelete={handleDeleteData}
@@ -351,22 +319,6 @@ function createStyles(colors: ThemeColors) {
     scrollContent: {
       flexGrow: 1,
     },
-    section: {
-      marginHorizontal: SPACING[4],
-      marginTop: SPACING[5],
-      backgroundColor: colors.bg.surface,
-      borderRadius: RADIUS.MD,
-      overflow: 'hidden',
-    },
-    sectionHeader: {
-      fontSize: 13,
-      fontWeight: '600',
-      color: colors.text.tertiary,
-      textTransform: 'uppercase',
-      marginLeft: SPACING[8],
-      marginTop: SPACING[5],
-      marginBottom: SPACING[2],
-    },
     headerContainer: {
       alignItems: 'center',
       paddingVertical: SPACING[6],
@@ -375,11 +327,10 @@ function createStyles(colors: ThemeColors) {
     avatarContainer: {
       width: 90,
       height: 90,
-      borderRadius: 45,
-      backgroundColor: BRAND.PRIMARY,
+      borderRadius: RADIUS.FULL,
+      backgroundColor: NAVY[700],
       justifyContent: 'center',
       alignItems: 'center',
-      boxShadow: `0 4px 20px ${BRAND.PRIMARY}80`,
     },
     nameContainer: {
       marginTop: SPACING[4],
@@ -400,52 +351,22 @@ function createStyles(colors: ThemeColors) {
     statItem: {
       alignItems: 'center',
     },
-    premiumContainer: {
+    upgradeCard: {
+      marginHorizontal: SPACING[5],
       paddingVertical: SPACING[4],
       paddingHorizontal: SPACING[4],
+      backgroundColor: NAVY[800],
+      borderRadius: RADIUS.LG,
+      borderCurve: 'continuous' as const,
+      borderWidth: 1,
+      borderColor: colors.border.dim,
     },
     premiumContent: {
       gap: SPACING[1],
     },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingVertical: SPACING[3],
-      paddingHorizontal: SPACING[4],
-      borderBottomWidth: 0.5,
-      borderBottomColor: colors.border.glassLight,
-    },
-    rowLast: {
-      borderBottomWidth: 0,
-    },
-    rowLabel: {
-      fontSize: 17,
-      color: colors.text.primary,
-    },
-    rowValue: {
-      fontSize: 17,
-      color: colors.text.tertiary,
-    },
-    rowTime: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingVertical: SPACING[3],
-      paddingHorizontal: SPACING[4],
-      borderTopWidth: 0.5,
-      borderTopColor: colors.border.glassLight,
-    },
-    button: {
-      paddingVertical: SPACING[3] + 2,
-      alignItems: 'center',
-    },
-    destructive: {
-      fontSize: 17,
-      color: BRAND.DANGER,
-    },
-    signOutSection: {
+    signOutContainer: {
       marginTop: SPACING[5],
+      marginHorizontal: SPACING[5],
     },
   })
 }