@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/tu-do/shared/__tests__/task-dialog-manager.test.tsx

@@ -13,8 +13,12 @@ import { RECENT_SIDEBAR_VISIT_EVENT } from '../recent-sidebar-events';
 import { TaskDialogManager } from '../task-dialog-manager';
 import { REQUEST_OPEN_TASK_EVENT } from '../task-open-events';
 
-const { mockSearchParams } = vi.hoisted(() => ({
+const { mockSearchParams, taskDialogRenderStats } = vi.hoisted(() => ({
   mockSearchParams: new URLSearchParams(),
+  taskDialogRenderStats: {
+    mounts: 0,
+    unmounts: 0,
+  },
 }));
 
 // Mock Next.js navigation (no longer needs useRouter/usePathname for URL manipulation)
@@ -34,7 +38,8 @@ vi.mock('next/navigation', () => ({
 
 const {
   mockGetCurrentUserProfile,
-  mockGetCurrentUserTask,
+  mockGetTaskDialogHydration,
+  mockGetUserConfig,
   mockGetWorkspaceTask,
   mockListWorkspaceLabels,
   mockListWorkspaceMembers,
@@ -42,7 +47,8 @@ const {
   mockResolveTaskProjectWorkspaceId,
 } = vi.hoisted(() => ({
   mockGetCurrentUserProfile: vi.fn(),
-  mockGetCurrentUserTask: vi.fn(),
+  mockGetTaskDialogHydration: vi.fn(),
+  mockGetUserConfig: vi.fn(),
   mockGetWorkspaceTask: vi.fn(),
   mockListWorkspaceLabels: vi.fn(),
   mockListWorkspaceMembers: vi.fn(),
@@ -55,13 +61,17 @@ vi.mock('@tuturuuu/internal-api', () => ({
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', () => ({
-  getCurrentUserTask: mockGetCurrentUserTask,
+  getTaskDialogHydration: mockGetTaskDialogHydration,
   getWorkspaceTask: mockGetWorkspaceTask,
   listWorkspaceLabels: mockListWorkspaceLabels,
   listWorkspaceTaskProjectsByIds: mockListWorkspaceTaskProjectsByIds,
   resolveTaskProjectWorkspaceId: mockResolveTaskProjectWorkspaceId,
 }));
 
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  getUserConfig: mockGetUserConfig,
+}));
+
 vi.mock('@tuturuuu/internal-api/workspaces', () => ({
   listWorkspaceMembers: mockListWorkspaceMembers,
 }));
@@ -156,30 +166,52 @@ vi.mock('@tuturuuu/supabase/next/client', () => ({
 // Mock the TaskEditDialog component since it's lazy-loaded
 vi.mock('../task-edit-dialog', () => ({
   TaskEditDialog: ({
+    defaultPresentation,
     isOpen,
+    isHydratingTask,
+    taskLoadError,
     task,
     onClose,
     onNavigateToTask,
   }: {
+    defaultPresentation?: string;
     isOpen: boolean;
+    isHydratingTask?: boolean;
+    taskLoadError?: boolean;
     task?: Task;
     onClose: () => void;
     onNavigateToTask?: (taskId: string) => Promise<void>;
-  }) => (
-    <div data-testid="task-edit-dialog" data-open={isOpen}>
-      {task && <div data-testid="task-name">{task.name}</div>}
-      <button
-        type="button"
-        onClick={() => void onNavigateToTask?.('task-2')}
-        data-testid="navigate-button"
+  }) => {
+    React.useEffect(() => {
+      taskDialogRenderStats.mounts += 1;
+
+      return () => {
+        taskDialogRenderStats.unmounts += 1;
+      };
+    }, []);
+
+    return (
+      <div
+        data-testid="task-edit-dialog"
+        data-default-presentation={defaultPresentation}
+        data-hydrating={String(!!isHydratingTask)}
+        data-load-error={String(!!taskLoadError)}
+        data-open={isOpen}
       >
-        Navigate
-      </button>
-      <button type="button" onClick={onClose} data-testid="close-button">
-        Close
-      </button>
-    </div>
-  ),
+        {task && <div data-testid="task-name">{task.name}</div>}
+        <button
+          type="button"
+          onClick={() => void onNavigateToTask?.('task-2')}
+          data-testid="navigate-button"
+        >
+          Navigate
+        </button>
+        <button type="button" onClick={onClose} data-testid="close-button">
+          Close
+        </button>
+      </div>
+    );
+  },
 }));
 
 // Mock task data
@@ -218,6 +250,17 @@ function createTestQueryClient() {
   });
 }
 
+function createDeferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+
+  return { promise, resolve, reject };
+}
+
 function Wrapper({ children }: { children: React.ReactNode }) {
   const queryClient = createTestQueryClient();
   return (
@@ -236,6 +279,8 @@ beforeEach(() => {
   mockSearchParams.forEach((_, key) => {
     mockSearchParams.delete(key);
   });
+  taskDialogRenderStats.mounts = 0;
+  taskDialogRenderStats.unmounts = 0;
   pushStateSpy = vi.spyOn(window.history, 'pushState');
   replaceStateSpy = vi.spyOn(window.history, 'replaceState');
   mockGetCurrentUserProfile.mockResolvedValue({
@@ -244,7 +289,13 @@ beforeEach(() => {
     email: 'user@example.com',
     avatar_url: null,
   });
-  mockGetCurrentUserTask.mockResolvedValue({
+  mockGetUserConfig.mockImplementation((configId: string) =>
+    Promise.resolve({
+      value:
+        configId === 'TASK_DIALOG_DEFAULT_PRESENTATION' ? 'compact' : 'false',
+    })
+  );
+  mockGetTaskDialogHydration.mockResolvedValue({
     task: {
       ...mockTask,
       list: { board_id: 'board-1' },
@@ -348,6 +399,10 @@ describe('TaskDialogManager', () => {
         'data-open',
         'true'
       );
+      expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+        'data-default-presentation',
+        'compact'
+      );
       expect(getByTestId('task-name')).toHaveTextContent('Test Task');
     });
   });
@@ -456,9 +511,9 @@ describe('TaskDialogManager', () => {
     );
 
     await waitFor(() => {
-      expect(mockGetWorkspaceTask).toHaveBeenCalledWith(
-        'workspace-1',
+      expect(mockGetTaskDialogHydration).toHaveBeenCalledWith(
         'task-2',
+        expect.any(Object),
         expect.any(Object)
       );
     });
@@ -468,7 +523,7 @@ describe('TaskDialogManager', () => {
         'data-open',
         'true'
       );
-      expect(getByTestId('task-name')).toHaveTextContent('Related Task');
+      expect(getByTestId('task-name')).toHaveTextContent('Test Task');
     });
   });
 
@@ -561,6 +616,147 @@ describe('TaskDialogManager', () => {
     });
   });
 
+  it('renders a hydrating task dialog immediately for shared task-open events', async () => {
+    const deferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const { getByTestId } = render(
+      <Wrapper>
+        <TaskDialogManager wsId="workspace-1" />
+      </Wrapper>
+    );
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(REQUEST_OPEN_TASK_EVENT, {
+          detail: { taskId: 'task-42' },
+        })
+      );
+    });
+
+    expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+      'data-hydrating',
+      'true'
+    );
+
+    await act(async () => {
+      deferred.resolve({
+        task: {
+          ...mockTask,
+          id: 'task-42',
+          name: 'Hydrated Event Task',
+          list: { board_id: 'board-1' },
+        },
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+        'data-hydrating',
+        'false'
+      );
+      expect(getByTestId('task-name')).toHaveTextContent('Hydrated Event Task');
+    });
+  });
+
+  it('keeps the same dialog mounted when a source-workspace task finishes hydrating', async () => {
+    const deferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const TestComponent = () => {
+      const { openTaskById } = useTaskDialogContext();
+
+      React.useEffect(() => {
+        void openTaskById('external-task-1', {
+          initialTask: {
+            ...mockTask,
+            id: 'external-task-1',
+            name: 'External snapshot',
+          },
+          boardId: 'external-board-1',
+          availableLists: [
+            {
+              ...mockList,
+              id: 'external-list-1',
+              board_id: 'external-board-1',
+            },
+          ],
+          taskWsId: 'source-workspace-1',
+          taskWorkspacePersonal: false,
+        });
+      }, [openTaskById]);
+
+      return <TaskDialogManager wsId="personal-workspace-1" />;
+    };
+
+    const { getByTestId } = render(
+      <Wrapper>
+        <TestComponent />
+      </Wrapper>
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+        'data-hydrating',
+        'true'
+      );
+      expect(getByTestId('task-name')).toHaveTextContent('External snapshot');
+    });
+    expect(taskDialogRenderStats).toMatchObject({
+      mounts: 1,
+      unmounts: 0,
+    });
+
+    await act(async () => {
+      deferred.resolve({
+        task: {
+          ...mockTask,
+          id: 'external-task-1',
+          name: 'Hydrated external task',
+          list: { board_id: 'external-board-1' },
+        },
+        availableLists: [
+          { ...mockList, id: 'external-list-1', board_id: 'external-board-1' },
+        ],
+        taskWsId: 'source-workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+        'data-hydrating',
+        'false'
+      );
+      expect(getByTestId('task-name')).toHaveTextContent(
+        'Hydrated external task'
+      );
+    });
+    expect(taskDialogRenderStats).toMatchObject({
+      mounts: 1,
+      unmounts: 0,
+    });
+  });
+
   it('opens a task from the canonical task query parameter', async () => {
     mockSearchParams.set('task', 'task-42');
 
@@ -571,9 +767,9 @@ describe('TaskDialogManager', () => {
     );
 
     await waitFor(() => {
-      expect(mockGetWorkspaceTask).toHaveBeenCalledWith(
-        'workspace-1',
+      expect(mockGetTaskDialogHydration).toHaveBeenCalledWith(
         'task-42',
+        expect.any(Object),
         expect.any(Object)
       );
     });
@@ -616,7 +812,7 @@ describe('TaskDialogManager', () => {
       expect(getByTestId('task-name')).toHaveTextContent('Test Task');
     });
 
-    mockGetCurrentUserTask.mockClear();
+    mockGetTaskDialogHydration.mockClear();
     mockGetWorkspaceTask.mockClear();
 
     fireEvent.click(getByTestId('navigate-button'));
@@ -625,7 +821,7 @@ describe('TaskDialogManager', () => {
       expect(getByTestId('task-name')).toHaveTextContent('Cached Related Task');
     });
 
-    expect(mockGetCurrentUserTask).not.toHaveBeenCalled();
+    expect(mockGetTaskDialogHydration).not.toHaveBeenCalled();
   });
 
   it('should use replaceState to revert URL when dialog closes', async () => {

package/src/components/ui/tu-do/shared/board-client.tsx

@@ -142,9 +142,7 @@ export function BoardClient({
   // Fetch workspace labels once at the board level
   const { data: workspaceLabels = [] } = useWorkspaceLabels(boardWorkspaceId);
 
-  const { broadcast } = useBoardRealtime(boardId, {
-    enabled: !workspace.personal,
-  });
+  const { broadcast } = useBoardRealtime(boardId);
 
   const refreshActiveBoard = useCallback(
     (options?: BoardRefreshOptions) => {

package/src/components/ui/tu-do/shared/list-view-context-menu.test.tsx

@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ListView } from './list-view';
 
 const openTaskMock = vi.hoisted(() => vi.fn());
+const openTaskByIdMock = vi.hoisted(() => vi.fn());
 
 vi.mock('next-intl', () => ({
   useLocale: () => 'en',
@@ -24,6 +25,7 @@ vi.mock('next/image', () => ({
 vi.mock('../hooks/useTaskDialog', () => ({
   useTaskDialog: () => ({
     openTask: openTaskMock,
+    openTaskById: openTaskByIdMock,
   }),
 }));
 
@@ -104,7 +106,7 @@ const tasks: Task[] = [
   },
 ];
 
-function renderListView() {
+function renderListView(viewTasks = tasks) {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: { retry: false },
@@ -116,8 +118,9 @@ function renderListView() {
       <ListView
         boardId="board-1"
         lists={lists}
-        tasks={tasks}
+        tasks={viewTasks}
         workspaceId="ws-1"
+        isPersonalWorkspace={true}
       />
     </QueryClientProvider>
   );
@@ -126,6 +129,7 @@ function renderListView() {
 describe('ListView task context menu', () => {
   beforeEach(() => {
     openTaskMock.mockReset();
+    openTaskByIdMock.mockReset();
   });
 
   it('opens the shared task menu from row right-click and the compact menu button', () => {
@@ -147,4 +151,53 @@ describe('ListView task context menu', () => {
     fireEvent.click(screen.getByTestId('mock-task-menu-trigger-task-1'));
     expect(screen.getByTestId('mock-task-menu-task-1')).toBeInTheDocument();
   });
+
+  it('opens external rows through the hydrating task-by-id path immediately', () => {
+    const externalTask: Task = {
+      ...tasks[0]!,
+      id: 'external-task',
+      name: 'External 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',
+    } satisfies Task;
+
+    renderListView([externalTask]);
+
+    fireEvent.click(screen.getByText('External task'));
+
+    expect(openTaskByIdMock).toHaveBeenCalledWith(
+      'external-task',
+      expect.objectContaining({
+        boardId: 'source-board',
+        taskWsId: 'source-ws',
+        taskWorkspacePersonal: false,
+        initialTask: expect.objectContaining({
+          id: 'external-task',
+          list_id: 'source-list',
+          name: 'External 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/shared/list-view.tsx

@@ -61,6 +61,10 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useBulkOperations } from '../boards/boardId/kanban/bulk/bulk-operations';
+import {
+  getTaskCardHydratingOpenOptions,
+  isExternalTaskSnapshot,
+} from '../boards/boardId/task-card/task-card-open-options';
 import { useTaskDialog } from '../hooks/useTaskDialog';
 import { computeAccessibleLabelStyles } from '../utils/label-colors';
 import { useBoardBroadcast } from './board-broadcast-context';
@@ -129,7 +133,7 @@ export function ListView({
   const [openTaskMenu, setOpenTaskMenu] = useState<TaskMenuState | null>(null);
   const previousWorkspaceIdRef = useRef(workspaceId);
   const previousBoardIdRef = useRef(boardId);
-  const { openTask } = useTaskDialog();
+  const { openTask, openTaskById } = useTaskDialog();
 
   // Infinite scroll
   const [displayCount, setDisplayCount] = useState(50);
@@ -277,21 +281,24 @@ export function ListView({
   }
 
   function openTaskFromRow(task: Task) {
-    const targetBoardId = task.source_board_id ?? boardId;
-    const targetWorkspaceId = task.source_workspace_id ?? workspaceId;
-
-    openTask(
-      task,
-      targetBoardId,
-      task.source_board_id ? undefined : lists,
-      false,
-      {
-        taskWsId: targetWorkspaceId,
-        taskWorkspacePersonal: task.source_workspace_id
-          ? false
-          : isPersonalWorkspace,
-      }
-    );
+    if (isExternalTaskSnapshot(task)) {
+      void openTaskById(
+        task.id,
+        getTaskCardHydratingOpenOptions({
+          task,
+          boardId,
+          availableLists: lists,
+          effectiveWorkspaceId: workspaceId,
+          isPersonalWorkspace,
+        })
+      );
+      return;
+    }
+
+    openTask(task, boardId, lists, false, {
+      taskWsId: workspaceId,
+      taskWorkspacePersonal: isPersonalWorkspace,
+    });
   }
 
   // Infinite scroll handler