@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/task-drag-cache.ts

@@ -3,17 +3,27 @@ import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
 import type { DragCacheSnapshot, TaskSortKeyRepair } from './task-drag-types';
+import { getEffectiveTaskSortKey } from './task-sort-key';
 
 const SORT_KEY_BASE_UNIT = 1_000_000;
 const SORT_KEY_DEFAULT = SORT_KEY_BASE_UNIT * 1000;
 const SORT_KEY_MIN_GAP = 1000;
 
+type SortKeyPlanTask = Pick<
+  Task,
+  | 'id'
+  | 'is_personal_external'
+  | 'is_personal_external_default'
+  | 'personal_sort_key'
+  | 'sort_key'
+>;
+
 function getTaskSortKeyInsertionContext({
   activeTaskId,
   orderedTasks,
 }: {
   activeTaskId: string;
-  orderedTasks: Pick<Task, 'id' | 'sort_key'>[];
+  orderedTasks: SortKeyPlanTask[];
 }) {
   const activeIndex = orderedTasks.findIndex(
     (task) => task.id === activeTaskId
@@ -26,10 +36,15 @@ function getTaskSortKeyInsertionContext({
     };
   }
 
+  const nextTask = orderedTasks[activeIndex + 1];
+  const previousTask = orderedTasks[activeIndex - 1];
+
   return {
     activeIndex,
-    nextSortKey: orderedTasks[activeIndex + 1]?.sort_key ?? null,
-    previousSortKey: orderedTasks[activeIndex - 1]?.sort_key ?? null,
+    nextSortKey: nextTask ? getEffectiveTaskSortKey(nextTask) : null,
+    previousSortKey: previousTask
+      ? getEffectiveTaskSortKey(previousTask)
+      : null,
   };
 }
 
@@ -94,7 +109,7 @@ function getPreviewSortKeyPlan({
   targetListId,
 }: {
   activeTaskId: string;
-  orderedTasks: Pick<Task, 'id' | 'sort_key'>[];
+  orderedTasks: SortKeyPlanTask[];
   targetListId: string;
 }): {
   previewSortKey: number;
@@ -119,10 +134,14 @@ function getPreviewSortKeyPlan({
   });
   const effectiveOrderedTasks = orderedTasks.map((task) => ({
     ...task,
-    sort_key: task.id === activeTaskId ? previewSortKey : task.sort_key,
+    effective_sort_key:
+      task.id === activeTaskId ? previewSortKey : getEffectiveTaskSortKey(task),
   }));
   const orderNeedsRepair = effectiveOrderedTasks.some((task, index) => {
-    if (typeof task.sort_key !== 'number' || !Number.isFinite(task.sort_key)) {
+    if (
+      typeof task.effective_sort_key !== 'number' ||
+      !Number.isFinite(task.effective_sort_key)
+    ) {
       return true;
     }
 
@@ -130,13 +149,16 @@ function getPreviewSortKeyPlan({
     if (!previousTask) return false;
 
     if (
-      typeof previousTask.sort_key !== 'number' ||
-      !Number.isFinite(previousTask.sort_key)
+      typeof previousTask.effective_sort_key !== 'number' ||
+      !Number.isFinite(previousTask.effective_sort_key)
     ) {
       return true;
     }
 
-    return task.sort_key - previousTask.sort_key < SORT_KEY_MIN_GAP;
+    return (
+      task.effective_sort_key - previousTask.effective_sort_key <
+      SORT_KEY_MIN_GAP
+    );
   });
 
   if (
@@ -197,6 +219,9 @@ export function getTaskDropPreviewCacheTasks({
             ...task,
             list_id: targetListId,
             sort_key: previewSortKey,
+            personal_sort_key: task.is_personal_external
+              ? previewSortKey
+              : task.personal_sort_key,
             completed: targetIsCompleted,
             completed_at: targetIsCompleted
               ? (task.completed_at ?? mutationTimestamp)
@@ -210,6 +235,10 @@ export function getTaskDropPreviewCacheTasks({
           ? ({
               ...task,
               sort_key: repairedSortKeysByTaskId.get(task.id) ?? task.sort_key,
+              personal_sort_key: task.is_personal_external
+                ? (repairedSortKeysByTaskId.get(task.id) ??
+                  task.personal_sort_key)
+                : task.personal_sort_key,
               _localMutationAt: localMutationAt,
             } as Task & { _localMutationAt: number })
           : task
@@ -263,6 +292,7 @@ export function applyTaskDropPreviewToCache({
   }
 
   return {
+    localMutationAt,
     previousFullTasks: snapshot.fullTasks,
     previousTasks: snapshot.tasks,
     previewSortKey: previewTasks.previewSortKey,
@@ -270,6 +300,18 @@ export function applyTaskDropPreviewToCache({
   };
 }
 
+export function hasTaskLocalMutationAt(
+  tasks: Task[] | undefined,
+  taskId: string,
+  localMutationAt: number
+) {
+  const task = tasks?.find((item) => item.id === taskId) as
+    | (Task & { _localMutationAt?: unknown })
+    | undefined;
+
+  return task?._localMutationAt === localMutationAt;
+}
+
 export function mergeTaskIntoBoardTaskCache(
   currentTasks: Task[] | undefined,
   nextTask: Task

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/task-drag-order.ts

@@ -1,7 +1,7 @@
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
 import type { DragPreviewPosition, TaskDropPosition } from './task-drag-types';
+import { compareTasksByEffectiveSortKey } from './task-sort-key';
 
 export function getNeighborTaskIds(tasks: Task[], taskId: string) {
   const taskIndex = tasks.findIndex((task) => task.id === taskId);
@@ -142,13 +142,7 @@ export function sortTasksForList({
     }
 
     if (!disableSort) {
-      const sortA = a.sort_key ?? MAX_SAFE_INTEGER_SORT;
-      const sortB = b.sort_key ?? MAX_SAFE_INTEGER_SORT;
-      if (sortA !== sortB) return sortA - sortB;
-      if (!a.created_at || !b.created_at) return 0;
-      return (
-        new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
-      );
+      return compareTasksByEffectiveSortKey(a, b);
     }
 
     return 0;

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/task-sort-key.ts

@@ -0,0 +1,47 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
+
+type SortKeyTask = Pick<
+  Task,
+  | 'is_personal_external'
+  | 'is_personal_external_default'
+  | 'personal_sort_key'
+  | 'sort_key'
+>;
+
+type SortableTask = SortKeyTask & Pick<Task, 'created_at'>;
+
+export function getEffectiveTaskSortKey(task: SortKeyTask) {
+  if (typeof task.sort_key === 'number' && Number.isFinite(task.sort_key)) {
+    return task.sort_key;
+  }
+
+  if (
+    task.is_personal_external === true &&
+    task.is_personal_external_default !== true &&
+    typeof task.personal_sort_key === 'number' &&
+    Number.isFinite(task.personal_sort_key)
+  ) {
+    return task.personal_sort_key;
+  }
+
+  return null;
+}
+
+export function compareTasksByEffectiveSortKey(
+  left: SortableTask,
+  right: SortableTask
+) {
+  const leftSortKey = getEffectiveTaskSortKey(left) ?? MAX_SAFE_INTEGER_SORT;
+  const rightSortKey = getEffectiveTaskSortKey(right) ?? MAX_SAFE_INTEGER_SORT;
+
+  if (leftSortKey !== rightSortKey) {
+    return leftSortKey - rightSortKey;
+  }
+
+  if (!left.created_at || !right.created_at) return 0;
+
+  return (
+    new Date(left.created_at).getTime() - new Date(right.created_at).getTime()
+  );
+}

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.test.ts

@@ -1,13 +1,16 @@
+import { QueryClient } from '@tanstack/react-query';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { describe, expect, it } from 'vitest';
 import {
+  applyTaskDropPreviewToCache,
   getProjectedTaskDropOrderFromPreview,
   getTaskDropEndPreviewFromRects,
   getTaskDropPositionFromRects,
   getTaskDropPreviewCacheTasks,
   getTaskDropPreviewFromRects,
   getTaskInsertionIndex,
+  hasTaskLocalMutationAt,
   insertTaskAtDropPosition,
   mergePersonalPlacementMutationTask,
   mergeTaskIntoBoardTaskCache,
@@ -683,4 +686,64 @@ describe('task drag insertion helpers', () => {
       })
     );
   });
+
+  it('marks optimistic previews so stale drag rollbacks can be skipped', () => {
+    const queryClient = new QueryClient();
+    const boardId = 'board-1';
+    const activeTask = createTask({
+      id: 'task-1',
+      list_id: 'source-list',
+      sort_key: 1_000_000,
+    });
+    const targetTask = createTask({
+      id: 'task-2',
+      list_id: 'target-list',
+      sort_key: 2_000_000,
+    });
+    const snapshot = {
+      fullTasks: [activeTask, targetTask],
+      tasks: [activeTask, targetTask],
+    };
+
+    queryClient.setQueryData(['tasks', boardId], snapshot.tasks);
+    queryClient.setQueryData(['tasks-full', boardId], snapshot.fullTasks);
+
+    const preview = applyTaskDropPreviewToCache({
+      activeTask,
+      boardId,
+      orderedTasks: [targetTask, activeTask],
+      queryClient,
+      snapshot,
+      targetList: createList({ id: 'target-list' }),
+      targetListId: 'target-list',
+    });
+
+    expect(preview?.localMutationAt).toEqual(expect.any(Number));
+    expect(
+      hasTaskLocalMutationAt(
+        queryClient.getQueryData<Task[]>(['tasks', boardId]),
+        activeTask.id,
+        preview?.localMutationAt ?? -1
+      )
+    ).toBe(true);
+
+    queryClient.setQueryData<Task[]>(['tasks', boardId], (currentTasks) =>
+      currentTasks?.map((task) =>
+        task.id === activeTask.id
+          ? ({
+              ...task,
+              _localMutationAt: (preview?.localMutationAt ?? 0) + 1,
+            } as Task & { _localMutationAt: number })
+          : task
+      )
+    );
+
+    expect(
+      hasTaskLocalMutationAt(
+        queryClient.getQueryData<Task[]>(['tasks', boardId]),
+        activeTask.id,
+        preview?.localMutationAt ?? -1
+      )
+    ).toBe(false);
+  });
 });

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.ts

@@ -22,12 +22,14 @@ import {
 import { hasDraggableData } from '@tuturuuu/utils/task-helpers';
 import { useCallback, useRef, useState } from 'react';
 import { useBoardBroadcast } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
 import { useAutoScroll } from './auto-scroll';
 import { getColumnReorderUpdates } from './column-reorder';
 import { calculateSortKeyWithRetry as createCalculateSortKeyWithRetry } from './kanban-sort-helpers';
 import {
   applyTaskDropPreviewToCache,
+  hasTaskLocalMutationAt,
   mergePersonalPlacementMutationTask,
   setBoardTaskCache,
 } from './task-drag-cache';
@@ -61,10 +63,15 @@ import type {
   TaskRect,
   VerticalRect,
 } from './task-drag-types';
+import {
+  compareTasksByEffectiveSortKey,
+  getEffectiveTaskSortKey,
+} from './task-sort-key';
 
 export {
   applyTaskDropPreviewToCache,
   getTaskDropPreviewCacheTasks,
+  hasTaskLocalMutationAt,
   mergePersonalPlacementMutationTask,
   mergeTaskIntoBoardTaskCache,
 } from './task-drag-cache';
@@ -504,6 +511,16 @@ export function useKanbanDnd({
           queryClient.setQueryData<Task[]>(queryKey, (currentTasks) => {
             if (!currentTasks) return previousCache;
 
+            if (
+              !hasTaskLocalMutationAt(
+                currentTasks,
+                task.id,
+                nextTask._localMutationAt
+              )
+            ) {
+              return currentTasks;
+            }
+
             if (!previousTaskValue) {
               return currentTasks.filter((item) => item.id !== task.id);
             }
@@ -1079,17 +1096,43 @@ export function useKanbanDnd({
         if (!boardId || !optimisticDropPreview) return;
 
         if (optimisticDropPreview.previousTasks) {
-          queryClient.setQueryData(
-            ['tasks', boardId],
-            optimisticDropPreview.previousTasks
-          );
+          const currentTasks = queryClient.getQueryData<Task[]>([
+            'tasks',
+            boardId,
+          ]);
+
+          if (
+            hasTaskLocalMutationAt(
+              currentTasks,
+              activeTaskForDrop.id,
+              optimisticDropPreview.localMutationAt
+            )
+          ) {
+            queryClient.setQueryData(
+              ['tasks', boardId],
+              optimisticDropPreview.previousTasks
+            );
+          }
         }
 
         if (optimisticDropPreview.previousFullTasks) {
-          queryClient.setQueryData(
-            ['tasks-full', boardId],
-            optimisticDropPreview.previousFullTasks
-          );
+          const currentFullTasks = queryClient.getQueryData<Task[]>([
+            'tasks-full',
+            boardId,
+          ]);
+
+          if (
+            hasTaskLocalMutationAt(
+              currentFullTasks,
+              activeTaskForDrop.id,
+              optimisticDropPreview.localMutationAt
+            )
+          ) {
+            queryClient.setQueryData(
+              ['tasks-full', boardId],
+              optimisticDropPreview.previousFullTasks
+            );
+          }
         }
       };
 
@@ -1124,14 +1167,14 @@ export function useKanbanDnd({
             const nextTask = projectedDropOrder[1];
             newSortKey = await calculateSortKeyWithRetry(
               null,
-              nextTask?.sort_key ?? null,
+              nextTask ? getEffectiveTaskSortKey(nextTask) : null,
               targetListId,
               projectedDropOrder
             );
           } else if (newIndex === projectedDropOrder.length - 1) {
             const prevTask = projectedDropOrder[projectedDropOrder.length - 2];
             newSortKey = await calculateSortKeyWithRetry(
-              prevTask?.sort_key ?? null,
+              prevTask ? getEffectiveTaskSortKey(prevTask) : null,
               null,
               targetListId,
               projectedDropOrder
@@ -1140,8 +1183,8 @@ export function useKanbanDnd({
             const prevTask = projectedDropOrder[newIndex - 1];
             const nextTask = projectedDropOrder[newIndex + 1];
             newSortKey = await calculateSortKeyWithRetry(
-              prevTask?.sort_key ?? null,
-              nextTask?.sort_key ?? null,
+              prevTask ? getEffectiveTaskSortKey(prevTask) : null,
+              nextTask ? getEffectiveTaskSortKey(nextTask) : null,
               targetListId,
               projectedDropOrder
             );
@@ -1157,7 +1200,8 @@ export function useKanbanDnd({
       const needsUpdate =
         dropChangesVisualOrder ||
         (newSortKey !== null &&
-          (activeTaskForDrop.sort_key ?? MAX_SAFE_INTEGER_SORT) !== newSortKey);
+          (getEffectiveTaskSortKey(activeTaskForDrop) ??
+            MAX_SAFE_INTEGER_SORT) !== newSortKey);
 
       let shouldPreservePendingAfterDragReset = false;
       const persistPersonalPlacementMove = (
@@ -1173,6 +1217,19 @@ export function useKanbanDnd({
         shouldPreservePendingAfterDragReset = true;
 
         void movePersonalPlacementTask(task, targetListId, sortKey, order)
+          .then((updatedTask) => {
+            broadcast?.('task:upsert', {
+              task: {
+                id: updatedTask.id,
+                list_id: updatedTask.list_id,
+                sort_key: updatedTask.sort_key,
+                personal_sort_key: updatedTask.personal_sort_key,
+                completed_at: updatedTask.completed_at,
+                closed_at: updatedTask.closed_at,
+              },
+            });
+            void invalidateKanbanDeadlineTasks(queryClient, boardId);
+          })
           .catch((error) => {
             console.error('Failed to update personal task placement:', error);
             rollbackOptimisticDropPreview();
@@ -1193,16 +1250,9 @@ export function useKanbanDnd({
             .map((taskId) => baseTasks.find((t) => t.id === taskId))
             .filter((t): t is Task => t !== undefined);
 
-          const sortedTasksToMove = selectedTaskObjects.sort((a, b) => {
-            const sortA = a.sort_key ?? MAX_SAFE_INTEGER_SORT;
-            const sortB = b.sort_key ?? MAX_SAFE_INTEGER_SORT;
-            if (sortA !== sortB) return sortA - sortB;
-            if (!a.created_at || !b.created_at) return 0;
-            return (
-              new Date(a.created_at).getTime() -
-              new Date(b.created_at).getTime()
-            );
-          });
+          const sortedTasksToMove = selectedTaskObjects.sort(
+            compareTasksByEffectiveSortKey
+          );
 
           if (
             targetIsExternalStaging &&
@@ -1268,7 +1318,7 @@ export function useKanbanDnd({
                 const nextTask = simulatedTargetList[1];
                 batchSortKey = await calculateSortKeyWithRetry(
                   null,
-                  nextTask?.sort_key ?? null,
+                  nextTask ? getEffectiveTaskSortKey(nextTask) : null,
                   targetListId,
                   targetListTasks
                 );
@@ -1278,7 +1328,7 @@ export function useKanbanDnd({
               ) {
                 const prevTask = simulatedTargetList[positionInSimulated - 1];
                 batchSortKey = await calculateSortKeyWithRetry(
-                  prevTask?.sort_key ?? null,
+                  prevTask ? getEffectiveTaskSortKey(prevTask) : null,
                   null,
                   targetListId,
                   targetListTasks
@@ -1296,8 +1346,8 @@ export function useKanbanDnd({
 
                 if (!prevIsMoving && !nextIsMoving) {
                   batchSortKey = await calculateSortKeyWithRetry(
-                    prevTask?.sort_key ?? null,
-                    nextTask?.sort_key ?? null,
+                    prevTask ? getEffectiveTaskSortKey(prevTask) : null,
+                    nextTask ? getEffectiveTaskSortKey(nextTask) : null,
                     targetListId,
                     targetListTasks
                   );
@@ -1311,8 +1361,10 @@ export function useKanbanDnd({
                     }
                   }
                   batchSortKey = await calculateSortKeyWithRetry(
-                    stationaryPrev?.sort_key ?? null,
-                    nextTask?.sort_key ?? null,
+                    stationaryPrev
+                      ? getEffectiveTaskSortKey(stationaryPrev)
+                      : null,
+                    nextTask ? getEffectiveTaskSortKey(nextTask) : null,
                     targetListId,
                     targetListTasks
                   );
@@ -1330,8 +1382,10 @@ export function useKanbanDnd({
                     }
                   }
                   batchSortKey = await calculateSortKeyWithRetry(
-                    prevTask?.sort_key ?? null,
-                    stationaryNext?.sort_key ?? null,
+                    prevTask ? getEffectiveTaskSortKey(prevTask) : null,
+                    stationaryNext
+                      ? getEffectiveTaskSortKey(stationaryNext)
+                      : null,
                     targetListId,
                     targetListTasks
                   );
@@ -1360,8 +1414,8 @@ export function useKanbanDnd({
                   }
 
                   batchSortKey = await calculateSortKeyWithRetry(
-                    boundaryPrev?.sort_key ?? null,
-                    boundaryNext?.sort_key ?? null,
+                    boundaryPrev ? getEffectiveTaskSortKey(boundaryPrev) : null,
+                    boundaryNext ? getEffectiveTaskSortKey(boundaryNext) : null,
                     targetListId,
                     targetListTasks
                   );
@@ -1392,6 +1446,7 @@ export function useKanbanDnd({
                           closed_at: updatedTask.closed_at,
                         },
                       });
+                      void invalidateKanbanDeadlineTasks(queryClient, boardId);
                     },
                     onSettled: () => {
                       clearPendingTaskIds(pendingTaskIds);
@@ -1437,14 +1492,45 @@ export function useKanbanDnd({
                   closed_at: updatedTask.closed_at,
                 },
               });
+              void invalidateKanbanDeadlineTasks(queryClient, boardId);
             };
 
             if (repairedTaskSortKeys.length > 0) {
               void (async () => {
                 try {
+                  const repairTaskById = new Map<string, Task>();
+                  for (const task of [
+                    ...baseTasks,
+                    ...(optimisticDropPreview?.previousTasks ?? []),
+                    ...(optimisticDropPreview?.previousFullTasks ?? []),
+                  ]) {
+                    repairTaskById.set(task.id, task);
+                  }
+
                   const results = await Promise.allSettled(
-                    repairedTaskSortKeys.map((repair) =>
-                      reorderTaskMutation.mutateAsync(
+                    repairedTaskSortKeys.map(async (repair) => {
+                      const repairTask = repairTaskById.get(repair.taskId);
+
+                      if (repairTask && usesPersonalPlacement(repairTask)) {
+                        const updatedTask = await movePersonalPlacementTask(
+                          repairTask,
+                          repair.listId,
+                          repair.sortKey
+                        );
+                        broadcast?.('task:upsert', {
+                          task: {
+                            id: updatedTask.id,
+                            list_id: updatedTask.list_id,
+                            sort_key: updatedTask.sort_key,
+                            personal_sort_key: updatedTask.personal_sort_key,
+                            completed_at: updatedTask.completed_at,
+                            closed_at: updatedTask.closed_at,
+                          },
+                        });
+                        return updatedTask;
+                      }
+
+                      return reorderTaskMutation.mutateAsync(
                         {
                           taskId: repair.taskId,
                           newListId: repair.listId,
@@ -1457,14 +1543,17 @@ export function useKanbanDnd({
                         {
                           onSuccess: handleReorderSuccess,
                         }
-                      )
-                    )
+                      );
+                    })
                   );
                   const failedResults = results.filter(
                     (result) => result.status === 'rejected'
                   );
 
-                  if (failedResults.length === 0) return;
+                  if (failedResults.length === 0) {
+                    void invalidateKanbanDeadlineTasks(queryClient, boardId);
+                    return;
+                  }
 
                   console.error(
                     'Failed to persist repaired task sort keys:',