From 33f3b30cb4e63e19d16103115d03d02ad98b91e3 Mon Sep 17 00:00:00 2001
From: Marcel Raddatz <marcel@raddatz.cloud>
Date: Fri, 3 Apr 2026 10:35:35 +0200
Subject: [PATCH] feat(recipes): style RecipeForm with design system +
 split-panel layout

- Full design system tokens: inputs, labels, chips, buttons
- Effort and category chips as pill-style radio/checkbox
- Desktop two-column split-panel: form left, categories right (280px)
- Ingredient rows: quantity/unit/name flex layout with remove ghost button
- Steps with numbered circle indicator
- Add use:enhance for SPA experience without full page reload
- Footer: cancel link left, primary save button right

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/recipes/RecipeForm.svelte | 291 +++++++++++++++------
 1 file changed, 216 insertions(+), 75 deletions(-)

diff --git a/frontend/src/lib/recipes/RecipeForm.svelte b/frontend/src/lib/recipes/RecipeForm.svelte
index 4dc67cc..5560e81 100644
--- a/frontend/src/lib/recipes/RecipeForm.svelte
+++ b/frontend/src/lib/recipes/RecipeForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import { enhance } from '$app/forms';
 
 	type Category = { id: string; name: string; tagType?: string };
 
@@ -27,8 +28,6 @@
 		{ label: 'Schwer', value: 'Hard' }
 	];
 
-	// Take a plain snapshot of the initial prop value so local state is
-	// initialised once and not tied to ongoing prop reactivity.
 	const initial = (() => $state.snapshot(recipe))();
 
 	let name = $state(initial?.name ?? '');
@@ -46,96 +45,238 @@
 	let steps = $state(initial?.steps.map((s) => s.instruction) ?? ['']);
 </script>
 
