@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/tu-do/shared/__tests__/task-cache-patches.test.ts

@@ -0,0 +1,147 @@
+import { QueryClient } from '@tanstack/react-query';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import { describe, expect, it } from 'vitest';
+import {
+  patchTaskInVisibleCaches,
+  restoreTasksFromVisibleCacheSnapshot,
+  snapshotVisibleTaskCaches,
+} from '../task-cache-patches';
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+}
+
+function createTask(id: string, name = id): Task {
+  return {
+    id,
+    name,
+    list_id: 'list-1',
+    display_number: 1,
+    created_at: '2026-01-01T00:00:00.000Z',
+    labels: [],
+    projects: [],
+    assignees: [],
+  };
+}
+
+describe('task-cache-patches', () => {
+  it('patches every visible cache that can render a task card or detail view', () => {
+    const queryClient = createQueryClient();
+    const task = createTask('task-1');
+
+    queryClient.setQueryData(['tasks', 'board-1'], [task]);
+    queryClient.setQueryData(['tasks-full', 'board-1', 'all'], [task]);
+    queryClient.setQueryData(['task', 'task-1'], task);
+    queryClient.setQueryData(['workspaceTask', 'ws-1', 'task-1'], { task });
+    queryClient.setQueryData(['my-tasks', 'ws-1'], {
+      overdue: [],
+      today: [task],
+      upcoming: [],
+      completed: [],
+    });
+    queryClient.setQueryData(['my-completed-tasks', 'ws-1'], {
+      pages: [{ completed: [task] }],
+    });
+    const patchedLabel = {
+      id: 'label-1',
+      name: 'Bug',
+      color: '#ef4444',
+      created_at: '2026-01-01T00:00:00.000Z',
+    };
+
+    patchTaskInVisibleCaches({
+      queryClient,
+      boardId: 'board-1',
+      taskId: 'task-1',
+      updater: (cachedTask) => ({
+        ...cachedTask,
+        labels: [patchedLabel],
+      }),
+    });
+
+    expect(
+      queryClient.getQueryData<Task[]>(['tasks', 'board-1'])?.[0]?.labels
+    ).toEqual([patchedLabel]);
+    expect(
+      queryClient.getQueryData<Task[]>(['tasks-full', 'board-1', 'all'])?.[0]
+        ?.labels
+    ).toEqual([patchedLabel]);
+    expect(queryClient.getQueryData<Task>(['task', 'task-1'])?.labels).toEqual([
+      patchedLabel,
+    ]);
+    expect(
+      queryClient.getQueryData<{ task?: Task }>([
+        'workspaceTask',
+        'ws-1',
+        'task-1',
+      ])?.task?.labels
+    ).toEqual([patchedLabel]);
+    expect(
+      queryClient.getQueryData<{ today?: Task[] }>(['my-tasks', 'ws-1'])
+        ?.today?.[0]?.labels
+    ).toEqual([patchedLabel]);
+    expect(
+      queryClient.getQueryData<{ pages?: Array<{ completed?: Task[] }> }>([
+        'my-completed-tasks',
+        'ws-1',
+      ])?.pages?.[0]?.completed?.[0]?.labels
+    ).toEqual([patchedLabel]);
+  });
+
+  it('restores only failed task ids from a snapshot', () => {
+    const queryClient = createQueryClient();
+    const taskOne = createTask('task-1', 'One');
+    const taskTwo = createTask('task-2', 'Two');
+
+    queryClient.setQueryData(['tasks', 'board-1'], [taskOne, taskTwo]);
+    queryClient.setQueryData(
+      ['tasks-full', 'board-1', 'all'],
+      [taskOne, taskTwo]
+    );
+    const snapshot = snapshotVisibleTaskCaches(queryClient, 'board-1', [
+      'task-1',
+      'task-2',
+    ]);
+
+    for (const taskId of ['task-1', 'task-2']) {
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId: 'board-1',
+        taskId,
+        updater: (cachedTask) => ({
+          ...cachedTask,
+          projects: [{ id: 'project-1', name: 'Roadmap', status: 'active' }],
+        }),
+      });
+    }
+
+    restoreTasksFromVisibleCacheSnapshot({
+      queryClient,
+      snapshot,
+      taskIds: ['task-2'],
+    });
+
+    const tasks = queryClient.getQueryData<Task[]>(['tasks', 'board-1']);
+    const fullTasks = queryClient.getQueryData<Task[]>([
+      'tasks-full',
+      'board-1',
+      'all',
+    ]);
+
+    expect(tasks?.find((task) => task.id === 'task-1')?.projects).toEqual([
+      { id: 'project-1', name: 'Roadmap', status: 'active' },
+    ]);
+    expect(tasks?.find((task) => task.id === 'task-2')?.projects).toEqual([]);
+    expect(fullTasks?.find((task) => task.id === 'task-1')?.projects).toEqual([
+      { id: 'project-1', name: 'Roadmap', status: 'active' },
+    ]);
+    expect(fullTasks?.find((task) => task.id === 'task-2')?.projects).toEqual(
+      []
+    );
+  });
+});

