From d50841c5a68d39bbcad902c2365d1ac2ac33c0d4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sun, 19 Apr 2026 13:45:56 +0200
Subject: [PATCH] refactor(editor): StepList als eigenstaendige Component

Zubereitungs-Liste mit Add + Remove als Sub-Component. Parent steuert
nur noch den Wrapper und reicht steps + die zwei Callbacks rein.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeEditor.svelte |  68 +----------------
 src/lib/components/StepList.svelte     | 101 +++++++++++++++++++++++++
 2 files changed, 105 insertions(+), 64 deletions(-)
 create mode 100644 src/lib/components/StepList.svelte

diff --git a/src/lib/components/RecipeEditor.svelte b/src/lib/components/RecipeEditor.svelte
index 6a2f817..e0d1843 100644
--- a/src/lib/components/RecipeEditor.svelte
+++ b/src/lib/components/RecipeEditor.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { Plus, Trash2 } from 'lucide-svelte';
+  import { Plus } from 'lucide-svelte';
   import type { Recipe, Ingredient, Step } from '$lib/types';
   import ImageUploadBox from '$lib/components/ImageUploadBox.svelte';
   import IngredientRow from '$lib/components/IngredientRow.svelte';
+  import StepList from '$lib/components/StepList.svelte';
   import type { DraftIng, DraftStep } from '$lib/components/recipe-editor-types';
 
   type Props = {
@@ -184,25 +185,7 @@
 
   <section class="block">
     <h2>Zubereitung</h2>
-    <ol class="step-list">
-      {#each steps as step, idx (idx)}
-        <li class="step-row">
-          <span class="num">{idx + 1}</span>
-          <textarea
-            bind:value={step.text}
-            rows="3"
-            placeholder="Schritt beschreiben …"
-          ></textarea>
-          <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => removeStep(idx)}>
-            <Trash2 size={16} strokeWidth={2} />
-          </button>
-        </li>
-      {/each}
-    </ol>
-    <button class="add" type="button" onclick={addStep}>
-      <Plus size={16} strokeWidth={2} />
-      <span>Schritt hinzufügen</span>
-    </button>
+    <StepList {steps} onadd={addStep} onremove={removeStep} />
   </section>
 
   <div class="foot">
@@ -273,8 +256,7 @@
     margin: 0 0 0.75rem;
     color: #2b6a3d;
   }
-  .ing-list,
-  .step-list {
+  .ing-list {
     list-style: none;
     padding: 0;
     margin: 0 0 0.6rem;
@@ -282,48 +264,6 @@
     flex-direction: column;
     gap: 0.4rem;
   }
-  .step-row {
-    display: grid;
-    grid-template-columns: 32px 1fr 40px;
-    gap: 0.5rem;
-    align-items: start;
-  }
-  .num {
-    width: 32px;
-    height: 32px;
-    background: #2b6a3d;
-    color: white;
-    border-radius: 50%;
-    display: grid;
-    place-items: center;
-    font-weight: 600;
-    font-size: 0.9rem;
-    margin-top: 0.25rem;
-  }
-  .step-row textarea {
-    padding: 0.55rem 0.7rem;
-    border: 1px solid #cfd9d1;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-family: inherit;
-    resize: vertical;
-    min-height: 70px;
-  }
-  .del {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #f1b4b4;
-    background: white;
-    color: #c53030;
-    border-radius: 8px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .del:hover {
-    background: #fdf3f3;
-  }
   .add {
     display: inline-flex;
     align-items: center;
diff --git a/src/lib/components/StepList.svelte b/src/lib/components/StepList.svelte
new file mode 100644
index 0000000..6098aad
--- /dev/null
+++ b/src/lib/components/StepList.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { Plus, Trash2 } from 'lucide-svelte';
+  import type { DraftStep } from './recipe-editor-types';
+
+  type Props = {
+    steps: DraftStep[];
+    onadd: () => void;
+    onremove: (idx: number) => void;
+  };
+
+  let { steps, onadd, onremove }: Props = $props();
+</script>
+
+<ol class="step-list">
+  {#each steps as step, idx (idx)}
+    <li class="step-row">
+      <span class="num">{idx + 1}</span>
+      <textarea
+        bind:value={step.text}
+        rows="3"
+        placeholder="Schritt beschreiben …"
+      ></textarea>
+      <button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
+        <Trash2 size={16} strokeWidth={2} />
+      </button>
+    </li>
+  {/each}
+</ol>
+<button class="add" type="button" onclick={onadd}>
+  <Plus size={16} strokeWidth={2} />
+  <span>Schritt hinzufügen</span>
+</button>
+
+<style>
+  .step-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 0.6rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+  .step-row {
+    display: grid;
+    grid-template-columns: 32px 1fr 40px;
+    gap: 0.5rem;
+    align-items: start;
+  }
+  .num {
+    width: 32px;
+    height: 32px;
+    background: #2b6a3d;
+    color: white;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-top: 0.25rem;
+  }
+  .step-row textarea {
+    padding: 0.55rem 0.7rem;
+    border: 1px solid #cfd9d1;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 70px;
+  }
+  .del {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #f1b4b4;
+    background: white;
+    color: #c53030;
+    border-radius: 8px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .del:hover {
+    background: #fdf3f3;
+  }
+  .add {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.55rem 0.9rem;
+    border: 1px dashed #cfd9d1;
+    background: white;
+    color: #2b6a3d;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-family: inherit;
+  }
+  .add:hover {
+    background: #f4f8f5;
+  }
+</style>