🌌 Migrate app to svelte-5

app/src/lib/components/SettingsCard.svelte

@@ -2,8 +2,21 @@
 	import { slide } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { Down } from './icons';
-	export let open = true;
-	export let collapsible = true;
+	interface Props {
+		open?: boolean;
+		collapsible?: boolean;
+		icon?: import('svelte').Snippet;
+		title?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(true),
+		collapsible = true,
+		icon,
+		title,
+		children
+	}: Props = $props();
 </script>
 
 {#if collapsible}
@@ -14,12 +27,12 @@
 			class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
 		>
 			<span class="inline-flex items-baseline">
-				<slot name="icon" />
-				<slot name="title" />
+				{@render icon?.()}
+				{@render title?.()}
 			</span>
 			<button
 				class="btn btn-circle btn-ghost btn-sm"
-				on:click={() => {
+				onclick={() => {
 					open = !open;
 				}}
 			>
@@ -35,7 +48,7 @@
 				class="flex flex-col gap-2 p-4 pt-0"
 				transition:slide|local={{ duration: 300, easing: cubicOut }}
 			>
-				<slot />
+				{@render children?.()}
 			</div>
 		{/if}
 	</div>
@@ -45,12 +58,12 @@
 	>
 		<div class="min-h-16 w-full p-4 text-xl font-medium">
 			<span class="inline-flex items-baseline">
-				<slot name="icon" />
-				<slot name="title" />
+				{@render icon?.()}
+				{@render title?.()}
 			</span>
 		</div>
 		<div class="flex flex-col gap-2 p-4 pt-0">
-			<slot />
+			{@render children?.()}
 		</div>
 	</div>
 {/if}