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

@@ -1,11 +1,19 @@
-<script>
+<script lang="ts">
   import ProfilePicture from './ProfilePicture.svelte';
-  
-  export let users = [];
-  export let currentUser = '';
-  export let predefinedMode = false;
-  export let canRemoveUsers = true;
-  export let newUser = '';
+
+  let {
+    users = $bindable([]),
+    currentUser = '',
+    predefinedMode = false,
+    canRemoveUsers = true,
+    newUser = $bindable('')
+  } = $props<{
+    users?: string[],
+    currentUser?: string,
+    predefinedMode?: boolean,
+    canRemoveUsers?: boolean,
+    newUser?: string
+  }>();
   
   function addUser() {
     if (predefinedMode) return;
@@ -54,7 +62,7 @@
             <span class="you-badge">You</span>
           {/if}
           {#if canRemoveUsers && user !== currentUser}
-            <button type="button" class="remove-user" on:click={() => removeUser(user)}>
+            <button type="button" class="remove-user" onclick={() => removeUser(user)}>
               Remove
             </button>
           {/if}
@@ -63,13 +71,13 @@
     </div>
 
     <div class="add-user js-enhanced" style="display: none;">
-      <input 
-        type="text" 
-        bind:value={newUser} 
+      <input
+        type="text"
+        bind:value={newUser}
         placeholder="Add user..."
-        on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
+        onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
       />
-      <button type="button" on:click={addUser}>Add User</button>
+      <button type="button" onclick={addUser}>Add User</button>
     </div>
   {/if}
 </div>