package/src/components/ui/tu-do/shared/__tests__/task-legacy-route-recovery.test.tsx

@@ -65,6 +65,22 @@ describe('TaskLegacyRouteRecovery', () => {
     });
   });
 
+  it('uses the board skeleton while resolving the canonical task route', () => {
+    mockGetWorkspaceTask.mockReturnValue(new Promise(() => {}));
+
+    renderWithQueryClient(
+      <TaskLegacyRouteRecovery
+        routePrefix="/tasks"
+        taskId="task-1"
+        workspaceId="personal"
+      />
+    );
+
+    expect(screen.getByTestId('task-board-loading-state')).toBeInTheDocument();
+    expect(screen.getByTestId('kanban-skeleton')).toBeInTheDocument();
+    expect(screen.queryByText('loading')).not.toBeInTheDocument();
+  });
+
   it('shows a recoverable error state instead of a 404 when resolution fails', async () => {
     mockGetWorkspaceTask.mockRejectedValue(new Error('boom'));
 

package/src/components/ui/tu-do/shared/__tests__/use-progressive-board-loader.test.tsx

@@ -71,6 +71,7 @@ describe('useProgressiveBoardLoader', () => {
       limit: 50,
       offset: 0,
       includeCount: true,
+      includeRelationshipSummary: false,
     });
     expect(queryClient.getQueryData<Task[]>(['tasks', 'board-1'])).toEqual([
       {
@@ -160,6 +161,7 @@ describe('useProgressiveBoardLoader', () => {
       externalIncludeDocuments: true,
       externalIncludeDoneClosed: true,
       externalSortBy: 'due-asc',
+      includeRelationshipSummary: false,
     });
 
     vi.mocked(listWorkspaceTasks).mockResolvedValueOnce({
@@ -179,6 +181,7 @@ describe('useProgressiveBoardLoader', () => {
       externalIncludeDocuments: true,
       externalIncludeDoneClosed: true,
       externalSortBy: 'due-asc',
+      includeRelationshipSummary: false,
     });
   });
 

package/src/components/ui/tu-do/shared/assignee-select.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   Search,
   UserCircle,
@@ -9,7 +9,10 @@ import {
   UserX,
   X,
 } from '@tuturuuu/icons';
-import { updateWorkspaceTask } from '@tuturuuu/internal-api/tasks';
+import {
+  listWorkspaceTaskBoardViewableMembers,
+  updateWorkspaceTask,
+} from '@tuturuuu/internal-api/tasks';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Button } from '@tuturuuu/ui/button';
 import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
@@ -26,7 +29,15 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { useBoardBroadcast } from './board-broadcast-context';
+import {
+  getActiveBoardRefresh,
+  useBoardBroadcast,
+} from './board-broadcast-context';
+import {
+  patchTaskInVisibleCaches,
+  restoreVisibleTaskCaches,
+  snapshotVisibleTaskCaches,
+} from './task-cache-patches';
 
 interface Member {
   id: string;
@@ -36,7 +47,7 @@ interface Member {
   avatar_url?: string;
 }
 
-interface Task {
+interface TaskWithAssignees {
   id: string;
   assignees?: Member[];
 }
@@ -66,7 +77,8 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
     const params = useParams();
     const rawWsId = params.wsId;
     const wsId = Array.isArray(rawWsId) ? rawWsId[0] : rawWsId;
-    const boardId = params.boardId as string;
+    const rawBoardId = params.boardId;
+    const boardId = Array.isArray(rawBoardId) ? rawBoardId[0] : rawBoardId;
     const queryClient = useQueryClient();
     const broadcast = useBoardBroadcast();
 
@@ -104,11 +116,41 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
     }, [uniqueAssignees]);
 
     // Fetch workspace members with React Query
-    const {
-      data: fetchedMembers = [],
-      isLoading: isFetchingMembers,
-      error: membersError,
-    } = useWorkspaceMembers(wsId);
+    const shouldFetchBoardMembers = Boolean(wsId && boardId);
+    const workspaceMembersQuery = useWorkspaceMembers(wsId, {
+      enabled: Boolean(wsId) && !shouldFetchBoardMembers,
+    });
+    const boardMembersQuery = useQuery({
+      queryKey: ['task-board-viewable-members', wsId, boardId],
+      queryFn: async (): Promise<Member[]> => {
+        if (!wsId || !boardId) return [];
+
+        const payload = await listWorkspaceTaskBoardViewableMembers(
+          wsId,
+          boardId
+        );
+        const members = Array.isArray(payload?.members) ? payload.members : [];
+
+        return members.map((member) => ({
+          id: member.user_id,
+          user_id: member.user_id,
+          display_name: member.display_name || member.email || member.user_id,
+          email: member.email ?? undefined,
+          avatar_url: member.avatar_url ?? undefined,
+        }));
+      },
+      enabled: shouldFetchBoardMembers,
+      staleTime: 5 * 60 * 1000,
+    });
+    const fetchedMembers = shouldFetchBoardMembers
+      ? (boardMembersQuery.data ?? [])
+      : (workspaceMembersQuery.data ?? []);
+    const isFetchingMembers = shouldFetchBoardMembers
+      ? boardMembersQuery.isLoading
+      : workspaceMembersQuery.isLoading;
+    const membersError = shouldFetchBoardMembers
+      ? boardMembersQuery.error
+      : workspaceMembersQuery.error;
 
     // Deduplicate members by ID using O(n) Map approach
     // Also ensure user_id is set for consistency with task creation flow
@@ -148,7 +190,10 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
           throw new Error(t('please_try_again_later'));
         }
 
-        const boardTasks = queryClient.getQueryData<Task[]>(['tasks', boardId]);
+        const boardTasks = queryClient.getQueryData<TaskWithAssignees[]>([
+          'tasks',
+          boardId,
+        ]);
         const currentTask = boardTasks?.find((task) => task.id === taskId);
         const existingIds =
           currentTask?.assignees
@@ -171,19 +216,24 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
       onMutate: async ({ memberId, action }) => {
         // Cancel any outgoing refetches
         await queryClient.cancelQueries({ queryKey: ['tasks', boardId] });
+        if (boardId) {
+          await queryClient.cancelQueries({
+            queryKey: ['tasks-full', boardId],
+          });
+        }
 
         // Snapshot the previous value
-        const previousTasks = queryClient.getQueryData(['tasks', boardId]);
+        const cacheSnapshot = boardId
+          ? snapshotVisibleTaskCaches(queryClient, boardId, [taskId])
+          : undefined;
 
         // Optimistically update the cache
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-
-            return old.map((task: Task) => {
-              if (task.id !== taskId) return task;
-
+        if (boardId) {
+          patchTaskInVisibleCaches({
+            queryClient,
+            boardId,
+            taskId,
+            updater: (task) => {
               const currentAssignees = task.assignees || [];
               let newAssignees: Member[];
 
@@ -204,9 +254,9 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
               }
 
               return { ...task, assignees: newAssignees };
-            });
-          }
-        );
+            },
+          });
+        }
 
         const previousLocalAssignees = localAssigneesState;
 
@@ -223,12 +273,12 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
           return old.filter((assignee) => assignee.id !== memberId);
         });
 