-<form method="POST" {action}>
+<form method="POST" {action} use:enhance>
 	<!-- Error banner -->
 	{#if $page.form?.error}
-		<div role="alert">{$page.form.error}</div>
+		<div
+			role="alert"
+			class="mb-[20px] rounded-[var(--radius-md)] bg-[color-mix(in_srgb,var(--color-error),transparent_90%)] px-[12px] py-[10px] text-[12px] text-[var(--color-error)]"
+		>
+			{$page.form.error}
+		</div>
 	{/if}
 
-	<!-- Basic info -->
-	<label for="name">Name</label>
-	<input id="name" name="name" type="text" bind:value={name} required />
+	<!-- Two-column layout -->
+	<div class="md:flex md:gap-[32px]">
+		<!-- Left column: main form fields -->
+		<div class="md:flex-1">
+			<!-- Basic info -->
+			<div class="mb-[24px]">
+				<div class="mb-[16px]">
+					<label
+						for="name"
+						class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
+					>
+						Name
+					</label>
+					<input
+						id="name"
+						name="name"
+						type="text"
+						bind:value={name}
+						required
+						class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+					/>
+				</div>
 
-	<label for="serves">Portionen</label>
-	<input id="serves" name="serves" type="number" bind:value={serves} />
+				<div class="mb-[16px]">
+					<label
+						for="serves"
+						class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
+					>
+						Portionen
+					</label>
+					<input
+						id="serves"
+						name="serves"
+						type="number"
+						bind:value={serves}
+						class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+					/>
+				</div>
 
-	<label for="cookTimeMin">Kochzeit</label>
-	<input id="cookTimeMin" name="cookTimeMin" type="number" bind:value={cookTimeMin} />
+				<div class="mb-[16px]">
+					<label
+						for="cookTimeMin"
+						class="mb-[6px] block text-[12px] font-medium text-[var(--color-text)]"
+					>
+						Kochzeit
+					</label>
+					<input
+						id="cookTimeMin"
+						name="cookTimeMin"
+						type="number"
+						bind:value={cookTimeMin}
+						class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+					/>
+				</div>
+			</div>
 
-	<!-- Effort chips -->
-	<fieldset>
-		<legend>Schwierigkeitsgrad</legend>
-		{#each effortOptions as opt (opt.value)}
-			<label>
-				<input type="radio" name="effort" value={opt.value} bind:group={effort} />
-				{opt.label}
-			</label>
-		{/each}
-	</fieldset>
+			<!-- Effort chips -->
+			<div class="mb-[24px]">
+				<p class="mb-[12px] text-[13px] font-medium text-[var(--color-text)]">
+					Schwierigkeitsgrad
+				</p>
+				<div class="flex flex-wrap gap-[8px]">
+					{#each effortOptions as opt (opt.value)}
+						<label
+							class={[
+								'cursor-pointer rounded-[var(--radius-full)] border px-[12px] py-[6px] text-[13px] font-medium',
+								effort === opt.value
+									? 'bg-[var(--green-tint)] border-[var(--green-dark)] text-[var(--green-dark)]'
+									: 'bg-white border-[var(--color-border)] text-[var(--color-text-muted)]'
+							].join(' ')}
+						>
+							<input
+								type="radio"
+								name="effort"
+								value={opt.value}
+								bind:group={effort}
+								class="sr-only"
+							/>
+							{opt.label}
+						</label>
+					{/each}
+				</div>
+			</div>
 
-	<!-- Category chips -->
-	<fieldset>
-		<legend>Kategorien</legend>
-		{#each categories as cat (cat.id)}
-			<label>
-				<input
-					type="checkbox"
-					name="tagIds"
-					value={cat.id}
-					checked={selectedTagIds.includes(cat.id)}
-					onchange={(e) => {
-						if (e.currentTarget.checked) {
-							selectedTagIds = [...selectedTagIds, cat.id];
-						} else {
-							selectedTagIds = selectedTagIds.filter((id) => id !== cat.id);
-						}
-					}}
-				/>
-				{cat.name}
-			</label>
-		{/each}
-	</fieldset>
-
-	<!-- Ingredients -->
-	<fieldset>
-		<legend>Zutaten</legend>
-		{#each ingredients as ing, i (i)}
-			<div>
-				<input type="number" bind:value={ing.quantity} placeholder="Menge" />
-				<input type="text" bind:value={ing.unit} placeholder="Einheit" />
-				<input type="text" bind:value={ing.name} placeholder="Zutat" />
-				<button type="button" onclick={() => (ingredients = ingredients.filter((_, j) => j !== i))}>
-					Entfernen
+			<!-- Ingredients -->
+			<div class="mb-[24px]">
+				<p class="mb-[12px] text-[13px] font-medium text-[var(--color-text)]">Zutaten</p>
+				<div class="flex flex-col gap-[8px]">
+					{#each ingredients as ing, i (i)}
+						<div class="flex items-center gap-[8px]">
+							<input
+								type="number"
+								bind:value={ing.quantity}
+								placeholder="Menge"
+								class="w-[80px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+							/>
+							<input
+								type="text"
+								bind:value={ing.unit}
+								placeholder="Einheit"
+								class="w-[80px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+							/>
+							<input
+								type="text"
+								bind:value={ing.name}
+								placeholder="Zutat"
+								class="flex-1 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none"
+							/>
+							<button
+								type="button"
+								onclick={() => (ingredients = ingredients.filter((_, j) => j !== i))}
+								class="shrink-0 text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-error)] cursor-pointer"
+							>
+								Entfernen
+							</button>
+						</div>
+					{/each}
+				</div>
+				<button
+					type="button"
+					onclick={() => (ingredients = [...ingredients, { name: '', quantity: '' as number | '', unit: '' }])}
+					class="mt-[12px] text-[13px] font-medium text-[var(--green-dark)] cursor-pointer"
+				>
+					Zutat hinzufügen
 				</button>
 			</div>
-		{/each}
-		<button
-			type="button"
-			onclick={() => (ingredients = [...ingredients, { name: '', quantity: '', unit: '' }])}
-		>
-			Zutat hinzufügen
-		</button>
-	</fieldset>
 
-	<!-- Steps -->
-	<fieldset>
-		<legend>Schritte</legend>
-		{#each steps as _, i (i)}
-			<div>
-				<textarea bind:value={steps[i]} placeholder="Schritt beschreiben…"></textarea>
-				<button type="button" onclick={() => (steps = steps.filter((_, j) => j !== i))}>
-					Entfernen
+			<!-- Steps -->
+			<div class="mb-[24px]">
+				<p class="mb-[12px] text-[13px] font-medium text-[var(--color-text)]">Schritte</p>
+				<div class="flex flex-col gap-[12px]">
+					{#each steps as _, i (i)}
+						<div class="flex items-start gap-[12px]">
+							<span
+								class="flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-full bg-[var(--green-tint)] text-[12px] font-medium text-[var(--green-dark)]"
+							>
+								{i + 1}
+							</span>
+							<div class="flex flex-1 flex-col gap-[6px]">
+								<textarea
+									bind:value={steps[i]}
+									placeholder="Schritt beschreiben…"
+									rows="3"
+									class="w-full rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-[12px] py-[10px] font-[var(--font-sans)] text-[14px] text-[var(--color-text)] outline-none resize-none"
+								></textarea>
+								<button
+									type="button"
+									onclick={() => (steps = steps.filter((_, j) => j !== i))}
+									class="self-start text-[12px] text-[var(--color-text-muted)] hover:text-[var(--color-error)] cursor-pointer"
+								>
+									Entfernen
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+				<button
+					type="button"
+					onclick={() => (steps = [...steps, ''])}
+					class="mt-[12px] text-[13px] font-medium text-[var(--green-dark)] cursor-pointer"
+				>
+					Schritt hinzufügen
 				</button>
 			</div>
-		{/each}
-		<button type="button" onclick={() => (steps = [...steps, ''])}>Schritt hinzufügen</button>
-	</fieldset>
+		</div>
+
+		<!-- Right panel: categories -->
+		<div class="md:w-[280px] md:flex-shrink-0 mt-[24px] md:mt-0">
+			<div
+				class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[20px]"
+			>
+				<p class="mb-[12px] text-[13px] font-medium text-[var(--color-text)]">Kategorien</p>
+				<div class="flex flex-wrap gap-[8px]">
+					{#each categories as cat (cat.id)}
+						<label
+							class={[
+								'cursor-pointer rounded-[var(--radius-full)] border px-[12px] py-[6px] text-[13px] font-medium',
+								selectedTagIds.includes(cat.id)
+									? 'bg-[var(--green-tint)] border-[var(--green-dark)] text-[var(--green-dark)]'
+									: 'bg-white border-[var(--color-border)] text-[var(--color-text-muted)]'
+							].join(' ')}
+						>
+							<input
+								type="checkbox"
+								name="tagIds"
+								value={cat.id}
+								checked={selectedTagIds.includes(cat.id)}
+								onchange={(e) => {
+									if (e.currentTarget.checked) {
+										selectedTagIds = [...selectedTagIds, cat.id];
+									} else {
+										selectedTagIds = selectedTagIds.filter((id) => id !== cat.id);
+									}
+								}}
+								class="sr-only"
+							/>
+							{cat.name}
+						</label>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
 
 	<!-- Hidden inputs for form submission -->
 	<input type="hidden" name="ingredientsJson" value={JSON.stringify(ingredients)} />
 	<input type="hidden" name="stepsJson" value={JSON.stringify(steps)} />
 
 	<!-- Footer -->
-	<a href="/recipes">Abbrechen</a>
-	<button type="submit">Speichern</button>
+	<div class="mt-[32px] flex items-center justify-between">
+		<a
+			href="/recipes"
+			class="text-[13px] font-medium text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+		>
+			Abbrechen
+		</a>
+		<button
+			type="submit"
+			class="rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-[var(--btn-font-size)] font-[var(--btn-font-weight)] tracking-[var(--btn-letter-spacing)] text-white cursor-pointer"
+		>
+			Speichern
+		</button>
+	</div>
 </form>