Update styling and accessibility, refine product and shopping list functionalities

2026-10-16 15:49:22 +02:00
parent 6938afb26c
commit defc1fbc13
24 changed files with 484 additions and 162 deletions
@@ -74,7 +74,7 @@ const styles = StyleSheet.create({
  empty: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
    padding: 16
  },
@@ -7,40 +7,46 @@ import SectionTitle from '../components/layout/SectionTitle';
 import ProductCard from '../components/product/ProductCard';
 import { calculateProductRating } from '../services/ratingService';
 import { colors } from '../utils/constants';
+import { formatPrice } from '../utils/formatPrice';

 export default function HomeScreen({ preferences, recentProducts, shoppingList, onStartScan, onOpenProduct, onOpenList }) {
  const frequentProducts = [...recentProducts]
    .filter((product) => (product.scanCount || 0) > 1)
    .sort((a, b) => (b.scanCount || 0) - (a.scanCount || 0))
    .slice(0, 3);
+  const openItems = shoppingList?.items?.filter((item) => !item.checked).length || 0;

  return (
    <ScreenContainer>
      <AppHeader
        title="Shoppinguin"
-        subtitle="Scanne Produkte im Supermarkt und erhalte eine persönliche Kaufempfehlung."
+        subtitle="Deine Entscheidungshilfe direkt am Regal"
      />

      <View style={styles.hero}>
-        <Text style={styles.eyebrow}>Smart Shopping Companion</Text>
-        <Text style={styles.title}>Bereit für den nächsten Einkauf?</Text>
+        <Text style={styles.eyebrow}>PRODUKTE BESSER VERSTEHEN</Text>
+        <Text style={styles.title}>Wissen, was drinsteckt.</Text>
        <Text style={styles.copy}>
-          Prüfe Allergien, Ernährung, Budget und Nachhaltigkeit direkt am Regal.
+          Barcode scannen und sofort sehen, wie ein Produkt zu deinen Zielen passt.
        </Text>
-        <PrimaryButton label="Produkt scannen" onPress={onStartScan} />
-        {shoppingList?.items?.length > 0 ? (
-          <Pressable accessibilityRole="button" onPress={onOpenList} style={styles.listShortcut}>
-            <Text style={styles.listShortcutTitle}>Einkaufsliste</Text>
-            <Text style={styles.listShortcutCopy}>
-              {shoppingList.items.filter((item) => !item.checked).length} offene Produkte
-            </Text>
-          </Pressable>
-        ) : null}
+        <PrimaryButton label="Produkt scannen" onPress={onStartScan} tone="light" />
      </View>

+      <Pressable accessibilityRole="button" onPress={onOpenList} style={styles.listShortcut}>
+        <View style={styles.listShortcutText}>
+          <Text style={styles.listShortcutTitle}>Dein Einkauf</Text>
+          <Text style={styles.listShortcutCopy}>
+            {shoppingList?.items?.length ? `${openItems} noch offen · ${shoppingList.items.length} insgesamt` : 'Deine Liste ist noch leer'}
+          </Text>
+        </View>
+        <Text style={styles.listShortcutTotal}>
+          {shoppingList?.items?.length ? formatPrice(shoppingList.estimatedTotal, shoppingList.currency) : 'Liste öffnen'}
+        </Text>
+      </Pressable>
+
      {frequentProducts.length > 0 ? (
        <>
-          <SectionTitle>Häufig gekauft</SectionTitle>
+          <SectionTitle>Häufig gescannt</SectionTitle>
          {frequentProducts.map((product) => (
            <View key={`frequent-${product.id}`} style={styles.frequentWrap}>
              <ProductCard
@@ -54,11 +60,11 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,
        </>
      ) : null}

-      <SectionTitle>Letzte Scans</SectionTitle>
+      <SectionTitle>Zuletzt angesehen</SectionTitle>
      {recentProducts.length === 0 ? (
        <View style={styles.emptyState}>
-          <Text style={styles.emptyTitle}>Noch keine Produkte gescannt</Text>
-          <Text style={styles.emptyCopy}>Starte einen Scan oder nutze die manuelle Suche.</Text>
+          <Text style={styles.emptyTitle}>Dein erster Scan wartet</Text>
+          <Text style={styles.emptyCopy}>Scanne einen Barcode oder suche ein Produkt nach Namen. Deine letzten Produkte erscheinen dann hier.</Text>
        </View>
      ) : (
        recentProducts.map((product) => (
@@ -76,29 +82,30 @@ export default function HomeScreen({ preferences, recentProducts, shoppingList,

 const styles = StyleSheet.create({
  hero: {
-    backgroundColor: colors.surface,
-    borderColor: colors.border,
-    borderRadius: 8,
-    borderWidth: 1,
-    gap: 12,
-    padding: 18
+    backgroundColor: colors.primaryDark,
+    borderRadius: 22,
+    gap: 14,
+    padding: 24
  },
  eyebrow: {
-    color: colors.primary,
-    fontSize: 13,
+    color: '#b8e7ce',
+    fontSize: 12,
    fontWeight: '800',
+    letterSpacing: 1.2,
    textTransform: 'uppercase'
  },
  title: {
-    color: colors.text,
-    fontSize: 25,
+    color: colors.surface,
+    fontSize: 31,
    fontWeight: '800',
-    lineHeight: 31
+    letterSpacing: -0.7,
+    lineHeight: 37
  },
  copy: {
-    color: colors.muted,
+    color: '#e2eee7',
    fontSize: 16,
-    lineHeight: 23
+    lineHeight: 23,
+    marginBottom: 6
  },
  frequentWrap: {
    gap: 6
@@ -113,9 +120,9 @@ const styles = StyleSheet.create({
  emptyState: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
-    padding: 18
+    padding: 20
  },
  emptyTitle: {
    color: colors.text,
@@ -129,18 +136,33 @@ const styles = StyleSheet.create({
    marginTop: 4
  },
  listShortcut: {
-    backgroundColor: '#eaf4ef',
-    borderRadius: 8,
-    gap: 2,
-    padding: 12
+    alignItems: 'center',
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    borderRadius: 18,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 12,
+    minHeight: 80,
+    padding: 18
+  },
+  listShortcutText: {
+    flex: 1,
+    gap: 4
  },
  listShortcutTitle: {
    color: colors.primaryDark,
-    fontSize: 15,
+    fontSize: 17,
    fontWeight: '800'
  },
  listShortcutCopy: {
    color: colors.muted,
    fontSize: 13
+  },
+  listShortcutTotal: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800',
+    textAlign: 'right'
  }
 });
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';

 import PrimaryButton from '../components/PrimaryButton';
 import SecondaryButton from '../components/SecondaryButton';
@@ -18,6 +18,7 @@ export default function ProductDetailScreen({
  preferences,
  onBack,
  onAddToList,
+  onOpenList,
  onSaveManualPrice,
  onShowRatingCriteria,
  onShowAlternatives
@@ -34,26 +35,27 @@ export default function ProductDetailScreen({
    price: hasProductPrice ? product.price : parsedManualPrice
  }), [currency, hasProductPrice, parsedManualPrice, product]);
  const rating = useMemo(() => calculateProductRating(pricedProduct, preferences), [pricedProduct, preferences]);
+  const recommendation = rating.overallStatus === 'good' ? 'Passt gut zu dir' : rating.overallStatus === 'medium' ? 'Genauer prüfen' : 'Lieber meiden';

  function addToList() {
-    if (!hasProductPrice && parsedManualPrice === undefined) {
+    if (!hasProductPrice && manualPrice.trim() && parsedManualPrice === undefined) {
      setSavedMessage('');
-      setPriceError('Bitte gib einen Preis ein, bevor du das Produkt hinzufügst.');
+      setPriceError('Bitte gib einen gültigen Preis ein oder lasse das Feld leer.');
      return;
    }

-    if (typeof pricedProduct.price === 'number') {
+    if (!hasProductPrice && typeof pricedProduct.price === 'number') {
      onSaveManualPrice(pricedProduct, pricedProduct.price);
    }

    onAddToList(pricedProduct);
    setPriceError('');
-    setSavedMessage('Produkt wurde zur Einkaufsliste hinzugefügt.');
+    setSavedMessage('Zur Einkaufsliste hinzugefügt.');
  }

  return (
    <ScreenContainer>
-      <AppHeader title="Produktbewertung" subtitle="Persönliche Einschätzung" onBack={onBack} />
+      <AppHeader title="Produkt im Check" subtitle="Bewertung nach deinen Einstellungen" onBack={onBack} />

      <View style={styles.productPanel}>
        <ProductImage imageUrl={product.imageUrl} productName={product.name} size="large" />
@@ -68,24 +70,27 @@ export default function ProductDetailScreen({
          </View>
          <ProductScoreBadge status={rating.overallStatus} score={rating.overallScore} />
        </View>
-        <Text style={styles.summary}>
-          Empfehlung: {rating.overallStatus === 'good' ? 'kaufen' : rating.overallStatus === 'medium' ? 'prüfen' : 'meiden'}.
-        </Text>
+        <View style={[styles.recommendation, styles[`${rating.overallStatus}Recommendation`]]}>
+          <Text style={[styles.recommendationTitle, styles[`${rating.overallStatus}Text`]]}>{recommendation}</Text>
+          <Text style={styles.recommendationCopy}>Tippe unten auf ein Kriterium, um die Bewertung nachzuvollziehen.</Text>
+        </View>
      </View>

      {!hasProductPrice ? (
        <View style={styles.pricePanel}>
-          <Text style={styles.priceTitle}>Preis ergänzen</Text>
+          <Text style={styles.priceTitle}>Ladenpreis ergänzen</Text>
          <Text style={styles.priceCopy}>
-            Open Food Facts liefert keine Preise. Gib den Ladenpreis ein, damit die Einkaufsliste und Budgetprüfung stimmen.
+            Optional. Ohne Preis kannst du das Produkt speichern; die Einkaufssumme bleibt dann unvollständig.
          </Text>
          <View style={styles.priceInputRow}>
            <Text style={styles.currency}>{currency}</Text>
            <TextInput
+              accessibilityLabel="Ladenpreis"
              keyboardType="decimal-pad"
              onChangeText={(value) => {
                setManualPrice(value);
                setPriceError('');
+                setSavedMessage('');
              }}
              placeholder="z. B. 3.50"
              placeholderTextColor={colors.muted}
@@ -97,6 +102,17 @@ export default function ProductDetailScreen({
        </View>
      ) : null}

+      {savedMessage ? (
+        <View style={styles.savedPanel}>
+          <Text style={styles.saved}>{savedMessage}</Text>
+          <Pressable accessibilityRole="button" onPress={onOpenList}>
+            <Text style={styles.savedLink}>Einkaufsliste ansehen  ›</Text>
+          </Pressable>
+        </View>
+      ) : null}
+      <PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
+      <SecondaryButton label="Bessere Alternativen suchen" onPress={() => onShowAlternatives(product)} />
+
      <SectionTitle>Bewertungskriterien</SectionTitle>
      {Object.entries(rating.categoryScores).map(([category, categoryRating]) => (
        <RatingCategoryRow
@@ -111,14 +127,11 @@ export default function ProductDetailScreen({
      <View style={styles.dataPanel}>
        <Text style={styles.dataText}>Barcode: {product.barcode}</Text>
        <Text style={styles.dataText}>Zutaten: {(product.ingredients || []).join(', ') || 'Keine Angaben'}</Text>
-        <Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine'}</Text>
+        <Text style={styles.dataText}>Allergene: {(product.allergens || []).join(', ') || 'Keine Angaben'}</Text>
        <Text style={styles.dataText}>Nutri-Score: {product.nutrition?.nutriScore || 'Keine Angabe'}</Text>
        <Text style={styles.dataText}>Eco-Score: {product.sustainability?.ecoScore || 'Keine Angabe'}</Text>
      </View>

-      {savedMessage ? <Text style={styles.saved}>{savedMessage}</Text> : null}
-      <PrimaryButton label="Zur Einkaufsliste hinzufügen" onPress={addToList} />
-      <SecondaryButton label="Alternative anzeigen" onPress={() => onShowAlternatives(product)} />
    </ScreenContainer>
  );
 }
@@ -148,7 +161,7 @@ const styles = StyleSheet.create({
  productPanel: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 20,
    borderWidth: 1,
    gap: 14,
    padding: 18
@@ -190,15 +203,30 @@ const styles = StyleSheet.create({
    paddingHorizontal: 8,
    paddingVertical: 4
  },
-  summary: {
+  recommendation: {
+    borderRadius: 14,
+    gap: 4,
+    padding: 14
+  },
+  goodRecommendation: { backgroundColor: '#e4f4e9' },
+  mediumRecommendation: { backgroundColor: '#fff3d7' },
+  criticalRecommendation: { backgroundColor: '#fee9e7' },
+  recommendationTitle: {
+    fontSize: 17,
+    fontWeight: '800'
+  },
+  goodText: { color: colors.success },
+  mediumText: { color: '#8a5914' },
+  criticalText: { color: colors.danger },
+  recommendationCopy: {
    color: colors.text,
-    fontSize: 16,
-    fontWeight: '700'
+    fontSize: 13,
+    lineHeight: 19
  },
  pricePanel: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
    gap: 10,
    padding: 16
@@ -225,7 +253,7 @@ const styles = StyleSheet.create({
  },
  priceInput: {
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
    borderWidth: 1,
    color: colors.text,
    flex: 1,
@@ -241,7 +269,7 @@ const styles = StyleSheet.create({
  dataPanel: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
    gap: 8,
    padding: 14
@@ -255,5 +283,16 @@ const styles = StyleSheet.create({
    color: colors.success,
    fontSize: 14,
    fontWeight: '800'
+  },
+  savedPanel: {
+    backgroundColor: colors.surfaceTint,
+    borderRadius: 14,
+    gap: 6,
+    padding: 14
+  },
+  savedLink: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800'
  }
 });
@@ -30,7 +30,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
    <ScreenContainer>
      <AppHeader
        title="Profil"
-        subtitle="Präferenzen steuern die Produktbewertung global."
+        subtitle="Passe die Bewertung an deine Bedürfnisse an"
      />

      <SectionTitle>Ernährungsziel</SectionTitle>
@@ -38,6 +38,7 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
        {dietOptions.map((option) => (
          <Pressable
            accessibilityRole="button"
+            accessibilityState={{ selected: preferences.preferredDiet === option }}
            key={option}
            onPress={() => updatePreference('preferredDiet', option)}
            style={[styles.chip, preferences.preferredDiet === option ? styles.activeChip : null]}
@@ -50,12 +51,14 @@ export default function ProfileScreen({ preferences, onChangePreferences }) {
      </View>

      <SectionTitle>Allergien vermeiden</SectionTitle>
+      <Text style={styles.sectionHint}>Wähle nur Allergene, die für dich relevant sind. Fehlende Produktangaben bleiben als unsicher markiert.</Text>
      <View style={styles.optionGrid}>
        {['Erdnüsse', 'Milch', 'Hafer', 'Gluten'].map((allergen) => {
          const isActive = preferences.avoidAllergens?.includes(allergen);
          return (
            <Pressable
              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
              key={allergen}
              onPress={() => toggleAllergen(allergen)}
              style={[styles.chip, isActive ? styles.dangerChip : null]}
@@ -111,6 +114,7 @@ function PrioritySelector({ label, value, onChange }) {
        {priorityOptions.map((option) => (
          <Pressable
            accessibilityRole="button"
+            accessibilityState={{ selected: value === option }}
            key={option}
            onPress={() => onChange(option)}
            style={[styles.priorityChip, value === option ? styles.activeChip : null]}
@@ -131,10 +135,16 @@ const styles = StyleSheet.create({
    flexWrap: 'wrap',
    gap: 8
  },
+  sectionHint: {
+    color: colors.muted,
+    fontSize: 13,
+    lineHeight: 19,
+    marginTop: -10
+  },
  chip: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
    borderWidth: 1,
    paddingHorizontal: 12,
    paddingVertical: 10
@@ -161,7 +171,7 @@ const styles = StyleSheet.create({
  priorityRow: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 16,
    borderWidth: 1,
    gap: 10,
    padding: 14
@@ -177,7 +187,7 @@ const styles = StyleSheet.create({
  },
  priorityChip: {
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 12,
    borderWidth: 1,
    flex: 1,
    paddingVertical: 10,
@@ -24,6 +24,8 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
  const [manualSearchQuery, setManualSearchQuery] = useState('');
  const [manualResults, setManualResults] = useState([]);
  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [searchError, setSearchError] = useState('');

  async function handleBarcodeScanned(event) {
    if (!isScanning) return;
@@ -50,9 +52,14 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
    if (!manualSearchQuery.trim() || isSearching) return;

    setIsSearching(true);
+    setSearchError('');
    try {
      const results = await searchProducts(manualSearchQuery, productCache, preferences.offlineModeEnabled);
      setManualResults(results);
+      setHasSearched(true);
+    } catch (error) {
+      setManualResults([]);
+      setSearchError('Die Suche ist gerade nicht verfügbar. Bitte versuche es erneut.');
    } finally {
      setIsSearching(false);
    }
@@ -69,17 +76,19 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
  return (
    <ScreenContainer>
      <AppHeader
-        title="Scan"
-        subtitle={preferences.offlineModeEnabled ? 'Offline-Modus aktiv: nur Cache-Produkte verfügbar.' : 'Barcode scannen oder Produkt manuell suchen.'}
+        title="Produkt scannen"
+        subtitle={preferences.offlineModeEnabled ? 'Offline aktiv · nur gespeicherte Produkte' : 'Barcode scannen oder nach einem Produkt suchen'}
      />

-      {!permission?.granted && Platform.OS !== 'web' ? (
+      {permission && !permission.granted && Platform.OS !== 'web' ? (
        <View style={styles.permissionBox}>
-          <Text style={styles.permissionTitle}>Kamera-Berechtigung benötigt</Text>
+          <Text style={styles.permissionTitle}>Kamera für den Scan freigeben</Text>
          <Text style={styles.permissionCopy}>
-            Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.
+            {permission.canAskAgain
+              ? 'Shoppinguin braucht die Kamera, um Barcodes direkt im Laden zu erfassen.'
+              : 'Aktiviere den Kamerazugriff in den Einstellungen deines Geräts. Die Produktsuche funktioniert auch ohne Kamera.'}
          </Text>
-          <PrimaryButton label="Kamera erlauben" onPress={requestPermission} />
+          {permission.canAskAgain ? <PrimaryButton label="Kamera erlauben" onPress={requestPermission} /> : null}
        </View>
      ) : null}

@@ -87,35 +96,46 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
        <>
          <BarcodeScannerView isLoadingProduct={isLoadingProduct} isScanning={isScanning} onBarcodeScanned={handleBarcodeScanned} />
          <SecondaryButton
+            disabled={isLoadingProduct}
            label={isScanning ? 'Scan pausieren' : 'Scan fortsetzen'}
            onPress={() => setIsScanning((current) => !current)}
          />
        </>
      ) : (
        <View style={styles.permissionBox}>
-          <Text style={styles.permissionTitle}>Scanner-Simulation</Text>
+          <Text style={styles.permissionTitle}>Beispielprodukt öffnen</Text>
          <Text style={styles.permissionCopy}>
-            Auf Web oder ohne Kamera kannst du Open-Food-Facts-Barcodes testen.
+            Du kannst einen Beispiel-Barcode ausprobieren oder unten nach einem Produkt suchen.
          </Text>
          {isLoadingProduct ? <Text style={styles.note}>Produkt wird geladen...</Text> : null}
          <View style={styles.demoRow}>
            <SecondaryButton label="Nutella" onPress={() => handleBarcodeScanned({ data: '3017620422003' })} />
-            <SecondaryButton label="OpenFoodFacts Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
+            <SecondaryButton label="Weiteres Beispiel" onPress={() => handleBarcodeScanned({ data: '737628064502' })} />
          </View>
        </View>
      )}

-      <SectionTitle>Manuelle Suche</SectionTitle>
+      <SectionTitle>Nach Produkt suchen</SectionTitle>
      <ManualSearchInput
-        onChangeText={setManualSearchQuery}
+        onChangeText={(value) => {
+          setManualSearchQuery(value);
+          setManualResults([]);
+          setHasSearched(false);
+          setSearchError('');
+        }}
        onSubmit={handleManualSearch}
        disabled={isSearching}
        value={manualSearchQuery}
      />
      {isSearching ? <Text style={styles.note}>Suche läuft...</Text> : null}
-      {!isSearching && manualSearchQuery && manualResults.length === 0 ? (
-        <Text style={styles.note}>Keine Treffer gefunden.</Text>
+      {searchError ? <Text style={styles.errorNote}>{searchError}</Text> : null}
+      {!isSearching && hasSearched && manualResults.length === 0 ? (
+        <View style={styles.emptyResults}>
+          <Text style={styles.permissionTitle}>Kein passendes Produkt gefunden</Text>
+          <Text style={styles.permissionCopy}>Prüfe die Schreibweise oder suche nach dem Barcode.</Text>
+        </View>
      ) : null}
+      {manualResults.length > 0 ? <Text style={styles.resultsCount}>{manualResults.length} Treffer</Text> : null}
      {manualResults.map((product) => (
        <ProductCard
          key={product.id}
@@ -128,7 +148,10 @@ export default function ScanScreen({ preferences, productCache, onScanBarcode, o
      <ScanErrorModal
        message={scanError}
        onClose={retryScan}
-        onManualSearch={() => setIsErrorModalVisible(false)}
+        onManualSearch={() => {
+          setIsErrorModalVisible(false);
+          setIsScanning(true);
+        }}
        onRetry={retryScan}
        visible={isErrorModalVisible}
      />
@@ -140,11 +163,19 @@ const styles = StyleSheet.create({
  permissionBox: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
    gap: 12,
    padding: 16
  },
+  emptyResults: {
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    borderRadius: 16,
+    borderWidth: 1,
+    gap: 6,
+    padding: 16
+  },
  permissionTitle: {
    color: colors.text,
    fontSize: 18,
@@ -161,5 +192,15 @@ const styles = StyleSheet.create({
  note: {
    color: colors.muted,
    fontSize: 14
+  },
+  errorNote: {
+    color: colors.danger,
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  resultsCount: {
+    color: colors.muted,
+    fontSize: 13,
+    fontWeight: '700'
  }
 });
@@ -1,5 +1,7 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';

+import PrimaryButton from '../components/PrimaryButton';
 import SecondaryButton from '../components/SecondaryButton';
 import AppHeader from '../components/layout/AppHeader';
 import ScreenContainer from '../components/layout/ScreenContainer';
@@ -11,15 +13,22 @@ import { formatPrice } from '../utils/formatPrice';
 export default function ShoppingListScreen({
  preferences,
  shoppingList,
+  lastDeletedItem,
  onToggleItem,
  onDeleteItem,
+  onUndoDelete,
  onUpdateItemPrice,
  onStartScan,
+  onOpenProfile,
  onCompleteList
 }) {
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [wasCompleted, setWasCompleted] = useState(false);
  const openItems = shoppingList.items.filter((item) => !item.checked).length;
+  const itemsWithoutPrice = shoppingList.items.filter((item) => typeof item.estimatedPrice !== 'number').length;
  const budget = preferences.maxBudgetPerShoppingTrip;
-  const budgetShare = typeof budget === 'number' && budget > 0 ? shoppingList.estimatedTotal / budget : 0;
+  const hasBudget = typeof budget === 'number' && budget > 0;
+  const budgetShare = hasBudget ? shoppingList.estimatedTotal / budget : 0;
  const budgetStatus = budgetShare <= 0.75 ? 'good' : budgetShare <= 1 ? 'medium' : 'critical';
  const dailyWarnings = calculateShoppingListWarnings(shoppingList);

@@ -27,17 +36,32 @@ export default function ShoppingListScreen({
    <ScreenContainer>
      <AppHeader
        title="Einkaufsliste"
-        subtitle={`${openItems} offene Produkte · ${formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}`}
+        subtitle={shoppingList.items.length ? `${openItems} offen · ${shoppingList.items.length} insgesamt` : 'Alles für deinen nächsten Einkauf'}
      />

+      {wasCompleted && shoppingList.items.length === 0 ? (
+        <View style={styles.completedNotice}>
+          <Text style={styles.completedText}>Einkauf abgeschlossen. Deine neue Liste ist bereit.</Text>
+        </View>
+      ) : null}
+
+      {lastDeletedItem ? (
+        <View style={styles.undoNotice}>
+          <Text style={styles.undoText}>{lastDeletedItem.item.productName} entfernt</Text>
+          <Pressable accessibilityRole="button" onPress={onUndoDelete}>
+            <Text style={styles.undoAction}>Rückgängig</Text>
+          </Pressable>
+        </View>
+      ) : null}
+
      <View style={styles.summary}>
-        <Text style={styles.summaryTitle}>{shoppingList.title}</Text>
-        <Text style={styles.summaryCopy}>
-          Produkte abhaken, löschen oder nach dem Einkauf abschliessen.
-        </Text>
-        <View style={styles.budgetBox}>
+        <Text style={styles.summaryTitle}>Deine Liste</Text>
+        <Text style={styles.totalLabel}>{itemsWithoutPrice ? 'Bekannte Summe' : 'Voraussichtliche Summe'}</Text>
+        <Text style={styles.totalValue}>{formatPrice(shoppingList.estimatedTotal, shoppingList.currency)}</Text>
+        {itemsWithoutPrice ? <Text style={styles.summaryCopy}>{itemsWithoutPrice} {itemsWithoutPrice === 1 ? 'Produkt ohne Preis ist' : 'Produkte ohne Preis sind'} nicht eingerechnet.</Text> : null}
+        {hasBudget ? <View style={styles.budgetBox}>
          <View style={styles.budgetHeader}>
-            <Text style={styles.budgetLabel}>Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
+            <Text style={styles.budgetLabel}>Anteil am Budget pro {budgetPeriodLabels[preferences.budgetPeriod] || 'Woche'}</Text>
            <Text style={[styles.budgetValue, styles[budgetStatus]]}>
              {formatPrice(shoppingList.estimatedTotal, shoppingList.currency)} von {formatPrice(budget, shoppingList.currency)}
            </Text>
@@ -51,7 +75,11 @@ export default function ShoppingListScreen({
              ]}
            />
          </View>
-        </View>
+        </View> : (
+          <Pressable accessibilityRole="button" onPress={onOpenProfile} style={styles.budgetLink}>
+            <Text style={styles.budgetLinkText}>Budget im Profil festlegen  ›</Text>
+          </Pressable>
+        )}
      </View>

      {dailyWarnings.length > 0 ? (
@@ -95,7 +123,23 @@ export default function ShoppingListScreen({
      )}

      {shoppingList.items.length > 0 ? (
-        <SecondaryButton label="Einkauf abschliessen" onPress={onCompleteList} />
+        <>
+          <SecondaryButton label="Weiteres Produkt scannen" onPress={onStartScan} />
+          {isConfirming ? (
+            <View style={styles.confirmPanel}>
+              <Text style={styles.confirmTitle}>Einkauf abschliessen?</Text>
+              <Text style={styles.confirmCopy}>Die aktuelle Liste wird geleert. Gespeicherte Produktdaten bleiben erhalten.</Text>
+              <PrimaryButton label="Ja, Einkauf abschliessen" onPress={() => {
+                onCompleteList();
+                setIsConfirming(false);
+                setWasCompleted(true);
+              }} />
+              <SecondaryButton label="Abbrechen" onPress={() => setIsConfirming(false)} />
+            </View>
+          ) : (
+            <SecondaryButton label="Einkauf abschliessen" onPress={() => setIsConfirming(true)} />
+          )}
+        </>
      ) : null}
    </ScreenContainer>
  );
@@ -113,9 +157,9 @@ const styles = StyleSheet.create({
  summary: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 20,
    borderWidth: 1,
-    padding: 16
+    padding: 18
  },
  summaryTitle: {
    color: colors.text,
@@ -126,11 +170,35 @@ const styles = StyleSheet.create({
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20,
-    marginTop: 4
+    marginTop: 7
+  },
+  totalLabel: {
+    color: colors.muted,
+    fontSize: 13,
+    fontWeight: '700',
+    marginTop: 16
+  },
+  totalValue: {
+    color: colors.text,
+    fontSize: 30,
+    fontWeight: '800',
+    letterSpacing: -0.6,
+    marginTop: 2
  },
  budgetBox: {
    marginTop: 14
  },
+  budgetLink: {
+    minHeight: 44,
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    marginTop: 8
+  },
+  budgetLinkText: {
+    color: colors.primary,
+    fontSize: 14,
+    fontWeight: '800'
+  },
  budgetHeader: {
    alignItems: 'flex-start',
    gap: 4,
@@ -179,7 +247,7 @@ const styles = StyleSheet.create({
  },
  warningBox: {
    backgroundColor: colors.surface,
-    borderRadius: 8,
+    borderRadius: 16,
    borderWidth: 1,
    padding: 14
  },
@@ -202,7 +270,7 @@ const styles = StyleSheet.create({
  empty: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: 18,
    borderWidth: 1,
    gap: 12,
    padding: 16
@@ -216,5 +284,52 @@ const styles = StyleSheet.create({
    color: colors.muted,
    fontSize: 14,
    lineHeight: 20
+  },
+  confirmPanel: {
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    borderRadius: 18,
+    borderWidth: 1,
+    gap: 12,
+    padding: 18
+  },
+  confirmTitle: {
+    color: colors.text,
+    fontSize: 18,
+    fontWeight: '800'
+  },
+  confirmCopy: {
+    color: colors.muted,
+    fontSize: 14,
+    lineHeight: 20
+  },
+  completedNotice: {
+    backgroundColor: colors.surfaceTint,
+    borderRadius: 14,
+    padding: 14
+  },
+  completedText: {
+    color: colors.primaryDark,
+    fontSize: 14,
+    fontWeight: '800'
+  },
+  undoNotice: {
+    alignItems: 'center',
+    backgroundColor: colors.text,
+    borderRadius: 14,
+    flexDirection: 'row',
+    gap: 12,
+    padding: 14
+  },
+  undoText: {
+    color: colors.surface,
+    flex: 1,
+    fontSize: 14,
+    fontWeight: '700'
+  },
+  undoAction: {
+    color: '#b8e7ce',
+    fontSize: 14,
+    fontWeight: '800'
  }
 });