claude/kochwas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(editor): StepList als eigenstaendige Component

Browse Source 
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>
This commit is contained in:
hsiegeln
2026-04-19 13:45:56 +02:00
parent defbb5e24d
commit d50841c5a6
2 changed files with 105 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/lib/components/RecipeEditor.svelte
View File

@@ -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;

101
src/lib/components/StepList.svelte Normal file
View File

@@ -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>