@tuturuuu/ui 0.5.0 → 0.6.0

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

@@ -144,6 +144,10 @@ import { areTaskCardPropsEqual } from './task-card-comparator';
 import { shouldRenderTaskCardCompletionCheckbox } from './task-card-completion-checkbox-visibility';
 import { TaskCardIdentifierRow } from './task-card-identifier-row';
 import { mergeTaskCardLabelOptions } from './task-card-label-options';
+import {
+  getTaskCardHydratingOpenOptions,
+  isExternalTaskSnapshot,
+} from './task-card-open-options';
 import { getTaskCardVisibilityState } from './task-card-visibility';
 import { TaskSchedulingBadge } from './task-scheduling-badge';
 
@@ -662,8 +666,7 @@ function TaskCardInner({
 
   // Check if task is optimistically added (pending realtime confirmation)
   const isOptimistic = '_isOptimistic' in task && task._isOptimistic === true;
-  const isPersonalExternalTask =
-    task.is_personal_external === true || Boolean(task.personal_board_id);
+  const isPersonalExternalTask = isExternalTaskSnapshot(task);
   const sourceBoardUrl =
     task.source_workspace_id && task.source_board_id
       ? `/${task.source_workspace_id}${tasksHref(`/boards/${task.source_board_id}`)}`
@@ -887,51 +890,23 @@ function TaskCardInner({
   // Removed explicit drag handle – entire card is now draggable for better UX.
   // Keep attributes/listeners to spread onto root interactive area.
 
-  const openExternalTask = useCallback(async () => {
-    const sourceWorkspaceId = task.source_workspace_id;
-    const sourceBoardId = task.source_board_id;
-
-    if (sourceWorkspaceId && sourceBoardId) {
-      try {
-        const { task: sourceTask } = await getWorkspaceTask(
-          sourceWorkspaceId,
-          task.id
-        );
-        let sourceLists: TaskList[] | undefined;
-
-        try {
-          sourceLists = (
-            await listWorkspaceTaskLists(sourceWorkspaceId, sourceBoardId)
-          ).lists;
-        } catch {
-          sourceLists = undefined;
-        }
-
-        openTask(sourceTask as Task, sourceBoardId, sourceLists, false, {
-          taskWsId: sourceWorkspaceId,
-          taskWorkspacePersonal: false,
-        });
-        return;
-      } catch {
-        const opened = await openTaskById(task.id);
-        if (opened) return;
-      }
-    } else {
-      const opened = await openTaskById(task.id);
-      if (opened) return;
-    }
-
-    openTask(task, sourceBoardId ?? boardId, availableLists, false, {
-      taskWsId: sourceWorkspaceId ?? effectiveWorkspaceId,
-      taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
-    });
+  const openExternalTask = useCallback(() => {
+    void openTaskById(
+      task.id,
+      getTaskCardHydratingOpenOptions({
+        task,
+        boardId,
+        availableLists,
+        effectiveWorkspaceId,
+        isPersonalWorkspace,
+      })
+    );
   }, [
     task,
     boardId,
     availableLists,
     effectiveWorkspaceId,
     isPersonalWorkspace,
-    openTask,
     openTaskById,
   ]);
 
@@ -956,7 +931,7 @@ function TaskCardInner({
       ) {
         // Only open edit dialog if not in multi-select mode, not dragging, and no other dialogs are open
         if (isPersonalExternalTask) {
-          void openExternalTask();
+          openExternalTask();
           return;
         }
 

package/src/components/ui/tu-do/boards/boardId/timeline-board-open-task.test.tsx

@@ -0,0 +1,164 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen } 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 { TimelineBoard } from './timeline-board';
+
+const createTaskMock = vi.hoisted(() => vi.fn());
+const openTaskMock = vi.hoisted(() => vi.fn());
+const openTaskByIdMock = vi.hoisted(() => vi.fn());
+const updateWorkspaceTaskMock = vi.hoisted(() => vi.fn());
+const deleteWorkspaceTaskMock = vi.hoisted(() => vi.fn());
+
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+globalThis.ResizeObserver = MockResizeObserver as typeof ResizeObserver;
+
+vi.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
+
+vi.mock('@tuturuuu/internal-api', () => ({
+  updateWorkspaceTask: updateWorkspaceTaskMock,
+  deleteWorkspaceTask: deleteWorkspaceTaskMock,
+}));
+
+vi.mock('../../hooks/useTaskDialog', () => ({
+  useTaskDialog: () => ({
+    createTask: createTaskMock,
+    openTask: openTaskMock,
+    openTaskById: openTaskByIdMock,
+  }),
+}));
+
+vi.mock('./timeline/timeline-grid', () => ({
+  TimelineGrid: ({
+    localTasks,
+    onOpenTask,
+  }: {
+    localTasks: Task[];
+    onOpenTask: (task: Task) => void;
+  }) => (
+    <button
+      type="button"
+      data-testid="open-timeline-task"
+      onClick={() => onOpenTask(localTasks[0]!)}
+    >
+      Open timeline task
+    </button>
+  ),
+}));
+
+const lists: TaskList[] = [
+  {
+    archived: false,
+    board_id: 'board-1',
+    color: 'GRAY',
+    created_at: '2026-05-01T00:00:00.000Z',
+    creator_id: 'user-1',
+    deleted: false,
+    id: 'todo',
+    name: 'To Do',
+    position: 0,
+    status: 'not_started',
+  },
+];
+
+function task(overrides: Partial<Task> & Pick<Task, 'id' | 'name'>): Task {
+  return {
+    created_at: '2026-05-01T00:00:00.000Z',
+    display_number: 1,
+    end_date: null,
+    labels: [],
+    list_id: 'todo',
+    priority: 'normal',
+    sort_key: 1,
+    start_date: null,
+    ...overrides,
+  } as Task;
+}
+
+function renderTimeline(tasks: Task[]) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <TimelineBoard
+        boardId="board-1"
+        lists={lists}
+        tasks={tasks}
+        wsId="ws-1"
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('TimelineBoard task opening', () => {
+  beforeEach(() => {
+    createTaskMock.mockReset();
+    openTaskMock.mockReset();
+    openTaskByIdMock.mockReset();
+    updateWorkspaceTaskMock.mockReset();
+    deleteWorkspaceTaskMock.mockReset();
+  });
+
+  it('opens external source tasks through the hydrating task-by-id path immediately', () => {
+    renderTimeline([
+      task({
+        id: 'external-timeline-task',
+        name: 'External timeline task',
+        list_id: 'personal-list',
+        personal_board_id: 'board-1',
+        is_personal_external: true,
+        source_workspace_id: 'source-ws',
+        source_board_id: 'source-board',
+        source_board_name: 'Source board',
+        source_list_id: 'source-list',
+        source_list_name: 'Source list',
+      }),
+    ]);
+
+    fireEvent.click(screen.getByTestId('open-timeline-task'));
+
+    expect(openTaskByIdMock).toHaveBeenCalledWith(
+      'external-timeline-task',
+      expect.objectContaining({
+        boardId: 'source-board',
+        taskWsId: 'source-ws',
+        taskWorkspacePersonal: false,
+        initialTask: expect.objectContaining({
+          id: 'external-timeline-task',
+          list_id: 'source-list',
+          name: 'External timeline task',
+        }),
+        initialSharedContext: expect.objectContaining({
+          boardConfig: expect.objectContaining({
+            id: 'source-board',
+            name: 'Source board',
+            ws_id: 'source-ws',
+          }),
+          availableLists: [
+            expect.objectContaining({
+              id: 'source-list',
+              name: 'Source list',
+              board_id: 'source-board',
+            }),
+          ],
+        }),
+      })
+    );
+    expect(openTaskMock).not.toHaveBeenCalled();
+  });
+});

package/src/components/ui/tu-do/boards/boardId/timeline-board.tsx

@@ -32,6 +32,10 @@ import {
   useState,
 } from 'react';
 import { useTaskDialog } from '../../hooks/useTaskDialog';
+import {
+  getTaskCardHydratingOpenOptions,
+  isExternalTaskSnapshot,
+} from './task-card/task-card-open-options';
 import { TaskEditDialog } from './timeline/task-edit-dialog';
 import {
   DEFAULT_DAY_WIDTH,
@@ -111,7 +115,7 @@ export function TimelineBoard({
 }: TimelineProps) {
   const t = useTranslations('common');
   const locale = useLocale();
-  const { createTask, openTask } = useTaskDialog();
+  const { createTask, openTask, openTaskById } = useTaskDialog();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [dayWidth, setDayWidth] = useState(DEFAULT_DAY_WIDTH);
   const [density, setDensity] = useState<Density>('comfortable');
@@ -226,23 +230,28 @@ export function TimelineBoard({
 
   const openTimelineTask = useCallback(
     (task: Task) => {
-      const targetBoardId = task.source_board_id ?? boardId;
-      const targetWorkspaceId = task.source_workspace_id ?? wsId;
-
-      if (!targetBoardId) return;
+      if (!boardId) return;
+
+      if (isExternalTaskSnapshot(task)) {
+        void openTaskById(
+          task.id,
+          getTaskCardHydratingOpenOptions({
+            task,
+            boardId,
+            availableLists: lists,
+            effectiveWorkspaceId: wsId,
+            isPersonalWorkspace: Boolean(wsId),
+          })
+        );
+        return;
+      }
 
-      openTask(
-        task,
-        targetBoardId,
-        task.source_board_id ? undefined : lists,
-        false,
-        {
-          taskWsId: targetWorkspaceId,
-          taskWorkspacePersonal: Boolean(wsId) && !task.source_workspace_id,
-        }
-      );
+      openTask(task, boardId, lists, false, {
+        taskWsId: wsId,
+        taskWorkspacePersonal: Boolean(wsId),
+      });
     },
-    [boardId, lists, openTask, wsId]
+    [boardId, lists, openTask, openTaskById, wsId]
   );
 
   const clearDraft = useCallback((taskId: string) => {

package/src/components/ui/tu-do/hooks/useTaskDialog.ts

@@ -1,3 +1,4 @@
+import type { WorkspaceProductTier } from '@tuturuuu/types';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import type { TaskFilters } from '@tuturuuu/ui/tu-do/boards/boardId/task-filter';
@@ -5,6 +6,7 @@ import {
   type PendingRelationshipType,
   useTaskDialogContext,
 } from '../providers/task-dialog-provider';
+import type { SharedTaskContext } from '../shared/task-edit-dialog/hooks/use-task-data';
 
 /**
  * Hook to open and manage the centralized task dialog
@@ -50,7 +52,19 @@ export function useTaskDialog(): {
       taskWorkspacePersonal?: boolean;
     }
   ) => void;
-  openTaskById: (taskId: string) => Promise<boolean>;
+  openTaskById: (
+    taskId: string,
+    options?: {
+      initialTask?: Partial<Task>;
+      boardId?: string;
+      availableLists?: TaskList[];
+      fakeTaskUrl?: boolean;
+      taskWsId?: string;
+      taskWorkspacePersonal?: boolean;
+      taskWorkspaceTier?: WorkspaceProductTier;
+      initialSharedContext?: SharedTaskContext;
+    }
+  ) => Promise<boolean>;
   createTask: (
     boardId: string,
     listId: string,

package/src/components/ui/tu-do/my-tasks/use-my-tasks-state.ts

@@ -16,6 +16,7 @@ import {
 } from '@tuturuuu/internal-api';
 import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
 import { AI_CREDITS_QUERY_KEY } from '@tuturuuu/ui/hooks/use-ai-credits';
+import { useTaskUserRealtime } from '@tuturuuu/ui/hooks/useTaskUserRealtime';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useTaskDialog } from '@tuturuuu/ui/tu-do/hooks/useTaskDialog';
 import { useBoardConfig } from '@tuturuuu/utils/task-helper';
@@ -51,6 +52,7 @@ export function useMyTasksState({
   const t = useTranslations();
   const queryClient = useQueryClient();
   const { onUpdate, openTaskById } = useTaskDialog();
+  useTaskUserRealtime(userId);
 
   // Filter state (declared before query so it can be passed as param)
   const [taskFilters, setTaskFilters] = useState<{

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

@@ -10,6 +10,7 @@ import {
 } from '@tuturuuu/internal-api';
 import type { TaskWithRelations } from '@tuturuuu/types';
 import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
+import { getActiveTaskUserBroadcast } from '@tuturuuu/ui/hooks/useTaskUserRealtime';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useTranslations } from 'next-intl';
 import { useCallback, useState } from 'react';
@@ -38,6 +39,7 @@ export function useTaskContextActions({
   const [isLoading, setIsLoading] = useState(false);
   const taskWorkspaceId = task.list?.board?.ws_id ?? null;
   const taskBoardId = task.list?.board?.id ?? null;
+  const taskListId = task.list_id ?? task.list?.id ?? null;
 
   const invalidateQueries = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: [MY_TASKS_QUERY_KEY] });
@@ -66,6 +68,63 @@ export function useTaskContextActions({
     [queryClient, task.id]
   );
 
+  const broadcastTaskUpsert = useCallback(
+    (updates: Record<string, unknown>) => {
+      const broadcast = getActiveTaskUserBroadcast();
+      if (!broadcast) return;
+
+      const nextListId =
+        typeof updates.list_id === 'string' ? updates.list_id : taskListId;
+      broadcast('task:upsert', {
+        actor_user_id: userId,
+        actorUserId: userId,
+        boardId: taskBoardId,
+        listId: nextListId,
+        task: {
+          id: task.id,
+          name: task.name,
+          description: task.description ?? null,
+          priority: task.priority ?? null,
+          start_date: task.start_date ?? null,
+          end_date: task.end_date ?? null,
+          list_id: nextListId,
+          created_at: task.created_at ?? null,
+          list: task.list,
+          overrides: task.overrides,
+          ...updates,
+        },
+      });
+    },
+    [task, taskBoardId, taskListId, userId]
+  );
+
+  const broadcastTaskDelete = useCallback(() => {
+    const broadcast = getActiveTaskUserBroadcast();
+    if (!broadcast) return;
+
+    broadcast('task:delete', {
+      actor_user_id: userId,
+      actorUserId: userId,
+      boardId: taskBoardId,
+      listId: taskListId,
+      taskId: task.id,
+    });
+  }, [task.id, taskBoardId, taskListId, userId]);
+
+  const broadcastTaskRelationsChanged = useCallback(() => {
+    const broadcast = getActiveTaskUserBroadcast();
+    if (!broadcast) return;
+
+    broadcast('task:relations-changed', {
+      actor_user_id: userId,
+      actorUserId: userId,
+      boardId: taskBoardId,
+      listId: taskListId,
+      taskId: task.id,
+      taskIds: [task.id],
+    });
+  }, [task.id, taskBoardId, taskListId, userId]);
+
   const handlePriorityChange = useCallback(
     async (priority: TaskPriority | null) => {
       setIsLoading(true);
@@ -73,6 +132,7 @@ export function useTaskContextActions({
       try {
         if (!taskWorkspaceId) throw new Error('Task workspace not found');
         await updateWorkspaceTask(taskWorkspaceId, task.id, { priority });
+        broadcastTaskUpsert({ priority });
         invalidateQueries();
         dispatchTaskSoundCue('update');
       } catch {
@@ -82,7 +142,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, taskWorkspaceId, updateTaskInCache, invalidateQueries, t]
+    [
+      task.id,
+      taskWorkspaceId,
+      updateTaskInCache,
+      invalidateQueries,
+      broadcastTaskUpsert,
+      t,
+    ]
   );
 
   const handleDueDateChange = useCallback(
@@ -98,6 +165,7 @@ export function useTaskContextActions({
         await updateWorkspaceTask(taskWorkspaceId, task.id, {
           end_date: newDate,
         });
+        broadcastTaskUpsert({ end_date: newDate });
         invalidateQueries();
         dispatchTaskSoundCue('update');
       } catch {
@@ -107,7 +175,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, taskWorkspaceId, updateTaskInCache, invalidateQueries, t]
+    [
+      task.id,
+      taskWorkspaceId,
+      updateTaskInCache,
+      invalidateQueries,
+      broadcastTaskUpsert,
+      t,
+    ]
   );
 
   const handleToggleLabel = useCallback(
@@ -121,6 +196,7 @@ export function useTaskContextActions({
         } else {
           await addWorkspaceTaskLabel(taskWorkspaceId, task.id, labelId);
         }
+        broadcastTaskRelationsChanged();
         invalidateQueries();
         dispatchTaskSoundCue('update');
       } catch {
@@ -130,7 +206,14 @@ export function useTaskContextActions({
         setIsLoading(false);
       }
     },
-    [task.id, task.labels, taskWorkspaceId, invalidateQueries, t]
+    [
+      task.id,
+      task.labels,
+      taskWorkspaceId,
+      invalidateQueries,
+      broadcastTaskRelationsChanged,
+      t,
+    ]
   );
 
   const handleComplete = useCallback(async () => {
@@ -151,6 +234,9 @@ export function useTaskContextActions({
       await updateWorkspaceTask(taskWorkspaceId, task.id, {
         list_id: doneList.id,
       });
+      broadcastTaskUpsert({
+        list_id: doneList.id,
+      });
 
       // Clear redundant personal overrides when task is actually done
       if (
@@ -182,6 +268,7 @@ export function useTaskContextActions({
     taskBoardId,
     taskWorkspaceId,
     task.overrides,
+    broadcastTaskUpsert,
     onTaskUpdate,
     onClose,
     t,
@@ -199,6 +286,7 @@ export function useTaskContextActions({
         }
       );
       if (!response.ok) throw new Error('Failed');
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
       dispatchTaskSoundCue('complete');
@@ -207,7 +295,7 @@ export function useTaskContextActions({
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, onTaskUpdate, onClose, t]);
+  }, [task.id, broadcastTaskDelete, onTaskUpdate, onClose, t]);
 
   const handleUndoDoneWithMyPart = useCallback(async () => {
     setIsLoading(true);
@@ -224,6 +312,13 @@ export function useTaskContextActions({
         }
       );
       if (!response.ok) throw new Error('Failed');
+      broadcastTaskUpsert({
+        overrides: {
+          ...task.overrides,
+          personally_unassigned: false,
+          completed_at: null,
+        },
+      });
       onTaskUpdate();
       onClose();
       dispatchTaskSoundCue('update');
@@ -232,7 +327,7 @@ export function useTaskContextActions({
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, onTaskUpdate, onClose, t]);
+  }, [task.id, task.overrides, broadcastTaskUpsert, onTaskUpdate, onClose, t]);
 
   const handleUndoComplete = useCallback(async () => {
     if (!taskBoardId || !taskWorkspaceId) return;
@@ -254,6 +349,7 @@ export function useTaskContextActions({
       await updateWorkspaceTask(taskWorkspaceId, task.id, {
         list_id: activeList.id,
       });
+      broadcastTaskUpsert({ list_id: activeList.id });
 
       onTaskUpdate();
       onClose();
@@ -263,7 +359,15 @@ export function useTaskContextActions({
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, taskBoardId, taskWorkspaceId, onTaskUpdate, onClose, t]);
+  }, [
+    task.id,
+    taskBoardId,
+    taskWorkspaceId,
+    broadcastTaskUpsert,
+    onTaskUpdate,
+    onClose,
+    t,
+  ]);
 
   const handleUnassignMe = useCallback(async () => {
     setIsLoading(true);
@@ -291,6 +395,7 @@ export function useTaskContextActions({
             Boolean(assigneeId && assigneeId !== userId)
           ),
       });
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
       dispatchTaskSoundCue('update');
@@ -310,6 +415,7 @@ export function useTaskContextActions({
     invalidateQueries,
     t,
     task.assignees,
+    broadcastTaskDelete,
   ]);
 
   const handleDelete = useCallback(async () => {
@@ -317,6 +423,7 @@ export function useTaskContextActions({
     try {
       if (!taskWorkspaceId) throw new Error('Task workspace not found');
       await deleteWorkspaceTask(taskWorkspaceId, task.id);
+      broadcastTaskDelete();
       onTaskUpdate();
       onClose();
       dispatchTaskSoundCue('delete');
@@ -325,7 +432,7 @@ export function useTaskContextActions({
     } finally {
       setIsLoading(false);
     }
-  }, [task.id, taskWorkspaceId, onTaskUpdate, onClose, t]);
+  }, [task.id, taskWorkspaceId, broadcastTaskDelete, onTaskUpdate, onClose, t]);
 
   return {
     isLoading,