feat: integrate theme and i18n across all screens

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

app/(tabs)/profile.tsx

@@ -15,19 +15,18 @@ import {
   Switch,
   Text,
   LabeledContent,
+  DateTimePicker,
+  Button,
 } from '@expo/ui/swift-ui'
 
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useUserStore } from '@/src/shared/stores'
+import { requestNotificationPermissions, usePurchases } from '@/src/shared/hooks'
 import { StyledText } from '@/src/shared/components/StyledText'
 
-import {
-  BRAND,
-  DARK,
-  TEXT,
-  GLASS,
-  SHADOW,
-  GRADIENTS,
-} from '@/src/shared/constants/colors'
+import { useThemeColors, BRAND, GRADIENTS } 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'
 
@@ -44,14 +43,44 @@ const FONTS = {
 // ═══════════════════════════════════════════════════════════════════════════
 
 export default function ProfileScreen() {
+  const { t } = useTranslation('screens')
   const insets = useSafeAreaInsets()
+  const colors = useThemeColors()
+  const styles = useMemo(() => createStyles(colors), [colors])
   const profile = useUserStore((s) => s.profile)
   const settings = useUserStore((s) => s.settings)
   const updateSettings = useUserStore((s) => s.updateSettings)
+  const { restorePurchases } = usePurchases()
 
   const isPremium = profile.subscription !== 'free'
   const planLabel = isPremium ? 'TabataFit+' : 'Free'
 
+  const handleRestore = async () => {
+    await restorePurchases()
+  }
+
+  const handleReminderToggle = async (enabled: boolean) => {
+    if (enabled) {
+      const granted = await requestNotificationPermissions()
+      if (!granted) return
+    }
+    updateSettings({ reminders: enabled })
+  }
+
+  const handleTimeChange = (date: Date) => {
+    const hh = String(date.getHours()).padStart(2, '0')
+    const mm = String(date.getMinutes()).padStart(2, '0')
+    updateSettings({ reminderTime: `${hh}:${mm}` })
+  }
+
+  // Build initial date string for the picker (today at reminderTime)
+  const today = new Date()
+  const [rh, rm] = settings.reminderTime.split(':').map(Number)
+  const pickerDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), rh, rm)
+  const pickerInitial = pickerDate.toISOString()
+
+  const settingsHeight = settings.reminders ? 430 : 385
+
   return (
     <View style={[styles.container, { paddingTop: insets.top }]}>
       <ScrollView
@@ -60,32 +89,32 @@ export default function ProfileScreen() {
         showsVerticalScrollIndicator={false}
       >
         {/* Header */}
-        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
-          Profile
+        <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={colors.text.primary}>
+          {t('profile.title')}
         </StyledText>
 
         {/* Profile Card */}
         <View style={styles.profileCard}>
-          <BlurView intensity={GLASS.BLUR_MEDIUM} tint="dark" style={StyleSheet.absoluteFill} />
+          <BlurView intensity={colors.glass.blurMedium} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
           <View style={styles.avatarContainer}>
             <LinearGradient
               colors={GRADIENTS.CTA}
               style={StyleSheet.absoluteFill}
             />
-            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color={TEXT.PRIMARY}>
+            <StyledText size={FONTS.LARGE_TITLE} weight="bold" color="#FFFFFF">
               {profile.name[0]}
             </StyledText>
           </View>
-          <StyledText size={FONTS.TITLE_2} weight="semibold" color={TEXT.PRIMARY}>
+          <StyledText size={FONTS.TITLE_2} weight="semibold" color={colors.text.primary}>
             {profile.name}
           </StyledText>
-          <StyledText size={FONTS.SUBHEADLINE} color={TEXT.TERTIARY}>
+          <StyledText size={FONTS.SUBHEADLINE} color={colors.text.tertiary}>
             {profile.email}
           </StyledText>
           {isPremium && (
             <View style={styles.premiumBadge}>
               <Ionicons name="star" size={12} color={BRAND.PRIMARY} />
-              <StyledText size={FONTS.CAPTION_1} weight="semibold" color={TEXT.PRIMARY}>
+              <StyledText size={FONTS.CAPTION_1} weight="semibold" color={colors.text.primary}>
                 {planLabel}
               </StyledText>
             </View>
@@ -102,59 +131,82 @@ export default function ProfileScreen() {
               style={StyleSheet.absoluteFill}
             />
             <View style={styles.subscriptionContent}>
-              <Ionicons name="ribbon" size={24} color={TEXT.PRIMARY} />
+              <Ionicons name="ribbon" size={24} color="#FFFFFF" />
               <View style={styles.subscriptionInfo}>
-                <StyledText size={FONTS.HEADLINE} weight="bold" color={TEXT.PRIMARY}>
+                <StyledText size={FONTS.HEADLINE} weight="bold" color="#FFFFFF">
                   {planLabel}
                 </StyledText>
-                <StyledText size={FONTS.CAPTION_1} color={TEXT.SECONDARY}>
-                  {'Member since ' + profile.joinDate}
+                <StyledText size={FONTS.CAPTION_1} color="rgba(255,255,255,0.8)">
+                  {t('profile.memberSince', { date: profile.joinDate })}
                 </StyledText>
               </View>
             </View>
           </View>
         )}
 
-        {/* SwiftUI Island: Settings */}
-        <Host useViewportSizeMeasurement colorScheme="dark" style={{ height: 385 }}>
+        {/* SwiftUI Island: Subscription Section */}
+        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: 60, marginTop: -20 }}>
           <List listStyle="insetGrouped" scrollEnabled={false}>
-            <Section title="WORKOUT">
+            <Section title={t('profile.sectionSubscription')}>
+              <Button
+                variant="borderless"
+                onPress={handleRestore}
+                color={colors.text.primary}
+              >
+                {t('profile.restorePurchases')}
+              </Button>
+            </Section>
+          </List>
+        </Host>
+
+        {/* SwiftUI Island: Settings */}
+        <Host useViewportSizeMeasurement colorScheme={colors.colorScheme} style={{ height: settingsHeight }}>
+          <List listStyle="insetGrouped" scrollEnabled={false}>
+            <Section title={t('profile.sectionWorkout')}>
               <Switch
-                label="Haptic Feedback"
+                label={t('profile.hapticFeedback')}
                 value={settings.haptics}
                 onValueChange={(v) => updateSettings({ haptics: v })}
                 color={BRAND.PRIMARY}
               />
               <Switch
-                label="Sound Effects"
+                label={t('profile.soundEffects')}
                 value={settings.soundEffects}
                 onValueChange={(v) => updateSettings({ soundEffects: v })}
                 color={BRAND.PRIMARY}
               />
               <Switch
-                label="Voice Coaching"
+                label={t('profile.voiceCoaching')}
                 value={settings.voiceCoaching}
                 onValueChange={(v) => updateSettings({ voiceCoaching: v })}
                 color={BRAND.PRIMARY}
               />
             </Section>
-            <Section title="NOTIFICATIONS">
+            <Section title={t('profile.sectionNotifications')}>
               <Switch
-                label="Daily Reminders"
+                label={t('profile.dailyReminders')}
                 value={settings.reminders}
-                onValueChange={(v) => updateSettings({ reminders: v })}
+                onValueChange={handleReminderToggle}
                 color={BRAND.PRIMARY}
               />
-              <LabeledContent label="Reminder Time">
-                <Text color={TEXT.TERTIARY}>{settings.reminderTime.replace(':00', ':00 AM')}</Text>
-              </LabeledContent>
+              {settings.reminders && (
+                <LabeledContent label={t('profile.reminderTime')}>
+                  <DateTimePicker
+                    displayedComponents="hourAndMinute"
+                    variant="compact"
+                    initialDate={pickerInitial}
+                    onDateSelected={handleTimeChange}
+                    color={BRAND.PRIMARY}
+                  />
+                </LabeledContent>
+              )}
             </Section>
           </List>
         </Host>
 
         {/* Version */}
-        <StyledText size={FONTS.CAPTION_1} color={TEXT.TERTIARY} style={styles.versionText}>
-          TabataFit v1.0.0
+        <StyledText size={FONTS.CAPTION_1} color={colors.text.tertiary} style={styles.versionText}>
+          {t('profile.version')}
         </StyledText>
       </ScrollView>
     </View>
@@ -165,72 +217,74 @@ export default function ProfileScreen() {
 // STYLES
 // ═══════════════════════════════════════════════════════════════════════════
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: DARK.BASE,
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    paddingHorizontal: LAYOUT.SCREEN_PADDING,
-  },
+function createStyles(colors: ThemeColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.bg.base,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      paddingHorizontal: LAYOUT.SCREEN_PADDING,
+    },
 
-  // Profile Card
-  profileCard: {
-    borderRadius: RADIUS.GLASS_CARD,
-    overflow: 'hidden',
-    marginBottom: SPACING[6],
-    marginTop: SPACING[4],
-    alignItems: 'center',
-    paddingVertical: SPACING[6],
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.1)',
-    ...SHADOW.md,
-  },
-  avatarContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: SPACING[3],
-    overflow: 'hidden',
-  },
-  premiumBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: 'rgba(255, 107, 53, 0.15)',
-    paddingHorizontal: SPACING[3],
-    paddingVertical: SPACING[1],
-    borderRadius: RADIUS.FULL,
-    marginTop: SPACING[3],
-    gap: SPACING[1],
-  },
+    // Profile Card
+    profileCard: {
+      borderRadius: RADIUS.GLASS_CARD,
+      overflow: 'hidden',
+      marginBottom: SPACING[6],
+      marginTop: SPACING[4],
+      alignItems: 'center',
+      paddingVertical: SPACING[6],
+      borderWidth: 1,
+      borderColor: colors.border.glass,
+      ...colors.shadow.md,
+    },
+    avatarContainer: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: SPACING[3],
+      overflow: 'hidden',
+    },
+    premiumBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: 'rgba(255, 107, 53, 0.15)',
+      paddingHorizontal: SPACING[3],
+      paddingVertical: SPACING[1],
+      borderRadius: RADIUS.FULL,
+      marginTop: SPACING[3],
+      gap: SPACING[1],
+    },
 
-  // Subscription Card
-  subscriptionCard: {
-    height: 80,
-    borderRadius: RADIUS.LG,
-    overflow: 'hidden',
-    marginBottom: SPACING[6],
-    ...SHADOW.BRAND_GLOW,
-  },
-  subscriptionContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: SPACING[4],
-    gap: SPACING[3],
-  },
-  subscriptionInfo: {
-    flex: 1,
-  },
+    // Subscription Card
+    subscriptionCard: {
+      height: 80,
+      borderRadius: RADIUS.LG,
+      overflow: 'hidden',
+      marginBottom: SPACING[6],
+      ...colors.shadow.BRAND_GLOW,
+    },
+    subscriptionContent: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: SPACING[4],
+      gap: SPACING[3],
+    },
+    subscriptionInfo: {
+      flex: 1,
+    },
 
-  // Version Text
-  versionText: {
-    textAlign: 'center',
-    marginTop: SPACING[6],
-  },
-})
+    // Version Text
+    versionText: {
+      textAlign: 'center',
+      marginTop: SPACING[6],
+    },
+  })
+}