9ccd0bd334
Settings-Page (alles auf einen Rutsch):
- Theme-Picker (System/Hell/Dunkel) — neuer useThemeStore (Zustand) mit
AsyncStorage @rebreak/theme persist; init-call in app/_layout.tsx
parallel zu auth-init
- Language-Picker (DE/EN) — neuer useLanguageStore mit i18n.changeLanguage
+ AsyncStorage @rebreak/language persist; init beim App-Start
- Lyra-Voice-Picker (Legend-only) — UI live, lokal selectable. BACKEND-GAP:
PATCH /api/profile/me/lyra-voice fehlt (demographics.patch akzeptiert
Voice-ID nicht via zod). UI bleibt funktional, Persist erst wenn
Endpoint da ist.
- Logout neutral (kein style:'destructive' am Alert-Button)
- Coming-Soon-Banner entfernt (war veraltet, Settings ist live)
Dropdown:
- HeaderDropdownMenu minWidth 280→170, Item-Labels numberOfLines={1}
ellipsize bei langen Strings
Locales:
- 11 neue Keys fuer Theme/Lang/Voice-Picker (DE+EN gepflegt)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
554 lines
16 KiB
TypeScript
554 lines
16 KiB
TypeScript
import {
|
|
Alert,
|
|
Animated,
|
|
Modal,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
Text,
|
|
View,
|
|
} from 'react-native';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useSafeAreaInsets } 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';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import { useThemeStore, type ThemeMode } from '../stores/theme';
|
|
import { useLanguageStore, type AppLanguage } from '../stores/language';
|
|
import { useUserPlan } from '../hooks/useUserPlan';
|
|
import { AppHeader } from '../components/AppHeader';
|
|
|
|
// ─── Picker Sheet ──────────────────────────────────────────────────────────
|
|
|
|
type PickerOption<T extends string> = { value: T; label: string };
|
|
|
|
function PickerSheet<T extends string>({
|
|
visible,
|
|
title,
|
|
options,
|
|
selected,
|
|
onSelect,
|
|
onClose,
|
|
}: {
|
|
visible: boolean;
|
|
title: string;
|
|
options: PickerOption<T>[];
|
|
selected: T;
|
|
onSelect: (v: T) => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const translateY = useRef(new Animated.Value(300)).current;
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
Animated.spring(translateY, {
|
|
toValue: 0,
|
|
useNativeDriver: true,
|
|
damping: 22,
|
|
stiffness: 280,
|
|
}).start();
|
|
} else {
|
|
Animated.timing(translateY, {
|
|
toValue: 300,
|
|
duration: 180,
|
|
useNativeDriver: true,
|
|
}).start();
|
|
}
|
|
}, [visible]);
|
|
|
|
return (
|
|
<Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
|
|
<Pressable
|
|
onPress={onClose}
|
|
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', justifyContent: 'flex-end' }}
|
|
>
|
|
<Animated.View
|
|
onStartShouldSetResponder={() => true}
|
|
style={{
|
|
backgroundColor: '#fff',
|
|
borderTopLeftRadius: 22,
|
|
borderTopRightRadius: 22,
|
|
paddingBottom: 34,
|
|
transform: [{ translateY }],
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 36,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
backgroundColor: '#e5e5e5',
|
|
alignSelf: 'center',
|
|
marginTop: 10,
|
|
marginBottom: 14,
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: '#0a0a0a',
|
|
textAlign: 'center',
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
{options.map((opt) => (
|
|
<Pressable
|
|
key={opt.value}
|
|
onPress={() => {
|
|
onSelect(opt.value);
|
|
onClose();
|
|
}}
|
|
style={({ pressed }) => ({
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 14,
|
|
backgroundColor: pressed ? '#f5f5f5' : 'transparent',
|
|
})}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
fontFamily: opt.value === selected ? 'Nunito_700Bold' : 'Nunito_400Regular',
|
|
color: opt.value === selected ? colors.brandOrange : '#0a0a0a',
|
|
}}
|
|
>
|
|
{opt.label}
|
|
</Text>
|
|
{opt.value === selected && (
|
|
<Ionicons name="checkmark" size={18} color={colors.brandOrange} />
|
|
)}
|
|
</Pressable>
|
|
))}
|
|
</Animated.View>
|
|
</Pressable>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
// ─── Settings Screen ───────────────────────────────────────────────────────
|
|
|
|
type SectionRow = {
|
|
icon: React.ComponentProps<typeof Ionicons>['name'];
|
|
iconColor: string;
|
|
label: string;
|
|
sublabel: string;
|
|
soon?: boolean;
|
|
destructive?: boolean;
|
|
value?: string;
|
|
onPress?: () => void;
|
|
};
|
|
|
|
type Section = {
|
|
key: string;
|
|
title: string;
|
|
rows: SectionRow[];
|
|
};
|
|
|
|
export default function SettingsScreen() {
|
|
const router = useRouter();
|
|
const insets = useSafeAreaInsets();
|
|
const { t } = useTranslation();
|
|
const { signOut } = useAuthStore();
|
|
const { mode: themeMode, setMode: setThemeMode } = useThemeStore();
|
|
const { language, setLanguage } = useLanguageStore();
|
|
const { plan } = useUserPlan();
|
|
|
|
const [themePickerOpen, setThemePickerOpen] = useState(false);
|
|
const [langPickerOpen, setLangPickerOpen] = useState(false);
|
|
const [voicePickerOpen, setVoicePickerOpen] = useState(false);
|
|
|
|
// Lyra Voice: hardcoded ElevenLabs voice IDs (expandable by user later)
|
|
// Backend endpoint PATCH /api/profile/me/demographics does NOT accept lyraVoiceId.
|
|
// A dedicated PATCH /api/profile/me/lyra-voice endpoint is needed from backend-agent.
|
|
// For now: picker is wired to local state only, changes are NOT persisted.
|
|
const [selectedVoice, setSelectedVoice] = useState('EXAVITQu4vr4xnSDxMaL');
|
|
|
|
async function handleSignOut() {
|
|
Alert.alert(t('auth.signOut'), '', [
|
|
{ text: t('common.cancel'), style: 'cancel' },
|
|
{
|
|
text: t('auth.signOut'),
|
|
style: 'cancel',
|
|
onPress: async () => {
|
|
await signOut();
|
|
router.replace('/');
|
|
},
|
|
},
|
|
]);
|
|
}
|
|
|
|
const themeOptions: PickerOption<ThemeMode>[] = [
|
|
{ value: 'system', label: t('settings.theme_system') },
|
|
{ value: 'light', label: t('settings.theme_light') },
|
|
{ value: 'dark', label: t('settings.theme_dark') },
|
|
];
|
|
|
|
const themeLabel =
|
|
themeMode === 'system'
|
|
? t('settings.theme_system')
|
|
: themeMode === 'light'
|
|
? t('settings.theme_light')
|
|
: t('settings.theme_dark');
|
|
|
|
const langOptions: PickerOption<AppLanguage>[] = [
|
|
{ value: 'de', label: t('settings.language_de') },
|
|
{ value: 'en', label: t('settings.language_en') },
|
|
];
|
|
|
|
const voiceOptions: PickerOption<string>[] = [
|
|
{ value: 'EXAVITQu4vr4xnSDxMaL', label: t('settings.lyra_voice_sarah') },
|
|
{ value: 'ThT5KcBeYPX3keUQqHPh', label: t('settings.lyra_voice_aria') },
|
|
{ value: 'XB0fDUnXU5powFXDhCwa', label: t('settings.lyra_voice_charlotte') },
|
|
{ value: 'Xb7hH8MSUJpSbSDYk0k2', label: t('settings.lyra_voice_alice') },
|
|
{ value: 'pqHfZKP75CvOlQylNhV4', label: t('settings.lyra_voice_bill') },
|
|
];
|
|
|
|
const selectedVoiceName =
|
|
voiceOptions.find((v) => v.value === selectedVoice)?.label ?? t('settings.lyra_voice_sarah');
|
|
|
|
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'),
|
|
soon: true,
|
|
},
|
|
{
|
|
icon: 'image-outline',
|
|
iconColor: '#6366f1',
|
|
label: t('settings.profile_avatar'),
|
|
sublabel: t('settings.profile_avatar_desc'),
|
|
soon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'theme',
|
|
title: t('settings.section_theme'),
|
|
rows: [
|
|
{
|
|
icon: 'color-palette-outline',
|
|
iconColor: '#a78bfa',
|
|
label: t('settings.theme'),
|
|
sublabel: t('settings.theme_desc'),
|
|
value: themeLabel,
|
|
onPress: () => setThemePickerOpen(true),
|
|
},
|
|
{
|
|
icon: 'language-outline',
|
|
iconColor: '#a78bfa',
|
|
label: t('settings.language'),
|
|
sublabel: t('settings.language_desc'),
|
|
value: language === 'de' ? t('settings.language_de') : t('settings.language_en'),
|
|
onPress: () => setLangPickerOpen(true),
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'notifications',
|
|
title: t('settings.section_notifications'),
|
|
rows: [
|
|
{
|
|
icon: 'notifications-outline',
|
|
iconColor: '#2563eb',
|
|
label: t('settings.notifications_push'),
|
|
sublabel: t('settings.notifications_push_desc'),
|
|
soon: true,
|
|
},
|
|
{
|
|
icon: 'flame-outline',
|
|
iconColor: '#f97316',
|
|
label: t('settings.notifications_streak'),
|
|
sublabel: t('settings.notifications_streak_desc'),
|
|
soon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'devices',
|
|
title: t('settings.section_devices'),
|
|
rows: [
|
|
{
|
|
icon: 'phone-portrait-outline',
|
|
iconColor: '#16a34a',
|
|
label: t('settings.devices'),
|
|
sublabel: t('settings.devices_desc'),
|
|
soon: true,
|
|
},
|
|
{
|
|
icon: 'star-outline',
|
|
iconColor: colors.brandOrange,
|
|
label: t('settings.subscription'),
|
|
sublabel: t('settings.subscription_desc'),
|
|
soon: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'lyra',
|
|
title: t('settings.section_lyra'),
|
|
rows: [
|
|
{
|
|
icon: 'mic-outline',
|
|
iconColor: '#ec4899',
|
|
label: t('settings.lyra_voice'),
|
|
sublabel:
|
|
plan === 'legend'
|
|
? t('settings.lyra_voice_desc')
|
|
: t('settings.lyra_voice_only_legend'),
|
|
value: plan === 'legend' ? selectedVoiceName : undefined,
|
|
// Voice picker is wired but changes are local-only until
|
|
// PATCH /api/profile/me/lyra-voice endpoint is added by backend-agent.
|
|
onPress: plan === 'legend' ? () => setVoicePickerOpen(true) : undefined,
|
|
soon: plan !== 'legend',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'account',
|
|
title: t('settings.danger_section'),
|
|
rows: [
|
|
{
|
|
icon: 'log-out-outline',
|
|
iconColor: colors.textMuted,
|
|
label: t('settings.sign_out'),
|
|
sublabel: '',
|
|
onPress: handleSignOut,
|
|
},
|
|
{
|
|
icon: 'trash-outline',
|
|
iconColor: colors.error,
|
|
label: t('settings.delete_account'),
|
|
sublabel: t('settings.delete_desc'),
|
|
destructive: true,
|
|
soon: true,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
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'),
|
|
soon: true,
|
|
},
|
|
{
|
|
icon: 'volume-high-outline',
|
|
iconColor: '#737373',
|
|
label: t('settings.debug_tts'),
|
|
sublabel: t('settings.debug_tts_desc'),
|
|
soon: true,
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
return (
|
|
<View style={{ flex: 1, backgroundColor: colors.bg }}>
|
|
<AppHeader showBack title={t('settings.title')} />
|
|
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{
|
|
paddingHorizontal: 16,
|
|
paddingTop: 16,
|
|
paddingBottom: insets.bottom + 40,
|
|
}}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{sections.map((section) => (
|
|
<View key={section.key} style={{ marginBottom: 24 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 11,
|
|
color: '#a3a3a3',
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
marginBottom: 8,
|
|
marginLeft: 4,
|
|
}}
|
|
>
|
|
{section.title}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
backgroundColor: colors.surface,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(0,0,0,0.05)',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
{section.rows.map((row, i) => (
|
|
<Pressable
|
|
key={row.label}
|
|
onPress={row.soon ? undefined : row.onPress}
|
|
disabled={row.soon}
|
|
style={({ pressed }) => ({
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
paddingHorizontal: 14,
|
|
minHeight: 56,
|
|
borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
|
|
borderBottomColor: 'rgba(0,0,0,0.04)',
|
|
opacity: row.soon ? 0.5 : pressed ? 0.7 : 1,
|
|
backgroundColor: pressed && !row.soon ? '#f5f5f5' : 'transparent',
|
|
})}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
backgroundColor: row.iconColor + '18',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={row.icon}
|
|
size={18}
|
|
color={row.destructive ? colors.error : row.iconColor}
|
|
/>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 15,
|
|
color: row.destructive ? colors.error : colors.text,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
}}
|
|
>
|
|
{row.label}
|
|
</Text>
|
|
{row.sublabel ? (
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_400Regular',
|
|
marginTop: 2,
|
|
}}
|
|
>
|
|
{row.sublabel}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
{row.soon ? (
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
color: '#a3a3a3',
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{t('settings.soon_badge')}
|
|
</Text>
|
|
) : row.value ? (
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
color: colors.textMuted,
|
|
fontFamily: 'Nunito_400Regular',
|
|
flexShrink: 0,
|
|
marginLeft: 4,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{row.value}
|
|
</Text>
|
|
) : (
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={16}
|
|
color="#d4d4d8"
|
|
style={{ flexShrink: 0 }}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
))}
|
|
</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>
|
|
|
|
<PickerSheet
|
|
visible={themePickerOpen}
|
|
title={t('settings.theme_picker_title')}
|
|
options={themeOptions}
|
|
selected={themeMode}
|
|
onSelect={setThemeMode}
|
|
onClose={() => setThemePickerOpen(false)}
|
|
/>
|
|
|
|
<PickerSheet
|
|
visible={langPickerOpen}
|
|
title={t('settings.language_picker_title')}
|
|
options={langOptions}
|
|
selected={language}
|
|
onSelect={setLanguage}
|
|
onClose={() => setLangPickerOpen(false)}
|
|
/>
|
|
|
|
<PickerSheet
|
|
visible={voicePickerOpen}
|
|
title={t('settings.lyra_voice_picker_title')}
|
|
options={voiceOptions}
|
|
selected={selectedVoice}
|
|
onSelect={setSelectedVoice}
|
|
onClose={() => setVoicePickerOpen(false)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|