diff --git a/web/src/components/EmailCardStack.test.ts b/web/src/components/EmailCardStack.test.ts index 42dd9e3..1ffa968 100644 --- a/web/src/components/EmailCardStack.test.ts +++ b/web/src/components/EmailCardStack.test.ts @@ -9,6 +9,7 @@ vi.mock('../composables/useCardAnimation', () => ({ snapBack: vi.fn(), animateDismiss: vi.fn(), updateAura: vi.fn(), + reset: vi.fn(), })), })) diff --git a/web/src/components/EmailCardStack.vue b/web/src/components/EmailCardStack.vue index ddef4c5..acacbea 100644 --- a/web/src/components/EmailCardStack.vue +++ b/web/src/components/EmailCardStack.vue @@ -54,12 +54,18 @@ const motion = useMotion() const cardEl = ref(null) const isExpanded = ref(false) -const { pickup, setDragPosition, snapBack, animateDismiss, updateAura } = useCardAnimation(cardEl, motion) +const { pickup, setDragPosition, snapBack, animateDismiss, updateAura, reset } = useCardAnimation(cardEl, motion) watch(() => props.dismissType, (type) => { if (type) animateDismiss(type) }) +// When a new card loads into the same element, clear any inline styles left by the previous animation +watch(() => props.item.id, () => { + reset() + isExpanded.value = false +}) + // Toss gesture state const isHeld = ref(false) const pickupX = ref(0) diff --git a/web/src/composables/useCardAnimation.ts b/web/src/composables/useCardAnimation.ts index 28bd0b0..c5e3e45 100644 --- a/web/src/composables/useCardAnimation.ts +++ b/web/src/composables/useCardAnimation.ts @@ -80,5 +80,20 @@ export function useCardAnimation( utils.set(cardEl.value, { background: color }) } - return { pickup, setDragPosition, snapBack, animateDismiss, updateAura } + function reset() { + if (!cardEl.value) return + // Instantly restore initial card state — called when a new item loads into the same element + utils.set(cardEl.value, { + x: 0, + y: 0, + scale: 1, + opacity: 1, + rotate: 0, + borderRadius: CARD_RADIUS, + background: 'transparent', + filter: 'none', + }) + } + + return { pickup, setDragPosition, snapBack, animateDismiss, updateAura, reset } }