@tuturuuu/ui 0.12.0 → 0.14.0

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

@@ -1,86 +1,160 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import type {
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+} from '@dnd-kit/core';
+import { useCallback, useEffect, useRef } from 'react';
+
+export const KANBAN_EDGE_AUTO_SCROLL_THRESHOLD = 100;
+const KANBAN_EDGE_AUTO_SCROLL_SPEED = 10;
+const KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED = 30;
+
+type KanbanDragAutoScrollEvent = DragMoveEvent | DragOverEvent | DragStartEvent;
+
+interface HorizontalRect {
+  left: number;
+  right: number;
+}
+
+function getTouchListClientX(touches: unknown) {
+  if (!touches || typeof touches !== 'object') return null;
+
+  const list = touches as ArrayLike<{ clientX?: unknown }> & {
+    item?: (index: number) => { clientX?: unknown } | null;
+  };
+  const touch = list.item?.(0) ?? list[0];
+
+  return typeof touch?.clientX === 'number' ? touch.clientX : null;
+}
+
+function getPointerEventClientX(event: Event) {
+  if ('clientX' in event && typeof event.clientX === 'number') {
+    return event.clientX;
+  }
+
+  if ('touches' in event) {
+    const touchX = getTouchListClientX(event.touches);
+    if (touchX !== null) return touchX;
+  }
+
+  if ('changedTouches' in event) {
+    return getTouchListClientX(event.changedTouches);
+  }
+
+  return null;
+}
+
+function getDragEventDeltaX(event: KanbanDragAutoScrollEvent) {
+  return 'delta' in event && typeof event.delta?.x === 'number'
+    ? event.delta.x
+    : 0;
+}
+
+function getDragActiveCenterX(event: KanbanDragAutoScrollEvent) {
+  const activeRect =
+    event.active.rect.current.translated ?? event.active.rect.current.initial;
+
+  return activeRect ? activeRect.left + activeRect.width / 2 : null;
+}
+
+export function getKanbanDragAutoScrollPointerX(
+  event: KanbanDragAutoScrollEvent
+) {
+  const pointerStartX = getPointerEventClientX(event.activatorEvent);
+
+  if (pointerStartX !== null) {
+    return pointerStartX + getDragEventDeltaX(event);
+  }
+
+  return getDragActiveCenterX(event);
+}
+
+export function getKanbanEdgeAutoScrollAmount(
+  pointerX: number | null,
+  rect: HorizontalRect,
+  options: {
+    maxSpeed?: number;
+    speed?: number;
+    threshold?: number;
+  } = {}
+) {
+  if (pointerX === null) return 0;
+
+  const threshold = options.threshold ?? KANBAN_EDGE_AUTO_SCROLL_THRESHOLD;
+  const speed = options.speed ?? KANBAN_EDGE_AUTO_SCROLL_SPEED;
+  const maxSpeed = options.maxSpeed ?? KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED;
+
+  if (pointerX <= rect.left + threshold) {
+    const distanceFromLeft = Math.max(0, pointerX - rect.left);
+    const intensity = 1 - distanceFromLeft / threshold;
+    return -Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  if (pointerX >= rect.right - threshold) {
+    const distanceFromRight = Math.max(0, rect.right - pointerX);
+    const intensity = 1 - distanceFromRight / threshold;
+    return Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  return 0;
+}
 
 export function useAutoScroll(
-  isDraggingRef: React.MutableRefObject<boolean>,
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 ) {
   const autoScrollRafRef = useRef<number | null>(null);
+  const isAutoScrollActiveRef = useRef(false);
+  const pointerXRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    const EDGE_THRESHOLD = 100; // Distance from edge to trigger scroll (px)
-    const SCROLL_SPEED = 10; // Base scroll speed (px per frame)
-    const MAX_SCROLL_SPEED = 30; // Maximum scroll speed (px per frame)
+  const stopAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = false;
+    pointerXRef.current = null;
 
-    let currentPointerX = 0;
+    if (autoScrollRafRef.current !== null) {
+      cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
+    }
+  }, []);
+
+  const autoScroll = useCallback(() => {
+    if (!isAutoScrollActiveRef.current || !scrollContainerRef.current) {
+      autoScrollRafRef.current = null;
+      return;
+    }
+
+    const container = scrollContainerRef.current;
+    const scrollAmount = getKanbanEdgeAutoScrollAmount(
+      pointerXRef.current,
+      container.getBoundingClientRect()
+    );
 
-    function handlePointerMove(event: PointerEvent) {
-      currentPointerX = event.clientX;
+    if (scrollAmount !== 0) {
+      container.scrollLeft += scrollAmount;
     }
 
-    function autoScroll() {
-      if (!isDraggingRef.current || !scrollContainerRef.current) {
-        autoScrollRafRef.current = null;
-        return;
-      }
-
-      const container = scrollContainerRef.current;
-      const rect = container.getBoundingClientRect();
-
-      // Calculate distance from edges
-      const distanceFromLeft = currentPointerX - rect.left;
-      const distanceFromRight = rect.right - currentPointerX;
-
-      let scrollAmount = 0;
-
-      // Scroll left when near left edge
-      if (distanceFromLeft < EDGE_THRESHOLD && distanceFromLeft > 0) {
-        const intensity = 1 - distanceFromLeft / EDGE_THRESHOLD;
-        scrollAmount = -Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-      // Scroll right when near right edge
-      else if (distanceFromRight < EDGE_THRESHOLD && distanceFromRight > 0) {
-        const intensity = 1 - distanceFromRight / EDGE_THRESHOLD;
-        scrollAmount = Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-
-      // Apply scroll if needed
-      if (scrollAmount !== 0) {
-        container.scrollLeft += scrollAmount;
-      }
-
-      // Continue the animation loop
+    autoScrollRafRef.current = requestAnimationFrame(autoScroll);
+  }, [scrollContainerRef]);
+
+  const startAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = true;
+
+    if (autoScrollRafRef.current === null) {
       autoScrollRafRef.current = requestAnimationFrame(autoScroll);
     }
+  }, [autoScroll]);
+
+  const updateAutoScrollPointerX = useCallback((pointerX: number | null) => {
+    pointerXRef.current = pointerX;
+  }, []);
+
+  useEffect(() => stopAutoScroll, [stopAutoScroll]);
 
-    // Start auto-scroll loop when dragging starts (triggered by isDraggingRef)
-    window.addEventListener('pointermove', handlePointerMove);
-
-    // Watch for drag start to initialize auto-scroll loop
-    const startAutoScrollLoop = () => {
-      if (isDraggingRef.current && !autoScrollRafRef.current) {
-        autoScrollRafRef.current = requestAnimationFrame(autoScroll);
-      }
-    };
-
-    // Poll for drag start (alternative: trigger from onDragStart)
-    const pollInterval = setInterval(startAutoScrollLoop, 100);
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      clearInterval(pollInterval);
-      if (autoScrollRafRef.current) {
-        cancelAnimationFrame(autoScrollRafRef.current);
-      }
-    };
-  }, [isDraggingRef, scrollContainerRef]);
-
-  return { autoScrollRafRef };
+  return {
+    autoScrollRafRef,
+    startAutoScroll,
+    stopAutoScroll,
+    updateAutoScrollPointerX,
+  };
 }

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

