fix: replay completion motion reliably

frontend/src/App.vue

@@ -8,6 +8,7 @@ import {
 import { buildTaskRrule, defaultTaskDueAt, filterTasks, fromDateTimeLocal, groupTaskTree, moveItemWithinScope, parseTaskRrule, renderMarkdown, toDateTimeLocal, type TaskRepeatConfig } from './lib/task-utils'
 import { isTaskView, nextTotalAfterLocalTaskAdd, readStoredBoolean, readStoredNavigation, shouldToggleRowSwipe, writeCountdownCache, writeStoredBoolean, writeStoredNavigation } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
+import { createCompletionPulse } from './lib/completion-motion'
 import MvpPanel from './MvpPanel.vue'
 import CountdownPanel from './CountdownPanel.vue'
 import FloatingAddButton from './components/FloatingAddButton.vue'
@@ -60,6 +61,10 @@ const totalPages = computed(() => Math.max(1, Math.ceil(totalTasks.value / pageS
 const expandedFolders = ref(new Set<string>())
 const collapsedTaskIds = ref(new Set<string>())
 const justCompletedTaskIds = ref(new Set<string>())
+const markTaskJustCompleted = createCompletionPulse(
+  (id) => { justCompletedTaskIds.value = new Set(justCompletedTaskIds.value).add(id) },
+  (id) => { const next = new Set(justCompletedTaskIds.value); next.delete(id); justCompletedTaskIds.value = next },
+)
 const navigationLoaded = ref(false)
 const taskSwipeStart = ref<{ id: string; x: number; y: number } | null>(null)
 const taskPointerStart = ref<{ id: string; x: number; y: number } | null>(null)
@@ -495,14 +500,6 @@ async function patchTask(task: Task, patch: Partial<Task>) {
   if (selectedTask.value?.id === task.id) selectedTask.value = { ...selectedTask.value, ...updated }
   return updated as Task
 }
-function markTaskJustCompleted(id: string) {
-  justCompletedTaskIds.value = new Set(justCompletedTaskIds.value).add(id)
-  window.setTimeout(() => {
-    const next = new Set(justCompletedTaskIds.value)
-    next.delete(id)
-    justCompletedTaskIds.value = next
-  }, 420)
-}
 async function toggle(task: Task) {
   const completing = !task.completed
   try {