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>
39 lines
1.1 KiB
TypeScript
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) });
|
|
},
|
|
}));
|