Refactor profile screen layout and user preference handling

src/components/list/ShoppingListItem.js

@@ -4,7 +4,7 @@ import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { colors } from '../../utils/constants';
 import { formatPrice } from '../../utils/formatPrice';
 
-export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePrice }) {
+export default function ShoppingListItem({ item, onToggle, onDelete, onChangeQuantity, onUpdatePrice }) {
   const [priceText, setPriceText] = useState(priceToInputValue(item.estimatedPrice));
   const [priceError, setPriceError] = useState('');
 
@@ -26,13 +26,23 @@ export default function ShoppingListItem({ item, onToggle, onDelete, onUpdatePri
   }
 
   return (
-    <View style={styles.row}>
+    <View style={[styles.row, item.checked && styles.completedRow]}>
       <Pressable accessibilityLabel={`${item.productName} ${item.checked ? 'als offen markieren' : 'abhaken'}`} accessibilityRole="checkbox" accessibilityState={{ checked: item.checked }} onPress={onToggle} style={[styles.checkbox, item.checked ? styles.checked : null]}>
         <Text style={styles.checkText}>{item.checked ? '✓' : ''}</Text>
       </Pressable>
       <View style={styles.copy}>
         <Text style={[styles.name, item.checked ? styles.done : null]}>{item.productName}</Text>
         <Text style={styles.meta}>{item.quantity} × {formatPrice(item.estimatedPrice, item.currency || 'CHF')}{item.quantity > 1 && typeof item.estimatedPrice === 'number' ? ` · ${formatPrice(item.estimatedPrice * item.quantity, item.currency || 'CHF')}` : ''}</Text>
+        <View style={styles.quantityRow}>
+          <Text style={styles.quantityLabel}>Menge</Text>
+          <Pressable accessibilityLabel={`Menge von ${item.productName} verringern`} accessibilityRole="button" accessibilityState={{ disabled: item.quantity <= 1 }} disabled={item.quantity <= 1} onPress={() => onChangeQuantity(-1)} style={[styles.quantityButton, item.quantity <= 1 && styles.disabledButton]}>
+            <Text style={styles.quantityButtonText}>−</Text>
+          </Pressable>
+          <Text style={styles.quantityValue}>{item.quantity}</Text>
+          <Pressable accessibilityLabel={`Menge von ${item.productName} erhöhen`} accessibilityRole="button" onPress={() => onChangeQuantity(1)} style={styles.quantityButton}>
+            <Text style={styles.quantityButtonText}>+</Text>
+          </Pressable>
+        </View>
         <View style={styles.priceRow}>
           <Text style={styles.currency}>{item.currency || 'CHF'}</Text>
           <TextInput
@@ -75,6 +85,13 @@ function parsePrice(value) {
 }
 
 const styles = StyleSheet.create({
+  completedRow: { backgroundColor: '#f2f7f4' },
+  quantityRow: { alignItems: 'center', flexDirection: 'row', gap: 8, marginTop: 10 },
+  quantityLabel: { color: colors.muted, fontSize: 13, fontWeight: '700', marginRight: 4 },
+  quantityButton: { alignItems: 'center', backgroundColor: colors.surfaceTint, borderRadius: 9, height: 36, justifyContent: 'center', width: 36 },
+  disabledButton: { opacity: 0.4 },
+  quantityButtonText: { color: colors.primaryDark, fontSize: 21, fontWeight: '700' },
+  quantityValue: { color: colors.text, fontSize: 15, fontWeight: '800', minWidth: 22, textAlign: 'center' },
   row: {
     alignItems: 'center',
     backgroundColor: colors.surface,
@@ -102,7 +119,8 @@ const styles = StyleSheet.create({
     fontWeight: '800'
   },
   copy: {
-    flex: 1
+    flex: 1,
+    minWidth: 0
   },
   name: {
     color: colors.text,