feat: Dynamic card sizes everywhere, reworked content requesting for EpisodePage

src/lib/components/Dialog/ConfirmDialog.svelte

@@ -4,9 +4,12 @@
 	import { modalStack } from '../Modal/modal.store';
 	import Dialog from './Dialog.svelte';
 
+	type ActionFn = (() => Promise<any>) | (() => any);
+
 	export let modalId: symbol;
 
-	type ActionFn = (() => Promise<any>) | (() => any);
+	export let header: string;
+	export let body: string;
 	export let confirm: ActionFn;
 	export let cancel: ActionFn = () => {};
 
@@ -28,10 +31,10 @@
 
 <Dialog>
 	<div class="header2 mb-4">
-		<slot name="header" />
+		{header}
 	</div>
 	<div class="font-medium text-secondary-300 mb-8">
-		<slot />
+		{body}
 	</div>
 	<Container class="flex flex-col space-y-4">
 		<Button type="secondary" disabled={fetching} on:clickOrSelect={() => handleAction(confirm)}>

src/lib/components/Dialog/Dialog.svelte

@@ -2,14 +2,20 @@
 	import Modal from '../Modal/Modal.svelte';
 	import classNames from 'classnames';
 	import { fade } from 'svelte/transition';
+	import { modalStack } from '../Modal/modal.store';
 
 	export let size: 'sm' | 'full' = 'sm';
+
+	function handleClose() {
+		modalStack.closeTopmost();
+	}
 </script>
 
 <Modal on:back>
 	<div
 		class="h-full flex items-center justify-center bg-primary-900/75 py-20 px-32"
 		transition:fade={{ duration: 100 }}
+		on:click|self={() => handleClose()}
 	>
 		<div
 			class={classNames(