fix(avocet): restore drag aura color feedback via updateAura in useCardAnimation

This commit is contained in:
pyr0ball 2026-03-08 07:14:24 -07:00
parent 6c98ee6d69
commit d410fa5c80
4 changed files with 61 additions and 2 deletions

View file

@ -8,6 +8,7 @@ vi.mock('../composables/useCardAnimation', () => ({
setDragPosition: vi.fn(),
snapBack: vi.fn(),
animateDismiss: vi.fn(),
updateAura: vi.fn(),
})),
}))

View file

@ -54,7 +54,7 @@ const motion = useMotion()
const cardEl = ref<HTMLElement | null>(null)
const isExpanded = ref(false)
const { pickup, setDragPosition, snapBack, animateDismiss } = useCardAnimation(cardEl, motion)
const { pickup, setDragPosition, snapBack, animateDismiss, updateAura } = useCardAnimation(cardEl, motion)
watch(() => props.dismissType, (type) => {
if (type) animateDismiss(type)
@ -122,6 +122,7 @@ function onPointerMove(e: PointerEvent) {
hoveredBucketName.value = bucketName
emit('bucket-hover', bucketName)
}
updateAura(hoveredZone.value, hoveredBucketName.value)
}
function onPointerUp(e: PointerEvent) {
@ -169,6 +170,7 @@ function onPointerUp(e: PointerEvent) {
} else {
// Snap back
snapBack()
updateAura(null, null)
hoveredZone.value = null
hoveredBucketName.value = null
}
@ -179,6 +181,7 @@ function onPointerCancel(e: PointerEvent) {
;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
isHeld.value = false
snapBack()
updateAura(null, null)
hoveredZone.value = null
hoveredBucketName.value = null
velocityBuf = []

View file

@ -101,4 +101,42 @@ describe('useCardAnimation', () => {
animateDismiss('label')
expect(mockAnimate).not.toHaveBeenCalled()
})
describe('updateAura', () => {
it('sets red background for discard zone', () => {
const el = makeEl()
const cardEl = ref<HTMLElement | null>(el)
const motion = { rich: ref(true) }
const { updateAura } = useCardAnimation(cardEl, motion)
updateAura('discard', null)
expect(mockSet).toHaveBeenCalledWith(el, expect.objectContaining({ background: 'rgba(244, 67, 54, 0.25)' }))
})
it('sets orange background for skip zone', () => {
const el = makeEl()
const cardEl = ref<HTMLElement | null>(el)
const motion = { rich: ref(true) }
const { updateAura } = useCardAnimation(cardEl, motion)
updateAura('skip', null)
expect(mockSet).toHaveBeenCalledWith(el, expect.objectContaining({ background: 'rgba(255, 152, 0, 0.25)' }))
})
it('sets blue background for bucket hover', () => {
const el = makeEl()
const cardEl = ref<HTMLElement | null>(el)
const motion = { rich: ref(true) }
const { updateAura } = useCardAnimation(cardEl, motion)
updateAura(null, 'interview_scheduled')
expect(mockSet).toHaveBeenCalledWith(el, expect.objectContaining({ background: 'rgba(42, 96, 128, 0.20)' }))
})
it('sets transparent background when no zone/bucket', () => {
const el = makeEl()
const cardEl = ref<HTMLElement | null>(el)
const motion = { rich: ref(true) }
const { updateAura } = useCardAnimation(cardEl, motion)
updateAura(null, null)
expect(mockSet).toHaveBeenCalledWith(el, expect.objectContaining({ background: 'transparent' }))
})
})
})

View file

@ -63,5 +63,22 @@ export function useCardAnimation(
}
}
return { pickup, setDragPosition, snapBack, animateDismiss }
const AURA_COLORS = {
discard: 'rgba(244, 67, 54, 0.25)',
skip: 'rgba(255, 152, 0, 0.25)',
bucket: 'rgba(42, 96, 128, 0.20)',
none: 'transparent',
} as const
function updateAura(zone: 'discard' | 'skip' | null, bucket: string | null) {
if (!cardEl.value) return
const color =
zone === 'discard' ? AURA_COLORS.discard :
zone === 'skip' ? AURA_COLORS.skip :
bucket ? AURA_COLORS.bucket :
AURA_COLORS.none
utils.set(cardEl.value, { background: color })
}
return { pickup, setDragPosition, snapBack, animateDismiss, updateAura }
}