@tuturuuu/ui 0.13.0 → 0.16.0

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)

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

@@ -7,6 +7,7 @@ import {
   listWorkspaceTaskLists,
   removeWorkspaceTaskLabel,
   updateWorkspaceTask,
+  upsertCurrentUserTaskPersonalPlacement,
 } from '@tuturuuu/internal-api';
 import type { TaskWithRelations } from '@tuturuuu/types';
 import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
@@ -221,23 +222,40 @@ export function useTaskContextActions({
     if (!taskBoardId || !taskWorkspaceId) return;
     setIsLoading(true);
     try {
-      const { lists } = await listWorkspaceTaskLists(
-        taskWorkspaceId,
-        taskBoardId
-      );
+      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;
 
-      const doneList = lists?.find((l) => l.status === 'done');
-      if (!doneList) {
-        toast.error('No done list found');
-        return;
-      }
+      if (personalBoardId) {
+        await upsertCurrentUserTaskPersonalPlacement(task.id, {
+          personal_board_id: personalBoardId,
+          personal_list_id: personalPlacement?.personal_list_id ?? null,
+          terminal_status: 'done',
+        });
+        broadcastTaskUpsert({});
+      } else {
+        const { lists } = await listWorkspaceTaskLists(
+          taskWorkspaceId,
+          taskBoardId
+        );
 
-      await updateWorkspaceTask(taskWorkspaceId, task.id, {
-        list_id: doneList.id,
-      });
-      broadcastTaskUpsert({
-        list_id: doneList.id,
-      });
+        const doneList = lists?.find((l) => l.status === 'done');
+        if (!doneList) {
+          toast.error('No done list found');
+          return;
+        }
+
+        await updateWorkspaceTask(taskWorkspaceId, task.id, {
+          list_id: doneList.id,
+        });
+        broadcastTaskUpsert({
+          list_id: doneList.id,
+        });
+      }
 
       // Clear redundant personal overrides when task is actually done
       if (

package/src/components/ui/tu-do/progress/task-progress-leaderboards-panel.tsx

@@ -19,7 +19,7 @@ function MetricSelect({
 }) {
   return (
     <select
-      className="h-10 rounded-md border bg-background px-3 text-sm"
+      className="h-11 w-full rounded-xl border bg-background px-3 text-sm shadow-sm outline-none focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
       defaultValue={selectedMetric?.id}
       name="metric_id"
       required
@@ -55,8 +55,8 @@ export function LeaderboardsPanel(props: {
   } = props;
 
   return (
-    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
-      <Card>
+    <div className="grid gap-4 xl:grid-cols-[minmax(20rem,0.75fr)_minmax(0,1.25fr)]">
+      <Card className="h-fit xl:sticky xl:top-6">
         <CardHeader>
           <CardTitle>{t('leaderboards.create_leaderboard')}</CardTitle>
         </CardHeader>

package/src/components/ui/tu-do/progress/task-progress-page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { BarChart3, Flag, Target, TrendingUp, Trophy } from '@tuturuuu/icons';
+import { BarChart3, Flag, Sparkles, Target, Trophy } from '@tuturuuu/icons';
 import {
   createTaskLeaderboard,
   createTaskLeaderboardTeam,
@@ -40,6 +40,7 @@ export type TaskProgressView =
   | 'import';
 
 interface TaskProgressPageProps {
+  onViewChange?: (view: TaskProgressView) => void;
   routeWsId: string;
   view: TaskProgressView;
   wsId: string;
@@ -87,6 +88,7 @@ function parseImportRows(text: string, metrics: TaskProgressMetric[]) {
 }
 
 export function TaskProgressPage({
+  onViewChange,
   routeWsId,
   view,
   wsId,
@@ -95,6 +97,7 @@ export function TaskProgressPage({
   const queryClient = useQueryClient();
   const [importText, setImportText] = useState('');
   const [importPreviewCount, setImportPreviewCount] = useState(0);
+  const [selectedMetricId, setSelectedMetricId] = useState<string | null>(null);
   const queryRoot = ['task-progress', wsId];
 
   const metricsQuery = useQuery({
@@ -103,7 +106,12 @@ export function TaskProgressPage({
   });
   const metrics =
     metricsQuery.data?.ok === true ? metricsQuery.data.metrics : [];
-  const selectedMetric = useMemo(() => metricOption(metrics), [metrics]);
+  const selectedMetric = useMemo(
+    () =>
+      metrics.find((metric) => metric.id === selectedMetricId) ??
+      metricOption(metrics),
+    [metrics, selectedMetricId]
+  );
 
   const entriesQuery = useQuery({
     queryKey: [...queryRoot, 'entries', selectedMetric?.id],
@@ -238,40 +246,78 @@ export function TaskProgressPage({
     : [];
 
   return (
-    <div className="flex flex-col gap-6 p-4 md:p-6">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-dynamic-blue/10 ring-1 ring-dynamic-blue/20">
-              <TrendingUp className="h-5 w-5 text-dynamic-blue" />
+    <div className="mx-auto flex w-full max-w-[1600px] flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <section className="relative overflow-hidden rounded-3xl border bg-gradient-to-br from-background via-background to-dynamic-blue/10 p-5 shadow-sm md:p-7">
+        <div className="pointer-events-none absolute -top-24 -right-20 h-64 w-64 rounded-full bg-dynamic-blue/10 blur-3xl" />
+        <div className="relative flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
+          <div className="max-w-2xl space-y-3">
+            <div className="flex items-center gap-2 font-semibold text-dynamic-blue text-xs uppercase tracking-[0.18em]">
+              <Sparkles className="h-4 w-4" />
+              {t('views.progress.title')}
             </div>
             <div>
-              <h1 className="font-bold text-2xl tracking-tight">
+              <h1 className="font-bold text-3xl tracking-tight md:text-4xl">
                 {t(`views.${view}.title`)}
               </h1>
-              <p className="text-muted-foreground text-sm">
+              <p className="mt-2 text-muted-foreground">
                 {t(`views.${view}.description`)}
               </p>
             </div>
+            {metrics.length > 0 ? (
+              <label className="inline-flex items-center gap-3 rounded-xl border bg-background/80 px-3 py-2 text-sm shadow-sm backdrop-blur">
+                <span className="text-muted-foreground">
+                  {t('fields.metric_name')}
+                </span>
+                <select
+                  className="min-w-32 bg-transparent font-medium outline-none"
+                  onChange={(event) => setSelectedMetricId(event.target.value)}
+                  value={selectedMetric?.id ?? ''}
+                >
+                  {metrics.map((metric) => (
+                    <option key={metric.id} value={metric.id}>
+                      {metric.name}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            ) : null}
           </div>
+          <nav className="flex max-w-full gap-1 overflow-x-auto rounded-2xl border bg-background/80 p-1.5 shadow-sm backdrop-blur">
+            {(
+              ['progress', 'goals', 'stats', 'leaderboards', 'import'] as const
+            ).map((tab) =>
+              onViewChange ? (
+                <Button
+                  key={tab}
+                  onClick={() => onViewChange(tab)}
+                  size="sm"
+                  type="button"
+                  variant={tab === view ? 'default' : 'ghost'}
+                >
+                  {t(`tabs.${tab}`)}
+                </Button>
+              ) : (
+                <Button
+                  key={tab}
+                  asChild
+                  size="sm"
+                  variant={tab === view ? 'default' : 'ghost'}
+                >
+                  <Link
+                    href={
+                      tab === 'progress'
+                        ? `/${routeWsId}/progress`
+                        : `/${routeWsId}/progress/${tab}`
+                    }
+                  >
+                    {t(`tabs.${tab}`)}
+                  </Link>
+                </Button>
+              )
+            )}
+          </nav>
         </div>
-        <div className="flex flex-wrap gap-2">
-          {(
-            ['progress', 'goals', 'stats', 'leaderboards', 'import'] as const
-          ).map((tab) => (
-            <Button
-              key={tab}
-              asChild
-              size="sm"
-              variant={tab === view ? 'default' : 'outline'}
-            >
-              <Link href={`/${routeWsId}/tasks/${tab}`}>
-                {t(`tabs.${tab}`)}
-              </Link>
-            </Button>
-          ))}
-        </div>
-      </div>
+      </section>
 
       {hasPendingSchema ? (
         <Card>
@@ -281,7 +327,7 @@ export function TaskProgressPage({
         </Card>
       ) : null}
 
-      <div className="grid gap-4 md:grid-cols-4">
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
         <SummaryCard
           icon={<BarChart3 className="h-4 w-4" />}
           label={t('summary.total')}