feat: animate completed items out

frontend/src/style.test.ts

@@ -1,6 +1,6 @@
 import { readFileSync } from 'node:fs'
 import { describe, expect, it, vi } from 'vitest'
-import { createCompletionPulse } from './lib/completion-motion'
+import { createCompletionPulse, completionExitDelay, shouldAnimateCompletionExit } from './lib/completion-motion'
 
 const css = readFileSync('src/style.css', 'utf8')
 const app = readFileSync('src/App.vue', 'utf8')
@@ -200,13 +200,28 @@ describe('solid cream material system', () => {
 })
 
 describe('completion feedback motion', () => {
+  it('delays removal only when a completed row will become hidden', () => {
+    expect(shouldAnimateCompletionExit({ completing: true, showCompleted: false })).toBe(true)
+    expect(shouldAnimateCompletionExit({ completing: true, showCompleted: true })).toBe(false)
+    expect(shouldAnimateCompletionExit({ completing: false, showCompleted: false })).toBe(false)
+    expect(completionExitDelay(false)).toBe(320)
+    expect(completionExitDelay(true)).toBe(0)
+  })
+
+  it('keeps completed task and habit rows mounted for the exit motion', () => {
+    expect(app).toContain('completion-exiting')
+    expect(mvpPanel).toContain('completion-exiting')
+    expect(css).toContain('.task-row.completion-exiting,.habit-row.completion-exiting{')
+    expect(css).toContain('@keyframes completion-slide-out')
+  })
+
   it('animates only transient just-completed rows and respects reduced motion', () => {
     expect(css).toContain('.task-row.just-completed,.habit-row.just-completed{animation:completion-row-settle .34s cubic-bezier(.2,.85,.3,1)}')
     expect(css).toContain('.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:completion-check-pop .38s cubic-bezier(.2,1.4,.35,1)}')
     expect(css).not.toContain('.task-row.done,.habit-row.done{animation:')
     expect(css).toContain('@keyframes completion-row-settle')
     expect(css).toContain('@keyframes completion-check-pop')
-    expect(css).toContain('@media(prefers-reduced-motion:reduce){.task-row.just-completed,.habit-row.just-completed,.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:none}}')
+    expect(css).toContain('@media(prefers-reduced-motion:reduce){.task-row.just-completed,.habit-row.just-completed,.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:none}.task-row.completion-exiting,.habit-row.completion-exiting{animation:none}}')
   })
 
   it('syncs the browser IANA timezone before loading user task data', () => {