From aaaf76256452f943b565423b29098ec365d33281 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 21:32:35 +0200
Subject: [PATCH] feat(editor): Zutaten umsortierbar + Zutat/Notiz gleich breit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dekorativer GripVertical raus, stattdessen zwei Pfeil-Buttons (↑/↓)
  pro Zeile. An erster/letzter Stelle sind die Buttons disabled.
- moveIngredient() vertauscht Zeile mit Nachbarn; simpel und
  tastatur-/touch-freundlich ohne Drag-and-Drop-Abhängigkeit.
- Grid-Spalten von 1fr 90px (Zutat/Notiz) auf 1fr 1fr — beide Felder
  sind jetzt gleich breit, wie im Family-Feedback gewünscht.
- Mobile-Layout behält gestaffelte Note-Zeile, Move-Spalte rutscht
  als eigene Spalte links daneben.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeEditor.svelte | 68 +++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index 54167fe..1f5c063 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Plus, Trash2, GripVertical } from 'lucide-svelte';
+  import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
 
   type Props = {
@@ -53,6 +53,13 @@
   function removeIngredient(idx: number) {
     ingredients = ingredients.filter((_, i) => i !== idx);
   }
+  function moveIngredient(idx: number, dir: -1 | 1) {
+    const target = idx + dir;
+    if (target < 0 || target >= ingredients.length) return;
+    const next = [...ingredients];
+    [next[idx], next[target]] = [next[target], next[idx]];
+    ingredients = next;
+  }
   function addStep() {
     steps = [...steps, { text: '' }];
   }
@@ -149,7 +156,26 @@
     <ul class="ing-list">
       {#each ingredients as ing, idx (idx)}
         <li class="ing-row">
-          <span class="grip" aria-hidden="true"><GripVertical size={16} /></span>
+          <div class="move">
+            <button
+              class="move-btn"
+              type="button"
+              aria-label="Zutat nach oben"
+              disabled={idx === 0}
+              onclick={() => moveIngredient(idx, -1)}
+            >
+              <ChevronUp size={14} strokeWidth={2.5} />
+            </button>
+            <button
+              class="move-btn"
+              type="button"
+              aria-label="Zutat nach unten"
+              disabled={idx === ingredients.length - 1}
+              onclick={() => moveIngredient(idx, 1)}
+            >
+              <ChevronDown size={14} strokeWidth={2.5} />
+            </button>
+          </div>
           <input class="qty" type="text" bind:value={ing.qty} placeholder="Menge" aria-label="Menge" />
           <input class="unit" type="text" bind:value={ing.unit} placeholder="Einheit" aria-label="Einheit" />
           <input class="name" type="text" bind:value={ing.name} placeholder="Zutat" aria-label="Zutat" />
@@ -268,14 +294,34 @@
   }
   .ing-row {
     display: grid;
-    grid-template-columns: 16px 70px 70px 1fr 90px 40px;
+    grid-template-columns: 28px 70px 70px 1fr 1fr 40px;
     gap: 0.35rem;
     align-items: center;
   }
-  .grip {
-    color: #bbb;
+  .move {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .move-btn {
+    width: 28px;
+    height: 20px;
+    border: 1px solid #cfd9d1;
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #555;
     display: inline-flex;
+    align-items: center;
     justify-content: center;
+    padding: 0;
+  }
+  .move-btn:hover:not(:disabled) {
+    background: #f4f8f5;
+  }
+  .move-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
   }
   .ing-row input {
     padding: 0.5rem 0.55rem;
@@ -375,14 +421,14 @@
   }
   @media (max-width: 560px) {
     .ing-row {
-      grid-template-columns: 70px 1fr 40px;
+      grid-template-columns: 28px 70px 1fr 40px;
       grid-template-areas:
-        'qty name del'
-        'unit unit del'
-        'note note note';
+        'move qty name del'
+        'move unit unit del'
+        'note note note note';
     }
-    .grip {
-      display: none;
+    .ing-row .move {
+      grid-area: move;
     }
     .ing-row .qty {
       grid-area: qty;