edit panes: remove footer buttons, export save() for header

parent components now call save() from sidebar header action
instead of embedded cancel/save buttons

src/lib/components/collection/SummonEditPane.svelte

@@ -10,7 +10,6 @@
 	 */
 	import type { Summon } from '$lib/types/api/entities'
 	import DetailsSection from '$lib/components/sidebar/details/DetailsSection.svelte'
-	import Button from '$lib/components/ui/Button.svelte'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 
 	export interface SummonEditValues {
@@ -30,13 +29,9 @@
 		currentValues: SummonEditValues
 		/** Callback when save is clicked */
 		onSave?: (updates: SummonEditUpdates) => void
-		/** Callback when cancel is clicked */
-		onCancel?: () => void
-		/** Whether save is in progress */
-		saving?: boolean
 	}
 
-	let { summonData, currentValues, onSave, onCancel, saving = false }: Props = $props()
+	let { summonData, currentValues, onSave }: Props = $props()
 
 	// Internal state
 	let uncapLevel = $state(currentValues.uncapLevel)
@@ -67,20 +62,14 @@
 		transcendenceStep = newStage
 	}
 
-	function handleSave() {
+	// Export save function so parent can call it from header button
+	export function save() {
 		const updates: SummonEditUpdates = {
 			uncapLevel,
 			transcendenceStep
 		}
 		onSave?.(updates)
 	}
-
-	function handleCancel() {
-		// Reset to original values
-		uncapLevel = currentValues.uncapLevel
-		transcendenceStep = currentValues.transcendenceStep
-		onCancel?.()
-	}
 </script>
 
 <div class="summon-edit-pane">
@@ -101,19 +90,6 @@
 			</div>
 		</DetailsSection>
 	</div>
-
-	<div class="edit-footer">
-		<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
-		<Button
-			variant="primary"
-			element={elementName}
-			elementStyle={!!elementName}
-			onclick={handleSave}
-			disabled={saving}
-		>
-			{saving ? 'Saving...' : 'Save'}
-		</Button>
-	</div>
 </div>
 
 <style lang="scss">
@@ -123,7 +99,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		gap: spacing.$unit-2x;
 	}
 
 	.edit-sections {
@@ -137,16 +112,4 @@
 	.section-content {
 		padding: spacing.$unit;
 	}
-
-	.edit-footer {
-		display: flex;
-		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
-		border-top: 1px solid var(--border-secondary);
-		flex-shrink: 0;
-
-		:global(button) {
-			flex: 1;
-		}
-	}
 </style>

src/lib/components/collection/WeaponEditPane.svelte

@@ -16,7 +16,6 @@
 	import WeaponKeySelect from '$lib/components/sidebar/edit/WeaponKeySelect.svelte'
 	import AwakeningSelect from '$lib/components/sidebar/edit/AwakeningSelect.svelte'
 	import AxSkillSelect from '$lib/components/sidebar/edit/AxSkillSelect.svelte'
-	import Button from '$lib/components/ui/Button.svelte'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 	import { getElementIcon } from '$lib/utils/images'
 	import { seriesHasWeaponKeys, getSeriesSlug } from '$lib/utils/weaponSeries'
@@ -60,13 +59,9 @@
 		currentValues: WeaponEditValues
 		/** Callback when save is clicked */
 		onSave?: (updates: WeaponEditUpdates) => void
-		/** Callback when cancel is clicked */
-		onCancel?: () => void
-		/** Whether save is in progress */
-		saving?: boolean
 	}
 
-	let { weaponData, currentValues, onSave, onCancel, saving = false }: Props = $props()
+	let { weaponData, currentValues, onSave }: Props = $props()
 
 	// Internal state
 	let uncapLevel = $state(currentValues.uncapLevel)
@@ -166,7 +161,8 @@
 		transcendenceStep = newStage
 	}
 
