@tuturuuu/ui 0.4.1 → 0.6.0

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.test.ts

@@ -0,0 +1,134 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { describe, expect, it } from 'vitest';
+import {
+  getTaskCardHydratingOpenOptions,
+  isExternalTaskSnapshot,
+} from './task-card-open-options';
+
+const task = {
+  id: 'task-1',
+  name: 'Visible task',
+  description: '',
+  list_id: 'list-1',
+  display_number: 7,
+  created_at: '2026-06-12T00:00:00.000Z',
+  end_date: null,
+  priority: 'normal',
+} satisfies Task;
+
+const list = {
+  id: 'list-1',
+  name: 'To Do',
+  board_id: 'board-1',
+  position: 0,
+  status: 'not_started',
+  color: 'BLUE',
+  created_at: '2026-06-12T00:00:00.000Z',
+  creator_id: 'user-1',
+  archived: false,
+  deleted: false,
+} satisfies TaskList;
+
+describe('getTaskCardHydratingOpenOptions', () => {
+  it('opens external task cards from the visible snapshot while hydrating source details', () => {
+    const externalTask = {
+      ...task,
+      list_id: 'personal-list',
+      source_workspace_id: 'source-workspace',
+      source_workspace_name: 'Source workspace',
+      source_board_id: 'source-board',
+      source_board_name: 'Source board',
+      source_list_id: 'source-list',
+      source_list_name: 'Doing',
+      source_list_status: 'active',
+      ticket_prefix: 'SRC',
+    } satisfies Task & { ticket_prefix: string };
+
+    expect(
+      getTaskCardHydratingOpenOptions({
+        task: externalTask,
+        boardId: 'personal-board',
+        availableLists: [list],
+        effectiveWorkspaceId: 'personal-workspace',
+        isPersonalWorkspace: true,
+      })
+    ).toEqual({
+      initialTask: {
+        ...externalTask,
+        list_id: 'source-list',
+      },
+      boardId: 'source-board',
+      availableLists: [
+        {
+          id: 'source-list',
+          name: 'Doing',
+          board_id: 'source-board',
+          position: 0,
+          status: 'active',
+          color: 'GRAY',
+          created_at: '2026-06-12T00:00:00.000Z',
+          creator_id: '',
+          archived: false,
+          deleted: false,
+        },
+      ],
+      taskWsId: 'source-workspace',
+      taskWorkspacePersonal: false,
+      initialSharedContext: {
+        boardConfig: {
+          id: 'source-board',
+          name: 'Source board',
+          ws_id: 'source-workspace',
+          ticket_prefix: 'SRC',
+        },
+        availableLists: [
+          {
+            id: 'source-list',
+            name: 'Doing',
+            board_id: 'source-board',
+            position: 0,
+            status: 'active',
+            color: 'GRAY',
+            created_at: '2026-06-12T00:00:00.000Z',
+            creator_id: '',
+            archived: false,
+            deleted: false,
+          },
+        ],
+        workspaceLabels: [],
+        workspaceMembers: [],
+        workspaceProjects: [],
+      },
+    });
+  });
+
+  it('keeps local board metadata for non-source personal tasks', () => {
+    expect(
+      getTaskCardHydratingOpenOptions({
+        task,
+        boardId: 'board-1',
+        availableLists: [list],
+        effectiveWorkspaceId: 'workspace-1',
+        isPersonalWorkspace: true,
+      })
+    ).toEqual({
+      initialTask: task,
+      boardId: 'board-1',
+      availableLists: [list],
+      taskWsId: 'workspace-1',
+      taskWorkspacePersonal: true,
+      initialSharedContext: undefined,
+    });
+  });
+
+  it('treats source metadata as an external task snapshot', () => {
+    expect(
+      isExternalTaskSnapshot({
+        ...task,
+        source_workspace_id: 'source-workspace',
+      })
+    ).toBe(true);
+    expect(isExternalTaskSnapshot(task)).toBe(false);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.ts

@@ -0,0 +1,127 @@
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { SharedTaskContext } from '../../../shared/task-edit-dialog/hooks/use-task-data';
+
+interface TaskCardOpenOptionsInput {
+  task: Task;
+  boardId: string;
+  availableLists?: TaskList[];
+  effectiveWorkspaceId?: string;
+  isPersonalWorkspace: boolean;
+}
+
+export function isExternalTaskSnapshot(task: Task) {
+  return (
+    task.is_personal_external === true ||
+    Boolean(task.personal_board_id) ||
+    Boolean(task.source_workspace_id) ||
+    Boolean(task.source_board_id)
+  );
+}
+
+function normalizeSourceListStatus(status?: string | null): TaskList['status'] {
+  switch (status) {
+    case 'documents':
+    case 'not_started':
+    case 'active':
+    case 'review':
+    case 'done':
+    case 'closed':
+      return status;
+    default:
+      return 'not_started';
+  }
+}
+
+function getTaskTicketPrefix(task: Task) {
+  return 'ticket_prefix' in task && typeof task.ticket_prefix === 'string'
+    ? task.ticket_prefix
+    : undefined;
+}
+
+function buildInitialSourceList(
+  task: Task,
+  sourceBoardId: string
+): TaskList | undefined {
+  if (!task.source_list_id) {
+    return undefined;
+  }
+
+  return {
+    id: task.source_list_id,
+    name: task.source_list_name ?? task.source_list_id,
+    archived: false,
+    deleted: false,
+    created_at: task.created_at,
+    board_id: sourceBoardId,
+    creator_id: '',
+    status: normalizeSourceListStatus(task.source_list_status),
+    color: 'GRAY',
+    position: 0,
+  };
+}
+
+function buildInitialSourceContext(
+  task: Task,
+  sourceWorkspaceId?: string,
+  sourceBoardId?: string
+): SharedTaskContext | undefined {
+  if (!sourceBoardId) {
+    return undefined;
+  }
+
+  const sourceList = buildInitialSourceList(task, sourceBoardId);
+
+  return {
+    boardConfig: {
+      id: sourceBoardId,
+      name: task.source_board_name ?? sourceBoardId,
+      ws_id: sourceWorkspaceId,
+      ticket_prefix: getTaskTicketPrefix(task),
+    },
+    availableLists: sourceList ? [sourceList] : undefined,
+    workspaceLabels: task.labels ?? [],
+    workspaceMembers:
+      task.assignees?.map((assignee) => ({
+        id: assignee.id,
+        user_id: assignee.id,
+        display_name: assignee.display_name ?? assignee.email ?? assignee.id,
+        avatar_url: assignee.avatar_url ?? null,
+      })) ?? [],
+    workspaceProjects: task.projects ?? [],
+  };
+}
+
+export function getTaskCardHydratingOpenOptions({
+  task,
+  boardId,
+  availableLists,
+  effectiveWorkspaceId,
+  isPersonalWorkspace,
+}: TaskCardOpenOptionsInput) {
+  const sourceWorkspaceId = task.source_workspace_id;
+  const sourceBoardId = task.source_board_id;
+  const initialSharedContext = buildInitialSourceContext(
+    task,
+    sourceWorkspaceId ?? undefined,
+    sourceBoardId ?? undefined
+  );
+  const initialTask = {
+    ...task,
+    list_id: task.source_list_id ?? task.list_id,
+  };
+
+  return {
+    initialTask,
+    boardId: sourceBoardId ?? boardId,
+    availableLists:
+      sourceBoardId && initialSharedContext?.availableLists
+        ? initialSharedContext.availableLists
+        : sourceBoardId
+          ? undefined
+          : availableLists,
+    taskWsId: sourceWorkspaceId ?? effectiveWorkspaceId,
+    taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
+    initialSharedContext,
+  };
+}

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/__tests__/use-task-context-actions.test.ts

@@ -7,6 +7,7 @@ import { useTaskContextActions } from '../use-task-context-actions';
 const {
   mockAddWorkspaceTaskLabel,
   mockDeleteWorkspaceTask,
+  mockDispatchTaskSoundCue,
   mockInvalidateQueries,
   mockListWorkspaceTaskLists,
   mockRemoveWorkspaceTaskLabel,
@@ -17,6 +18,7 @@ const {
 } = vi.hoisted(() => ({
   mockAddWorkspaceTaskLabel: vi.fn(),
   mockDeleteWorkspaceTask: vi.fn(),
+  mockDispatchTaskSoundCue: vi.fn(),
   mockInvalidateQueries: vi.fn(),
   mockListWorkspaceTaskLists: vi.fn(),
   mockRemoveWorkspaceTaskLabel: vi.fn(),
@@ -55,6 +57,10 @@ vi.mock('@tuturuuu/ui/sonner', () => ({
   },
 }));
 
+vi.mock('../../shared/task-sound-effects', () => ({
+  dispatchTaskSoundCue: mockDispatchTaskSoundCue,
+}));
+
 // Mock fetch
 global.fetch = vi.fn();
 
@@ -131,6 +137,7 @@ describe('useTaskContextActions', () => {
     );
     expect(onTaskUpdate).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('complete');
   });
 
   it('handleUndoDoneWithMyPart sends PUT with both flags cleared', async () => {
@@ -165,6 +172,7 @@ describe('useTaskContextActions', () => {
     );
     expect(onTaskUpdate).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('update');
   });
 
   it('handleComplete clears overrides when task has completed_at override', async () => {
@@ -279,6 +287,7 @@ describe('useTaskContextActions', () => {
     expect(mockDeleteWorkspaceTask).toHaveBeenCalledWith('ws-1', mockTask.id);
     expect(onTaskUpdate).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('delete');
   });
 
   it('handlePriorityChange updates task priority via internal API', async () => {
@@ -299,6 +308,7 @@ describe('useTaskContextActions', () => {
       priority: 'high',
     });
     expect(mockInvalidateQueries).toHaveBeenCalled();
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('update');
   });
 
   it('handleUnassignMe updates assignee_ids via internal API', async () => {
@@ -512,5 +522,6 @@ describe('useTaskContextActions', () => {
     });
     expect(onTaskUpdate).toHaveBeenCalled();
     expect(onClose).toHaveBeenCalled();
+    expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith('move');
   });
 });

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<{