@tuturuuu/ui 0.8.0 → 0.10.0

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

@@ -11,6 +11,8 @@ import {
   Filter,
   GripVertical,
   Loader2,
+  Pin,
+  PinOff,
   RotateCcw,
 } from '@tuturuuu/icons';
 import type { ExternalTaskSortBy } from '@tuturuuu/internal-api/tasks';
@@ -49,6 +51,7 @@ import {
 } from './kanban/kanban-column-collapse';
 import { ListActions } from './list-actions';
 import { statusIcons } from './status-section';
+import type { TaskCardAssigneeMemberSource } from './task-card/task-card';
 import type { TaskFilters } from './task-filter';
 import { VirtualizedTaskList } from './task-list';
 
@@ -161,6 +164,8 @@ interface BoardColumnProps {
   isMultiSelectMode?: boolean;
   setIsMultiSelectMode?: (value: boolean) => void;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onTaskSelect?: (taskId: string, event: React.MouseEvent) => void;
   onClearSelection?: () => void;
   onAddTask?: (list: TaskList) => void;
@@ -174,6 +179,10 @@ interface BoardColumnProps {
   wsId: string;
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
+  specialPinned?: boolean;
+  specialStickyOffset?: string;
+  onSpecialPinnedChange?: (pinned: boolean) => void;
+  readOnly?: boolean;
 }
 
 export function BoardColumn({
@@ -189,6 +198,8 @@ export function BoardColumn({
   isMultiSelectMode,
   setIsMultiSelectMode,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onAddTask,
   dragPreviewPosition,
   suppressTaskTransforms,
@@ -200,6 +211,10 @@ export function BoardColumn({
   wsId,
   onExternalTasksCollapsedChange,
   onTaskListCollapsedChange,
+  specialPinned = false,
+  specialStickyOffset,
+  onSpecialPinnedChange,
+  readOnly = false,
 }: BoardColumnProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -210,7 +225,9 @@ export function BoardColumn({
   const isExternalCollapsed =
     isExternalStaging && column.is_external_collapsed === true;
   const listState = pagination[column.id];
-  const isInitialLoad = !listState || listState.isInitialLoad;
+  const isInitialLoad = readOnly
+    ? false
+    : !listState || listState.isInitialLoad;
   const [externalIncludeDocuments, setExternalIncludeDocuments] =
     useState(false);
   const [externalIncludeDoneClosed, setExternalIncludeDoneClosed] =
@@ -376,7 +393,7 @@ export function BoardColumn({
     isDragging,
   } = useSortable({
     id: column.id,
-    disabled: isExternalStaging,
+    disabled: readOnly || isExternalStaging,
     data: {
       type: 'Column',
       column: {
@@ -400,6 +417,12 @@ export function BoardColumn({
     transform: CSS.Transform.toString(transform),
     transition,
   };
+  const columnStyle: React.CSSProperties = specialStickyOffset
+    ? {
+        ...style,
+        left: `calc(var(--kanban-snap-left-padding) + ${specialStickyOffset})`,
+      }
+    : style;
 
   const handleUpdate = () => {
     onUpdate?.();
@@ -446,6 +469,9 @@ export function BoardColumn({
     : visibleTasks.length;
   const externalFilterCount =
     (externalIncludeDocuments ? 1 : 0) + (externalIncludeDoneClosed ? 1 : 0);
+  const pinListLabel = specialPinned
+    ? tTasks('unpin_task_list', { name: translateListName(column.name) })
+    : tTasks('pin_task_list', { name: translateListName(column.name) });
 
   // Memoize drag handle for performance
   const DragHandle = useMemo(
@@ -500,10 +526,14 @@ export function BoardColumn({
     return (
       <Card
         ref={composedRef}
-        style={style}
+        style={columnStyle}
+        data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
+        data-kanban-column-id={column.id}
+        data-kanban-real-column={isExternalStaging ? undefined : 'true'}
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
           'touch-none select-none overflow-hidden hover:shadow-md',
+          specialStickyOffset && 'sticky z-30',
           isExternalCollapsed
             ? 'border-dynamic-cyan/45 bg-dynamic-cyan/[0.035]'
             : colorClass
@@ -549,10 +579,14 @@ export function BoardColumn({
   return (
     <Card
       ref={composedRef}
-      style={style}
+      style={columnStyle}
+      data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
+      data-kanban-column-id={column.id}
+      data-kanban-real-column={isExternalStaging ? undefined : 'true'}
       className={cn(
         'group flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col rounded-xl transition-all duration-200 last:snap-end',
         'touch-none select-none',
+        specialStickyOffset && 'sticky z-30',
         colorClass,
         isDragging &&
           'rotate-1 scale-[1.02] opacity-90 shadow-xl ring-2 ring-primary/20',
@@ -566,7 +600,7 @@ export function BoardColumn({
       )}
     >
       <div className="flex items-center gap-2 rounded-t-xl border-b p-3">
-        {!isExternalStaging && DragHandle}
+        {!readOnly && !isExternalStaging && DragHandle}
         <div className="flex flex-1 items-center gap-2">
           <span className="text-sm">{statusIcon}</span>
           <h3
@@ -577,9 +611,9 @@ export function BoardColumn({
                 : 'cursor-pointer hover:underline'
             )}
             onClick={() => {
-              if (!isExternalStaging) setIsEditOpen(true);
+              if (!readOnly && !isExternalStaging) setIsEditOpen(true);
             }}
-            title={isExternalStaging ? undefined : t('edit_list')}
+            title={readOnly || isExternalStaging ? undefined : t('edit_list')}
           >
             {translateListName(column.name)}
           </h3>
@@ -705,6 +739,26 @@ export function BoardColumn({
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
+              {onSpecialPinnedChange ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="xs"
+                  className={cn(
+                    'h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10',
+                    specialPinned && 'bg-dynamic-cyan/10'
+                  )}
+                  title={pinListLabel}
+                  aria-label={pinListLabel}
+                  onClick={() => onSpecialPinnedChange(!specialPinned)}
+                >
+                  {specialPinned ? (
+                    <PinOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Pin className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+              ) : null}
               <Button
                 type="button"
                 variant="ghost"
@@ -720,38 +774,63 @@ export function BoardColumn({
           ) : (
             <>
               {isClosedCollapsed || column.status === 'closed' ? (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="xs"
-                  className={cn(
-                    'h-7 w-7 p-0 hover:bg-muted/40',
-                    getListTextColorClass(column.color as SupportedColor)
-                  )}
-                  title={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  aria-label={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  onClick={() => onTaskListCollapsedChange?.(column.id, true)}
-                >
-                  <ChevronLeft className="h-3.5 w-3.5" />
-                </Button>
+                <>
+                  {onSpecialPinnedChange ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="xs"
+                      className={cn(
+                        'h-7 w-7 p-0 hover:bg-muted/40',
+                        getListTextColorClass(column.color as SupportedColor),
+                        specialPinned && 'bg-muted/40'
+                      )}
+                      title={pinListLabel}
+                      aria-label={pinListLabel}
+                      onClick={() => onSpecialPinnedChange(!specialPinned)}
+                    >
+                      {specialPinned ? (
+                        <PinOff className="h-3.5 w-3.5" />
+                      ) : (
+                        <Pin className="h-3.5 w-3.5" />
+                      )}
+                    </Button>
+                  ) : null}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="xs"
+                    className={cn(
+                      'h-7 w-7 p-0 hover:bg-muted/40',
+                      getListTextColorClass(column.color as SupportedColor)
+                    )}
+                    title={tTasks('collapse_task_list', {
+                      name: translateListName(column.name),
+                    })}
+                    aria-label={tTasks('collapse_task_list', {
+                      name: translateListName(column.name),
+                    })}
+                    onClick={() => onTaskListCollapsedChange?.(column.id, true)}
+                  >
+                    <ChevronLeft className="h-3.5 w-3.5" />
+                  </Button>
+                </>
               ) : null}
-              <ListActions
-                listId={column.id}
-                listName={column.name}
-                listStatus={column.status}
-                listColor={column.color as SupportedColor}
-                tasks={tasks}
-                boardId={boardId}
-                wsId={wsId}
-                onUpdate={handleUpdate}
-                onSelectAll={handleSelectAll}
-                isEditOpen={isEditOpen}
-                onEditOpenChange={setIsEditOpen}
-              />
+              {!readOnly && (
+                <ListActions
+                  listId={column.id}
+                  listName={column.name}
+                  listStatus={column.status}
+                  listColor={column.color as SupportedColor}
+                  tasks={tasks}
+                  boardId={boardId}
+                  wsId={wsId}
+                  onUpdate={handleUpdate}
+                  onSelectAll={handleSelectAll}
+                  isEditOpen={isEditOpen}
+                  onEditOpenChange={setIsEditOpen}
+                />
+              )}
             </>
           )}
         </div>
@@ -773,6 +852,8 @@ export function BoardColumn({
           isMultiSelectMode={isMultiSelectMode}
           selectedTasks={selectedTasks}
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
           onTaskSelect={onTaskSelect}
           onClearSelection={onClearSelection}
           dragPreviewPosition={dragPreviewPosition}
@@ -783,10 +864,11 @@ export function BoardColumn({
           onLoadMore={handleLoadMore}
           hasMore={listState?.hasMore ?? false}
           isLoadingMore={listState?.isLoading ?? false}
+          readOnly={readOnly}
         />
       )}
 
-      {!isExternalStaging && (
+      {!readOnly && !isExternalStaging && (
         <div className="rounded-b-xl border-t p-3 backdrop-blur-sm">
           <Button
             variant="ghost"

package/src/components/ui/tu-do/boards/boardId/enhanced-task-list.tsx

@@ -44,6 +44,7 @@ import { useBoardBroadcast } from '../../shared/board-broadcast-context';
 import { isTaskListNameExistsError } from '../../shared/task-board-errors';
 import { normalizeBoardText } from './board-text-utils';
 import { TaskCard } from './task';
+import type { TaskCardAssigneeMemberSource } from './task-card/task-card';
 
 interface Props {
   list: TaskList;
@@ -54,6 +55,8 @@ interface Props {
   isOverlay?: boolean;
   hideTasksMode?: boolean;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onAddTask?: (list: TaskList) => void;
 }
 
@@ -102,6 +105,8 @@ export function EnhancedTaskList({
   isOverlay = false,
   hideTasksMode = false,
   isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onAddTask,
 }: Props) {
   const t = useTranslations('common');
@@ -479,6 +484,8 @@ export function EnhancedTaskList({
                 taskList={list}
                 boardId={boardId}
                 isPersonalWorkspace={isPersonalWorkspace}
+                canUseBoardAssignees={canUseBoardAssignees}
+                assigneeMemberSource={assigneeMemberSource}
                 onUpdate={onUpdate}
               />
             ))}

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-mutations-clear-delete.ts

@@ -4,6 +4,7 @@ import { type QueryClient, useMutation } from '@tanstack/react-query';
 import { bulkWorkspaceTasks } from '@tuturuuu/internal-api/tasks';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import {
   type BulkTaskWorkspaceGroup,
@@ -390,6 +391,7 @@ export function useBulkDeleteTasks(
       for (const tid of succeededTaskIds) {
         broadcast?.('task:delete', { taskId: tid });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       clearSelection();
       setBulkDeleteOpen(false);

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-mutations-move.ts

@@ -6,6 +6,7 @@ import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import { getInternalApiOptions } from './bulk-operation-utils';
 import {
@@ -184,6 +185,8 @@ export function useBulkMoveToBoard(
       for (const tid of movedTaskIds) {
         broadcast?.('task:delete', { taskId: tid });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
+      void invalidateKanbanDeadlineTasks(queryClient, data.targetBoardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -428,6 +431,7 @@ export function useBulkMoveToList(
           },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -631,6 +635,7 @@ export function useBulkMoveToStatus(
           },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-mutations-updates.ts

@@ -4,6 +4,7 @@ import { type QueryClient, useMutation } from '@tanstack/react-query';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import {
   bulkWorkspaceTasksByEffectiveWorkspace,
@@ -322,6 +323,7 @@ export function useBulkUpdateDueDate(
           task: { id: tid, end_date: data.end_date },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -434,6 +436,7 @@ export function useBulkUpdateCustomDueDate(
           task: { id: tid, end_date: data.end_date },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-operation-types.ts

@@ -12,9 +12,9 @@ export interface WorkspaceProject {
 export interface WorkspaceMember {
   id: string;
   user_id?: string;
-  display_name: string;
-  email: string;
-  avatar_url: string | null;
+  display_name?: string;
+  email?: string;
+  avatar_url?: string | null;
 }
 
 export interface BulkOperationsConfig {

package/src/components/ui/tu-do/boards/boardId/kanban/data/kanban-deadline-query.ts

@@ -1,22 +1,70 @@
+import type { QueryClient } from '@tanstack/react-query';
 import { listWorkspaceTasks } from '@tuturuuu/internal-api';
+import type { ListWorkspaceTasksOptions } from '@tuturuuu/internal-api/tasks';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 
 const KANBAN_DEADLINE_TASK_PAGE_SIZE = 200;
+export const KANBAN_DEADLINE_TASKS_QUERY_KEY = 'kanban-deadline-tasks';
+
+export function getKanbanDeadlineTasksQueryKey(
+  workspaceId: string,
+  boardId: string | null | undefined,
+  taskQueryOptions?: ListWorkspaceTasksOptions
+) {
+  return [
+    KANBAN_DEADLINE_TASKS_QUERY_KEY,
+    workspaceId,
+    boardId,
+    taskQueryOptions,
+  ] as const;
+}
+
+export function invalidateKanbanDeadlineTasks(
+  queryClient: QueryClient,
+  boardId?: string | null
+) {
+  return queryClient.invalidateQueries({
+    predicate: (query) => {
+      const queryKey = query.queryKey;
+      if (!Array.isArray(queryKey)) return false;
+      if (queryKey[0] !== KANBAN_DEADLINE_TASKS_QUERY_KEY) return false;
+      return !boardId || queryKey[2] === boardId;
+    },
+  });
+}
 
 interface ListKanbanDeadlineTasksOptions {
   boardId: string;
+  taskQueryOptions?: ListWorkspaceTasksOptions;
   workspaceId: string;
 }
 
 export async function listKanbanDeadlineTasks({
   boardId,
+  taskQueryOptions,
   workspaceId,
 }: ListKanbanDeadlineTasksOptions): Promise<Task[]> {
   const tasks: Task[] = [];
   let offset = 0;
+  const {
+    boardId: _boardId,
+    closed: _closed,
+    completed: _completed,
+    externalSortBy: _externalSortBy,
+    hasDueDate: _hasDueDate,
+    includeCount: _includeCount,
+    includeListCounts: _includeListCounts,
+    includeRelationshipSummary: _includeRelationshipSummary,
+    limit: _limit,
+    listId: _listId,
+    offset: _offset,
+    sortBy: _sortBy,
+    ...filterOptions
+  } = taskQueryOptions ?? {};
 
   while (true) {
     const response = await listWorkspaceTasks(workspaceId, {
+      ...filterOptions,
       boardId,
       closed: 'exclude',
       completed: 'exclude',
@@ -25,9 +73,9 @@ export async function listKanbanDeadlineTasks({
       includeCount: true,
       includeRelationshipSummary: false,
       limit: KANBAN_DEADLINE_TASK_PAGE_SIZE,
-      listStatuses: ['not_started', 'active'],
+      listStatuses: filterOptions.listStatuses ?? ['not_started', 'active'],
       offset,
-      sourceScope: 'all_visible',
+      sourceScope: filterOptions.sourceScope ?? 'all_visible',
     });
 
     tasks.push(...response.tasks);

package/src/components/ui/tu-do/boards/boardId/kanban/data/use-bulk-resources.ts

@@ -5,14 +5,24 @@ import {
   listWorkspaceLabels,
   listWorkspaceTaskProjects,
 } from '@tuturuuu/internal-api';
+import { listWorkspaceTaskBoardViewableMembers } from '@tuturuuu/internal-api/tasks';
 import type { Workspace } from '@tuturuuu/types';
-import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
+import {
+  useWorkspaceMembers,
+  type WorkspaceMember,
+} from '@tuturuuu/ui/hooks/use-workspace-members';
 
 export function useBulkResources({
+  boardId,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   workspace,
   isMultiSelectMode,
   selectedCount,
 }: {
+  boardId?: string | null;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   workspace: Workspace;
   isMultiSelectMode: boolean;
   selectedCount: number;
@@ -46,13 +56,57 @@ export function useBulkResources({
   });
 
   // Workspace members for bulk operations
-  const { data: workspaceMembers = [] } = useWorkspaceMembers(workspace.id, {
+  const shouldLoadMembers =
+    canUseBoardAssignees !== false && isMultiSelectMode && selectedCount > 0;
+  const effectiveAssigneeMemberSource =
+    assigneeMemberSource ?? (workspace.personal ? 'board' : 'workspace');
+  const { data: workspaceMembersData = [] } = useWorkspaceMembers(
+    workspace.id,
+    {
+      enabled:
+        !!workspace.id &&
+        shouldLoadMembers &&
+        effectiveAssigneeMemberSource !== 'board',
+    }
+  );
+  const { data: boardViewableMembers = [] } = useQuery({
+    queryKey: ['task-board-viewable-members', workspace.id, boardId],
+    queryFn: async (): Promise<WorkspaceMember[]> => {
+      if (!workspace.id || !boardId) return [];
+
+      const payload = await listWorkspaceTaskBoardViewableMembers(
+        workspace.id,
+        boardId
+      );
+      const members = Array.isArray(payload?.members) ? payload.members : [];
+
+      return members.map((member) => ({
+        id: member.user_id,
+        user_id: member.user_id,
+        workspace_id: workspace.id,
+        display_name: member.display_name ?? member.email ?? member.user_id,
+        email: member.email ?? undefined,
+        avatar_url: member.avatar_url ?? undefined,
+      }));
+    },
     enabled:
       !!workspace.id &&
-      !workspace.personal &&
-      isMultiSelectMode &&
-      selectedCount > 0,
+      !!boardId &&
+      shouldLoadMembers &&
+      effectiveAssigneeMemberSource !== 'workspace',
+    staleTime: 5 * 60 * 1000,
   });
+  const workspaceMembers: WorkspaceMember[] = [
+    ...workspaceMembersData,
+    ...boardViewableMembers.filter(
+      (boardMember) =>
+        !workspaceMembersData.some(
+          (workspaceMember) =>
+            (workspaceMember.user_id ?? workspaceMember.id) ===
+            boardMember.user_id
+        )
+    ),
+  ];
 
   return { workspaceLabels, workspaceProjects, workspaceMembers };
 }

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/__tests__/column-reorder.test.ts

@@ -43,6 +43,23 @@ describe('getColumnReorderUpdates', () => {
     expect(getColumnReorderUpdates(columns, 'todo', 'doing')).toBeNull();
   });
 
+  it('excludes synthetic external staging lanes from persisted position repairs', () => {
+    const externalLane = {
+      ...makeList('external', 'not_started', -1),
+      is_external_staging: true,
+    };
+    const columns = [
+      externalLane,
+      makeList('todo', 'not_started', 0),
+      makeList('backlog', 'not_started', 1),
+    ];
+
+    expect(getColumnReorderUpdates(columns, 'backlog', 'todo')).toEqual([
+      { listId: 'backlog', newPosition: 0 },
+      { listId: 'todo', newPosition: 1 },
+    ]);
+  });
+
   it('sorts columns in the same order they are rendered in Kanban', () => {
     const columns = [
       makeList('closed', 'closed', 0),

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

@@ -39,7 +39,10 @@ export function getColumnReorderUpdates(
   }
 
   const statusColumns = [...columns]
-    .filter((column) => column.status === activeColumn.status)
+    .filter(
+      (column) =>
+        column.status === activeColumn.status && !column.is_external_staging
+    )
     .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
 
   const activeIndex = statusColumns.findIndex(

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

@@ -13,6 +13,8 @@ interface DragPreviewProps {
   columns: TaskList[];
   boardId: string;
   isPersonalWorkspace: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   isMultiSelectMode: boolean;
   selectedTasks: Set<string>;
   onUpdate: () => void;
@@ -26,6 +28,8 @@ export function DragPreview({
   columns,
   boardId,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   isMultiSelectMode,
   selectedTasks,
   onUpdate,
@@ -52,6 +56,8 @@ export function DragPreview({
           isOverlay
           onUpdate={onUpdate}
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
         />
         {isMultiCardDrag && (
           <>
@@ -74,6 +80,8 @@ export function DragPreview({
     boardId,
     onUpdate,
     isPersonalWorkspace,
+    canUseBoardAssignees,
+    assigneeMemberSource,
     isMultiSelectMode,
     selectedTasks,
   ]);
@@ -87,11 +95,22 @@ export function DragPreview({
           tasks={tasks.filter((task) => task.list_id === activeColumn.id)}
           isOverlay
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
           onUpdate={onUpdate}
           wsId={wsId}
         />
       ) : null,
-    [activeColumn, tasks, boardId, isPersonalWorkspace, onUpdate, wsId]
+    [
+      activeColumn,
+      tasks,
+      boardId,
+      isPersonalWorkspace,
+      canUseBoardAssignees,
+      assigneeMemberSource,
+      onUpdate,
+      wsId,
+    ]
   );
 
   return <>{MemoizedTaskOverlay || MemoizedColumnOverlay}</>;