feat(settings): Sub-Screen-Navigation statt langer Liste
Settings ist jetzt ein Hauptmenue mit 8 Kategorien — beim Tippen klappt nur die gewaehlte Sektion auf, "<-Back-Button kehrt zur Uebersicht zurueck. Gruppen: - 🔌 Verbindung (Server, Token, Status, Verbindungslog) - ⚙️ Allgemein (Betriebsmodus, GPS-Standort) - 🎙️ Spracheingabe (Stille-Toleranz, Aufnahmedauer) - 👂 Wake-Word (Wake-Word-Auswahl) - 🔊 Sprachausgabe (Stimmen, Pre-Roll, Geschwindigkeit) - 📁 Speicher (Anhang-Speicherort, Auto-Download) - 📜 Protokoll (Privatsphaere, Backup) - ℹ️ Ueber (App-Version, Update) Implementierung absichtlich ohne react-navigation-Stack: ein einzelner currentSection-State, conditional rendering pro Sektion. So bleibt aller geteilte State (rvs.config, voices-Liste, Toggles) im selben Component- Closure ohne props-drilling oder Context. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -76,6 +76,18 @@ interface EventEntry {
|
||||
|
||||
type LogTab = 'live' | 'events';
|
||||
|
||||
// Settings-Sub-Screens. Reihenfolge im Hauptmenue.
|
||||
const SETTINGS_SECTIONS = [
|
||||
{ id: 'connection', icon: '🔌', label: 'Verbindung', desc: 'Server, Token, Status, Verbindungslog' },
|
||||
{ id: 'general', icon: '⚙️', label: 'Allgemein', desc: 'Betriebsmodus, GPS-Standort' },
|
||||
{ id: 'voice_input', icon: '🎙️', label: 'Spracheingabe', desc: 'Stille-Toleranz, Aufnahmedauer' },
|
||||
{ id: 'wake_word', icon: '👂', label: 'Wake-Word', desc: 'Wake-Word-Auswahl' },
|
||||
{ id: 'voice_output', icon: '🔊', label: 'Sprachausgabe', desc: 'Stimmen, Pre-Roll, Geschwindigkeit' },
|
||||
{ id: 'storage', icon: '📁', label: 'Speicher', desc: 'Anhang-Speicherort, Auto-Download' },
|
||||
{ id: 'protocol', icon: '📜', label: 'Protokoll', desc: 'Privatsphaere, Backup' },
|
||||
{ id: 'about', icon: 'ℹ️', label: 'Ueber', desc: 'App-Version, Update' },
|
||||
] as const;
|
||||
|
||||
// Container-Farben fuer Live-Logs
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
'aria-core': '#4A9EFF', // Blau
|
||||
@@ -116,6 +128,10 @@ const SettingsScreen: React.FC = () => {
|
||||
const [availableVoices, setAvailableVoices] = useState<Array<{name: string, size: number}>>([]);
|
||||
const [voiceCloneVisible, setVoiceCloneVisible] = useState(false);
|
||||
const [tempPath, setTempPath] = useState('');
|
||||
// Sub-Screen Navigation: null = Hauptmenue, sonst eine der Section-IDs.
|
||||
// So bleibt aller geteilte State im selben Component-Closure und wir
|
||||
// brauchen keine react-navigation-Stack-Setup.
|
||||
const [currentSection, setCurrentSection] = useState<string | null>(null);
|
||||
|
||||
let logIdCounter = 0;
|
||||
|
||||
@@ -493,7 +509,39 @@ const SettingsScreen: React.FC = () => {
|
||||
/>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
|
||||
{currentSection === null && (
|
||||
<>
|
||||
{SETTINGS_SECTIONS.map(s => (
|
||||
<TouchableOpacity
|
||||
key={s.id}
|
||||
style={styles.menuItem}
|
||||
onPress={() => setCurrentSection(s.id)}
|
||||
>
|
||||
<Text style={styles.menuItemIcon}>{s.icon}</Text>
|
||||
<View style={styles.menuItemTextWrap}>
|
||||
<Text style={styles.menuItemLabel}>{s.label}</Text>
|
||||
<Text style={styles.menuItemDesc}>{s.desc}</Text>
|
||||
</View>
|
||||
<Text style={styles.menuItemChevron}>›</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentSection !== null && (
|
||||
<TouchableOpacity
|
||||
style={styles.subScreenHeader}
|
||||
onPress={() => setCurrentSection(null)}
|
||||
>
|
||||
<Text style={styles.subScreenBack}>‹</Text>
|
||||
<Text style={styles.subScreenTitle}>
|
||||
{SETTINGS_SECTIONS.find(s => s.id === currentSection)?.label || ''}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{/* === Verbindung === */}
|
||||
{currentSection === 'connection' && (<>
|
||||
<Text style={styles.sectionTitle}>Verbindung</Text>
|
||||
<View style={styles.card}>
|
||||
{/* Status-Anzeige */}
|
||||
@@ -590,8 +638,10 @@ const SettingsScreen: React.FC = () => {
|
||||
<Text style={styles.clearButtonText}>Log l{'\u00F6'}schen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>)}
|
||||
|
||||
{/* === Modus === */}
|
||||
{currentSection === 'general' && (<>
|
||||
<Text style={styles.sectionTitle}>Betriebsmodus</Text>
|
||||
<View style={styles.card}>
|
||||
<ModeSelector currentModeId={currentMode} onModeChange={handleModeChange} />
|
||||
@@ -615,8 +665,10 @@ const SettingsScreen: React.FC = () => {
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</>)}
|
||||
|
||||
{/* === Spracheingabe (geraetelokal) === */}
|
||||
{currentSection === 'voice_input' && (<>
|
||||
<Text style={styles.sectionTitle}>Spracheingabe</Text>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.toggleLabel}>Stille-Toleranz</Text>
|
||||
@@ -718,7 +770,10 @@ const SettingsScreen: React.FC = () => {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</>)}
|
||||
|
||||
{/* === Wake-Word (komplett on-device, openWakeWord) === */}
|
||||
{currentSection === 'wake_word' && (<>
|
||||
<Text style={styles.sectionTitle}>Wake-Word</Text>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.toggleHint}>
|
||||
@@ -774,8 +829,10 @@ const SettingsScreen: React.FC = () => {
|
||||
<Text style={{marginTop: 8, fontSize: 12, color: '#8888AA'}}>{wakeStatus}</Text>
|
||||
)}
|
||||
</View>
|
||||
</>)}
|
||||
|
||||
{/* === Sprachausgabe (geraetelokal) === */}
|
||||
{currentSection === 'voice_output' && (<>
|
||||
<Text style={styles.sectionTitle}>Sprachausgabe</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.toggleRow}>
|
||||
@@ -918,7 +975,10 @@ const SettingsScreen: React.FC = () => {
|
||||
)}
|
||||
</View>
|
||||
|
||||
</>)}
|
||||
|
||||
{/* === Speicher === */}
|
||||
{currentSection === 'storage' && (<>
|
||||
<Text style={styles.sectionTitle}>Anhang-Speicher</Text>
|
||||
<View style={styles.card}>
|
||||
<View style={styles.toggleRow}>
|
||||
@@ -993,7 +1053,10 @@ const SettingsScreen: React.FC = () => {
|
||||
)}
|
||||
</View>
|
||||
|
||||
</>)}
|
||||
|
||||
{/* === Logs === */}
|
||||
{currentSection === 'protocol' && (<>
|
||||
<Text style={styles.sectionTitle}>Protokoll</Text>
|
||||
<View style={styles.card}>
|
||||
{/* Tab-Umschalter */}
|
||||
@@ -1072,8 +1135,10 @@ const SettingsScreen: React.FC = () => {
|
||||
<Text style={styles.clearButtonText}>Protokoll l\u00F6schen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>)}
|
||||
|
||||
{/* === About === */}
|
||||
{currentSection === 'about' && (<>
|
||||
<Text style={styles.sectionTitle}>{'\u00DC'}ber</Text>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.aboutTitle}>ARIA Cockpit</Text>
|
||||
@@ -1093,6 +1158,7 @@ const SettingsScreen: React.FC = () => {
|
||||
<Text style={styles.connectButtonText}>Auf Updates pr{'\u00FC'}fen</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>)}
|
||||
|
||||
{/* Platz am Ende */}
|
||||
<View style={styles.bottomSpacer} />
|
||||
@@ -1121,6 +1187,58 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 8,
|
||||
marginLeft: 4,
|
||||
},
|
||||
menuItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#1E1E2E',
|
||||
borderRadius: 10,
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 14,
|
||||
marginBottom: 8,
|
||||
},
|
||||
menuItemIcon: {
|
||||
fontSize: 22,
|
||||
marginRight: 14,
|
||||
width: 28,
|
||||
textAlign: 'center',
|
||||
},
|
||||
menuItemTextWrap: {
|
||||
flex: 1,
|
||||
},
|
||||
menuItemLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
menuItemDesc: {
|
||||
color: '#8888AA',
|
||||
fontSize: 12,
|
||||
marginTop: 2,
|
||||
},
|
||||
menuItemChevron: {
|
||||
color: '#8888AA',
|
||||
fontSize: 24,
|
||||
fontWeight: '300',
|
||||
marginLeft: 8,
|
||||
},
|
||||
subScreenHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 8,
|
||||
marginBottom: 8,
|
||||
},
|
||||
subScreenBack: {
|
||||
color: '#0096FF',
|
||||
fontSize: 32,
|
||||
fontWeight: '300',
|
||||
marginRight: 12,
|
||||
lineHeight: 36,
|
||||
},
|
||||
subScreenTitle: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#12122A',
|
||||
borderRadius: 14,
|
||||
|
||||
Reference in New Issue
Block a user