-        return { previousTasks, previousLocalAssignees };
+        return { cacheSnapshot, previousLocalAssignees };
       },
       onError: (err, _, context) => {
         // Rollback optimistic update on error
-        if (context?.previousTasks) {
-          queryClient.setQueryData(['tasks', boardId], context.previousTasks);
+        if (context?.cacheSnapshot) {
+          restoreVisibleTaskCaches(queryClient, context.cacheSnapshot);
         }
 
         if (context?.previousLocalAssignees) {
@@ -242,6 +292,7 @@ export const AssigneeSelect = forwardRef<AssigneeSelectHandle, Props>(
       },
       onSuccess: () => {
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
       },
       // Note: Removed onSettled invalidation to prevent flicker
       // Optimistic updates handle immediate UI feedback

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

@@ -21,9 +21,10 @@ import {
   setActiveBoardRefresh,
   setActiveBroadcast,
 } from './board-broadcast-context';
-import { BoardViews } from './board-views';
+import { BoardViews, type ViewType } from './board-views';
 import { ProgressiveLoaderProvider } from './progressive-loader-context';
 import { dispatchRecentSidebarVisit } from './recent-sidebar-events';
+import { TaskBoardLoadingState } from './task-board-loading-state';
 import { useProgressiveBoardLoader } from './use-progressive-board-loader';
 
 const BOARD_REVALIDATE_COOLDOWN_MS = 30_000;
@@ -34,16 +35,20 @@ interface Props {
   workspaceTier?: WorkspaceProductTier | null;
   currentUserId?: string;
   routePrefix?: string;
+  defaultView?: ViewType;
   idleBottomIsland?: ReactNode;
+  rootLoading?: boolean;
 }
 
 export function BoardClient({
   boardId,
+  defaultView,
   idleBottomIsland,
   workspace,
   workspaceTier,
   currentUserId,
   routePrefix = '/tasks',
+  rootLoading = false,
 }: Props) {
   const router = useRouter();
   const queryClient = useQueryClient();
@@ -80,6 +85,7 @@ export function BoardClient({
     queryFn: async () => {
       const result = await listWorkspaceTasks(boardWorkspaceId, {
         boardId,
+        includeRelationshipSummary: false,
       });
       return result.tasks;
     },
@@ -142,8 +148,6 @@ export function BoardClient({
   // Fetch workspace labels once at the board level
   const { data: workspaceLabels = [] } = useWorkspaceLabels(boardWorkspaceId);
 
-  const { broadcast } = useBoardRealtime(boardId);
-
   const refreshActiveBoard = useCallback(
     (options?: BoardRefreshOptions) => {
       const invalidateTasks = options?.invalidateTasks ?? true;
@@ -180,6 +184,12 @@ export function BoardClient({
     ]
   );
 
+  const { broadcast } = useBoardRealtime(boardId, {
+    onTaskRelationsChange: () => {
+      refreshActiveBoard({ invalidateTasks: false });
+    },
+  });
+
   // Register broadcast at module level so components outside the
   // BoardBroadcastProvider tree (e.g. task dialog) can access it.
   useEffect(() => {
@@ -237,13 +247,7 @@ export function BoardClient({
   ]);
 
   if (boardLoading && !board) {
-    return (
-      <div className="flex flex-col">
-        <div className="p-4 text-center text-muted-foreground">
-          Loading board...
-        </div>
-      </div>
-    );
+    return <TaskBoardLoadingState root={rootLoading} />;
   }
 
   if (!board?.id) {
@@ -267,6 +271,7 @@ export function BoardClient({
           lists={lists}
           workspaceLabels={workspaceLabels}
           currentUserId={currentUserId}
+          defaultView={defaultView}
           canManageBoard={canManageBoard}
           idleBottomIsland={idleBottomIsland}
         />

package/src/components/ui/tu-do/shared/board-config-storage.ts

@@ -2,7 +2,13 @@
 
 import type { TaskFilters } from '../boards/boardId/task-filter';
 
-export type StoredBoardView = 'kanban' | 'list' | 'timeline';
+export type StoredBoardView =
+  | 'kanban'
+  | 'list'
+  | 'my_tasks'
+  | 'timeline'
+  | 'drafts'
+  | 'recycle_bin';
 export type StoredListStatusFilter = 'all' | 'active' | 'not_started';
 
 export interface BoardViewConfig {