@tuturuuu/ui 0.14.0 → 0.16.0

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/__tests__/bulk-mutations-move.test.tsx

@@ -187,4 +187,66 @@ describe('bulk move mutations', () => {
       intensity: 1.2,
     });
   });
+
+  it('bulk-moves selected external tasks to done through terminal personal placement', async () => {
+    const doneList = {
+      ...targetList,
+      id: 'done-list',
+      name: 'Done',
+      status: 'done',
+    } as unknown as TaskList;
+
+    queryClient.setQueryData(['tasks', 'board-1'], [localTask, externalTask]);
+    mockUpsertCurrentUserTaskPersonalPlacement.mockResolvedValueOnce({
+      task: {
+        ...externalTask,
+        list_id: 'done-list',
+        personal_list_id: 'done-list',
+        source_list_id: 'source-done-list',
+        source_list_status: 'done',
+      },
+    });
+
+    const { result } = renderHook(
+      () =>
+        useBulkOperations({
+          queryClient,
+          wsId: 'personal-ws',
+          boardId: 'board-1',
+          selectedTasks: new Set(['local-task', 'external-task']),
+          columns: [sourceList, doneList],
+          workspaceLabels: [],
+          workspaceProjects: [],
+          workspaceMembers: [],
+          setBulkWorking: vi.fn(),
+          clearSelection: vi.fn(),
+          setBulkDeleteOpen: vi.fn(),
+        }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.bulkMoveToList('done-list', 'Done');
+    });
+
+    expect(mockBulkWorkspaceTasks).toHaveBeenCalledWith(
+      'personal-ws',
+      {
+        taskIds: ['local-task'],
+        operation: {
+          type: 'move_to_list',
+          listId: 'done-list',
+        },
+      },
+      expect.anything()
+    );
+    expect(mockUpsertCurrentUserTaskPersonalPlacement).toHaveBeenCalledWith(
+      'external-task',
+      expect.objectContaining({
+        personal_board_id: 'board-1',
+        personal_list_id: 'done-list',
+        terminal_status: 'done',
+      })
+    );
+  });
 });

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

@@ -20,6 +20,7 @@ vi.mock('@tuturuuu/utils/task-helper', () => {
 
 import {
   applyTaskDropPreviewToCache,
+  getPersonalPlacementTargetBoardId,
   getProjectedTaskDropOrderFromPreview,
   getTaskDropEndPreviewFromRects,
   getTaskDropPositionFromRects,
@@ -178,6 +179,53 @@ describe('usesPersonalPlacement', () => {
   });
 });
 
+describe('getPersonalPlacementTargetBoardId', () => {
+  it('uses the target list board id for real-list moves', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'canonical-board',
+            id: 'target-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'target-list',
+      })
+    ).toBe('canonical-board');
+  });
+
+  it('keeps staging board ids from virtual staging lanes', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'canonical-board',
+            id: 'target-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'personal-external-staging:staging-board',
+      })
+    ).toBe('staging-board');
+  });
+
+  it('falls back to the current board id when list metadata is absent', () => {
+    expect(
+      getPersonalPlacementTargetBoardId({
+        boardId: 'fallback-board',
+        columns: [
+          createList({
+            board_id: 'other-board',
+            id: 'other-list',
+          } as Partial<TaskList>),
+        ],
+        targetListId: 'target-list',
+      })
+    ).toBe('fallback-board');
+  });
+});
+
 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

@@ -126,6 +126,23 @@ export function usesPersonalPlacement(task: Task) {
   return isPersonalExternalOverlayTask(task);
 }
 
