duffyduckandClaude Opus 4.8
7329257830
Nach dem 0.2.1.8-Deploy sah die App "unveraendert" aus — korrekt, weil der Hauptchat nur eine Kachel hat (= Vollbild-Chat). Jetzt explizit umschaltbar: - services/viewMode.ts: 'compact' | 'cockpit', persistiert (aria_view_mode), Default 'compact' (nichts aendert sich fuer normale Nutzung). - ViewModeToggle im Navigations-Header (rechts, kollisionsfrei): "⧉ Kompakt" / "⧉ Cockpit". - WorkspaceScreen: compact → klassische ChatScreen direkt; cockpit → Canvas. - Canvas: Uebersicht/Gesten/Back jetzt auch bei einer Kachel erreichbar (der single-Force-Fokus entfaellt), damit sich Cockpit auch im Hauptchat wie ein Desktop anfuehlt. "⤢ Uebersicht"-Button nach unten rechts verschoben (weg von ChatScreens Kopf-Icons). Changelog: Workspace-Release als 0.2.1.8 gefuehrt, Umschalter als 0.2.1.9. tsc clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
/**
|
|
* ViewModeToggle — kleiner Header-Button zum Umschalten zwischen Kompakt-
|
|
* Ansicht (klassischer Chat) und Cockpit (Kachel-Desktop).
|
|
*
|
|
* Sitzt rechts im Navigations-Header ("ARIA Cockpit"), kollidiert also mit
|
|
* nichts in der Chat-Ansicht. Zeigt das Ziel des naechsten Taps.
|
|
*/
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
|
|
import viewMode, { ViewModeValue } from '../services/viewMode';
|
|
|
|
const ViewModeToggle: React.FC = () => {
|
|
const [mode, setMode] = useState<ViewModeValue>(viewMode.get());
|
|
useEffect(() => viewMode.subscribe(setMode), []);
|
|
|
|
const isCockpit = mode === 'cockpit';
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => viewMode.toggle()}
|
|
style={[styles.pill, isCockpit && styles.pillActive]}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
activeOpacity={0.75}
|
|
>
|
|
<Text style={[styles.text, isCockpit && styles.textActive]}>
|
|
{isCockpit ? '⧉ Cockpit' : '⧉ Kompakt'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
pill: {
|
|
marginRight: 12,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: '#1E1E2E',
|
|
backgroundColor: '#12122A',
|
|
},
|
|
pillActive: { borderColor: '#0096FF', backgroundColor: '#0A1F33' },
|
|
text: { color: '#9090B0', fontSize: 13, fontWeight: '700' },
|
|
textActive: { color: '#0096FF' },
|
|
});
|
|
|
|
export default ViewModeToggle;
|