fix: scope completion motion to user actions

frontend/src/MvpPanel.vue

@@ -42,6 +42,7 @@ const habitPointerStart = ref<{ id: string; x: number; y: number } | null>(null)
 const habitSwipeOffsets = ref<Record<string, number>>({})
 const habitReorder = ref<{ id: string; startY: number; offsetY: number } | null>(null)
 const habitReorderTarget = ref('')
+const justCompletedHabitIds = ref(new Set<string>())
 const HIDE_COMPLETED_HABITS_STORAGE_KEY = 'dodo.hide-completed-habits'
 const hideCompletedHabits = ref(readStoredBoolean(window.localStorage, HIDE_COMPLETED_HABITS_STORAGE_KEY, false))
 const todayHabits = computed(() => habits.value.filter((item) => isHabitScheduledToday(item, todayKey.value)))
@@ -209,8 +210,17 @@ function setLocalHabitValue(h: Habit, next: number | boolean) {
       })
 }
 
+function markHabitJustCompleted(id: string) {
+  justCompletedHabitIds.value = new Set(justCompletedHabitIds.value).add(id)
+  window.setTimeout(() => {
+    const next = new Set(justCompletedHabitIds.value)
+    next.delete(id)
+    justCompletedHabitIds.value = next
+  }, 420)
+}
 async function applyHabitSwipe(h: Habit, deltaX: number) {
   const current = logFor(h, todayKey.value)?.value
+  const wasDone = isHabitComplete(h.kind, current, h.target ?? 1)
   const next = deltaX > 0
     ? nextHabitSwipeValue(h.kind, current, h.target ?? 1)
     : previousHabitSwipeValue(h.kind, current)
@@ -218,6 +228,7 @@ async function applyHabitSwipe(h: Habit, deltaX: number) {
   setLocalHabitValue(h, next)
   try {
     await request(`/habits/${h.id}/logs/${todayKey.value}`, { method: 'PUT', body: JSON.stringify({ value: next }) })
+    if (!wasDone && isHabitComplete(h.kind, next, h.target ?? 1)) markHabitJustCompleted(h.id)
     emit('notice', next > Number(previous) ? '已记录一次 🎉' : '已减少一次')
   } catch (e) {
     setLocalHabitValue(h, previous)
@@ -272,11 +283,13 @@ function cancelHabitSwipe(h?: Habit) {
 }
 async function toggleHabitFromButton(h: Habit) {
   const current = logFor(h, todayKey.value)?.value
+  const wasDone = isHabitComplete(h.kind, current, h.target ?? 1)
   const previous = current ?? 0
   const next = habitButtonValue(h.kind, current, h.target ?? 1)
   setLocalHabitValue(h, next)
   try {
     await request(`/habits/${h.id}/logs/${todayKey.value}`, { method: 'PUT', body: JSON.stringify({ value: next }) })
+    if (!wasDone && isHabitComplete(h.kind, next, h.target ?? 1)) markHabitJustCompleted(h.id)
     emit('notice', habitButtonNotice(h.kind, previous, next))
   } catch (e) {
     setLocalHabitValue(h, previous)
@@ -444,7 +457,7 @@ onBeforeUnmount(() => {
       <!-- 今日习惯：只展示“今天该做”的习惯，复用正式习惯行样式 -->
       <div v-if="view === 'today-habits' && (habits.length || !busy)" class="habit-list today-habit-list">
         <div class="habit-toolbar habit-toolbar-today"><label><input v-model="hideCompletedHabits" type="checkbox"> 隐藏已完成</label></div>
-        <article v-for="h in visibleTodayHabits" :key="h.id" :data-habit-id="h.id" class="habit-row today-habit-row swipeable" :class="{ done: isDone(h, todayKey), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64 }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
+        <article v-for="h in visibleTodayHabits" :key="h.id" :data-habit-id="h.id" class="habit-row today-habit-row swipeable" :class="{ done: isDone(h, todayKey), 'just-completed': justCompletedHabitIds.has(h.id), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64 }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
           <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main">
             <span class="habit-name">{{ h.name }}</span>
@@ -470,7 +483,7 @@ onBeforeUnmount(() => {
 
       <!-- 习惯列表支持整行滑动记录。 -->
       <div v-if="view === 'habits'" class="habit-list">
-        <article v-for="h in visibleHabits" :key="h.id" :data-habit-id="h.id" class="habit-row swipeable" :class="{ done: isDone(h, todayKey), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64, reordering: habitReorder?.id === h.id, 'reorder-target': habitReorderTarget === h.id }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px`, '--reorder-y': `${habitReorder?.id === h.id ? habitReorder.offsetY : 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
+        <article v-for="h in visibleHabits" :key="h.id" :data-habit-id="h.id" class="habit-row swipeable" :class="{ done: isDone(h, todayKey), 'just-completed': justCompletedHabitIds.has(h.id), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64, reordering: habitReorder?.id === h.id, 'reorder-target': habitReorderTarget === h.id }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px`, '--reorder-y': `${habitReorder?.id === h.id ? habitReorder.offsetY : 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
           <button class="drag-handle habit-drag-handle" :disabled="hideCompletedHabits" aria-label="上下拖动习惯排序" title="上下拖动排序" @pointerdown.stop="startHabitReorder(h, $event)" @pointermove.stop="moveHabitReorder(h, $event)" @pointerup.stop="finishHabitReorder(h, $event)" @pointercancel.stop="cancelHabitReorder"><GripVertical/></button>
           <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main" role="button" tabindex="0" :aria-label="`查看习惯详情：${h.name}`" @click="openHabitDetail(h, $event.currentTarget as HTMLElement)" @keydown.enter.prevent="openHabitDetail(h, $event.currentTarget as HTMLElement)" @keydown.space.prevent="openHabitDetail(h, $event.currentTarget as HTMLElement)">