From db5d326fa244bf0bb2bcaa7bc237bfdf127ae2f1 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 13 Jan 2026 15:33:08 +0100
Subject: [PATCH] fix: ensure isBaseRecipe checkbox submits correctly and use
 styled Toggle component

- Add hidden input to properly serialize isBaseRecipe boolean as "true"/"false" string
- Replace plain HTML checkbox with Toggle component for consistent styling
- Checkbox values don't submit when unchecked; hidden input ensures value is always sent
---
 .../[recipeLang=recipeLang]/add/+page.svelte      | 15 ++++++---------
 .../edit/[name]/+page.svelte                      | 15 ++++++---------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/routes/[recipeLang=recipeLang]/add/+page.svelte b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
index a20582c..6b06a71 100644
--- a/src/routes/[recipeLang=recipeLang]/add/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/add/+page.svelte
@@ -8,6 +8,7 @@
 	import CardAdd from '$lib/components/CardAdd.svelte';
 	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
 	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
 	import '$lib/css/action_button.css';
 	import '$lib/css/nordtheme.css';
 
@@ -331,17 +332,13 @@ button.action_button {
 	<input type="hidden" name="category" value={card_data.category} />
 	<input type="hidden" name="icon" value={card_data.icon} />
 	<input type="hidden" name="portions" value={portions_local} />
+	<input type="hidden" name="isBaseRecipe" value={isBaseRecipe ? "true" : "false"} />
 
 	<div style="text-align: center; margin: 1rem;">
-		<label style="font-size: 1.1rem; cursor: pointer;">
-			<input
-				type="checkbox"
-				name="isBaseRecipe"
-				bind:checked={isBaseRecipe}
-				style="width: auto; display: inline; margin-right: 0.5em;"
-			/>
-			Als Basisrezept markieren (kann von anderen Rezepten referenziert werden)
-		</label>
+		<Toggle
+			bind:checked={isBaseRecipe}
+			label="Als Basisrezept markieren (kann von anderen Rezepten referenziert werden)"
+		/>
 	</div>
 
 	<div class="title_container">
diff --git a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
index c613309..fee4283 100644
--- a/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte
@@ -11,6 +11,7 @@
 	import CardAdd from '$lib/components/CardAdd.svelte';
 	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
 	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
 	import { season } from '$lib/js/season_store';
 	import { portions } from '$lib/js/portions_store';
 	import '$lib/css/action_button.css';
@@ -417,17 +418,13 @@
 	<input type="hidden" name="category" value={card_data.category} />
 	<input type="hidden" name="icon" value={card_data.icon} />
 	<input type="hidden" name="portions" value={portions_local} />
+	<input type="hidden" name="isBaseRecipe" value={isBaseRecipe ? "true" : "false"} />
 
 	<div style="text-align: center; margin: 1rem;">
-		<label style="font-size: 1.1rem; cursor: pointer;">
-			<input
-				type="checkbox"
-				name="isBaseRecipe"
-				bind:checked={isBaseRecipe}
-				style="width: auto; display: inline; margin-right: 0.5em;"
-			/>
-			Als Basisrezept markieren (kann von anderen Rezepten referenziert werden)
-		</label>
+		<Toggle
+			bind:checked={isBaseRecipe}
+			label="Als Basisrezept markieren (kann von anderen Rezepten referenziert werden)"
+		/>
 	</div>
 
 	<!-- Recipe Note Component -->