@tuturuuu/ui 0.14.0 → 0.17.0

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, Target, Trophy, Upload } from '@tuturuuu/icons';
 import {
   createTaskLeaderboard,
   createTaskLeaderboardTeam,
@@ -95,6 +95,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 +104,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],
@@ -236,42 +242,70 @@ export function TaskProgressPage({
   const leaderboards = leaderboardsQuery.data?.ok
     ? leaderboardsQuery.data.leaderboards
     : [];
+  const tabs = [
+    { icon: Flag, value: 'progress' },
+    { icon: Target, value: 'goals' },
+    { icon: BarChart3, value: 'stats' },
+    { icon: Trophy, value: 'leaderboards' },
+    { icon: Upload, value: 'import' },
+  ] as const;
 
   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>
-            <div>
-              <h1 className="font-bold text-2xl tracking-tight">
-                {t(`views.${view}.title`)}
-              </h1>
-              <p className="text-muted-foreground text-sm">
-                {t(`views.${view}.description`)}
-              </p>
-            </div>
+    <div className="mx-auto flex w-full max-w-[1600px] flex-col gap-6 p-4 md:p-6 lg:p-8">
+      <section className="overflow-hidden rounded-2xl border bg-card/60 shadow-sm backdrop-blur">
+        <div className="flex flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between md:p-6">
+          <div className="max-w-2xl">
+            <h1 className="font-bold text-2xl tracking-tight md:text-3xl">
+              {t('views.progress.title')}
+            </h1>
+            <p className="mt-1 text-muted-foreground text-sm md:text-base">
+              {t(`views.${view}.description`)}
+            </p>
+          </div>
+          <div className="shrink-0">
+            {metrics.length > 0 ? (
+              <label className="flex min-w-56 items-center justify-between gap-3 rounded-xl border bg-background px-3 py-2 text-sm shadow-sm">
+                <span className="text-muted-foreground">
+                  {t('fields.metric_name')}
+                </span>
+                <select
+                  className="min-w-28 bg-transparent text-right 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>
         </div>
-        <div className="flex flex-wrap gap-2">
-          {(
-            ['progress', 'goals', 'stats', 'leaderboards', 'import'] as const
-          ).map((tab) => (
+        <nav className="flex max-w-full gap-1 overflow-x-auto border-t bg-muted/20 p-2">
+          {tabs.map(({ icon: TabIcon, value: tab }) => (
             <Button
               key={tab}
               asChild
+              className="shrink-0 gap-2 rounded-lg"
               size="sm"
-              variant={tab === view ? 'default' : 'outline'}
+              variant={tab === view ? 'secondary' : 'ghost'}
             >
-              <Link href={`/${routeWsId}/tasks/${tab}`}>
+              <Link
+                href={
+                  tab === 'progress'
+                    ? `/${routeWsId}/progress`
+                    : `/${routeWsId}/progress/${tab}`
+                }
+              >
+                <TabIcon className="size-4" />
                 {t(`tabs.${tab}`)}
               </Link>
             </Button>
           ))}
-        </div>
-      </div>
+        </nav>
+      </section>
 
       {hasPendingSchema ? (
         <Card>
@@ -281,7 +315,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}
             />

package/src/components/ui/tu-do/projects/projectId/types.ts

@@ -24,6 +24,7 @@ export interface TaskProjectDetailProps {
   documents: Task[];
   lists: TaskList[];
   currentUserId: string;
+  embedded?: boolean;
   wsId: string;
 }
 

package/src/components/ui/tu-do/projects/task-projects-client.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 import { useCallback, useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../dialog';
 import { useTasksHref } from '../tasks-route-context';
 import {
   ProjectGridCard,
@@ -16,11 +17,15 @@ import {
   ManageTasksDialog,
 } from './dialogs';
 import { useProjectFilters, useTaskProjects } from './hooks';
+import TaskProjectDetailPageClient from './projectId/task-project-detail-page-client';
 import type { TaskProject, TaskProjectsClientProps } from './types';
 
 export function TaskProjectsClient({
+  currentUserId,
+  detailMode = 'route',
   wsId,
   initialProjects,
+  workspace,
 }: TaskProjectsClientProps) {
   const router = useRouter();
   const tasksHref = useTasksHref();
@@ -34,6 +39,9 @@ export function TaskProjectsClient({
   const [managingProject, setManagingProject] = useState<TaskProject | null>(
     null
   );
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
+    null
+  );
 
   // Custom hooks
   const taskProjects = useTaskProjects({
@@ -74,6 +82,11 @@ export function TaskProjectsClient({
       ),
     [taskProjects.projects]
   );
+  const selectedProject = selectedProjectId
+    ? (taskProjects.projects.find(
+        (project) => project.id === selectedProjectId
+      ) ?? null)
+    : null;
 
   // Handlers
   const handleEditProject = (project: TaskProject) => {
@@ -120,9 +133,14 @@ export function TaskProjectsClient({
 
   const navigateToProject = useCallback(
     (projectId: string) => {
+      if (detailMode === 'dialog' && workspace && currentUserId) {
+        setSelectedProjectId(projectId);
+        return;
+      }
+
       router.push(`/${wsId}${tasksHref(`/projects/${projectId}`)}`);
     },
-    [router, wsId, tasksHref]
+    [currentUserId, detailMode, router, tasksHref, workspace, wsId]
   );
 
   return (
@@ -168,6 +186,7 @@ export function TaskProjectsClient({
               onDelete={taskProjects.deleteProject}
               onManageTasks={handleOpenManageTasks}
               onNavigate={navigateToProject}
+              navigationMode={detailMode}
               isUpdating={taskProjects.isUpdating}
               isDeleting={taskProjects.isDeleting}
               isLinking={taskProjects.isLinking}
@@ -186,6 +205,7 @@ export function TaskProjectsClient({
               onDelete={taskProjects.deleteProject}
               onManageTasks={handleOpenManageTasks}
               onNavigate={navigateToProject}
+              navigationMode={detailMode}
               isUpdating={taskProjects.isUpdating}
               isDeleting={taskProjects.isDeleting}
               isLinking={taskProjects.isLinking}
@@ -221,6 +241,30 @@ export function TaskProjectsClient({
         isLinking={taskProjects.isLinking}
         isUnlinking={taskProjects.isUnlinking}
       />
+
+      <Dialog
+        open={Boolean(selectedProjectId)}
+        onOpenChange={(open) => {
+          if (!open) setSelectedProjectId(null);
+        }}
+      >
+        <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="sr-only">
+              {selectedProject?.name ?? ''}
+            </DialogTitle>
+          </DialogHeader>
+          {selectedProjectId && workspace && currentUserId && (
+            <TaskProjectDetailPageClient
+              currentUserId={currentUserId}
+              embedded
+              projectId={selectedProjectId}
+              workspace={workspace}
+              wsId={wsId}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

package/src/components/ui/tu-do/projects/types.ts

@@ -1,5 +1,5 @@
 import type { TaskProjectLinkedItem } from '@tuturuuu/internal-api/tasks';
-import type { TaskProjectWithRelations } from '@tuturuuu/types';
+import type { TaskProjectWithRelations, Workspace } from '@tuturuuu/types';
 
 export type ProjectStatus =
   | 'backlog'
@@ -30,6 +30,9 @@ export interface TaskProject extends TaskProjectWithRelations {
 export interface TaskProjectsClientProps {
   wsId: string;
   initialProjects: TaskProject[];
+  currentUserId?: string;
+  detailMode?: 'dialog' | 'route';
+  workspace?: Workspace | null;
 }
 
 export interface TaskOption {

package/src/components/ui/tu-do/providers/task-dialog-provider.tsx

@@ -70,6 +70,10 @@ interface TaskDialogState {
   taskWorkspaceTier?: WorkspaceProductTier;
   /** Initial board/list context used for immediate partial-task rendering. */
   initialSharedContext?: SharedTaskContext;
+  /** Board that supplied the visible task card before source-task hydration. */
+  visibleBoardId?: string;
+  /** Visible task snapshot before hydration, used to preserve overlay metadata. */
+  visibleTaskSnapshot?: Partial<Task>;
   /** True while an existing task was opened from a partial snapshot and is hydrating. */
   isHydratingTask?: boolean;
   /** True when the latest hydration request failed after the dialog already opened. */
@@ -90,6 +94,8 @@ interface OpenTaskByIdOptions {
   canUseBoardAssignees?: boolean;
   assigneeMemberSource?: TaskAssigneeMemberSource;
   initialSharedContext?: SharedTaskContext;
+  visibleBoardId?: string;
+  visibleTaskSnapshot?: Partial<Task>;
 }
 
 interface TaskDialogContextValue {
@@ -486,6 +492,8 @@ export function TaskDialogProvider({
         assigneeMemberSource: options?.assigneeMemberSource,
         taskWorkspaceTier: options?.taskWorkspaceTier,
         initialSharedContext: options?.initialSharedContext,
+        visibleBoardId: options?.visibleBoardId,
+        visibleTaskSnapshot: options?.visibleTaskSnapshot,
         isHydratingTask: true,
         taskLoadError: false,
         taskHydrationVersion: 0,
@@ -567,6 +575,8 @@ export function TaskDialogProvider({
             options?.canUseBoardAssignees ?? !isTaskWorkspacePersonal,
           assigneeMemberSource: options?.assigneeMemberSource,
           taskWorkspaceTier,
+          visibleBoardId: options?.visibleBoardId,
+          visibleTaskSnapshot: options?.visibleTaskSnapshot,
           isHydratingTask: false,
           taskLoadError: false,
           taskHydrationVersion: 1,