feat: complete Svelte 5 migration across entire application

Migrated all components and routes from Svelte 4 to Svelte 5 syntax:

- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax

- Updated deprecated event directives to Svelte 5 syntax:
  - on:click → onclick
  - on:submit → onsubmit
  - on:change → onchange

- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks

- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity

- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes

- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings

All functionality tested and working. No breaking changes to user experience.

src/lib/components/EditRecipe.svelte

@@ -7,59 +7,65 @@
 	import '$lib/css/shake.css'
 	import { redirect } from '@sveltejs/kit';
 	import { RecipeModelType } from '../../types/types';
+	import type { PageData } from './$types';
+	import CardAdd from '$lib/components/CardAdd.svelte';
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
 
-    	export let data: PageData;
-	export let actions :[String];
-	export let title
-	let preamble = data.preamble
-	let addendum = data.addendum
+	let {
+		data,
+		actions,
+		title,
+		card_data = $bindable({
+			icon: data.icon,
+			category: data.category,
+			name: data.name,
+			description: data.description,
+			tags: data.tags,
+		}),
+		add_info = $bindable({
+			preparation: data.preparation,
+			fermentation: {
+				bulk: data.fermentation.bulk,
+				final: data.fermentation.final,
+			},
+			baking: {
+				length: data.baking.length,
+				temperature: data.baking.temperature,
+				mode: data.baking.mode,
+			},
+			total_time: data.total_time,
+		}),
+		portions = $bindable(data.portions),
+		ingredients = $bindable(data.ingredients),
+		instructions = $bindable(data.instructions)
+	}: {
+		data: PageData,
+		actions: [String],
+		title: string,
+		card_data?: any,
+		add_info?: any,
+		portions?: any,
+		ingredients?: any,
+		instructions?: any
+	} = $props();
+
+	let preamble = $state(data.preamble);
+	let addendum = $state(data.addendum);
 
 	import { season } from '$lib/js/season_store';
 	season.update(() => data.season)
-	let season_local
+	let season_local = $state();
 	season.subscribe((s) => {
 		season_local = s
 	});
 
-	let old_short_name = data.short_name
-
-	export let card_data ={
-		icon: data.icon,
-		category: data.category,
-		name: data.name,
-		description: data.description,
-		tags: data.tags,
-	}
-	export let add_info ={
-		preparation: data.preparation,
-		fermentation: {
-			bulk: data.fermentation.bulk,
-			final: data.fermentation.final,
-		},
-		baking: {
-			length: data.baking.length,
-			temperature: data.baking.temperature,
-			mode: data.baking.mode,
-		},
-		total_time: data.total_time,
-	}
-
-	let images = data.images
-	export let portions = data.portions
-
-	let short_name = data.short_name
-	let password
-	let datecreated = data.datecreated
-	let datemodified = new Date()
-
-    	import type { PageData } from './$types';
-	import CardAdd from '$lib/components/CardAdd.svelte';
-
-	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
-	export let ingredients = data.ingredients
-
-	import CreateStepList from '$lib/components/CreateStepList.svelte';
-	export let instructions = data.instructions
+	let old_short_name = $state(data.short_name);
+	let images = $state(data.images);
+	let short_name = $state(data.short_name);
+	let password = $state();
+	let datecreated = $state(data.datecreated);
+	let datemodified = $state(new Date());
 
 
 	function get_season(){
@@ -300,14 +306,14 @@ h3{
 <div class=submit_wrapper>
 <h2>Neues Rezept hinzufügen:</h2>
 <input type="password" placeholder=Passwort bind:value={password}>
-<button class=action_button on:click={doAdd}><Check fill=white width=2rem height=2rem></Check></button>
+<button class=action_button onclick={doAdd}><Check fill=white width=2rem height=2rem></Check></button>
 </div>
 {/if}
 {#if actions.includes('edit')}
 <div class=submit_wrapper>
 <h2>Editiertes Rezept abspeichern:</h2>
 <input type="password" placeholder=Passwort bind:value={password}>
-<button class=action_button on:click={doEdit}><Check fill=white width=2rem height=2rem></Check></button>
+<button class=action_button onclick={doEdit}><Check fill=white width=2rem height=2rem></Check></button>
 </div>
 {/if}
 
@@ -315,6 +321,6 @@ h3{
 <div class=submit_wrapper>
 <h2>Rezept löschen:</h2>
 <input type="password" placeholder=Passwort bind:value={password}>
-<button class=action_button on:click={doDelete}><Cross fill=white width=2rem height=2rem></Cross></button>
+<button class=action_button onclick={doDelete}><Cross fill=white width=2rem height=2rem></Cross></button>
 </div>
 {/if}