extract DeleteTeamDialog component

src/lib/components/dialogs/DeleteTeamDialog.svelte

@@ -0,0 +1,47 @@
+<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'
+
+	interface Props {
+		open: boolean
+		partyName: string
+		deleting?: boolean
+		onDelete: () => void
+		onCancel: () => void
+	}
+
+	let { open = $bindable(), partyName, deleting = false, onDelete, onCancel }: Props = $props()
+</script>
+
+<Dialog bind:open>
+	{#snippet children()}
+		<ModalHeader title="Delete {partyName}?" />
+		<ModalBody>
+			<p class="message">Are you sure you want to permanently delete this team?</p>
+		</ModalBody>
+		<ModalFooter
+			{onCancel}
+			cancelDisabled={deleting}
+			primaryAction={{
+				label: deleting ? 'Deleting...' : 'Yes, delete',
+				onclick: onDelete,
+				destructive: true,
+				disabled: deleting
+			}}
+		/>
+	{/snippet}
+</Dialog>
+
+<style lang="scss">
+	@use '$src/themes/typography' as *;
+
+	.message {
+		margin: 0;
+		font-size: $font-regular;
+		line-height: 1.4;
+		color: var(--text-primary);
+		text-align: left;
+	}
+</style>

src/lib/components/party/Party.svelte

@@ -63,6 +63,7 @@
 	import { transformSkillsToArray } from '$lib/utils/jobSkills'
 	import { findNextEmptySlot, SLOT_NOT_FOUND } from '$lib/utils/gridHelpers'
 	import ConflictDialog from '$lib/components/dialogs/ConflictDialog.svelte'
+	import DeleteTeamDialog from '$lib/components/dialogs/DeleteTeamDialog.svelte'
 	import type { ConflictData } from '$lib/types/api/conflict'
 	import { isConflictResponse, createConflictData } from '$lib/types/api/conflict'
 
@@ -743,9 +744,11 @@
 			transcendenceStep?: number,
 			_editKey?: string
 		) {
+			if (uncapLevel === undefined) return
 			try {
 				await updateCharacterUncap.mutateAsync({
 					id: gridCharacterId,
+					partyId: party.id,
 					partyShortcode: party.shortcode,
 					uncapLevel,
 					transcendenceStep
@@ -761,9 +764,11 @@
 			transcendenceStep?: number,
 			_editKey?: string
 		) {
+			if (uncapLevel === undefined) return
 			try {
 				await updateWeaponUncap.mutateAsync({
 					id: gridWeaponId,
+					partyId: party.id,
 					partyShortcode: party.shortcode,
 					uncapLevel,
 					transcendenceStep
@@ -779,9 +784,11 @@
 			transcendenceStep?: number,
 			_editKey?: string
 		) {
+			if (uncapLevel === undefined) return
 			try {
 				await updateSummonUncap.mutateAsync({
 					id: gridSummonId,
+					partyId: party.id,
 					partyShortcode: party.shortcode,
 					uncapLevel,
 					transcendenceStep
@@ -1021,42 +1028,26 @@
 				/>
 			</div>
 		</ModalBody>
-		<ModalFooter>
+		<ModalFooter
-			{#snippet children()}
+			onCancel={() => (editDialogOpen = false)}
-				<button class="btn-secondary" onclick={() => (editDialogOpen = false)} disabled={loading}>
+			cancelDisabled={loading}
-					Cancel
+			primaryAction={{
-				</button>
+				label: loading ? 'Saving...' : 'Save',
-				<button class="btn-primary" onclick={savePartyTitle} disabled={loading || !editingTitle.trim()}>
+				onclick: savePartyTitle,
-					{loading ? 'Saving...' : 'Save'}
+				disabled: loading || !editingTitle.trim()
-				</button>
+			}}
-			{/snippet}
+		/>
-		</ModalFooter>
 	{/snippet}
 </Dialog>
 
 <!-- Delete Confirmation Dialog -->
-<Dialog bind:open={deleteDialogOpen}>
+<DeleteTeamDialog
-	{#snippet children()}
+	bind:open={deleteDialogOpen}
-		<ModalHeader title="Delete Party" />
+	partyName={party.name || 'Untitled'}
-		<ModalBody>
+	{deleting}
-			<div class="delete-confirmation">
+	onDelete={deleteParty}
-				<p>Are you sure you want to delete this party?</p>
+	onCancel={() => (deleteDialogOpen = false)}
-				<p><strong>{party.name || 'Unnamed Party'}</strong></p>
+/>
-				<p class="warning">⚠️ This action cannot be undone.</p>
-			</div>
-		</ModalBody>
-		<ModalFooter>
-			{#snippet children()}
-				<button class="btn-secondary" onclick={() => (deleteDialogOpen = false)} disabled={deleting}>
-					Cancel
-				</button>
-				<button class="btn-danger" onclick={deleteParty} disabled={deleting}>
-					{deleting ? 'Deleting...' : 'Delete Party'}
-				</button>
-			{/snippet}
-		</ModalFooter>
-	{/snippet}
-</Dialog>
 
 <!-- Conflict Resolution Dialog -->
 <ConflictDialog
@@ -1434,27 +1425,4 @@
 		}
 	}
 
-	// Delete confirmation styles
-	.delete-confirmation {
-		display: flex;
-		flex-direction: column;
-		gap: $unit;
-		text-align: center;
-		padding: $unit 0;
-
-		p {
-			margin: 0;
-		}
-
-		strong {
-			color: var(--text-primary);
-			font-size: $font-medium;
-		}
-
-		.warning {
-			color: $error;
-			font-size: $font-small;
-			margin-top: $unit-half;
-		}
-	}
 </style>