@tuturuuu/ui 0.14.0 → 0.17.0

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

package/src/components/ui/tu-do/my-tasks/__tests__/use-task-context-actions.test.ts

@@ -15,6 +15,7 @@ const {
   mockT,
   mockToastError,
   mockUpdateWorkspaceTask,
+  mockUpsertCurrentUserTaskPersonalPlacement,
 } = vi.hoisted(() => ({
   mockAddWorkspaceTaskLabel: vi.fn(),
   mockDeleteWorkspaceTask: vi.fn(),
@@ -26,6 +27,7 @@ const {
   mockT: vi.fn((key: string) => key),
   mockToastError: vi.fn(),
   mockUpdateWorkspaceTask: vi.fn(),
+  mockUpsertCurrentUserTaskPersonalPlacement: vi.fn(),
 }));
 
 vi.mock('@tanstack/react-query', () => ({
@@ -45,6 +47,8 @@ vi.mock('@tuturuuu/internal-api', () => ({
   listWorkspaceTaskLists: mockListWorkspaceTaskLists,
   removeWorkspaceTaskLabel: mockRemoveWorkspaceTaskLabel,
   updateWorkspaceTask: mockUpdateWorkspaceTask,
+  upsertCurrentUserTaskPersonalPlacement:
+    mockUpsertCurrentUserTaskPersonalPlacement,
 }));
 
 vi.mock('next-intl', () => ({
@@ -106,6 +110,9 @@ describe('useTaskContextActions', () => {
     });
     mockRemoveWorkspaceTaskLabel.mockResolvedValue({ success: true });
     mockUpdateWorkspaceTask.mockResolvedValue({ task: null });
+    mockUpsertCurrentUserTaskPersonalPlacement.mockResolvedValue({
+      task: { id: 'task-123' },
+    });
   });
 
   it('handleDoneWithMyPart sends PUT with personally_unassigned=true', async () => {
@@ -230,6 +237,53 @@ describe('useTaskContextActions', () => {
     );
   });
 
+  it('handleComplete uses terminal personal placement for personal external tasks', async () => {
+    const taskWithPersonalPlacement = {
+      ...mockTask,
+      overrides: {
+        task_id: 'task-123',
+        user_id: 'user-1',
+        self_managed: false,
+        completed_at: null,
+        priority_override: null,
+        due_date_override: null,
+        estimation_override: null,
+        personally_unassigned: false,
+        notes: null,
+        personal_board_id: 'personal-board',
+        personal_list_id: 'personal-list',
+        created_at: '2026-01-01T00:00:00Z',
+        updated_at: '2026-01-01T00:00:00Z',
+      },
+    } as TaskWithRelations;
+
+    const { result } = renderHook(() =>
+      useTaskContextActions({
+        task: taskWithPersonalPlacement,
+        userId,
+        onTaskUpdate,
+        onClose,
+      })
+    );
+
+    await act(async () => {
+      await result.current.handleComplete();
+    });
+
+    expect(mockListWorkspaceTaskLists).not.toHaveBeenCalled();
+    expect(mockUpdateWorkspaceTask).not.toHaveBeenCalled();
+    expect(mockUpsertCurrentUserTaskPersonalPlacement).toHaveBeenCalledWith(
+      'task-123',
+      {
+        personal_board_id: 'personal-board',
+        personal_list_id: 'personal-list',
+        terminal_status: 'done',
+      }
+    );
+    expect(onTaskUpdate).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it('handleComplete clears overrides when task has personally_unassigned', async () => {
     const taskWithPersonallyUnassigned = {
       ...mockTask,

package/src/components/ui/tu-do/my-tasks/task-list-with-completion.tsx

@@ -14,6 +14,7 @@ import {
 import {
   listWorkspaceTaskLists,
   updateWorkspaceTask,
+  upsertCurrentUserTaskPersonalPlacement,
 } from '@tuturuuu/internal-api';
 import type { TaskWithRelations } from '@tuturuuu/types';
 import type { Task as PrimitiveTask } from '@tuturuuu/types/primitives/Task';
@@ -200,8 +201,50 @@ export default function TaskListWithCompletion({
 
     setCompletingTasks((prev) => new Set(prev).add(task.id));
     const snapshot = snapshotCache();
+    const isCompleted = task.list?.status === 'done';
+    const personalPlacement = task.overrides as
+      | (NonNullable<typeof task.overrides> & {
+          personal_board_id?: string | null;
+          personal_list_id?: string | null;
+        })
+      | null;
+    const personalBoardId = personalPlacement?.personal_board_id ?? null;
 
     try {
+      if (personalBoardId && !isCompleted) {
+        removeTaskFromCache(task.id);
+
+        await upsertCurrentUserTaskPersonalPlacement(task.id, {
+          personal_board_id: personalBoardId,
+          personal_list_id: personalPlacement?.personal_list_id ?? null,
+          terminal_status: 'done',
+        });
+
+        if (
+          task.overrides?.completed_at ||
+          task.overrides?.personally_unassigned
+        ) {
+          await fetch(
+            getTaskApiUrl(`/api/v1/users/me/tasks/${task.id}/overrides`),
+            {
+              method: 'PUT',
+              credentials: 'include',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                completed_at: null,
+                personally_unassigned: false,
+              }),
+            }
+          ).catch(() => {
+            // Non-critical cleanup — don't block the completion flow
+          });
+        }
+
+        toast.success(t('task_completed_toast'));
+        onTaskUpdate?.();
+        return;
+      }
+
       // Find the board's done list
       const { lists } = await listWorkspaceTaskLists(
         task.list.board.ws_id,
@@ -221,7 +264,6 @@ export default function TaskListWithCompletion({
         return;
       }
 
-      const isCompleted = task.list?.status === 'done';
       const targetListId = isCompleted ? notStartedList.id : doneList.id;
 
       // Optimistic: remove from view (completion hides task)