small refactoring

app/(tabs)/modes/text.tsx

@@ -1,49 +1,45 @@
 import ThemedBackground from "@/src/components/themed/ThemedBackground";
-import { useState } from "react";
 import ThemedTextInput from "@/src/components/themed/ThemedTextInput";
 import ThemedButton from "@/src/components/themed/ThemedButton";
-import { useAuth } from "@/src/context/AuthProvider";
 import ColorSelector from "@/src/components/themed/ColorSelector";
-import { View, StyleSheet } from "react-native";
+import {View, StyleSheet} from "react-native";
 import ThemedSegmentedButtons from "@/src/components/themed/ThemedSegmentedButtons";
 import { MatrixState } from '@/src/model/User';
+import {useMatrix} from "@/app/(tabs)/_layout";
 
 type TextProps = MatrixState['text'];
 
 export default function TextScreen() {
-    const { authenticatedUser } = useAuth();
-
-    const [textProps, setTextProps] = useState<TextProps>(
-        authenticatedUser?.lastState?.text || {
-            text: '',
-            color: [255, 255, 255],
-            align: 'center',
-            speed: 50,
-            size: 16,
-        }
-    );
+    const { matrixState, updateMatrixState } = useMatrix();
 
     const updateTextProp = (prop: Partial<TextProps>) => {
-        setTextProps(prev => ({ ...prev, ...prop }));
+        updateMatrixState({
+            text: { ...matrixState.text, ...prop },
+            global: { ...matrixState.global, mode: 'text' }
+        });
+    };
+
+    const handleSendToMatrix = () => {
+        console.log("Sende an Matrix:", matrixState);
     };
 
     return (
         <ThemedBackground>
-            <View style={styles.contentWrapper}>
+            <View style={[styles.contentWrapper]}>
                 <View style={styles.inputGroup}>
                     <ThemedTextInput
                         label="Text"
-                        value={textProps.text}
+                        value={matrixState.text.text}
                         onChangeText={(text) => updateTextProp({ text })}
                     />
 
                     <ColorSelector
                         onSelect={(color) => updateTextProp({ color })}
-                        defaultColor={textProps.color}
+                        defaultColor={matrixState.text.color}
                     />
 
                     <ThemedSegmentedButtons
-                        value={textProps.align}
+                        value={matrixState.text.align}
                         onValueChange={(align) => updateTextProp({ align })}
                         options={{
                             left: 'Links',
@@ -56,7 +52,7 @@ export default function TextScreen() {
                 <View style={styles.actionGroup}>
                     <ThemedButton
                         mode="contained"
-                        onPress={() => console.log(textProps)}
+                        onPress={handleSendToMatrix}
                         title={"An die Matrix senden"}
                     />
                 </View>
@@ -69,11 +65,12 @@ const styles = StyleSheet.create({
     contentWrapper: {
         flex: 1,
         justifyContent: 'space-between',
-        paddingVertical: 20,
+        padding: 20,
     },
     inputGroup: {
         gap: 15,
     },
     actionGroup: {
+        paddingTop: 20,
     }
 });