chahinebrini 9ccd0bd334 feat(settings): Theme + Language + Lyra-Voice Picker; Dropdown-width 280→170pt
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>
2026-05-07 21:22:32 +02:00

39 lines
1.1 KiB
TypeScript

import { create } from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Appearance } from 'react-native';
export type ThemeMode = 'system' | 'light' | 'dark';
const STORAGE_KEY = '@rebreak/theme';
function resolveColorScheme(mode: ThemeMode): 'light' | 'dark' {
if (mode === 'system') {
return Appearance.getColorScheme() === 'dark' ? 'dark' : 'light';
}
return mode;
}
type ThemeState = {
mode: ThemeMode;
colorScheme: 'light' | 'dark';
setMode: (mode: ThemeMode) => Promise<void>;
init: () => Promise<void>;
};
export const useThemeStore = create<ThemeState>((set) => ({
mode: 'system',
colorScheme: resolveColorScheme('system'),
init: async () => {
const stored = await AsyncStorage.getItem(STORAGE_KEY);
const mode: ThemeMode =
stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system';
set({ mode, colorScheme: resolveColorScheme(mode) });
},
setMode: async (mode) => {
await AsyncStorage.setItem(STORAGE_KEY, mode);
set({ mode, colorScheme: resolveColorScheme(mode) });
},
}));