@tuturuuu/ui 0.14.0 → 0.16.0

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')}

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

@@ -22,15 +22,17 @@ export function SummaryCard({
   value: number;
 }) {
   return (
-    <Card>
+    <Card className="group overflow-hidden transition-all hover:-translate-y-0.5 hover:shadow-md">
       <CardHeader className="pb-2">
         <CardTitle className="flex items-center gap-2 text-muted-foreground text-sm">
-          {icon}
+          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-dynamic-blue/10 text-dynamic-blue transition-transform group-hover:scale-110">
+            {icon}
+          </span>
           {label}
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="font-bold text-2xl">
+        <div className="font-bold text-3xl tracking-tight">
           {Number(value).toLocaleString()}
         </div>
       </CardContent>
@@ -49,7 +51,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 transition focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
       defaultValue={selectedMetric?.id}
       name={name}
       required
@@ -81,8 +83,8 @@ export function ProgressPanel(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('progress.log_entry')}</CardTitle>
         </CardHeader>
@@ -138,7 +140,7 @@ export function ProgressPanel(props: {
           ) : (
             entries.map((entry) => (
               <div
-                className="flex items-start justify-between gap-3 rounded-md border p-3"
+                className="flex items-start justify-between gap-3 rounded-xl border bg-background p-4 transition-colors hover:bg-muted/30"
                 key={entry.id}
               >
                 <div>
@@ -177,8 +179,8 @@ export function GoalsPanel(props: {
   const { createGoalMutation, goals, metrics, selectedMetric, t } = 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('goals.create_goal')}</CardTitle>
         </CardHeader>
@@ -202,7 +204,7 @@ export function GoalsPanel(props: {
             <Input defaultValue={today()} name="period_start" type="date" />
             <Input name="period_end" type="date" />
             <select
-              className="h-10 rounded-md border bg-background px-3 text-sm"
+              className="h-11 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"
               name="goal_type"
             >
               <option value="target">{t('goal_types.target')}</option>

package/src/components/ui/tu-do/projects/components/project-grid-card.tsx

@@ -30,6 +30,7 @@ interface ProjectGridCardProps {
   onDelete: (projectId: string) => void;
   onManageTasks: (project: TaskProject) => void;
   onNavigate: (projectId: string) => void;
+  navigationMode?: 'dialog' | 'route';
   isUpdating: boolean;
   isDeleting: boolean;
   isLinking: boolean;
@@ -43,6 +44,7 @@ export function ProjectGridCard({
   onDelete,
   onManageTasks,
   onNavigate,
+  navigationMode = 'route',
   isUpdating,
   isDeleting,
   isLinking,
@@ -132,15 +134,29 @@ export function ProjectGridCard({
           <Link2 className="h-4 w-4" />
           {t('manage')}
         </Button>
-        <NextLink
-          href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
-          onClick={(event) => event.stopPropagation()}
-        >
-          <Button size="sm" className="w-full gap-2">
+        {navigationMode === 'route' ? (
+          <NextLink
+            href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <Button size="sm" className="w-full gap-2">
+              <ExternalLink className="h-4 w-4" />
+              {t('open')}
+            </Button>
+          </NextLink>
+        ) : (
+          <Button
+            size="sm"
+            className="w-full gap-2"
+            onClick={(event) => {
+              event.stopPropagation();
+              onNavigate(project.id);
+            }}
+          >
             <ExternalLink className="h-4 w-4" />
             {t('open')}
           </Button>
-        </NextLink>
+        )}
       </div>
     </Card>
   );

package/src/components/ui/tu-do/projects/components/project-list-item.tsx

@@ -30,6 +30,7 @@ interface ProjectListItemProps {
   onDelete: (projectId: string) => void;
   onManageTasks: (project: TaskProject) => void;
   onNavigate: (projectId: string) => void;
+  navigationMode?: 'dialog' | 'route';
   isUpdating: boolean;
   isDeleting: boolean;
   isLinking: boolean;
@@ -43,6 +44,7 @@ export function ProjectListItem({
   onDelete,
   onManageTasks,
   onNavigate,
+  navigationMode = 'route',
   isUpdating,
   isDeleting,
   isLinking,
@@ -61,14 +63,28 @@ export function ProjectListItem({
         <div className="min-w-0 space-y-3">
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
-              <NextLink
-                href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
-                className="inline-flex max-w-full items-center gap-2 font-semibold text-lg hover:text-dynamic-blue"
-                onClick={(event) => event.stopPropagation()}
-              >
-                <span className="truncate">{project.name}</span>
-                <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
-              </NextLink>
+              {navigationMode === 'route' ? (
+                <NextLink
+                  href={`/${wsId}${tasksHref(`/projects/${project.id}`)}`}
+                  className="inline-flex max-w-full items-center gap-2 font-semibold text-lg hover:text-dynamic-blue"
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  <span className="truncate">{project.name}</span>
+                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+                </NextLink>
+              ) : (
+                <button
+                  type="button"
+                  className="inline-flex max-w-full items-center gap-2 text-left font-semibold text-lg hover:text-dynamic-blue"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onNavigate(project.id);
+                  }}
+                >
+                  <span className="truncate">{project.name}</span>
+                  <ExternalLink className="h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
+                </button>
+              )}
               <p className="mt-1 line-clamp-2 text-muted-foreground text-sm">
                 {project.description || t('no_description')}
               </p>

package/src/components/ui/tu-do/projects/projectId/components/__tests__/tasks-tab-layout.test.tsx

@@ -160,4 +160,10 @@ describe('TasksTab layout', () => {
     expect(captured.listViewProps.preserveTaskOrder).toBe(true);
     expect(captured.listViewProps.searchQuery).toBe('project');
   });
+
+  it('omits removed projects route back link in embedded mode', () => {
+    renderTasksTab({ embedded: true });
+
+    expect(captured.boardHeaderProps.backUrl).toBeUndefined();
+  });
 });

package/src/components/ui/tu-do/projects/projectId/components/tasks-tab.tsx

@@ -38,6 +38,7 @@ interface TasksTabProps {
   setListStatusFilter: (filter: ListStatusFilter) => void;
   setShowLinkTaskDialog: (show: boolean) => void;
   onTaskPartialUpdate: (taskId: string, partial: Partial<Task>) => void;
+  embedded?: boolean;
   isMultiSelectMode: boolean;
   setIsMultiSelectMode: (mode: boolean) => void;
 }
@@ -58,6 +59,7 @@ export function TasksTab({
   setListStatusFilter,
   setShowLinkTaskDialog,
   onTaskPartialUpdate,
+  embedded = false,
   isMultiSelectMode,
   setIsMultiSelectMode,
 }: TasksTabProps) {
@@ -207,7 +209,7 @@ export function TasksTab({
             listStatusFilter={listStatusFilter}
             onListStatusFilterChange={setListStatusFilter}
             isPersonalWorkspace={workspace.personal}
-            backUrl={`/${wsId}${tasksHref('/projects')}`}
+            backUrl={embedded ? undefined : `/${wsId}${tasksHref('/projects')}`}
             hideActions={true}
             isMultiSelectMode={isMultiSelectMode}
             setIsMultiSelectMode={setIsMultiSelectMode}

package/src/components/ui/tu-do/projects/projectId/task-project-detail-page-client.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
+import { Loader2 } from '@tuturuuu/icons';
 import {
   getWorkspaceTaskProject,
   getWorkspaceTaskProjectTasks,
@@ -16,8 +17,9 @@ interface Props {
   projectId: string;
   currentUserId: string;
   workspace: Workspace;
-  initialProject: TaskProjectWithRelations;
-  initialProjectData: { tasks: Task[]; documents: Task[]; lists: TaskList[] };
+  embedded?: boolean;
+  initialProject?: TaskProjectWithRelations;
+  initialProjectData?: { tasks: Task[]; documents: Task[]; lists: TaskList[] };
 }
 
 export default function TaskProjectDetailPageClient({
@@ -25,6 +27,7 @@ export default function TaskProjectDetailPageClient({
   projectId,
   currentUserId,
   workspace,
+  embedded = false,
   initialProject,
   initialProjectData,
 }: Props) {
@@ -53,7 +56,11 @@ export default function TaskProjectDetailPageClient({
   }
 
   if (!project || !projectData) {
-    return null;
+    return (
+      <div className="flex min-h-[320px] items-center justify-center">
+        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+      </div>
+    );
   }
 
   const lists: TaskList[] = (projectData.lists ?? []).map((list) => ({
@@ -79,6 +86,7 @@ export default function TaskProjectDetailPageClient({
       documents={projectData.documents ?? []}
       lists={lists}
       currentUserId={currentUserId}
+      embedded={embedded}
       wsId={wsId}
     />
   );

package/src/components/ui/tu-do/projects/projectId/task-project-detail.tsx

@@ -38,6 +38,7 @@ export function TaskProjectDetail({
   documents,
   lists,
   currentUserId,
+  embedded = false,
   wsId,
 }: TaskProjectDetailProps) {
   const router = useRouter();
@@ -334,6 +335,7 @@ export function TaskProjectDetail({
               setListStatusFilter={setListStatusFilter}
               setShowLinkTaskDialog={taskLinking.setShowLinkTaskDialog}
               onTaskPartialUpdate={handleTaskPartialUpdate}
+              embedded={embedded}
               isMultiSelectMode={isMultiSelectMode}
               setIsMultiSelectMode={setIsMultiSelectMode}
             />