feat: add task and habit reordering

frontend/src/App.vue

@@ -5,7 +5,7 @@ import {
   GripVertical, Inbox, ListChecks, ListTodo, Menu, Pencil, Plus, Search,
   Settings, Trash2, X, Repeat2,
 } from 'lucide-vue-next'
-import { filterTasks, fromDateTimeLocal, groupTaskTree, renderMarkdown, toDateTimeLocal } from './lib/task-utils'
+import { filterTasks, fromDateTimeLocal, groupTaskTree, moveItemWithinScope, renderMarkdown, toDateTimeLocal } from './lib/task-utils'
 import { defaultView, isTaskView, nextTotalAfterLocalTaskAdd, quickTaskFields, shouldToggleRowSwipe, writeCountdownCache } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
 import MvpPanel from './MvpPanel.vue'
@@ -50,6 +50,8 @@ 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)
 const taskSwipeOffsets = ref<Record<string, number>>({})
+const taskReorder = ref<{ id: string; startY: number } | null>(null)
+const taskReorderTarget = ref('')
 const taskComposeOpen = ref(false)
 const composeTitle = ref('')
 const composeListId = ref('')
@@ -336,6 +338,61 @@ async function toggle(task: Task) {
 function isInteractiveTarget(target: EventTarget | null) {
   return target instanceof Element && Boolean(target.closest('button,input,select,textarea,a,label'))
 }
+function startTaskReorder(task: Task, event: PointerEvent) {
+  if (activeView.value === 'trash' || loading.value || query.value || totalPages.value > 1) return
+  taskReorder.value = { id: task.id, startY: event.clientY }
+  taskReorderTarget.value = task.id
+  try { (event.currentTarget as Element).setPointerCapture(event.pointerId) } catch { /* synthetic events */ }
+}
+function taskById(id: string) {
+  return tasks.value.find((item) => item.id === id)
+    ?? tasks.value.flatMap((item) => item.subtasks ?? []).find((item) => item.id === id)
+}
+function moveTaskReorder(task: Task, event: PointerEvent) {
+  if (taskReorder.value?.id !== task.id) return
+  const row = document.elementFromPoint(event.clientX, event.clientY)?.closest<HTMLElement>('[data-task-id]')
+  if (row?.dataset.taskId) taskReorderTarget.value = row.dataset.taskId
+}
+async function finishTaskReorder(task: Task, event: PointerEvent) {
+  const drag = taskReorder.value
+  const targetId = taskReorderTarget.value
+  taskReorder.value = null
+  taskReorderTarget.value = ''
+  if (!drag || drag.id !== task.id || !targetId || targetId === task.id) return
+  const target = taskById(targetId)
+  if (!target || (target.parent_id ?? null) !== (task.parent_id ?? null)) return
+  const placement = event.clientY >= drag.startY ? 'after' : 'before'
+  const previous = tasks.value
+  const previousSelected = selectedTask.value
+  let ids: string[]
+  if (task.parent_id) {
+    const parent = tasks.value.find((item) => item.id === task.parent_id)
+    if (!parent) return
+    const reordered = moveItemWithinScope(parent.subtasks ?? [], task.id, targetId, placement)
+    if (reordered === parent.subtasks) return
+    tasks.value = tasks.value.map((item) => item.id === parent.id ? { ...item, subtasks: reordered } : item)
+    if (selectedTask.value?.id === parent.id) selectedTask.value = { ...selectedTask.value, subtasks: reordered }
+    ids = reordered.map((item) => item.id)
+  } else {
+    const next = moveItemWithinScope(previous, task.id, targetId, placement)
+    if (next === previous) return
+    tasks.value = next
+    ids = next.map((item) => item.id)
+  }
+  try {
+    await api('/tasks/reorder', { method: 'PUT', body: JSON.stringify({ task_ids: ids }) })
+    toast('顺序已保存')
+  } catch (reason) {
+    tasks.value = previous
+    selectedTask.value = previousSelected
+    fail(reason)
+  }
+}
+function cancelTaskReorder() {
+  taskReorder.value = null
+  taskReorderTarget.value = ''
+}
+
 function startTaskSwipe(task: Task, event: TouchEvent) {
   if (activeView.value === 'trash' || loading.value || isInteractiveTarget(event.target)) return
   const touch = event.touches[0]
@@ -554,7 +611,8 @@ onMounted(bootstrap)
       <div v-if="activeView!=='trash' && totalPages > 1" class="pager"><button class="secondary" :disabled="page<=1 || loading" @click="previousPage">上一页</button><span>{{page}} / {{totalPages}}</span><button class="secondary" :disabled="page>=totalPages || loading" @click="nextPage">下一页</button></div>
       <section class="task-list" :class="{loading}">
         <template v-for="node in taskTree" :key="node.task.id">
-          <article class="task-row swipeable" :class="{done:node.task.completed,selected:selectedTask?.id===node.task.id,ready:Math.abs(taskSwipeOffsets[node.task.id] ?? 0) >= 64}" :style="{ '--swipe-x': `${taskSwipeOffsets[node.task.id] ?? 0}px` }" @pointerdown="startTaskPointer(node.task, $event)" @pointermove="moveTaskPointer(node.task, $event)" @pointerup="finishTaskPointer(node.task, $event)" @pointercancel="cancelTaskPointer(node.task)" @touchstart.passive="startTaskSwipe(node.task, $event)" @touchmove.passive="moveTaskSwipe(node.task, $event)" @touchend="finishTaskSwipe(node.task, $event)" @touchcancel="cancelTaskSwipe(node.task)">
+          <article :data-task-id="node.task.id" class="task-row swipeable" :class="{done:node.task.completed,selected:selectedTask?.id===node.task.id,ready:Math.abs(taskSwipeOffsets[node.task.id] ?? 0) >= 64,reordering:taskReorder?.id===node.task.id,'reorder-target':taskReorderTarget===node.task.id}" :style="{ '--swipe-x': `${taskSwipeOffsets[node.task.id] ?? 0}px` }" @pointerdown="startTaskPointer(node.task, $event)" @pointermove="moveTaskPointer(node.task, $event)" @pointerup="finishTaskPointer(node.task, $event)" @pointercancel="cancelTaskPointer(node.task)" @touchstart.passive="startTaskSwipe(node.task, $event)" @touchmove.passive="moveTaskSwipe(node.task, $event)" @touchend="finishTaskSwipe(node.task, $event)" @touchcancel="cancelTaskSwipe(node.task)">
+            <button v-if="activeView!=='trash'" class="drag-handle task-drag-handle" :disabled="Boolean(query) || totalPages > 1" aria-label="上下拖动任务排序" title="上下拖动排序" @pointerdown.stop="startTaskReorder(node.task, $event)" @pointermove.stop="moveTaskReorder(node.task, $event)" @pointerup.stop="finishTaskReorder(node.task, $event)" @pointercancel.stop="cancelTaskReorder"><GripVertical/></button>
             <button v-if="activeView!=='trash'" class="task-check" :aria-label="node.task.completed ? `重新打开${node.task.title}` : `完成${node.task.title}`" :aria-pressed="node.task.completed" @click.stop="toggle(node.task)"><span class="task-check-mark" :class="`p${node.task.priority}`"><Check v-if="node.task.completed" /></span></button>
             <div class="task-main" role="button" tabindex="0" @click="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)" @keydown.enter="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)" @keydown.space.prevent="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)"><strong>{{node.task.title}}</strong><span class="meta"><span v-if="node.task.due_at"><CalendarDays/>{{formatDue(node.task.due_at)}}</span><span v-if="node.subtasks.length"><ListChecks/>{{node.subtasks.filter(t=>t.completed).length}}/{{node.subtasks.length}}</span></span></div>
             <span v-if="node.task.priority" class="priority" :class="`p${node.task.priority}`">{{['','低','中','高'][node.task.priority]}}</span>
@@ -562,7 +620,7 @@ onMounted(bootstrap)
             <button v-else class="icon ghost" aria-label="删除任务" @click.stop="removeTask(node.task)"><Trash2/></button>
             <button v-if="activeView==='trash'" class="icon danger ghost" aria-label="永久删除" @click.stop="purgeTask(node.task)"><X/></button>
           </article>
-          <article v-for="subtask in node.subtasks" :key="subtask.id" class="task-row subtask swipeable" :class="{done:subtask.completed,ready:Math.abs(taskSwipeOffsets[subtask.id] ?? 0) >= 64}" :style="{ '--swipe-x': `${taskSwipeOffsets[subtask.id] ?? 0}px` }" @pointerdown="startTaskPointer(subtask, $event)" @pointermove="moveTaskPointer(subtask, $event)" @pointerup="finishTaskPointer(subtask, $event)" @pointercancel="cancelTaskPointer(subtask)" @touchstart.passive="startTaskSwipe(subtask, $event)" @touchmove.passive="moveTaskSwipe(subtask, $event)" @touchend="finishTaskSwipe(subtask, $event)" @touchcancel="cancelTaskSwipe(subtask)"><GripVertical/><button class="task-check" :aria-label="subtask.completed ? `重新打开${subtask.title}` : `完成${subtask.title}`" :aria-pressed="subtask.completed" @click.stop="toggle(subtask)"><span class="task-check-mark" :class="`p${subtask.priority}`"><Check v-if="subtask.completed" /></span></button><div class="task-main" role="button" tabindex="0" @click="selectTaskUnlessSwiped(subtask)" @keydown.enter="selectTaskUnlessSwiped(subtask)" @keydown.space.prevent="selectTaskUnlessSwiped(subtask)"><strong>{{subtask.title}}</strong></div></article>
+          <article v-for="subtask in node.subtasks" :key="subtask.id" :data-task-id="subtask.id" class="task-row subtask swipeable" :class="{done:subtask.completed,ready:Math.abs(taskSwipeOffsets[subtask.id] ?? 0) >= 64,reordering:taskReorder?.id===subtask.id,'reorder-target':taskReorderTarget===subtask.id}" :style="{ '--swipe-x': `${taskSwipeOffsets[subtask.id] ?? 0}px` }" @pointerdown="startTaskPointer(subtask, $event)" @pointermove="moveTaskPointer(subtask, $event)" @pointerup="finishTaskPointer(subtask, $event)" @pointercancel="cancelTaskPointer(subtask)" @touchstart.passive="startTaskSwipe(subtask, $event)" @touchmove.passive="moveTaskSwipe(subtask, $event)" @touchend="finishTaskSwipe(subtask, $event)" @touchcancel="cancelTaskSwipe(subtask)"><button class="drag-handle task-drag-handle" aria-label="上下拖动子任务排序" title="上下拖动排序" @pointerdown.stop="startTaskReorder(subtask, $event)" @pointermove.stop="moveTaskReorder(subtask, $event)" @pointerup.stop="finishTaskReorder(subtask, $event)" @pointercancel.stop="cancelTaskReorder"><GripVertical/></button><button class="task-check" :aria-label="subtask.completed ? `重新打开${subtask.title}` : `完成${subtask.title}`" :aria-pressed="subtask.completed" @click.stop="toggle(subtask)"><span class="task-check-mark" :class="`p${subtask.priority}`"><Check v-if="subtask.completed" /></span></button><div class="task-main" role="button" tabindex="0" @click="selectTaskUnlessSwiped(subtask)" @keydown.enter="selectTaskUnlessSwiped(subtask)" @keydown.space.prevent="selectTaskUnlessSwiped(subtask)"><strong>{{subtask.title}}</strong></div></article>
         </template>
         <div v-if="!visibleTasks.length&&!loading" class="empty"><ListTodo/><b>{{query?'没有匹配的任务':'这里还很安静'}}</b><span>{{query?'换个关键词试试':'写下第一件想完成的小事吧'}}</span><button v-if="activeView==='today' && !query" class="soft-button empty-action" @click="openTaskCompose"><Plus/>添加今天任务</button></div>
       </section>