fix: move task pagination below list

frontend/src/App.vue

@@ -56,6 +56,7 @@ let purgeListTrigger: HTMLElement | null = null
 const tasks = ref<Task[]>([])
 const overdueTasks = ref<Task[]>([])
 const trash = ref<Task[]>([])
+const taskListElement = ref<HTMLElement | null>(null)
 const NAVIGATION_STORAGE_KEY = 'dodo.navigation'
 const restoredNavigation = readStoredNavigation(window.localStorage, NAVIGATION_STORAGE_KEY)
 const activeList = ref(restoredNavigation.listId)
@@ -724,7 +725,7 @@ async function loadTrashPage() {
 async function loadTrash() {
   loading.value = true
   error.value = ''
-  return await runLatestRequest('trash', loadTrashPage, {
+  const committed = await runLatestRequest('trash', loadTrashPage, {
     success: (data) => {
       trash.value = data.items ?? []
       totalTasks.value = data.total ?? trash.value.length
@@ -732,6 +733,11 @@ async function loadTrash() {
     error: fail,
     finally: () => { loading.value = false },
   })
+  if (committed && page.value > totalPages.value) {
+    page.value = totalPages.value
+    return await loadTrash()
+  }
+  return committed
 }
 async function switchView(view: View, listId?: string) {
   if (activeView.value === 'memos' && view !== 'memos' && memoPanel.value?.dirty && !(await confirmAction('有未保存的更改', '确定离开当前备忘录吗？'))) return
@@ -1535,15 +1541,23 @@ function moveListWithinScope(item: TaskList, direction: 'up' | 'down') {
   void persistListMove(item, item.folder_id, move.targetId, move.placement)
   closeSidebarAction()
 }
-function previousPage() {
+async function scrollToTaskPageStart() {
+  await nextTick()
+  taskListElement.value?.scrollIntoView({ block: 'start' })
+}
+async function previousPage() {
   if (page.value <= 1 || loading.value) return
   page.value -= 1
-  activeView.value === 'trash' ? loadTrash() : isTaskView(activeView.value) ? loadAll() : undefined
+  if (activeView.value === 'trash') await loadTrash()
+  else if (isTaskView(activeView.value)) await loadAll()
+  await scrollToTaskPageStart()
 }
-function nextPage() {
+async function nextPage() {
   if (page.value >= totalPages.value || loading.value) return
   page.value += 1
-  activeView.value === 'trash' ? loadTrash() : isTaskView(activeView.value) ? loadAll() : undefined
+  if (activeView.value === 'trash') await loadTrash()
+  else if (isTaskView(activeView.value)) await loadAll()
+  await scrollToTaskPageStart()
 }
 
 function reconcileDesktopPaneWidths() {
@@ -1718,10 +1732,8 @@ onUnmounted(() => {
           <button id="today-tasks-heading" class="today-section-toggle today-section-anchor" type="button" :aria-expanded="!todaySectionCollapse.tasks" aria-controls="today-tasks" @click="toggleTodaySection('tasks')"><span class="today-section-title">今天</span><span class="today-section-summary">{{totalTasks}}</span><span class="today-section-chevron" aria-hidden="true">{{ todaySectionCollapse.tasks ? '›' : '⌄' }}</span></button>
         </template>
         <div v-if="activeView==='tasks' || activeView==='upcoming'" id="task-list-heading" class="list-section-heading"><span id="task-list-title" class="list-section-title">任务</span><span class="list-section-count">{{ totalTasks }}</span><button v-if="activeView==='tasks' && taskReorderAvailable" class="list-section-action" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></div>
-      <div v-if="activeView==='trash'" class="list-toolbar"><span v-if="activeView==='trash' || totalPages > 1 || totalTasks > 0">{{ totalPages > 1 ? `第 ${page} / ${totalPages} 页 · ` : '' }}共 {{totalTasks}} 项</span><span class="list-toolbar-actions"><button v-if="taskReorderAvailable" class="soft-button reorder-mode-toggle task-reorder-toggle" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></span></div>
-      <div v-if="activeView==='tasks' && totalPages > 1" class="list-page-meta"><span>第 {{ page }} / {{ totalPages }} 页 · 共 {{ totalTasks }} 项</span></div>
-      <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 :id="activeView==='today' ? 'today-tasks' : undefined" class="task-list plain-list" :class="{loading}" v-show="activeView!=='today' || !todaySectionCollapse.tasks" :role="activeView==='today' ? 'region' : undefined" :aria-labelledby="activeView==='today' ? 'today-tasks-heading' : (activeView==='tasks' || activeView==='upcoming') ? 'task-list-title' : undefined">
+      <div v-if="activeView==='trash'" class="list-toolbar"><span v-if="activeView==='trash' || totalPages > 1 || totalTasks > 0">共 {{totalTasks}} 项</span><span class="list-toolbar-actions"><button v-if="taskReorderAvailable" class="soft-button reorder-mode-toggle task-reorder-toggle" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></span></div>
+      <section :id="activeView==='today' ? 'today-tasks' : undefined" class="task-list plain-list" :class="{loading}" v-show="activeView!=='today' || !todaySectionCollapse.tasks" :role="activeView==='today' ? 'region' : undefined" :aria-labelledby="activeView==='today' ? 'today-tasks-heading' : (activeView==='tasks' || activeView==='upcoming') ? 'task-list-title' : undefined" ref="taskListElement">
         <template v-for="node in taskTree" :key="node.task.id">
           <article :data-task-id="node.task.id" class="task-row swipeable" :class="{done:node.task.completed,'task-row--trash':activeView==='trash','just-completed': justCompletedTaskIds.has(node.task.id),'completion-exiting':completionExitingTaskIds.has(node.task.id),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`, '--reorder-y': `${taskReorder?.id === node.task.id ? taskReorder.offsetY : 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="taskReorderMode" class="drag-handle task-drag-handle" :disabled="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>
@@ -1733,6 +1745,8 @@ onUnmounted(() => {
         <div v-if="activeView==='today' && hiddenCompletedTaskCount > 0 && !visibleTasks.length && !loading" class="today-filtered-empty-note"><span>已隐藏已完成任务</span><button type="button" class="link" @click="showCompleted=true">显示</button></div>
         <div v-else-if="!visibleTasks.length&&!loading" class="empty"><ListTodo/><b>{{ hiddenCompletedTaskCount > 0 ? '已完成任务已隐藏' : '这里还很安静' }}</b><span>{{hiddenCompletedTaskCount > 0 ? '开启“显示已完成”即可查看。':'写下第一件想完成的小事吧'}}</span></div>
       </section>
+      <div v-if="activeView==='tasks' && totalPages > 1" class="list-page-meta" aria-live="polite"><span>第 {{ page }} / {{ totalPages }} 页 · 共 {{ totalTasks }} 项</span></div>
+      <div v-if="totalPages > 1 && (activeView!=='today' || !todaySectionCollapse.tasks)" class="pager"><button class="secondary" :disabled="page<=1 || loading" @click="previousPage">上一页</button><span aria-live="polite">{{page}} / {{totalPages}}</span><button class="secondary" :disabled="page>=totalPages || loading" @click="nextPage">下一页</button></div>
       <div v-if="activeView==='today'" class="today-habits-section today-section-anchor">
         <button id="today-habits-heading" class="today-section-toggle" type="button" :aria-expanded="!todaySectionCollapse.habits" aria-controls="today-habits" @click="toggleTodaySection('habits')"><span class="today-section-title">习惯</span><span class="today-section-summary">{{todayHabitTotal}}</span><span class="today-section-chevron" aria-hidden="true">{{ todaySectionCollapse.habits ? '›' : '⌄' }}</span></button>
         <div v-show="!todaySectionCollapse.habits" id="today-habits" role="region" aria-labelledby="today-habits-heading">