@tuturuuu/ui 0.4.1 → 0.6.0

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

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

@@ -3,6 +3,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getCurrentUserProfile } from '@tuturuuu/internal-api';
 import { getWorkspaceTask } from '@tuturuuu/internal-api/tasks';
+import { getUserConfig } from '@tuturuuu/internal-api/users';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -12,6 +13,10 @@ import {
   WorkspacePresenceProvider,
 } from '../providers/workspace-presence-provider';
 import { dispatchRecentSidebarVisit } from './recent-sidebar-events';
+import {
+  normalizeTaskDialogPresentation,
+  TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+} from './task-dialog-presentation';
 import { TaskEditDialog } from './task-edit-dialog';
 import {
   dispatchTaskOpenResult,
@@ -146,19 +151,23 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   // Read draft mode preference from user config (same query key as useUserBooleanConfig)
   const { data: draftModeRaw } = useQuery({
     queryKey: ['user-config', 'TASK_DRAFT_MODE_ENABLED'],
-    queryFn: async () => {
-      const res = await fetch(
-        '/api/v1/users/me/configs/TASK_DRAFT_MODE_ENABLED',
-        { cache: 'no-store' }
-      );
-      if (!res.ok) return 'false';
-      const data = await res.json();
-      return (data.value as string) ?? 'false';
-    },
+    queryFn: async () =>
+      (await getUserConfig('TASK_DRAFT_MODE_ENABLED')).value ?? 'false',
     staleTime: 5 * 60 * 1000,
   });
   const draftModeEnabled = draftModeRaw === 'true';
 
+  const { data: defaultPresentationRaw } = useQuery({
+    queryKey: ['user-config', TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID],
+    queryFn: async () =>
+      (await getUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID)).value ??
+      'compact',
+    staleTime: 5 * 60 * 1000,
+  });
+  const defaultPresentation = normalizeTaskDialogPresentation(
+    defaultPresentationRaw
+  );
+
   const handleClose = () => {
     triggerClose();
   };
@@ -226,30 +235,12 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
 
   const openTaskFromCurrentWorkspace = useCallback(
     async (taskId: string) => {
-      try {
-        const { task } = await getWorkspaceTask(wsId, taskId, {
-          fetch: (input, init) =>
-            fetch(new URL(String(input), window.location.origin).toString(), {
-              ...init,
-              cache: 'no-store',
-            }),
-        });
-
-        const boardId = task.board_id;
-        if (!boardId) {
-          return false;
-        }
-
-        openTask(task as Task, boardId, undefined, false, {
-          taskWsId: wsId,
-          taskWorkspacePersonal: isPersonalWorkspace,
-        });
-        return true;
-      } catch {
-        return false;
-      }
+      return openTaskById(taskId, {
+        taskWsId: wsId,
+        taskWorkspacePersonal: isPersonalWorkspace,
+      });
     },
-    [isPersonalWorkspace, openTask, wsId]
+    [isPersonalWorkspace, openTaskById, wsId]
   );
 
   useEffect(() => {
@@ -269,40 +260,12 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       };
 
       void (async () => {
-        if (requestedWsId) {
-          try {
-            const { task } = await getWorkspaceTask(requestedWsId, taskId, {
-              fetch: (input, init) =>
-                fetch(
-                  new URL(String(input), window.location.origin).toString(),
-                  {
-                    ...init,
-                    cache: 'no-store',
-                  }
-                ),
-            });
-
-            const taskWithList = task as {
-              board_id?: string | null;
-              list?: {
-                board_id?: string | null;
-              } | null;
-            };
-            const boardId =
-              taskWithList.board_id || taskWithList.list?.board_id;
-            if (boardId) {
-              openTask(task as Task, boardId, undefined, false, {
-                taskWsId: requestedWsId,
-              });
-              emitOpenResult(true);
-              return;
-            }
-          } catch {
-            // Fall through to the generic current-user lookup below.
-          }
-        }
-
-        const opened = await openTaskById(taskId);
+        const opened = await openTaskById(taskId, {
+          taskWsId: requestedWsId,
+          taskWorkspacePersonal: requestedWsId
+            ? undefined
+            : isPersonalWorkspace,
+        });
         emitOpenResult(opened);
       })();
     };
@@ -318,7 +281,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
         handleTaskOpenRequest as EventListener
       );
     };
