Update styling and accessibility, refine product and shopping list functionalities

src/components/form/BudgetInput.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { budgetPeriodLabels, colors } from '../../utils/constants';
@@ -5,16 +6,28 @@ import { budgetPeriodLabels, colors } from '../../utils/constants';
 const budgetPeriods = ['day', 'week', 'month', 'shoppingTrip'];
 
 export default function BudgetInput({ value, currency, period, onChangePeriod, onChangeValue }) {
+  const [inputValue, setInputValue] = useState(String(value ?? ''));
+
+  function updateValue(text) {
+    setInputValue(text);
+    const parsedValue = Number(text.replace(',', '.'));
+    onChangeValue(text.trim() && Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : undefined);
+  }
+
   return (
     <View style={styles.wrap}>
-      <Text style={styles.label}>Maximales Einkaufsbudget</Text>
+      <Text style={styles.label}>Dein Budget (optional)</Text>
+      <Text style={styles.hint}>Ohne Budget bleibt die Preisbewertung offen.</Text>
       <View style={styles.row}>
         <Text style={styles.currency}>{currency}</Text>
         <TextInput
+          accessibilityLabel="Budgetbetrag"
           keyboardType="decimal-pad"
-          onChangeText={(text) => onChangeValue(Number(text.replace(',', '.')) || 0)}
+          onChangeText={updateValue}
+          placeholder="z. B. 45.00"
+          placeholderTextColor={colors.muted}
           style={styles.input}
-          value={String(value ?? '')}
+          value={inputValue}
         />
       </View>
       <View style={styles.periodGrid}>
@@ -23,6 +36,7 @@ export default function BudgetInput({ value, currency, period, onChangePeriod, o
           return (
             <Pressable
               accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
               key={option}
               onPress={() => onChangePeriod(option)}
               style={[styles.periodChip, isActive ? styles.activePeriodChip : null]}
@@ -42,11 +56,16 @@ const styles = StyleSheet.create({
   wrap: {
     backgroundColor: colors.surface,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
     borderWidth: 1,
     gap: 10,
     padding: 14
   },
+  hint: {
+    color: colors.muted,
+    fontSize: 13,
+    lineHeight: 18
+  },
   label: {
     color: colors.text,
     fontSize: 15,
@@ -64,7 +83,7 @@ const styles = StyleSheet.create({
   },
   input: {
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     color: colors.text,
     flex: 1,
@@ -80,7 +99,7 @@ const styles = StyleSheet.create({
   periodChip: {
     alignItems: 'center',
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
     borderWidth: 1,
     flexGrow: 1,
     paddingHorizontal: 10,