rebreak-monorepo/apps/rebreak-native/app/settings.tsx

import { ScrollView, View, Text, Pressable, Platform } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { colors } from '../lib/theme';

type SectionRow = {
  icon: React.ComponentProps<typeof Ionicons>['name'];
  iconColor: string;
  label: string;
  sublabel: string;
};

type Section = {
  key: string;
  title: string;
  rows: SectionRow[];
};

export default function SettingsScreen() {
  const router = useRouter();
  const { t } = useTranslation();

  const sections: Section[] = [
    {
      key: 'profile',
      title: t('settings.section_profile'),
      rows: [
        {
          icon: 'person-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_edit'),
          sublabel: t('settings.profile_edit_desc'),
        },
        {
          icon: 'image-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_avatar'),
          sublabel: t('settings.profile_avatar_desc'),
        },
      ],
    },
    {
      key: 'theme',
      title: t('settings.section_theme'),
      rows: [
        {
          icon: 'color-palette-outline',
          iconColor: '#a78bfa',
          label: t('settings.theme'),
          sublabel: t('settings.theme_desc'),
        },
        {
          icon: 'language-outline',
          iconColor: '#a78bfa',
          label: t('settings.language'),
          sublabel: t('settings.language_desc'),
        },
      ],
    },
    {
      key: 'notifications',
      title: t('settings.section_notifications'),
      rows: [
        {
          icon: 'notifications-outline',
          iconColor: '#2563eb',
          label: t('settings.notifications_push'),
          sublabel: t('settings.notifications_push_desc'),
        },
        {
          icon: 'flame-outline',
          iconColor: '#f97316',
          label: t('settings.notifications_streak'),
          sublabel: t('settings.notifications_streak_desc'),
        },
      ],
    },
    {
      key: 'devices',
      title: t('settings.section_devices'),
      rows: [
        {
          icon: 'phone-portrait-outline',
          iconColor: '#16a34a',
          label: t('settings.devices'),
          sublabel: t('settings.devices_desc'),
        },
        {
          icon: 'star-outline',
          iconColor: colors.brandOrange,
          label: t('settings.subscription'),
          sublabel: t('settings.subscription_desc'),
        },
      ],
    },
    {
      key: 'lyra',
      title: t('settings.section_lyra'),
      rows: [
        {
          icon: 'mic-outline',
          iconColor: '#ec4899',
          label: t('settings.lyra_voice'),
          sublabel: t('settings.lyra_voice_desc'),
        },
      ],
    },
  ];

  if (__DEV__) {
    sections.push({
      key: 'debug',
      title: t('settings.section_debug'),
      rows: [
        {
          icon: 'bug-outline',
          iconColor: '#737373',
          label: t('settings.debug_llm'),
          sublabel: t('settings.debug_llm_desc'),
        },
        {
          icon: 'volume-high-outline',
          iconColor: '#737373',
          label: t('settings.debug_tts'),
          sublabel: t('settings.debug_tts_desc'),
        },
      ],
    });
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }} edges={['top']}>
      <View
        style={{
          paddingHorizontal: 12,
          paddingTop: 4,
          paddingBottom: 12,
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          borderBottomWidth: 1,
          borderBottomColor: 'rgba(0,0,0,0.06)',
        }}
      >
        <Pressable
          onPress={() => router.back()}
          hitSlop={8}
          style={({ pressed }) => ({
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
            opacity: pressed ? 0.6 : 1,
          })}
        >
          <Ionicons name="chevron-back" size={26} color={colors.text} />
        </Pressable>
        <Text style={{ fontSize: 20, color: '#0a0a0a', fontFamily: 'Nunito_700Bold' }}>
          {t('settings.title')}
        </Text>
      </View>

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16, paddingBottom: 60 }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: '#fef3c7',
            borderRadius: 14,
            padding: 14,
            marginBottom: 20,
            borderWidth: 1,
            borderColor: '#fde68a',
            flexDirection: 'row',
            gap: 10,
            alignItems: 'flex-start',
          }}
        >
          <Ionicons name="construct-outline" size={20} color="#b45309" style={{ marginTop: 1 }} />
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#78350f' }}>
              {t('settings.coming_soon_title')}
            </Text>
            <Text
              style={{
                fontSize: 12,
                fontFamily: 'Nunito_400Regular',
                color: '#92400e',
                marginTop: 4,
                lineHeight: 17,
              }}
            >
              {t('settings.coming_soon_desc')}
            </Text>
          </View>
        </View>

        {sections.map((section) => (
          <View key={section.key} style={{ marginBottom: 22 }}>
            <Text
              style={{
                fontSize: 11,
                color: '#a3a3a3',
                fontFamily: 'Nunito_600SemiBold',
                textTransform: 'uppercase',
                letterSpacing: 1,
                marginBottom: 8,
                marginLeft: 4,
              }}
            >
              {section.title}
            </Text>
            <View
              style={{
                backgroundColor: '#fafafa',
                borderRadius: 14,
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0.05)',
                overflow: 'hidden',
              }}
            >
              {section.rows.map((row, i) => (
                <View
                  key={row.label}
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 12,
                    paddingHorizontal: 14,
                    paddingVertical: 14,
                    borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
                    borderBottomColor: 'rgba(0,0,0,0.04)',
                    opacity: 0.5,
                  }}
                >
                  <View
                    style={{
                      width: 32,
                      height: 32,
                      borderRadius: 10,
                      backgroundColor: row.iconColor + '18',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Ionicons name={row.icon} size={16} color={row.iconColor} />
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text style={{ fontSize: 14, color: '#0a0a0a', fontFamily: 'Nunito_600SemiBold' }}>
                      {row.label}
                    </Text>
                    <Text
                      style={{
                        fontSize: 12,
                        color: '#737373',
                        fontFamily: 'Nunito_400Regular',
                        marginTop: 2,
                      }}
                    >
                      {row.sublabel}
                    </Text>
                  </View>
                  <Text
                    style={{
                      fontSize: 10,
                      color: '#a3a3a3',
                      fontFamily: 'Nunito_600SemiBold',
                      textTransform: 'uppercase',
                      letterSpacing: 0.5,
                    }}
                  >
                    {t('settings.soon_badge')}
                  </Text>
                </View>
              ))}
            </View>
          </View>
        ))}

        <Text
          style={{
            textAlign: 'center',
            fontSize: 11,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 6,
            opacity: 0.7,
          }}
        >
          {t('settings.skeleton_footer')}
        </Text>
        <Text
          style={{
            textAlign: 'center',
            fontSize: 10,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 4,
            opacity: 0.5,
          }}
        >
          {Platform.OS}
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}