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/routes/cospend/+page.svelte

@@ -11,17 +11,19 @@
   import AddButton from '$lib/components/AddButton.svelte';
 
 
-  import { formatCurrency } from '$lib/utils/formatters';  export let data; // Contains session data and balance from server
+  import { formatCurrency } from '$lib/utils/formatters';
+
+  let { data } = $props(); // Contains session data and balance from server
 
   // Use server-side data, with fallback for progressive enhancement
-  let balance = data.balance || {
+  let balance = $state(data.balance || {
     netBalance: 0,
     recentSplits: []
-  };
-  let loading = false; // Start as false since we have server data
-  let error = null;
-  let monthlyExpensesData = { labels: [], datasets: [] };
-  let expensesLoading = false;
+  });
+  let loading = $state(false); // Start as false since we have server data
+  let error = $state(null);
+  let monthlyExpensesData = $state(data.monthlyExpensesData || { labels: [], datasets: [] });
+  let expensesLoading = $state(false);
 
   // Component references for refreshing
   let enhancedBalanceComponent;
@@ -31,10 +33,15 @@
   onMount(async () => {
     // Mark that JavaScript is loaded for progressive enhancement
     document.body.classList.add('js-loaded');
-    await Promise.all([
-      fetchBalance(),
-      fetchMonthlyExpenses()
-    ]);
+
+    // Only fetch if we don't have server-side data
+    if (!balance.recentSplits || balance.recentSplits.length === 0) {
+      await fetchBalance();
+    }
+
+    if (!monthlyExpensesData.datasets || monthlyExpensesData.datasets.length === 0) {
+      await fetchMonthlyExpenses();
+    }
 
     // Listen for dashboard refresh events from the layout
     const handleDashboardRefresh = () => {
@@ -195,7 +202,7 @@
             <a
               href="/cospend/payments/view/{split.paymentId?._id}"
               class="settlement-flow-activity"
-              on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
+              onclick={(e) => handlePaymentClick(split.paymentId?._id, e)}
             >
               <div class="settlement-activity-content">
                 <div class="settlement-user-flow">
@@ -226,7 +233,7 @@
                 <a
                   href="/cospend/payments/view/{split.paymentId?._id}"
                   class="activity-bubble"
-                  on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
+                  onclick={(e) => handlePaymentClick(split.paymentId?._id, e)}
                 >
                   <div class="activity-header">
                     <div class="user-info">