Redesign ingredient list with swipe-to-add grocery action and add-all button

Remove checkbox icons and tap-to-select state from ingredient items. Replace
with bullet points and a small green cart indicator for items already in the
grocery list. Add a full-width "Add All to Grocery List" / "Remove from
Grocery List" button below ingredients. Swipe right on individual ingredients
shows a rounded green/red cart icon to add/remove single items.

Add DE/ES/FR translations for new grocery list button strings.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Nextcloud Cookbook iOS Client/Localizable.xcstrings

@@ -516,6 +516,28 @@
         }
       }
     },
+    "Add All to Grocery List" : {
+      "localizations" : {
+        "de" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Alle zur Einkaufsliste hinzufügen"
+          }
+        },
+        "es" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Añadir todo a la lista de compras"
+          }
+        },
+        "fr" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Tout ajouter à la liste de courses"
+          }
+        }
+      }
+    },
     "Add cooking steps for fellow chefs to follow." : {
       "extractionState" : "stale",
       "localizations" : {
@@ -3665,6 +3687,28 @@
         }
       }
     },
+    "Remove from Grocery List" : {
+      "localizations" : {
+        "de" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Von der Einkaufsliste entfernen"
+          }
+        },
+        "es" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Eliminar de la lista de compras"
+          }
+        },
+        "fr" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Retirer de la liste de courses"
+          }
+        }
+      }
+    },
     "Same as Device" : {
       "localizations" : {
         "de" : {

Nextcloud Cookbook iOS Client/Views/Recipes/RecipeViewSections/RecipeIngredientSection.swift

@@ -17,22 +17,6 @@ struct RecipeIngredientSection: View {
     var body: some View {
         VStack(alignment: .leading) {
             HStack {
-                Button {
-                    withAnimation {
-                        if groceryList.containsRecipe(viewModel.observableRecipeDetail.id) {
-                            groceryList.deleteGroceryRecipe(viewModel.observableRecipeDetail.id)
-                        } else {
-                            groceryList.addItems(
-                                viewModel.observableRecipeDetail.recipeIngredient,
-                                toRecipe: viewModel.observableRecipeDetail.id,
-                                recipeName: viewModel.observableRecipeDetail.name
-                            )
-                        }
-                    }
-                } label: {
-                    Image(systemName: "storefront")
-                }.disabled(viewModel.editMode)
-                
                 SecondaryLabel(text: LocalizedStringKey("Ingredients"))
 
                 Spacer()
@@ -49,14 +33,9 @@ struct RecipeIngredientSection: View {
                     ingredient: $viewModel.observableRecipeDetail.recipeIngredient[ix],
                     servings: $viewModel.observableRecipeDetail.ingredientMultiplier,
                     recipeYield: Double(viewModel.observableRecipeDetail.recipeYield),
-                    recipeId: viewModel.observableRecipeDetail.id
+                    recipeId: viewModel.observableRecipeDetail.id,
-                ) {
-                    groceryList.addItem(
-                        viewModel.observableRecipeDetail.recipeIngredient[ix],
-                        toRecipe: viewModel.observableRecipeDetail.id,
                     recipeName: viewModel.observableRecipeDetail.name
                 )
-                }
                 .padding(4)
             }
 
@@ -69,6 +48,28 @@ struct RecipeIngredientSection: View {
                 }.padding(.top)
             }
 
+            Button {
+                withAnimation {
+                    if groceryList.containsRecipe(viewModel.observableRecipeDetail.id) {
+                        groceryList.deleteGroceryRecipe(viewModel.observableRecipeDetail.id)
+                    } else {
+                        groceryList.addItems(
+                            viewModel.observableRecipeDetail.recipeIngredient,
+                            toRecipe: viewModel.observableRecipeDetail.id,
+                            recipeName: viewModel.observableRecipeDetail.name
+                        )
+                    }
+                }
+            } label: {
+                HStack {
+                    Image(systemName: groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? "cart.badge.minus" : "cart.badge.plus")
+                        .foregroundStyle(groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? .red : .green)
+                    Text(groceryList.containsRecipe(viewModel.observableRecipeDetail.id) ? "Remove from Grocery List" : "Add All to Grocery List")
+                }
+                .frame(maxWidth: .infinity)
+            }
+            .buttonStyle(.bordered)
+            .padding(.top, 8)
         }
         .padding()
         .animation(.easeInOut, value: viewModel.observableRecipeDetail.ingredientMultiplier)
@@ -115,29 +116,43 @@ fileprivate struct IngredientListItem: View {
     @Binding var servings: Double
     @State var recipeYield: Double
     @State var recipeId: String
-    let addToGroceryListAction: () -> Void
+    var recipeName: String
 
     @State var modifiedIngredient: AttributedString = ""
-    @State var isSelected: Bool = false
     var unmodified: Bool {
         servings == Double(recipeYield) || servings == 0
     }
 
-    // Drag animation
+    // Swipe state
     @State private var dragOffset: CGFloat = 0
     @State private var animationStartOffset: CGFloat = 0
-    let maxDragDistance = 50.0
+    private let maxDragDistance: CGFloat = 80
+    private let swipeThreshold: CGFloat = 0.4
+
+    private var isInGroceryList: Bool {
+        groceryList.containsItem(at: recipeId, item: ingredient)
+    }
 
     var body: some View {
-        HStack(alignment: .top) {
+        ZStack(alignment: .leading) {
-            if groceryList.containsItem(at: recipeId, item: ingredient) {
+            // Swipe background
-                Image(systemName: "storefront")
+            if dragOffset > 0 {
-                    .foregroundStyle(Color.green)
+                Image(systemName: isInGroceryList ? "cart.badge.minus" : "cart.badge.plus")
-            } else if isSelected {
+                    .font(.caption)
-                Image(systemName: "checkmark.circle")
+                    .bold()
-            } else {
+                    .foregroundStyle(.white)
-                Image(systemName: "circle")
+                    .frame(width: dragOffset, alignment: .center)
+                    .frame(maxHeight: .infinity)
+                    .background(
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(isInGroceryList ? Color.red : Color.green)
+                    )
             }
+
+            // Ingredient row
+            HStack(alignment: .center) {
+                Text("•")
+                    .foregroundStyle(.secondary)
                 if !unmodified && String(modifiedIngredient.characters) == ingredient {
                     Image(systemName: "exclamationmark.triangle.fill")
                         .foregroundStyle(.red)
@@ -150,10 +165,18 @@ fileprivate struct IngredientListItem: View {
                     Text(modifiedIngredient)
                         .multilineTextAlignment(.leading)
                         .lineLimit(5)
-                    //.foregroundStyle(String(modifiedIngredient.characters) == ingredient ? .red : .primary)
+                }
+                if isInGroceryList {
+                    Image(systemName: "cart")
+                        .font(.caption2)
+                        .foregroundStyle(.green)
                 }
                 Spacer()
             }
+            .background(Color(.systemBackground))
+            .offset(x: dragOffset)
+        }
+        .clipped()
         .onChange(of: servings) { newServings in
             if recipeYield == 0 {
                 modifiedIngredient = ObservableRecipeDetail.adjustIngredient(ingredient, by: newServings)
@@ -161,34 +184,29 @@ fileprivate struct IngredientListItem: View {
                 modifiedIngredient = ObservableRecipeDetail.adjustIngredient(ingredient, by: newServings/recipeYield)
             }
         }
-        .foregroundStyle(isSelected ? Color.secondary : Color.primary)
-        .onTapGesture {
-            isSelected.toggle()
-        }
-        .offset(x: dragOffset, y: 0)
-        .animation(.easeInOut, value: isSelected)
-        
         .gesture(
             DragGesture()
                 .onChanged { gesture in
-                    // Update drag offset as the user drags
                     if animationStartOffset == 0 {
                         animationStartOffset = gesture.translation.width
                     }
                     let dragAmount = gesture.translation.width
-                    let offset = min(dragAmount, maxDragDistance + pow(dragAmount - maxDragDistance, 0.7)) - animationStartOffset
+                    let offset = min(dragAmount, maxDragDistance + pow(max(0, dragAmount - maxDragDistance), 0.7)) - animationStartOffset
                     self.dragOffset = max(0, offset)
                 }
-                .onEnded { gesture in
+                .onEnded { _ in
                     withAnimation {
-                        if dragOffset > maxDragDistance * 0.3 { // Swipe threshold
+                        if dragOffset > maxDragDistance * swipeThreshold {
-                            if groceryList.containsItem(at: recipeId, item: ingredient) {
+                            if isInGroceryList {
                                 groceryList.deleteItem(ingredient, fromRecipe: recipeId)
                             } else {
-                                    addToGroceryListAction()
+                                groceryList.addItem(
+                                    ingredient,
+                                    toRecipe: recipeId,
+                                    recipeName: recipeName
+                                )
                             }
                         }
-                        // Animate back to original position
                         self.dragOffset = 0
                         self.animationStartOffset = 0
                     }