@@ -1,7 +1,23 @@
 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 { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@tuturuuu/utils/task-helper', () => {
+  const prefix = 'personal-external-staging:';
+
+  return {
+    getPersonalExternalStagingBoardId: (listId: string | null) =>
+      listId?.startsWith(prefix) && listId.length > prefix.length
+        ? listId.slice(prefix.length)
+        : null,
+    getPersonalExternalStagingListId: (boardId: string) =>
+      `${prefix}${boardId}`,
+    isPersonalExternalStagingListId: (listId: string | null) =>
+      Boolean(listId?.startsWith(prefix) && listId.length > prefix.length),
+  };
+});
+
 import {
   applyTaskDropPreviewToCache,
   getProjectedTaskDropOrderFromPreview,
@@ -14,6 +30,7 @@ import {
   insertTaskAtDropPosition,
   mergePersonalPlacementMutationTask,
   mergeTaskIntoBoardTaskCache,
+  usesPersonalPlacement,
 } from './use-kanban-dnd';
 
 function createTask(overrides: Partial<Task> = {}): Task {
@@ -116,6 +133,51 @@ describe('mergePersonalPlacementMutationTask', () => {
   });
 });
 
+describe('usesPersonalPlacement', () => {
+  it('does not treat a personal-workspace task as external from personal_board_id alone', () => {
+    const personalTask = createTask({
+      is_personal_external: false,
+      personal_board_id: 'personal-board',
+      personal_list_id: 'list-1',
+      source_board_id: null,
+      source_list_id: null,
+      source_workspace_id: null,
+    } as Partial<Task>);
+
+    expect(usesPersonalPlacement(personalTask)).toBe(false);
+  });
+
+  it('does not treat an explicitly native personal task as external when source metadata is present', () => {
+    const personalTask = createTask({
+      is_personal_external: false,
+      personal_board_id: 'personal-board',
+      personal_list_id: 'list-1',
+      source_workspace_id: 'personal-workspace',
+      source_board_id: 'personal-board',
+      source_list_id: 'list-1',
+    } as Partial<Task>);
+
+    expect(usesPersonalPlacement(personalTask)).toBe(false);
+  });
+
+  it('does not treat same-board personal metadata as external without an explicit flag', () => {
+    const personalTask = createTask({
+      is_personal_external: undefined,
+      personal_board_id: 'personal-board',
+      personal_list_id: 'list-1',
+      source_workspace_id: 'personal-workspace',
+      source_board_id: 'personal-board',
+      source_list_id: 'list-1',
+    } as Partial<Task>);
+
+    expect(usesPersonalPlacement(personalTask)).toBe(false);
+  });
+
+  it('keeps explicit external overlays on the personal-placement path', () => {
+    expect(usesPersonalPlacement(createTask())).toBe(true);
+  });
+});
+
 describe('mergeTaskIntoBoardTaskCache', () => {
   it('updates an existing task in the board cache', () => {
     const existingTask = createTask({ list_id: 'source-list' });

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

@@ -21,10 +21,11 @@ import {
 } from '@tuturuuu/utils/task-helper';
 import { hasDraggableData } from '@tuturuuu/utils/task-helpers';
 import { useCallback, useRef, useState } from 'react';
+import { isPersonalExternalOverlayTask } from '../../../../../../../lib/task-personal-external';
 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 { getKanbanDragAutoScrollPointerX, useAutoScroll } from './auto-scroll';
 import { getColumnReorderUpdates } from './column-reorder';
 import { calculateSortKeyWithRetry as createCalculateSortKeyWithRetry } from './kanban-sort-helpers';
 import {
@@ -121,12 +122,8 @@ interface UseKanbanDndProps {
   scrollContainerRef: React.RefObject<HTMLDivElement | null>;
 }
 
-function usesPersonalPlacement(task: Task) {
-  return (
-    task.is_personal_external === true ||
-    Boolean(task.personal_board_id) ||
-    isPersonalExternalStagingListId(task.list_id)
-  );
+export function usesPersonalPlacement(task: Task) {
+  return isPersonalExternalOverlayTask(task);
 }
 
 function getTaskDropPosition(
@@ -569,8 +566,15 @@ export function useKanbanDnd({
     [wsId]
   );
 
-  // Initialize auto-scroll
-  useAutoScroll(isDraggingRef, scrollContainerRef);
+  const { startAutoScroll, stopAutoScroll, updateAutoScrollPointerX } =
+    useAutoScroll(scrollContainerRef);
+
+  const updateAutoScrollFromDragEvent = useCallback(
+    (event: DragMoveEvent | DragOverEvent | DragStartEvent) => {
+      updateAutoScrollPointerX(getKanbanDragAutoScrollPointerX(event));
+    },
+    [updateAutoScrollPointerX]
+  );
 
   const resetDragState = useCallback(
     (clearOptimisticUpdates = false) => {
@@ -585,12 +589,13 @@ export function useKanbanDnd({
       dragSessionMetricsRef.current = null;
       dragStartTaskIndexesByListRef.current.clear();
       isDraggingRef.current = false;
+      stopAutoScroll();
 
       if (clearOptimisticUpdates) {
         setOptimisticUpdateInProgress(new Set());
       }
     },
-    [setDragPreviewPosition]
+    [setDragPreviewPosition, stopAutoScroll]
   );
 
   const markTaskIdsPending = useCallback((taskIds: string[]) => {
@@ -609,6 +614,8 @@ export function useKanbanDnd({
 
   const processTaskDragPreview = useCallback(
     (event: DragMoveEvent) => {
+      updateAutoScrollFromDragEvent(event);
+
       const { active, over } = event;
       const activeType = active.data?.current?.type;
       if (!activeType) return;
@@ -733,6 +740,7 @@ export function useKanbanDnd({
       getDragPreviewForList,
       getDragPreviewForListSurface,
       setDragPreviewPosition,
+      updateAutoScrollFromDragEvent,
       wsId,
     ]
   );
@@ -745,6 +753,8 @@ export function useKanbanDnd({
 
     // Enable auto-scroll
     isDraggingRef.current = true;
+    updateAutoScrollFromDragEvent(event);
+    startAutoScroll();
 
     const { type } = active.data.current;
     if (type === 'Column') {
@@ -753,6 +763,7 @@ export function useKanbanDnd({
     }
     if (type === 'Task') {
       if (!wsId) {
+        resetDragState(true);
         return;
       }
 

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-columns.tsx

@@ -79,6 +79,7 @@ interface KanbanColumnsProps {
     pin: SpecialTaskListPin,
     pinned: boolean
   ) => void;
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -156,6 +157,7 @@ export function KanbanColumns({
   onDeadlineSectionCollapsedChange,
   specialTaskListPins,
   onSpecialTaskListPinnedChange,
+  onHoveredTaskListChange,
   readOnly = false,
 }: KanbanColumnsProps) {
   const initialScrollAnchoredBoardRef = useRef<string | null>(null);
@@ -270,6 +272,7 @@ export function KanbanColumns({
   return (
     <div
       ref={boardRef}
+      onPointerLeave={() => onHoveredTaskListChange?.(null)}
       className="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent relative flex h-full w-full snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain scroll-smooth"
       style={
         {
@@ -416,6 +419,9 @@ export function KanbanColumns({
                     onSpecialTaskListPinnedChange?.('closed_tasks', pinned);
                   }
                 }}
+                onHoverTaskList={
+                  list.is_external_staging ? undefined : onHoveredTaskListChange
+                }
                 readOnly={readOnly}
               />
             );

package/src/components/ui/tu-do/boards/boardId/kanban.tsx

@@ -104,6 +104,7 @@ interface Props {
   onBulkSelectionActiveChange?: (active: boolean) => void;
   canUseBoardAssignees?: boolean;
   assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -129,6 +130,7 @@ export function KanbanBoard({
   onBulkSelectionActiveChange,
   canUseBoardAssignees,
   assigneeMemberSource,
+  onHoveredTaskListChange,
   readOnly = false,
 }: Props) {
   const tCommon = useTranslations('common');
@@ -150,7 +152,6 @@ export function KanbanBoard({
   const [assigneeSearchQuery, setAssigneeSearchQuery] = useState('');
 
   // Refs
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const taskHeightsRef = useRef<Map<string, number>>(new Map());
   const boardRef = useRef<HTMLDivElement>(null);
 
@@ -412,7 +413,7 @@ export function KanbanBoard({
     ),
     reorderTaskMutation,
     taskHeightsRef,
-    scrollContainerRef,
+    scrollContainerRef: boardRef,
   });
 
   const sensors = useSensors(
@@ -565,6 +566,7 @@ export function KanbanBoard({
             onTaskListCollapsedChange={onTaskListCollapsedChange}
             specialTaskListPins={specialTaskListPins}
             onSpecialTaskListPinnedChange={onSpecialTaskListPinnedChange}
+            onHoveredTaskListChange={onHoveredTaskListChange}
             readOnly={readOnly}
           />
 

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.test.ts

@@ -76,7 +76,7 @@ describe('getTaskCardHydratingOpenOptions', () => {
       taskWsId: 'source-workspace',
       taskWorkspacePersonal: false,
       canUseBoardAssignees: true,
-      assigneeMemberSource: 'workspace',
+      assigneeMemberSource: 'board',
       initialSharedContext: {
         boardConfig: {
           id: 'source-board',
@@ -151,4 +151,14 @@ describe('getTaskCardHydratingOpenOptions', () => {
     ).toBe(true);
     expect(isExternalTaskSnapshot(task)).toBe(false);
   });
+
+  it('does not treat personal placement metadata alone as an external snapshot', () => {
+    expect(
+      isExternalTaskSnapshot({
+        ...task,
+        personal_board_id: 'board-1',
+        personal_list_id: 'list-1',
+      })
+    ).toBe(false);
+  });
 });

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.ts

@@ -1,5 +1,6 @@
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { isPersonalExternalOverlayTask } from '../../../../../../lib/task-personal-external';
 import type { SharedTaskContext } from '../../../shared/task-edit-dialog/hooks/use-task-data';
 
 interface TaskCardOpenOptionsInput {
@@ -13,9 +14,12 @@ interface TaskCardOpenOptionsInput {
 }
 
 export function isExternalTaskSnapshot(task: Task) {
+  if (task.is_personal_external === false) {
+    return false;
+  }
+
   return (
-    task.is_personal_external === true ||
-    Boolean(task.personal_board_id) ||
+    isPersonalExternalOverlayTask(task) ||
     Boolean(task.source_workspace_id) ||
     Boolean(task.source_board_id)
   );
@@ -131,7 +135,7 @@ export function getTaskCardHydratingOpenOptions({
     taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
     canUseBoardAssignees: canUseBoardAssignees ?? sourceBoardAssigneesEnabled,
     assigneeMemberSource:
-      assigneeMemberSource ?? (sourceWorkspaceId ? 'workspace' : undefined),
+      assigneeMemberSource ?? (sourceWorkspaceId ? 'board' : undefined),
     initialSharedContext,
   };
 }

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-resource-context.test.ts

@@ -0,0 +1,113 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { describe, expect, it } from 'vitest';
+import { getTaskCardResourceContext } from './task-card-resource-context';
+
+const pageList = {
+  id: 'page-list',
+  name: 'Page list',
+  board_id: 'page-board',
+  position: 0,
+  status: 'not_started',
+  color: 'BLUE',
+  created_at: '2026-07-04T00:00:00.000Z',
+  creator_id: 'user-1',
+  archived: false,
+  deleted: false,
+} satisfies TaskList;
+
+const task = {
+  id: 'task-1',
+  name: 'Task',
+  description: '',
+  list_id: 'page-list',
+  display_number: 1,
+  created_at: '2026-07-04T00:00:00.000Z',
+  end_date: null,
+  priority: 'normal',
+} satisfies Task;
+
+describe('getTaskCardResourceContext', () => {
+  it('keeps local task resources on the page workspace and board', () => {
+    expect(
+      getTaskCardResourceContext({
+        boardId: 'page-board',
+        pageWorkspaceId: 'page-workspace',
+        propAvailableLists: [pageList],
+        task,
+      })
+    ).toEqual({
+      boardViewableMembersBoardId: 'page-board',
+      boardViewableMembersWorkspaceId: 'page-workspace',
+      effectiveWorkspaceId: 'page-workspace',
+      initialAvailableLists: [pageList],
+      isSourceWorkspaceTask: false,
+      taskBoardId: 'page-board',
+    });
+  });
+
+  it('routes source task labels, projects, lists, and members to the source workspace and board', () => {
+    expect(
+      getTaskCardResourceContext({
+        boardId: 'personal-board',
+        pageWorkspaceId: 'personal-workspace',
+        propAvailableLists: [pageList],
+        task: {
+          ...task,
+          list_id: 'personal-list',
+          source_board_id: 'source-board',
+          source_workspace_id: 'source-workspace',
+        },
+      })
+    ).toEqual({
+      boardViewableMembersBoardId: 'source-board',
+      boardViewableMembersWorkspaceId: 'source-workspace',
+      effectiveWorkspaceId: 'source-workspace',
+      initialAvailableLists: undefined,
+      isSourceWorkspaceTask: true,
+      taskBoardId: 'source-board',
+    });
+  });
+
+  it('uses the page workspace when a source board is present without source workspace metadata', () => {
+    expect(
+      getTaskCardResourceContext({
+        boardId: 'page-board',
+        pageWorkspaceId: 'page-workspace',
+        propAvailableLists: [pageList],
+        task: {
+          ...task,
+          source_board_id: 'source-board',
+        },
+      })
+    ).toMatchObject({
+      boardViewableMembersBoardId: 'source-board',
+      boardViewableMembersWorkspaceId: 'page-workspace',
+      effectiveWorkspaceId: 'page-workspace',
+      initialAvailableLists: undefined,
+      isSourceWorkspaceTask: true,
+      taskBoardId: 'source-board',
+    });
+  });
+
+  it('keeps page board list data when only source workspace metadata is available', () => {
+    expect(
+      getTaskCardResourceContext({
+        boardId: 'page-board',
+        pageWorkspaceId: 'page-workspace',
+        propAvailableLists: [pageList],
+        task: {
+          ...task,
+          source_workspace_id: 'source-workspace',
+        },
+      })
+    ).toMatchObject({
+      boardViewableMembersBoardId: 'page-board',
+      boardViewableMembersWorkspaceId: 'source-workspace',
+      effectiveWorkspaceId: 'source-workspace',
+      initialAvailableLists: [pageList],
+      isSourceWorkspaceTask: true,
+      taskBoardId: 'page-board',
+    });
+  });
+});