+export function getPersonalPlacementTargetBoardId({
+  boardId,
+  columns,
+  targetListId,
+}: {
+  boardId: string | null;
+  columns: Pick<TaskList, 'board_id' | 'id'>[];
+  targetListId: string;
+}) {
+  const stagingBoardId = getPersonalExternalStagingBoardId(targetListId);
+  if (stagingBoardId) return stagingBoardId;
+
+  return (
+    columns.find((column) => column.id === targetListId)?.board_id ?? boardId
+  );
+}
+
 function getTaskDropPosition(
   event: DragMoveEvent | DragEndEvent,
   pointerY?: number | null,
@@ -442,8 +459,20 @@ export function useKanbanDnd({
       }
 
       const stagingBoardId = getPersonalExternalStagingBoardId(targetListId);
-      const targetBoardId = stagingBoardId ?? boardId;
+      const targetBoardId = getPersonalPlacementTargetBoardId({
+        boardId,
+        columns,
+        targetListId,
+      });
+      if (!targetBoardId) {
+        throw new Error('Board ID is required');
+      }
       const isStagingTarget = stagingBoardId !== null;
+      const targetList = columns.find((column) => column.id === targetListId);
+      const terminalStatus =
+        targetList?.status === 'done' || targetList?.status === 'closed'
+          ? targetList.status
+          : undefined;
       const nextTask = {
         ...task,
         list_id: isStagingTarget
@@ -483,6 +512,7 @@ export function useKanbanDnd({
               personal_sort_key: newSortKey,
               previous_task_id: order?.previousTaskId ?? null,
               next_task_id: order?.nextTaskId ?? null,
+              terminal_status: terminalStatus,
             });
 
         if (isStagingTarget) {
@@ -540,7 +570,7 @@ export function useKanbanDnd({
         throw error;
       }
     },
-    [boardId, queryClient]
+    [boardId, columns, queryClient]
   );
 
   // Use the extracted calculateSortKeyWithRetry helper

package/src/components/ui/tu-do/boards/boardId/menus/__tests__/task-menus.test.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const taskSchedulingApiMock = vi.hoisted(() => ({
   getCurrentUserTaskSchedule: vi.fn(),
@@ -67,8 +67,8 @@ vi.mock('@tuturuuu/ui/dropdown-menu', () => ({
   DropdownMenuSub: ({ children }: any) => (
     <div data-testid="dropdown-sub">{children}</div>
   ),
-  DropdownMenuSubTrigger: ({ children }: any) => (
-    <button type="button" data-testid="dropdown-trigger">
+  DropdownMenuSubTrigger: ({ children, className }: any) => (
+    <button type="button" className={className} data-testid="dropdown-trigger">
       {children}
     </button>
   ),
@@ -151,6 +151,10 @@ describe('TaskDueDateMenu', () => {
   const mockOnMenuItemSelect = vi.fn((_, action) => action());
   const mockOnClose = vi.fn();
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should render due date menu', () => {
     render(
       <TaskDueDateMenu
@@ -200,6 +204,40 @@ describe('TaskDueDateMenu', () => {
 
     expect(screen.getByText('Remove Due Date')).toBeInTheDocument();
   });
+
+  it('should render compact due date summaries without wrapping the trigger label', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-01-15T12:00:00.000Z'));
+
+    render(
+      <TaskDueDateMenu
+        endDate="2026-03-16T12:00:00.000Z"
+        isLoading={false}
+        onDueDateChange={mockOnDueDateChange}
+        onCustomDateClick={mockOnCustomDateClick}
+        onMenuItemSelect={mockOnMenuItemSelect}
+        onClose={mockOnClose}
+      />
+    );
+
+    const triggerLabel = screen.getByText('Due Date');
+    const compactDate = screen.getByText('in 2mo');
+
+    expect(screen.getByTestId('dropdown-trigger')).toHaveClass('min-w-0');
+    expect(triggerLabel).toHaveClass(
+      'min-w-0',
+      'flex-1',
+      'truncate',
+      'whitespace-nowrap'
+    );
+    expect(compactDate).toHaveClass(
+      'shrink-0',
+      'truncate',
+      'whitespace-nowrap',
+      'text-right'
+    );
+    expect(screen.queryByText('in about 2 months')).not.toBeInTheDocument();
+  });
 });
 
 describe('task scheduling utilities', () => {

package/src/components/ui/tu-do/boards/boardId/menus/task-due-date-menu.tsx

@@ -7,9 +7,10 @@ import {
   DropdownMenuSubTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
 import {
-  formatDistanceToNow,
+  differenceInCalendarDays,
   isToday,
   isTomorrow,
+  isValid,
   isYesterday,
 } from 'date-fns';
 import { calculateDaysUntilEndOfWeek } from '../../../utils/weekDateUtils';
@@ -55,6 +56,22 @@ const calculateDaysForPreset = (
   }
 };
 
+const formatCompactRelativeDate = (date: Date, now = new Date()) => {
+  const days = differenceInCalendarDays(date, now);
+  const absoluteDays = Math.abs(days);
+
+  const [value, unit] =
+    absoluteDays < 7
+      ? [absoluteDays, 'd']
+      : absoluteDays < 30
+        ? [Math.max(1, Math.round(absoluteDays / 7)), 'wk']
+        : absoluteDays < 365
+          ? [Math.max(1, Math.round(absoluteDays / 30)), 'mo']
+          : [Math.max(1, Math.round(absoluteDays / 365)), 'y'];
+
+  return days > 0 ? `in ${value}${unit}` : `${value}${unit} ago`;
+};
+
 export function TaskDueDateMenu({
   endDate,
   isLoading,
@@ -82,7 +99,7 @@ export function TaskDueDateMenu({
     if (isToday(date)) return t.today;
     if (isTomorrow(date)) return t.tomorrow;
     if (isYesterday(date)) return t.yesterday;
-    return formatDistanceToNow(date, { addSuffix: true });
+    return formatCompactRelativeDate(date);
   };
 
   const dueDateOptionsTranslated = [
@@ -104,19 +121,23 @@ export function TaskDueDateMenu({
     },
   ];
 
-  const currentDateDisplay = endDate
-    ? formatSmartDateTranslated(new Date(endDate))
-    : t.none;
+  const parsedEndDate = endDate ? new Date(endDate) : null;
+  const currentDateDisplay =
+    parsedEndDate && isValid(parsedEndDate)
+      ? formatSmartDateTranslated(parsedEndDate)
+      : t.none;
 
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <div className="h-4 w-4">
+      <DropdownMenuSubTrigger className="min-w-0">
+        <div className="h-4 w-4 shrink-0">
           <Calendar className="h-4 w-4 text-dynamic-purple" />
         </div>
-        <div className="flex w-full items-center justify-between">
-          <span>{t.dueDate}</span>
-          <span className="ml-auto text-muted-foreground text-xs">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.dueDate}
+          </span>
+          <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
             {currentDateDisplay}
           </span>
         </div>

package/src/components/ui/tu-do/boards/boardId/menus/task-priority-menu.tsx

@@ -104,13 +104,15 @@ export function TaskPriorityMenu({
 
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>
-        <div className="h-4 w-4">
+      <DropdownMenuSubTrigger className="min-w-0">
+        <div className="h-4 w-4 shrink-0">
           <Flag className="h-4 w-4 text-dynamic-orange" />
         </div>
-        <div className="flex w-full items-center justify-between">
-          <span>{t.priority}</span>
-          <span className="ml-auto text-muted-foreground text-xs">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.priority}
+          </span>
+          <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
             {currentPriority
               ? priorityLabelTranslated[currentPriority]
               : t.none}

package/src/components/ui/tu-do/boards/boardId/menus/task-scheduling-menu.tsx

@@ -296,12 +296,14 @@ export function TaskSchedulingMenu({
 
   return (
     <DropdownMenuSub open={open} onOpenChange={setOpen}>
-      <DropdownMenuSubTrigger>
-        <CalendarClock className="h-4 w-4 text-dynamic-amber" />
-        <div className="flex w-full items-center justify-between gap-2">
-          <span>{t.schedule}</span>
+      <DropdownMenuSubTrigger className="min-w-0">
+        <CalendarClock className="h-4 w-4 shrink-0 text-dynamic-amber" />
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate whitespace-nowrap">
+            {t.schedule}
+          </span>
           {formattedDuration && (
-            <span className="ml-auto text-muted-foreground text-xs">
+            <span className="max-w-20 shrink-0 truncate whitespace-nowrap text-right text-muted-foreground text-xs">
               {formattedDuration}
             </span>
           )}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-archive-visibility.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { shouldRenderTaskCardQuickArchive } from './task-card-archive-visibility';
+
+describe('shouldRenderTaskCardQuickArchive', () => {
+  it('shows quick archive for document lists when a closed list exists', () => {
+    expect(
+      shouldRenderTaskCardQuickArchive({
+        hasTargetClosedList: true,
+        isOverlay: false,
+        taskListStatus: 'documents',
+      })
+    ).toBe(true);
+  });
+
+  it('keeps quick archive hidden for document lists without a closed list', () => {
+    expect(
+      shouldRenderTaskCardQuickArchive({
+        hasTargetClosedList: false,
+        isOverlay: false,
+        taskListStatus: 'documents',
+      })
+    ).toBe(false);
+  });
+
+  it('keeps non-done workflow lists unchanged', () => {
+    expect(
+      shouldRenderTaskCardQuickArchive({
+        hasTargetClosedList: true,
+        isOverlay: false,
+        taskListStatus: 'active',
+      })
+    ).toBe(false);
+  });
+
+  it('hides quick archive while rendering a drag overlay', () => {
+    expect(
+      shouldRenderTaskCardQuickArchive({
+        hasTargetClosedList: true,
+        isOverlay: true,
+        taskListStatus: 'documents',
+      })
+    ).toBe(false);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-archive-visibility.ts

@@ -0,0 +1,17 @@
+interface TaskCardQuickArchiveVisibilityOptions {
+  hasTargetClosedList: boolean;
+  isOverlay: boolean;
+  taskListStatus?: string | null;
+}
+
+export function shouldRenderTaskCardQuickArchive({
+  hasTargetClosedList,
+  isOverlay,
+  taskListStatus,
+}: TaskCardQuickArchiveVisibilityOptions) {
+  return (
+    !isOverlay &&
+    hasTargetClosedList &&
+    (taskListStatus === 'done' || taskListStatus === 'documents')
+  );
+}

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

@@ -102,6 +102,8 @@ describe('getTaskCardHydratingOpenOptions', () => {
         workspaceMembers: [],
         workspaceProjects: [],
       },
+      visibleBoardId: 'personal-board',
+      visibleTaskSnapshot: externalTask,
     });
   });
 

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

@@ -109,6 +109,7 @@ export function getTaskCardHydratingOpenOptions({
 }: TaskCardOpenOptionsInput) {
   const sourceWorkspaceId = task.source_workspace_id;
   const sourceBoardId = task.source_board_id;
+  const isExternalSnapshot = isExternalTaskSnapshot(task);
   const initialSharedContext = buildInitialSourceContext(
     task,
     sourceWorkspaceId ?? undefined,
@@ -137,5 +138,11 @@ export function getTaskCardHydratingOpenOptions({
     assigneeMemberSource:
       assigneeMemberSource ?? (sourceWorkspaceId ? 'board' : undefined),
     initialSharedContext,
+    ...(isExternalSnapshot
+      ? {
+          visibleBoardId: boardId,
+          visibleTaskSnapshot: task,
+        }
+      : {}),
   };
 }

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

@@ -143,6 +143,7 @@ import { TaskNewLabelDialog } from '../task-dialogs/TaskNewLabelDialog';
 import { TaskNewProjectDialog } from '../task-dialogs/TaskNewProjectDialog';
 import { getTaskCardParentBadgeState } from '../task-parent-badge-state';
 import { TaskCardCheckbox } from './TaskCardCheckbox';
+import { shouldRenderTaskCardQuickArchive } from './task-card-archive-visibility';
 import {
   getTaskCardSelectionCheckboxToneClasses,
   TASK_CARD_OVERDUE_CHECKBOX_TONE_CLASSES,
@@ -780,8 +781,12 @@ function TaskCardInner({
 
   // Find the first list with 'done' or 'closed' status
   const getTargetCompletionList = () => {
-    const doneList = availableLists.find((list) => list.status === 'done');
-    const closedList = availableLists.find((list) => list.status === 'closed');
+    const doneList = availableLists.find(
+      (list) => list.status === 'done' && !list.deleted
+    );
+    const closedList = availableLists.find(
+      (list) => list.status === 'closed' && !list.deleted
+    );
     return doneList || closedList || null;
   };
 
@@ -874,7 +879,11 @@ function TaskCardInner({
 
   // Find specifically the closed list
   const getTargetClosedList = () => {
-    return availableLists.find((list) => list.status === 'closed') || null;
+    return (
+      availableLists.find(
+        (list) => list.status === 'closed' && !list.deleted
+      ) || null
+    );
   };
 
   const targetCompletionList = getTargetCompletionList();
@@ -883,8 +892,15 @@ function TaskCardInner({
     targetCompletionList && targetCompletionList.id !== task.list_id;
   const canMoveToClose =
     targetClosedList && targetClosedList.id !== task.list_id;
-  const canQuickArchive =
-    taskList?.status === 'done' && !isOverlay && Boolean(canMoveToClose);
+  const isDocumentList = taskList?.status === 'documents';
+  const canQuickArchive = shouldRenderTaskCardQuickArchive({
+    hasTargetClosedList: Boolean(canMoveToClose),
+    isOverlay: Boolean(isOverlay),
+    taskListStatus: taskList?.status,
+  });
+  const canShowCloseAction =
+    Boolean(canMoveToClose) &&
+    (isDocumentList || targetClosedList?.id !== targetCompletionList?.id);
   const quickArchiveToneClass = taskList?.color
     ? DESTINATION_TONE_COLORS[taskList.color]
     : DESTINATION_TONE_COLORS.GRAY;
@@ -2035,7 +2051,7 @@ function TaskCardInner({
                     e.stopPropagation(); // Prevent triggering task card click
                   }}
                 >
-                  {taskList?.status !== 'documents' && (
+                  {!isDocumentList && (
                     <DropdownMenuItem
                       className="cursor-pointer"
                       disabled={isLoading}
@@ -2051,11 +2067,9 @@ function TaskCardInner({
                       </Link>
                     </DropdownMenuItem>
                   )}
-                  {taskList?.status !== 'documents' && (
-                    <DropdownMenuSeparator />
-                  )}
+                  {!isDocumentList && <DropdownMenuSeparator />}
                   {/* Quick Completion Action */}
-                  {taskList?.status !== 'documents' && canMoveToCompletion && (
+                  {!isDocumentList && canMoveToCompletion && (
                     <DropdownMenuItem
                       onSelect={(e) =>
                         handleMenuItemSelect(
@@ -2074,28 +2088,28 @@ function TaskCardInner({
                   )}
 
                   {/* Mark as Closed Action - Only show if closed list exists and is different from the generic completion */}
-                  {taskList?.status !== 'documents' &&
-                    canMoveToClose &&
-                    targetClosedList?.id !== targetCompletionList?.id && (
-                      <DropdownMenuItem
-                        onSelect={(e) =>
-                          handleMenuItemSelect(
-                            e as unknown as Event,
-                            handleMoveToClose
-                          )
-                        }
-                        className="cursor-pointer"
-                        disabled={isLoading}
-                      >
+                  {canShowCloseAction && (
+                    <DropdownMenuItem
+                      onSelect={(e) =>
+                        handleMenuItemSelect(
+                          e as unknown as Event,
+                          handleMoveToClose
+                        )
+                      }
+                      className="cursor-pointer"
+                      disabled={isLoading}
+                    >
+                      {isDocumentList ? (
+                        <Archive className="h-4 w-4 text-dynamic-purple" />
+                      ) : (
                         <CircleSlash className="h-4 w-4 text-dynamic-purple" />
-                        {t('mark_as_closed')}
-                      </DropdownMenuItem>
-                    )}
+                      )}
+                      {isDocumentList ? t('archive') : t('mark_as_closed')}
+                    </DropdownMenuItem>
+                  )}
 
-                  {taskList?.status !== 'documents' &&
-                    (canMoveToCompletion || canMoveToClose) && (
-                      <DropdownMenuSeparator />
-                    )}
+                  {((!isDocumentList && canMoveToCompletion) ||
+                    canShowCloseAction) && <DropdownMenuSeparator />}
 
                   {/* Priority Menu */}
                   <TaskPriorityMenu