-  }, [openTaskById, openTask]);
+  }, [isPersonalWorkspace, openTaskById]);
 
   useEffect(() => {
     const canonicalTaskId = searchParams.get('task');
@@ -348,7 +311,10 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       return;
     }
 
-    void openTaskById(legacyTaskId);
+    void openTaskById(legacyTaskId, {
+      taskWsId: wsId,
+      taskWorkspacePersonal: isPersonalWorkspace,
+    });
     const nextSearchParams = new URLSearchParams(searchParams.toString());
     nextSearchParams.delete('openTaskId');
 
@@ -358,7 +324,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       : window.location.pathname;
 
     window.history.replaceState(window.history.state, '', nextUrl);
-  }, [openTaskById, searchParams]);
+  }, [isPersonalWorkspace, openTaskById, searchParams, wsId]);
 
   // Open subtask creation dialog for the current task
   const handleAddSubtask = useCallback(() => {
@@ -411,6 +377,31 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   const handleAddBlockedByTask = () => handleAddRelationship('blocked-by');
   const handleAddRelatedTask = () => handleAddRelationship('related');
 
+  const handleRetryTaskLoad = useCallback(() => {
+    if (!state.task?.id) return;
+
+    void openTaskById(state.task.id, {
+      initialTask: state.task,
+      boardId: state.boardId,
+      availableLists: state.availableLists,
+      fakeTaskUrl: state.fakeTaskUrl,
+      taskWsId: state.taskWsId,
+      taskWorkspacePersonal: state.taskWorkspacePersonal,
+      taskWorkspaceTier: state.taskWorkspaceTier,
+      initialSharedContext: state.initialSharedContext,
+    });
+  }, [
+    openTaskById,
+    state.initialSharedContext,
+    state.availableLists,
+    state.boardId,
+    state.fakeTaskUrl,
+    state.task,
+    state.taskWorkspacePersonal,
+    state.taskWorkspaceTier,
+    state.taskWsId,
+  ]);
+
   // Track presence location when the dialog is open in edit mode.
   // On kanban boards, BoardUserPresenceAvatarsComponent also calls updateLocation
   // with the same args — this is idempotent (same location = no-op).
@@ -419,7 +410,14 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   const wsUpdateLocation = wsPresence?.updateLocation;
 
   useEffect(() => {
-    if (!wsUpdateLocation || !state.isOpen || state.mode === 'create') return;
+    if (
+      !wsUpdateLocation ||
+      !state.isOpen ||
+      state.mode === 'create' ||
+      state.isHydratingTask ||
+      state.taskLoadError
+    )
+      return;
     const taskId = state.task?.id;
     const boardId = state.boardId;
     if (!taskId || !boardId) return;
@@ -433,6 +431,8 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
     wsUpdateLocation,
     state.isOpen,
     state.mode,
+    state.isHydratingTask,
+    state.taskLoadError,
     state.task?.id,
     state.boardId,
   ]);
@@ -441,7 +441,9 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
     if (
       typeof window === 'undefined' ||
       !state.isOpen ||
-      state.mode === 'create'
+      state.mode === 'create' ||
+      state.isHydratingTask ||
+      state.taskLoadError
     ) {
       return;
     }
@@ -493,19 +495,24 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   }, [
     state.boardId,
     state.isOpen,
+    state.isHydratingTask,
     state.mode,
     state.task,
     state.taskWsId,
     state.taskWorkspacePersonal,
+    state.taskLoadError,
     isPersonalWorkspace,
     wsId,
   ]);
 
-  // Determine if the task needs its own presence provider (cross-workspace tasks)
+  // Determine if the task needs its own presence provider (cross-workspace tasks).
+  // Keep the provider shell mounted from the initial snapshot when taskWsId is
+  // already known, otherwise hydration can wrap the open dialog in a new
+  // provider and Radix replays the compact dialog entrance animation.
   const needsOwnProvider =
-    state.realtimeEnabled &&
-    state.taskWsId &&
-    (!wsPresence?.realtimeEnabled || state.taskWsId !== wsId);
+    state.taskWsId && (!wsPresence?.realtimeEnabled || state.taskWsId !== wsId);
+  const ownProviderEnabled =
+    !!state.realtimeEnabled && !state.taskWorkspacePersonal;
 
   if (!state.isOpen || !state.task) {
     return null;
@@ -519,16 +526,25 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       boardId={state.boardId || ''}
       isOpen={state.isOpen}
       availableLists={state.availableLists}
+      sharedContext={
+        state.isHydratingTask || state.taskLoadError
+          ? state.initialSharedContext
+          : undefined
+      }
       filters={state.filters}
       mode={state.mode}
       collaborationMode={state.collaborationMode}
       realtimeEnabled={state.realtimeEnabled}
+      isHydratingTask={state.isHydratingTask}
+      taskLoadError={state.taskLoadError}
+      taskHydrationVersion={state.taskHydrationVersion}
       isPersonalWorkspace={isPersonalWorkspace}
       parentTaskId={state.parentTaskId}
       parentTaskName={state.parentTaskName}
       pendingRelationship={state.pendingRelationship}
       currentUser={currentUser || undefined}
       draftModeEnabled={draftModeEnabled}
+      defaultPresentation={defaultPresentation}
       draftId={state.draftId}
       onClose={handleClose}
       onUpdate={triggerUpdate}
@@ -538,6 +554,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       onAddBlockingTask={handleAddBlockingTask}
       onAddBlockedByTask={handleAddBlockedByTask}
       onAddRelatedTask={handleAddRelatedTask}
+      onRetryTaskLoad={handleRetryTaskLoad}
     />
   );
 
@@ -546,7 +563,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       <WorkspacePresenceProvider
         wsId={state.taskWsId}
         tier={state.taskWorkspaceTier ?? null}
-        enabled={!state.taskWorkspacePersonal}
+        enabled={ownProviderEnabled}
       >
         {dialog}
       </WorkspacePresenceProvider>

package/src/components/ui/tu-do/shared/task-dialog-presentation.ts

@@ -0,0 +1,11 @@
+export const TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID =
+  'TASK_DIALOG_DEFAULT_PRESENTATION';
+
+export type TaskDialogPresentation = 'compact' | 'fullscreen';
+
+export function normalizeTaskDialogPresentation(
+  value: unknown,
+  fallback: TaskDialogPresentation = 'compact'
+): TaskDialogPresentation {
+  return value === 'fullscreen' || value === 'compact' ? value : fallback;
+}