@tuturuuu/ui 0.4.1 → 0.6.0

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

@@ -14,6 +14,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import type { SharedTaskContext } from '../shared/task-edit-dialog/hooks/use-task-data';
 import type {
   PendingRelationship,
   PendingRelationshipType,
@@ -58,6 +59,26 @@ interface TaskDialogState {
   taskWorkspacePersonal?: boolean;
   /** The task workspace tier used to gate cursor tracking for edit mode */
   taskWorkspaceTier?: WorkspaceProductTier;
+  /** Initial board/list context used for immediate partial-task rendering. */
+  initialSharedContext?: SharedTaskContext;
+  /** 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. */
+  taskLoadError?: boolean;
+  /** Bumps when async task hydration replaces a partial snapshot. */
+  taskHydrationVersion?: number;
+  taskOpenRequestId?: number;
+}
+
+interface OpenTaskByIdOptions {
+  initialTask?: Partial<Task>;
+  boardId?: string;
+  availableLists?: TaskList[];
+  fakeTaskUrl?: boolean;
+  taskWsId?: string;
+  taskWorkspacePersonal?: boolean;
+  taskWorkspaceTier?: WorkspaceProductTier;
+  initialSharedContext?: SharedTaskContext;
 }
 
 interface TaskDialogContextValue {
@@ -85,7 +106,10 @@ interface TaskDialogContextValue {
   ) => void;
 
   // Open task by ID (fetches task data first)
-  openTaskById: (taskId: string) => Promise<boolean>;
+  openTaskById: (
+    taskId: string,
+    options?: OpenTaskByIdOptions
+  ) => Promise<boolean>;
 
   // Open dialog for creating new task
   createTask: (
@@ -178,9 +202,11 @@ export function TaskDialogProvider({
   const [state, setState] = useState<TaskDialogState>({
     isOpen: false,
   });
+  const stateRef = useRef(state);
   const isDialogOpenRef = useRef(state.isOpen);
   const queuedDialogStatesRef = useRef<TaskDialogState[]>([]);
   const queuedOpenTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const taskOpenRequestIdRef = useRef(0);
   const closeRequestHandlerRef = useRef<
     (() => boolean | undefined | Promise<boolean | undefined>) | null
   >(null);
@@ -283,7 +309,52 @@ export function TaskDialogProvider({
     [closeDialog]
   );
 
+  const replaceHydratingDialogState = useCallback(
+    (requestId: number, nextDialogState: TaskDialogState) => {
+      queuedDialogStatesRef.current = queuedDialogStatesRef.current.map(
+        (queuedDialogState) =>
+          queuedDialogState.taskOpenRequestId === requestId
+            ? nextDialogState
+            : queuedDialogState
+      );
+
+      setState((currentState) =>
+        currentState.taskOpenRequestId === requestId
+          ? nextDialogState
+          : currentState
+      );
+    },
+    []
+  );
+
+  const markHydratingDialogFailed = useCallback((requestId: number) => {
+    queuedDialogStatesRef.current = queuedDialogStatesRef.current.map(
+      (queuedDialogState) =>
+        queuedDialogState.taskOpenRequestId === requestId
+          ? {
+              ...queuedDialogState,
+              isHydratingTask: false,
+              taskLoadError: true,
+              taskHydrationVersion:
+                (queuedDialogState.taskHydrationVersion ?? 0) + 1,
+            }
+          : queuedDialogState
+    );
+
+    setState((currentState) =>
+      currentState.taskOpenRequestId === requestId
+        ? {
+            ...currentState,
+            isHydratingTask: false,
+            taskLoadError: true,
+            taskHydrationVersion: (currentState.taskHydrationVersion ?? 0) + 1,
+          }
+        : currentState
+    );
+  }, []);
+
   useEffect(() => {
+    stateRef.current = state;
     isDialogOpenRef.current = state.isOpen;
 
     if (state.isOpen) {
@@ -292,7 +363,7 @@ export function TaskDialogProvider({
 
     closeRequestInFlightRef.current = false;
     flushQueuedDialogState();
-  }, [flushQueuedDialogState, state.isOpen]);
+  }, [flushQueuedDialogState, state]);
 
   useEffect(() => {
     return () => {
@@ -344,48 +415,108 @@ export function TaskDialogProvider({
   );
 
   const openTaskById = useCallback(
-    async (taskId: string) => {
-      try {
-        let response:
-          | {
-              task: Task & {
-                list?: {
-                  board_id?: string | null;
-                } | null;
-              };
-              availableLists: TaskList[];
-              taskWsId: string;
-              taskWorkspacePersonal: boolean;
-              taskWorkspaceTier: WorkspaceProductTier;
-            }
-          | undefined;
+    async (taskId: string, options?: OpenTaskByIdOptions) => {
+      const requestId = taskOpenRequestIdRef.current + 1;
+      taskOpenRequestIdRef.current = requestId;
+
+      const initialTaskSnapshot = options?.initialTask;
+      const now = new Date().toISOString();
+      const initialTask = {
+        name: '',
+        description: '',
+        list_id: '',
+        display_number: 0,
+        created_at: now,
+        updated_at: now,
+        deleted: false,
+        archived: false,
+        labels: [],
+        assignees: [],
+        projects: [],
+        ...initialTaskSnapshot,
+        id: taskId,
+      } as Task;
+      const initialTaskWithBoard = initialTaskSnapshot as
+        | (Partial<Task> & {
+            board_id?: string | null;
+            list?: { board_id?: string | null } | null;
+          })
+        | undefined;
+      const initialBoardId =
+        options?.boardId ??
+        initialTaskWithBoard?.board_id ??
+        initialTaskWithBoard?.list?.board_id ??
+        undefined;
+      const initialTaskWorkspacePersonal =
+        options?.taskWorkspacePersonal ?? isPersonalWorkspace;
 
-        try {
-          const { getCurrentUserTask } = await import(
-            '@tuturuuu/internal-api/tasks'
-          );
+      const initialDialogState: TaskDialogState = {
+        isOpen: true,
+        task: initialTask,
+        boardId: initialBoardId,
+        mode: 'edit',
+        availableLists: options?.availableLists,
+        collaborationMode: false,
+        realtimeEnabled: false,
+        fakeTaskUrl: options?.fakeTaskUrl,
+        taskWsId: options?.taskWsId,
+        taskWorkspacePersonal: initialTaskWorkspacePersonal,
+        taskWorkspaceTier: options?.taskWorkspaceTier,
+        initialSharedContext: options?.initialSharedContext,
+        isHydratingTask: true,
+        taskLoadError: false,
+        taskHydrationVersion: 0,
+        taskOpenRequestId: requestId,
+      };
+      const currentState = stateRef.current;
+
+      if (
+        currentState.isOpen &&
+        currentState.task?.id === taskId &&
+        currentState.taskLoadError
+      ) {
+        setState(initialDialogState);
+      } else {
+        queueDialogState(initialDialogState);
+      }
 
-          response = await getCurrentUserTask(taskId, {
+      try {
+        const { getTaskDialogHydration } = await import(
+          '@tuturuuu/internal-api/tasks'
+        );
+
+        const response = await getTaskDialogHydration(
+          taskId,
+          {
+            taskWsId: options?.taskWsId,
+            taskWorkspacePersonal: options?.taskWorkspacePersonal,
+            taskWorkspaceTier: options?.taskWorkspaceTier,
+          },
+          {
             fetch: (input, init) =>
               fetch(new URL(String(input), window.location.origin).toString(), {
                 ...init,
                 cache: 'no-store',
               }),
-          });
-        } catch {
-          return false;
-        }
+          }
+        );
 
         if (!response) {
+          markHydratingDialogFailed(requestId);
           return false;
         }
 
-        const transformedTask = response.task;
+        const transformedTask = response.task as Task & {
+          board_id?: string | null;
+          list?: {
+            board_id?: string | null;
+          } | null;
+        };
         const taskWsId = response.taskWsId;
         const taskWorkspacePersonal = response.taskWorkspacePersonal;
         const taskWorkspaceTier = response.taskWorkspaceTier;
         const isTaskWorkspacePersonal =
-          taskWorkspacePersonal ?? isPersonalWorkspace;
+          taskWorkspacePersonal ?? initialTaskWorkspacePersonal;
 
         // Realtime sync (auto-save via Yjs) is always enabled in edit mode.
         // Cursor presence requires tier check and non-personal workspace.
@@ -394,26 +525,40 @@ export function TaskDialogProvider({
           taskWorkspaceTier
         );
 
-        // Open the task in edit mode
-        queueDialogState({
+        replaceHydratingDialogState(requestId, {
           isOpen: true,
           task: transformedTask as Task,
-          boardId: transformedTask.list?.board_id ?? undefined,
+          boardId:
+            transformedTask.board_id ??
+            transformedTask.list?.board_id ??
+            initialBoardId,
           mode: 'edit',
-          availableLists: response.availableLists || undefined,
+          availableLists:
+            response.availableLists || options?.availableLists || undefined,
           collaborationMode: shouldEnableCursors,
           realtimeEnabled: true,
+          fakeTaskUrl: options?.fakeTaskUrl,
           taskWsId,
           taskWorkspacePersonal: isTaskWorkspacePersonal,
           taskWorkspaceTier,
+          isHydratingTask: false,
+          taskLoadError: false,
+          taskHydrationVersion: 1,
+          taskOpenRequestId: requestId,
         });
         return true;
-      } catch (error) {
-        console.error('Failed to open task:', error);
+      } catch {
+        markHydratingDialogFailed(requestId);
         return false;
       }
     },
-    [canUseTaskCursors, isPersonalWorkspace, queueDialogState]
+    [
+      canUseTaskCursors,
+      isPersonalWorkspace,
+      markHydratingDialogFailed,
+      queueDialogState,
+      replaceHydratingDialogState,
+    ]
   );
 
   const createTask = useCallback(

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