diff --git a/src/lib/components/collection/CollectionCharacterPane.svelte b/src/lib/components/collection/CollectionCharacterPane.svelte index 2442a756..b1a8ced9 100644 --- a/src/lib/components/collection/CollectionCharacterPane.svelte +++ b/src/lib/components/collection/CollectionCharacterPane.svelte @@ -8,6 +8,7 @@ * * The "My Collection" tab includes an edit mode using CharacterEditPane. */ + import { untrack } from 'svelte' import type { CollectionCharacter, ExtendedMastery } from '$lib/types/api/collection' import { useUpdateCollectionCharacter } from '$lib/api/mutations/collection.mutations' import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte' @@ -216,11 +217,17 @@ // Update sidebar header action based on current state $effect(() => { - if (isOwner && selectedTab === 'collection' && !isEditing) { - sidebar.setAction(() => (isEditing = true), 'Edit', elementName) - } else { - sidebar.clearAction() - } + // Capture reactive dependencies we want to track + const shouldShowEdit = isOwner && selectedTab === 'collection' && !isEditing + const element = elementName + // Use untrack to avoid infinite loop when sidebar.setAction mutates pane state + untrack(() => { + if (shouldShowEdit) { + sidebar.setAction(() => (isEditing = true), 'Edit', element) + } else { + sidebar.clearAction() + } + }) }) // Clean up sidebar action when component is destroyed diff --git a/src/lib/components/collection/CollectionSummonPane.svelte b/src/lib/components/collection/CollectionSummonPane.svelte index 0f3d1adc..4cfee6e7 100644 --- a/src/lib/components/collection/CollectionSummonPane.svelte +++ b/src/lib/components/collection/CollectionSummonPane.svelte @@ -8,6 +8,7 @@ * * The "My Collection" tab includes an edit mode using SummonEditPane. */ + import { untrack } from 'svelte' import type { CollectionSummon } from '$lib/types/api/collection' import { useUpdateCollectionSummon } from '$lib/api/mutations/collection.mutations' import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte' @@ -109,11 +110,17 @@ // Update sidebar header action $effect(() => { - if (isOwner && selectedTab === 'collection' && !isEditing) { - sidebar.setAction(() => (isEditing = true), 'Edit', elementName) - } else { - sidebar.clearAction() - } + // Capture reactive dependencies we want to track + const shouldShowEdit = isOwner && selectedTab === 'collection' && !isEditing + const element = elementName + // Use untrack to avoid infinite loop when sidebar.setAction mutates pane state + untrack(() => { + if (shouldShowEdit) { + sidebar.setAction(() => (isEditing = true), 'Edit', element) + } else { + sidebar.clearAction() + } + }) }) // Clean up sidebar action when component is destroyed diff --git a/src/lib/components/collection/CollectionWeaponPane.svelte b/src/lib/components/collection/CollectionWeaponPane.svelte index 50290c9c..94cd36dd 100644 --- a/src/lib/components/collection/CollectionWeaponPane.svelte +++ b/src/lib/components/collection/CollectionWeaponPane.svelte @@ -8,6 +8,7 @@ * * The "My Collection" tab includes an edit mode using WeaponEditPane. */ + import { untrack } from 'svelte' import type { CollectionWeapon } from '$lib/types/api/collection' import type { SimpleAxSkill } from '$lib/types/api/entities' import { useUpdateCollectionWeapon } from '$lib/api/mutations/collection.mutations' @@ -193,11 +194,17 @@ // Update sidebar header action $effect(() => { - if (isOwner && selectedTab === 'collection' && !isEditing) { - sidebar.setAction(() => (isEditing = true), 'Edit', elementName) - } else { - sidebar.clearAction() - } + // Capture reactive dependencies we want to track + const shouldShowEdit = isOwner && selectedTab === 'collection' && !isEditing + const element = elementName + // Use untrack to avoid infinite loop when sidebar.setAction mutates pane state + untrack(() => { + if (shouldShowEdit) { + sidebar.setAction(() => (isEditing = true), 'Edit', element) + } else { + sidebar.clearAction() + } + }) }) // Clean up sidebar action when component is destroyed