migrate dialog consumers to ModalHeader/Body/Footer pattern

src/lib/components/collection/AddToCollectionModal.svelte

@@ -12,6 +12,9 @@
 		useAddSummonsToCollection
 	} from '$lib/api/mutations/collection.mutations'
 	import Dialog from '$lib/components/ui/Dialog.svelte'
+	import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
+	import ModalBody from '$lib/components/ui/ModalBody.svelte'
+	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
 	import Icon from '$lib/components/Icon.svelte'
 	import CollectionFilters, {
@@ -316,8 +319,9 @@
 	})
 </script>
 
-<Dialog bind:open {onOpenChange} title={dialogTitle} size="large">
+<Dialog bind:open {onOpenChange} size="large">
 	{#snippet children()}
+		<ModalHeader title={dialogTitle} />
 		<div class="modal-content">
 			<!-- Search input -->
 			<div class="search-bar">
@@ -441,9 +445,8 @@
 				{/if}
 			</div>
 		</div>
-	{/snippet}
+		<ModalFooter>
-
+			{#snippet children()}
-	{#snippet footer()}
 				<div class="modal-footer">
 					<div class="footer-left">
 						{#if selectedCount > 0}
@@ -476,6 +479,8 @@
 					</div>
 				</div>
 			{/snippet}
+		</ModalFooter>
+	{/snippet}
 </Dialog>
 
 <style lang="scss">

src/lib/components/dialogs/ConflictDialog.svelte

@@ -18,6 +18,9 @@
 -->
 <script lang="ts">
 	import Dialog from '$lib/components/ui/Dialog.svelte'
+	import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
+	import ModalBody from '$lib/components/ui/ModalBody.svelte'
+	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
 	import type { ConflictData } from '$lib/types/api/conflict'
 	import type { GridCharacter, GridWeapon } from '$lib/types/api/party'
@@ -167,7 +170,11 @@
 	}
 </script>
 
-<Dialog bind:open onOpenChange={handleOpenChange} title={m.conflict_title()}>
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	{#snippet children()}
+		<ModalHeader title={m.conflict_title()} />
+		<ModalBody>
+			{#snippet children()}
 				{#if conflict}
 					<div class={styles.content}>
 						<p class={styles.message}>{conflictMessage}</p>
@@ -224,8 +231,10 @@
 						</div>
 					</div>
 				{/if}
-
+			{/snippet}
-	{#snippet footer()}
+		</ModalBody>
+		<ModalFooter>
+			{#snippet children()}
 				<Button variant="ghost" onclick={handleCancel} disabled={isLoading}>
 					{m.conflict_cancel()}
 				</Button>
@@ -233,4 +242,6 @@
 					{m.conflict_confirm()}
 				</Button>
 			{/snippet}
+		</ModalFooter>
+	{/snippet}
 </Dialog>

src/lib/components/party/Party.svelte

@@ -46,6 +46,9 @@
 	import type { AddItemResult } from '$lib/types/api/search'
 	import { GridType } from '$lib/types/enums'
 	import Dialog from '$lib/components/ui/Dialog.svelte'
+	import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
+	import ModalBody from '$lib/components/ui/ModalBody.svelte'
+	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
 	import Icon from '$lib/components/Icon.svelte'
 	import DescriptionRenderer from '$lib/components/DescriptionRenderer.svelte'
@@ -1003,8 +1006,10 @@
 </div>
 
 <!-- Edit Dialog -->
-<Dialog bind:open={editDialogOpen} title="Edit Party Details">
+<Dialog bind:open={editDialogOpen}>
 	{#snippet children()}
+		<ModalHeader title="Edit Party Details" />
+		<ModalBody>
 			<div class="edit-form">
 				<label for="party-title">Party Title</label>
 				<input
@@ -1015,9 +1020,9 @@
 					disabled={loading}
 				/>
 			</div>
-	{/snippet}
+		</ModalBody>
-
+		<ModalFooter>
-	{#snippet footer()}
+			{#snippet children()}
 				<button class="btn-secondary" onclick={() => (editDialogOpen = false)} disabled={loading}>
 					Cancel
 				</button>
@@ -1025,19 +1030,23 @@
 					{loading ? 'Saving...' : 'Save'}
 				</button>
 			{/snippet}
+		</ModalFooter>
+	{/snippet}
 </Dialog>
 
 <!-- Delete Confirmation Dialog -->
-<Dialog bind:open={deleteDialogOpen} title="Delete Party">
+<Dialog bind:open={deleteDialogOpen}>
 	{#snippet children()}
+		<ModalHeader title="Delete Party" />
+		<ModalBody>
 			<div class="delete-confirmation">
 				<p>Are you sure you want to delete this party?</p>
 				<p><strong>{party.name || 'Unnamed Party'}</strong></p>
 				<p class="warning">⚠️ This action cannot be undone.</p>
 			</div>
-	{/snippet}
+		</ModalBody>
-
+		<ModalFooter>
-	{#snippet footer()}
+			{#snippet children()}
 				<button class="btn-secondary" onclick={() => (deleteDialogOpen = false)} disabled={deleting}>
 					Cancel
 				</button>
@@ -1045,6 +1054,8 @@
 					{deleting ? 'Deleting...' : 'Delete Party'}
 				</button>
 			{/snippet}
+		</ModalFooter>
+	{/snippet}
 </Dialog>
 
 <!-- Conflict Resolution Dialog -->

src/stories/components/ui/Dialog.stories.svelte

@@ -1,6 +1,9 @@
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf'
 	import Dialog from '$lib/components/ui/Dialog.svelte'
+	import ModalHeader from '$lib/components/ui/ModalHeader.svelte'
+	import ModalBody from '$lib/components/ui/ModalBody.svelte'
+	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Button from '$lib/components/ui/Button.svelte'
 
 	const { Story } = defineMeta({
@@ -22,10 +25,15 @@
 <Story name="Default">
 	<div>
 		<Button onclick={() => (defaultOpen = true)}>Open Dialog</Button>
-		<Dialog bind:open={defaultOpen} title="Dialog Title">
+		<Dialog bind:open={defaultOpen}>
+			{#snippet children()}
+				<ModalHeader title="Dialog Title" />
+				<ModalBody>
 					{#snippet children()}
 						<p>This is the dialog content. You can put any content here.</p>
 					{/snippet}
+				</ModalBody>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>
@@ -34,14 +42,15 @@
 <Story name="With Description">
 	<div>
 		<Button onclick={() => (withDescOpen = true)}>Open Dialog</Button>
-		<Dialog
+		<Dialog bind:open={withDescOpen}>
-			bind:open={withDescOpen}
+			{#snippet children()}
-			title="Account Settings"
+				<ModalHeader title="Account Settings" description="Make changes to your account settings here." />
-			description="Make changes to your account settings here."
+				<ModalBody>
-		>
 					{#snippet children()}
 						<p>Your account settings form would go here.</p>
 					{/snippet}
+				</ModalBody>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>
@@ -50,14 +59,21 @@
 <Story name="With Footer">
 	<div>
 		<Button onclick={() => (withFooterOpen = true)}>Open Dialog</Button>
-		<Dialog bind:open={withFooterOpen} title="Confirm Action">
+		<Dialog bind:open={withFooterOpen}>
+			{#snippet children()}
+				<ModalHeader title="Confirm Action" />
+				<ModalBody>
 					{#snippet children()}
 						<p>Are you sure you want to proceed with this action?</p>
 					{/snippet}
-			{#snippet footer()}
+				</ModalBody>
+				<ModalFooter>
+					{#snippet children()}
 						<Button variant="secondary" onclick={() => (withFooterOpen = false)}>Cancel</Button>
 						<Button variant="primary" onclick={() => (withFooterOpen = false)}>Confirm</Button>
 					{/snippet}
+				</ModalFooter>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>
@@ -66,7 +82,10 @@
 <Story name="Long Content">
 	<div>
 		<Button onclick={() => (longContentOpen = true)}>Open Long Dialog</Button>
-		<Dialog bind:open={longContentOpen} title="Terms and Conditions">
+		<Dialog bind:open={longContentOpen}>
+			{#snippet children()}
+				<ModalHeader title="Terms and Conditions" />
+				<ModalBody>
 					{#snippet children()}
 						<div style="display: flex; flex-direction: column; gap: 16px;">
 							<p>
@@ -92,10 +111,14 @@
 							</p>
 						</div>
 					{/snippet}
-			{#snippet footer()}
+				</ModalBody>
+				<ModalFooter>
+					{#snippet children()}
 						<Button variant="secondary" onclick={() => (longContentOpen = false)}>Decline</Button>
 						<Button variant="primary" onclick={() => (longContentOpen = false)}>Accept</Button>
 					{/snippet}
+				</ModalFooter>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>
@@ -104,7 +127,10 @@
 <Story name="Form Dialog">
 	<div>
 		<Button onclick={() => (formOpen = true)}>Edit Profile</Button>
-		<Dialog bind:open={formOpen} title="Edit Profile" description="Update your profile information.">
+		<Dialog bind:open={formOpen}>
+			{#snippet children()}
+				<ModalHeader title="Edit Profile" description="Update your profile information." />
+				<ModalBody>
 					{#snippet children()}
 						<div style="display: flex; flex-direction: column; gap: 16px;">
 							<div>
@@ -133,10 +159,14 @@
 							</div>
 						</div>
 					{/snippet}
-			{#snippet footer()}
+				</ModalBody>
+				<ModalFooter>
+					{#snippet children()}
 						<Button variant="secondary" onclick={() => (formOpen = false)}>Cancel</Button>
 						<Button variant="primary" onclick={() => (formOpen = false)}>Save Changes</Button>
 					{/snippet}
+				</ModalFooter>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>
@@ -145,17 +175,24 @@
 <Story name="Confirmation Dialog">
 	<div>
 		<Button variant="destructive" onclick={() => (confirmOpen = true)}>Delete Item</Button>
-		<Dialog bind:open={confirmOpen} title="Delete Item">
+		<Dialog bind:open={confirmOpen}>
+			{#snippet children()}
+				<ModalHeader title="Delete Item" />
+				<ModalBody>
 					{#snippet children()}
 						<p>
 							Are you sure you want to delete this item? This action cannot be undone and all associated
 							data will be permanently removed.
 						</p>
 					{/snippet}
-			{#snippet footer()}
+				</ModalBody>
+				<ModalFooter>
+					{#snippet children()}
 						<Button variant="secondary" onclick={() => (confirmOpen = false)}>Cancel</Button>
 						<Button variant="destructive" onclick={() => (confirmOpen = false)}>Delete</Button>
 					{/snippet}
+				</ModalFooter>
+			{/snippet}
 		</Dialog>
 	</div>
 </Story>