-	function handleSave() {
+	// Export save function so parent can call it from header button
+	export function save() {
 		const updates: WeaponEditUpdates = {
 			uncapLevel,
 			transcendenceStep
@@ -213,26 +209,6 @@
 
 		onSave?.(updates)
 	}
-
-	function handleCancel() {
-		// Reset to original values
-		uncapLevel = currentValues.uncapLevel
-		transcendenceStep = currentValues.transcendenceStep
-		element = currentValues.element ?? weaponData?.element ?? 0
-		weaponKey1 = currentValues.weaponKey1Id
-		weaponKey2 = currentValues.weaponKey2Id
-		weaponKey3 = currentValues.weaponKey3Id
-		selectedAwakening = currentValues.awakening?.type
-		awakeningLevel = currentValues.awakening?.level ?? 1
-		axSkills =
-			currentValues.axSkills.length > 0
-				? currentValues.axSkills
-				: [
-						{ modifier: -1, strength: 0 },
-						{ modifier: -1, strength: 0 }
-					]
-		onCancel?.()
-	}
 </script>
 
 <div class="weapon-edit-pane">
@@ -332,19 +308,6 @@
 			</DetailsSection>
 		{/if}
 	</div>
-
-	<div class="edit-footer">
-		<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
-		<Button
-			variant="primary"
-			element={elementName}
-			elementStyle={!!elementName}
-			onclick={handleSave}
-			disabled={saving}
-		>
-			{saving ? 'Saving...' : 'Save'}
-		</Button>
-	</div>
 </div>
 
 <style lang="scss">
@@ -354,7 +317,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		gap: spacing.$unit-2x;
 	}
 
 	.edit-sections {
@@ -374,16 +336,4 @@
 		flex-direction: column;
 		gap: spacing.$unit-2x;
 	}
-
-	.edit-footer {
-		display: flex;
-		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
-		border-top: 1px solid var(--border-secondary);
-		flex-shrink: 0;
-
-		:global(button) {
-			flex: 1;
-		}
-	}
 </style>

src/lib/components/sidebar/CharacterEditPane.svelte

@@ -21,7 +21,6 @@
 	import RingsSelect from './edit/RingsSelect.svelte'
 	import EarringSelect from './edit/EarringSelect.svelte'
 	import PerpetuityToggle from './edit/PerpetuityToggle.svelte'
-	import Button from '$lib/components/ui/Button.svelte'
 	import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
 
 	export interface CharacterEditValues {
@@ -57,19 +56,13 @@
 		showPerpetuity?: boolean
 		/** Callback when save is clicked, receives API-formatted updates */
 		onSave?: (updates: CharacterEditUpdates) => void
-		/** Callback when cancel is clicked */
-		onCancel?: () => void
-		/** Whether save is in progress (disables buttons) */
-		saving?: boolean
 	}
 
 	let {
 		characterData,
 		currentValues,
 		showPerpetuity = true,
-		onSave,
+		onSave
-		onCancel,
-		saving = false
 	}: Props = $props()
 
 	// Internal state - initialized from currentValues
@@ -143,7 +136,8 @@
 		transcendenceStep = newStage
 	}
 
-	function handleSave() {
+	// Export save function so parent can call it from header button
+	export function save() {
 		const updates: CharacterEditUpdates = {
 			uncapLevel,
 			transcendenceStep,
@@ -173,26 +167,6 @@
 
 		onSave?.(updates)
 	}
-
-	function handleCancel() {
-		// Reset to original values
-		uncapLevel = currentValues.uncapLevel
-		transcendenceStep = currentValues.transcendenceStep
-		selectedAwakening = currentValues.awakening?.type
-		awakeningLevel = currentValues.awakening?.level ?? 1
-		rings =
-			currentValues.rings.length > 0
-				? currentValues.rings
-				: [
-						{ modifier: 1, strength: 0 },
-						{ modifier: 2, strength: 0 },
-						{ modifier: 0, strength: 0 },
-						{ modifier: 0, strength: 0 }
-					]
-		earring = currentValues.earring ?? undefined
-		perpetuity = currentValues.perpetuity
-		onCancel?.()
-	}
 </script>
 
 <div class="character-edit-pane">
@@ -270,19 +244,6 @@
 			</DetailsSection>
 		{/if}
 	</div>
-
-	<div class="edit-footer">
-		<Button variant="secondary" onclick={handleCancel} disabled={saving}>Cancel</Button>
-		<Button
-			variant="primary"
-			element={elementName}
-			elementStyle={!!elementName}
-			onclick={handleSave}
-			disabled={saving}
-		>
-			{saving ? 'Saving...' : 'Save'}
-		</Button>
-	</div>
 </div>
 
 <style lang="scss">
@@ -292,7 +253,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		gap: spacing.$unit-2x;
 	}
 
 	.edit-sections {
@@ -306,16 +266,4 @@
 	.section-content {
 		padding: spacing.$unit;
 	}
-
-	.edit-footer {
-		display: flex;
-		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
-		border-top: 1px solid var(--border-secondary);
-		flex-shrink: 0;
-
-		:global(button) {
-			flex: 1;
-		}
-	}
 </style>