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/SplitMethodSelector.svelte

@@ -1,20 +1,32 @@
-<script>
+<script lang="ts">
   import ProfilePicture from './ProfilePicture.svelte';
-  
-  export let splitMethod = 'equal';
-  export let users = [];
-  export let amount = 0;
-  export let paidBy = '';
-  export let splitAmounts = {};
-  export let personalAmounts = {};
-  export let currentUser = '';
-  export let predefinedMode = false;
-  export let currency = 'CHF';
-  
-  let personalTotalError = false;
-  
+
+  let {
+    splitMethod = $bindable('equal'),
+    users = $bindable([]),
+    amount = $bindable(0),
+    paidBy = $bindable(''),
+    splitAmounts = $bindable({}),
+    personalAmounts = $bindable({}),
+    currentUser = $bindable(''),
+    predefinedMode = $bindable(false),
+    currency = $bindable('CHF')
+  } = $props<{
+    splitMethod?: string,
+    users?: string[],
+    amount?: number,
+    paidBy?: string,
+    splitAmounts?: Record<string, number>,
+    personalAmounts?: Record<string, number>,
+    currentUser?: string,
+    predefinedMode?: boolean,
+    currency?: string
+  }>();
+
+  let personalTotalError = $state(false);
+
   // Reactive text for "Paid in Full" option
-  $: paidInFullText = (() => {
+  let paidInFullText = $derived((() => {
     if (!paidBy) {
       return 'Paid in Full';
     }
@@ -31,7 +43,7 @@
     } else {
       return `Paid in Full by ${paidBy}`;
     }
-  })();
+  })());
   
   function calculateEqualSplits() {
     if (!amount || users.length === 0) return;
@@ -109,19 +121,23 @@
   }
 
   // Validate and recalculate when personal amounts change
-  $: if (splitMethod === 'personal_equal' && personalAmounts && amount) {
-    const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-    const totalAmount = parseFloat(amount);
-    personalTotalError = totalPersonal > totalAmount;
-    
-    if (!personalTotalError) {
-      calculatePersonalEqualSplit();
-    }
-  }
+  $effect(() => {
+    if (splitMethod === 'personal_equal' && personalAmounts && amount) {
+      const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
+      const totalAmount = parseFloat(amount);
+      personalTotalError = totalPersonal > totalAmount;
 
-  $: if (amount && splitMethod && paidBy) {
-    handleSplitMethodChange();
-  }
+      if (!personalTotalError) {
+        calculatePersonalEqualSplit();
+      }
+    }
+  });
+
+  $effect(() => {
+    if (amount && splitMethod && paidBy) {
+      handleSplitMethodChange();
+    }
+  });
 </script>
 
 <div class="form-section">