@tuturuuu/ui 0.2.0 → 0.3.1

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-operation-utils.ts

@@ -1,8 +1,325 @@
-import type { QueryClient } from '@tanstack/react-query';
-import { getWorkspaceTask } from '@tuturuuu/internal-api/tasks';
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
+import {
+  type BulkWorkspaceTaskOperation,
+  type BulkWorkspaceTasksResponse,
+  bulkWorkspaceTasks,
+  getWorkspaceTask,
+} from '@tuturuuu/internal-api/tasks';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { calculateDaysUntilEndOfWeek } from '../../../../utils/weekDateUtils';
 
+type BoardTaskCacheSnapshot = {
+  previousTasks: Task[] | undefined;
+  previousFullTasks: [QueryKey, Task[] | undefined][];
+};
+
+type CachedTaskWithWorkspace = Task & {
+  source_workspace_id?: string | null;
+  ws_id?: string | null;
+  task_lists?: {
+    workspace_boards?: {
+      ws_id?: string | null;
+    } | null;
+  } | null;
+};
+
+type BulkWorkspaceTasksOptions = Parameters<typeof bulkWorkspaceTasks>[2];
+
+export type BulkTaskWorkspaceGroup = {
+  workspaceId: string;
+  taskIds: string[];
+};
+
+function getTaskMutationWorkspaceId(
+  task: CachedTaskWithWorkspace | undefined,
+  defaultWorkspaceId: string
+) {
+  return (
+    task?.source_workspace_id ??
+    task?.ws_id ??
+    task?.task_lists?.workspace_boards?.ws_id ??
+    defaultWorkspaceId
+  );
+}
+
+function getCachedBoardTasks(queryClient: QueryClient, boardId: string) {
+  const tasks = queryClient.getQueryData<Task[]>(['tasks', boardId]) ?? [];
+  const fullTaskEntries = queryClient.getQueriesData<Task[]>({
+    queryKey: ['tasks-full', boardId],
+  });
+  const byId = new Map<string, CachedTaskWithWorkspace>();
+
+  for (const task of tasks as CachedTaskWithWorkspace[]) {
+    byId.set(task.id, task);
+  }
+
+  for (const [, fullTasks] of fullTaskEntries) {
+    for (const task of (fullTasks ?? []) as CachedTaskWithWorkspace[]) {
+      if (!byId.has(task.id)) {
+        byId.set(task.id, task);
+      }
+    }
+  }
+
+  return byId;
+}
+
+export function getBulkTaskWorkspaceGroups({
+  queryClient,
+  boardId,
+  defaultWorkspaceId,
+  taskIds,
+}: {
+  queryClient: QueryClient;
+  boardId: string;
+  defaultWorkspaceId: string;
+  taskIds: string[];
+}) {
+  const cachedTasksById = getCachedBoardTasks(queryClient, boardId);
+  const groupsByWorkspaceId = new Map<string, string[]>();
+
+  for (const taskId of taskIds) {
+    const task = cachedTasksById.get(taskId);
+    const workspaceId = getTaskMutationWorkspaceId(task, defaultWorkspaceId);
+    const group = groupsByWorkspaceId.get(workspaceId) ?? [];
+    group.push(taskId);
+    groupsByWorkspaceId.set(workspaceId, group);
+  }
+
+  return Array.from(
+    groupsByWorkspaceId,
+    ([workspaceId, groupTaskIds]): BulkTaskWorkspaceGroup => ({
+      workspaceId,
+      taskIds: groupTaskIds,
+    })
+  );
+}
+
+export async function bulkWorkspaceTasksByEffectiveWorkspace({
+  queryClient,
+  boardId,
+  defaultWorkspaceId,
+  taskIds,
+  operation,
+  options,
+  workspaceGroups,
+}: {
+  queryClient: QueryClient;
+  boardId: string;
+  defaultWorkspaceId: string;
+  taskIds: string[];
+  operation: BulkWorkspaceTaskOperation;
+  options?: BulkWorkspaceTasksOptions;
+  workspaceGroups?: BulkTaskWorkspaceGroup[];
+}): Promise<BulkWorkspaceTasksResponse> {
+  const groups =
+    workspaceGroups ??
+    getBulkTaskWorkspaceGroups({
+      queryClient,
+      boardId,
+      defaultWorkspaceId,
+      taskIds,
+    });
+
+  const aggregate: BulkWorkspaceTasksResponse = {
+    successCount: 0,
+    failCount: 0,
+    taskIds,
+    succeededTaskIds: [],
+    failures: [],
+    taskMetaById: {},
+  };
+
+  for (const group of groups) {
+    try {
+      const result = await bulkWorkspaceTasks(
+        group.workspaceId,
+        {
+          taskIds: group.taskIds,
+          operation,
+        },
+        options
+      );
+
+      aggregate.successCount += result.successCount;
+      aggregate.failCount += result.failCount;
+      aggregate.succeededTaskIds.push(...result.succeededTaskIds);
+      aggregate.failures.push(...result.failures);
+
+      if (result.taskMetaById) {
+        aggregate.taskMetaById = {
+          ...aggregate.taskMetaById,
+          ...result.taskMetaById,
+        };
+      }
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Bulk task update failed';
+
+      aggregate.failCount += group.taskIds.length;
+      aggregate.failures.push(
+        ...group.taskIds.map((taskId) => ({
+          taskId,
+          error: message,
+        }))
+      );
+    }
+  }
+
+  return aggregate;
+}
+
+export function snapshotBoardTaskCaches(
+  queryClient: QueryClient,
+  boardId: string
+): BoardTaskCacheSnapshot {
+  return {
+    previousTasks: queryClient.getQueryData<Task[]>(['tasks', boardId]),
+    previousFullTasks: queryClient.getQueriesData<Task[]>({
+      queryKey: ['tasks-full', boardId],
+    }),
+  };
+}
+
+export function restoreBoardTaskCaches(
+  queryClient: QueryClient,
+  boardId: string,
+  snapshot: BoardTaskCacheSnapshot
+) {
+  queryClient.setQueryData(['tasks', boardId], snapshot.previousTasks);
+
+  for (const [queryKey, tasks] of snapshot.previousFullTasks) {
+    queryClient.setQueryData(queryKey, tasks);
+  }
+}
+
+export function updateBoardTaskCaches(
+  queryClient: QueryClient,
+  boardId: string,
+  updater: (old: Task[] | undefined) => Task[] | undefined
+) {
+  queryClient.setQueryData(['tasks', boardId], updater);
+  queryClient.setQueriesData<Task[]>(
+    { queryKey: ['tasks-full', boardId] },
+    updater
+  );
+}
+
+export function restoreFailedBoardTasks({
+  queryClient,
+  boardId,
+  previousTasks,
+  previousFullTasks,
+  failedTaskIds,
+}: {
+  queryClient: QueryClient;
+  boardId: string;
+  previousTasks: Task[] | undefined;
+  previousFullTasks?: [QueryKey, Task[] | undefined][];
+  failedTaskIds: Iterable<string>;
+}) {
+  if (!Array.isArray(previousTasks) && !previousFullTasks?.length) {
+    return;
+  }
+
+  const failedTaskIdSet = new Set(failedTaskIds);
+  if (failedTaskIdSet.size === 0) {
+    return;
+  }
+
+  const previousTaskMap = new Map<string, Task>();
+
+  for (const [, tasks] of previousFullTasks ?? []) {
+    for (const task of tasks ?? []) {
+      previousTaskMap.set(task.id, task);
+    }
+  }
+
+  for (const task of previousTasks ?? []) {
+    previousTaskMap.set(task.id, task);
+  }
+
+  updateBoardTaskCaches(queryClient, boardId, (old) => {
+    if (!old) return old;
+    return old.map((task) => {
+      if (!failedTaskIdSet.has(task.id)) return task;
+      return previousTaskMap.get(task.id) ?? task;
+    });
+  });
+}
+
+export function restoreDeletedBoardTasks({
+  queryClient,
+  boardId,
+  previousTasks,
+  previousFullTasks,
+  failedTaskIds,
+}: {
+  queryClient: QueryClient;
+  boardId: string;
+  previousTasks: Task[] | undefined;
+  previousFullTasks?: [QueryKey, Task[] | undefined][];
+  failedTaskIds: Iterable<string>;
+}) {
+  if (!Array.isArray(previousTasks) && !previousFullTasks?.length) {
+    return;
+  }
+
+  const failedTaskIdSet = new Set(failedTaskIds);
+  if (failedTaskIdSet.size === 0) {
+    return;
+  }
+
+  const previousTaskMap = new Map<string, Task>();
+  const previousOrder = new Map<string, number>();
+
+  for (const [, tasks] of previousFullTasks ?? []) {
+    for (const task of tasks ?? []) {
+      if (!previousOrder.has(task.id)) {
+        previousOrder.set(task.id, previousOrder.size);
+      }
+      previousTaskMap.set(task.id, task);
+    }
+  }
+
+  for (const task of previousTasks ?? []) {
+    if (!previousOrder.has(task.id)) {
+      previousOrder.set(task.id, previousOrder.size);
+    }
+    previousTaskMap.set(task.id, task);
+  }
+
+  updateBoardTaskCaches(queryClient, boardId, (old) => {
+    const existingById = new Map((old ?? []).map((task) => [task.id, task]));
+
+    for (const failedTaskId of failedTaskIdSet) {
+      const previousTask = previousTaskMap.get(failedTaskId);
+      if (previousTask) {
+        existingById.set(failedTaskId, previousTask);
+      }
+    }
+
+    return Array.from(existingById.values()).sort((a, b) => {
+      const aIndex = previousOrder.get(a.id);
+      const bIndex = previousOrder.get(b.id);
+
+      if (typeof aIndex === 'number' && typeof bIndex === 'number') {
+        return aIndex - bIndex;
+      }
+
+      if (typeof aIndex === 'number') {
+        return -1;
+      }
+
+      if (typeof bIndex === 'number') {
+        return 1;
+      }
+
+      return 0;
+    });
+  });
+}
+
 export function getInternalApiOptions() {
   if (typeof window === 'undefined') {
     return undefined;

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-operations.ts

@@ -29,6 +29,7 @@ import {
 } from './bulk-mutations-updates';
 import { useBulkOperationI18n } from './bulk-operation-i18n';
 import type { BulkOperationsConfig } from './bulk-operation-types';
+import { getBulkTaskWorkspaceGroups } from './bulk-operation-utils';
 
 export function useBulkOperations(config: BulkOperationsConfig) {
   const i18n = useBulkOperationI18n();
@@ -290,7 +291,13 @@ export function useBulkOperations(config: BulkOperationsConfig) {
     bulkDeleteTasks: async () => {
       const taskIds = Array.from(selectedTasks);
       if (!taskIds.length) return;
-      await deleteMutation.mutateAsync({ taskIds });
+      const workspaceGroups = getBulkTaskWorkspaceGroups({
+        queryClient,
+        boardId,
+        defaultWorkspaceId: wsId,
+        taskIds,
+      });
+      await deleteMutation.mutateAsync({ taskIds, workspaceGroups });
     },
     bulkMoveToBoard: async (targetBoardId: string, targetListId: string) => {
       const taskIds = Array.from(selectedTasks);

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.ts

@@ -463,11 +463,13 @@ export function useKanbanDnd({
         'tasks-full',
         boardId,
       ]);
+      const previousTask = previousTasks?.find((item) => item.id === task.id);
+      const previousFullTask = previousFullTasks?.find(
+        (item) => item.id === task.id
+      );
 
       setBoardTaskCache(queryClient, boardId, nextTask);
 
-      setOptimisticUpdateInProgress((prev) => new Set(prev).add(task.id));
-
       try {
         const response = isStagingTarget
           ? null
@@ -494,19 +496,34 @@ export function useKanbanDnd({
 
         return savedTask;
       } catch (error) {
-        if (previousTasks) {
-          queryClient.setQueryData(['tasks', boardId], previousTasks);
-        }
-        if (previousFullTasks) {
-          queryClient.setQueryData(['tasks-full', boardId], previousFullTasks);
-        }
+        const restoreTaskInCache = (
+          queryKey: unknown[],
+          previousTaskValue: Task | undefined,
+          previousCache: Task[] | undefined
+        ) => {
+          queryClient.setQueryData<Task[]>(queryKey, (currentTasks) => {
+            if (!currentTasks) return previousCache;
+
+            if (!previousTaskValue) {
+              return currentTasks.filter((item) => item.id !== task.id);
+            }
+
+            const hasTask = currentTasks.some((item) => item.id === task.id);
+            if (!hasTask) return [...currentTasks, previousTaskValue];
+
+            return currentTasks.map((item) =>
+              item.id === task.id ? previousTaskValue : item
+            );
+          });
+        };
+
+        restoreTaskInCache(['tasks', boardId], previousTask, previousTasks);
+        restoreTaskInCache(
+          ['tasks-full', boardId],
+          previousFullTask,
+          previousFullTasks
+        );
         throw error;
-      } finally {
-        setOptimisticUpdateInProgress((prev) => {
-          const next = new Set(prev);
-          next.delete(task.id);
-          return next;
-        });
       }
     },
     [boardId, queryClient]
@@ -1143,6 +1160,31 @@ export function useKanbanDnd({
           (activeTaskForDrop.sort_key ?? MAX_SAFE_INTEGER_SORT) !== newSortKey);
 
       let shouldPreservePendingAfterDragReset = false;
+      const persistPersonalPlacementMove = (
+        task: Task,
+        sortKey: number | null,
+        order?: {
+          previousTaskId?: string | null;
+          nextTaskId?: string | null;
+        }
+      ) => {
+        const pendingTaskIds = [task.id];
+        markTaskIdsPending(pendingTaskIds);
+        shouldPreservePendingAfterDragReset = true;
+
+        void movePersonalPlacementTask(task, targetListId, sortKey, order)
+          .catch((error) => {
+            console.error('Failed to update personal task placement:', error);
+            rollbackOptimisticDropPreview();
+            toast.error(
+              personalPlacementUpdateFailedMessage ??
+                'Failed to update personal task placement'
+            );
+          })
+          .finally(() => {
+            clearPendingTaskIds(pendingTaskIds);
+          });
+      };
 
       if (needsUpdate) {
         if (isMultiSelectMode && selectedTasks.size > 1) {
@@ -1206,7 +1248,7 @@ export function useKanbanDnd({
           try {
             for (const task of sortedTasksToMove) {
               if (targetIsExternalStaging) {
-                await movePersonalPlacementTask(task, targetListId, null);
+                persistPersonalPlacementMove(task, null);
                 continue;
               }
 
@@ -1327,11 +1369,7 @@ export function useKanbanDnd({
               }
 
               if (usesPersonalPlacement(task)) {
-                await movePersonalPlacementTask(
-                  task,
-                  targetListId,
-                  batchSortKey
-                );
+                persistPersonalPlacementMove(task, batchSortKey);
               } else {
                 const pendingTaskIds = [task.id];
                 markTaskIdsPending(pendingTaskIds);
@@ -1374,23 +1412,11 @@ export function useKanbanDnd({
           clearSelection();
         } else {
           if (activeUsesPersonalPlacement || targetIsExternalStaging) {
-            try {
-              await movePersonalPlacementTask(
-                activeTaskForDrop,
-                targetListId,
-                newSortKey,
-                personalPlacementOrder
-              );
-            } catch (error) {
-              console.error('Failed to update personal task placement:', error);
-              rollbackOptimisticDropPreview();
-              toast.error(
-                personalPlacementUpdateFailedMessage ??
-                  'Failed to update personal task placement'
-              );
-              resetDragState(true);
-              return;
-            }
+            persistPersonalPlacementMove(
+              activeTaskForDrop,
+              newSortKey,
+              personalPlacementOrder
+            );
           } else {
             const repairedTaskSortKeys =
               optimisticDropPreview?.repairedTaskSortKeys ?? [];

package/src/components/ui/tu-do/boards/boardId/kanban/kanban-column-collapse.ts

@@ -0,0 +1,16 @@
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+
+export function isClosedTaskListColumnCollapsed(column: TaskList) {
+  return (
+    column.is_external_staging !== true &&
+    column.status === 'closed' &&
+    column.is_collapsed === true
+  );
+}
+
+export function isKanbanColumnCollapsed(column: TaskList) {
+  return (
+    column.is_external_collapsed === true ||
+    isClosedTaskListColumnCollapsed(column)
+  );
+}

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-columns.test.tsx

@@ -85,6 +85,20 @@ const externalList: TaskList = {
   status: 'active',
 };
 
+const collapsedClosedList: TaskList = {
+  archived: false,
+  board_id: 'board-1',
+  color: 'PURPLE',
+  created_at: '2026-05-07T00:00:00.000Z',
+  creator_id: 'user-1',
+  deleted: false,
+  id: 'closed-list',
+  is_collapsed: true,
+  name: 'Closed',
+  position: 3,
+  status: 'closed',
+};
+
 function task(overrides: Partial<Task>): Task {
   return {
     created_at: '2026-05-07T00:00:00.000Z',
@@ -133,6 +147,38 @@ describe('KanbanColumns', () => {
     ).toBe(DEFAULT_KANBAN_COLUMN_WIDTH);
   });
 
+  it('counts collapsed closed columns in dynamic width calculation', () => {
+    const { container } = render(
+      <KanbanColumns
+        columns={[...lists, collapsedClosedList]}
+        tasks={[]}
+        boardId="board-1"
+        workspaceId="ws-1"
+        isPersonalWorkspace={false}
+        disableSort={false}
+        selectedTasks={new Set()}
+        isMultiSelectMode={false}
+        setIsMultiSelectMode={vi.fn()}
+        onTaskSelect={vi.fn()}
+        onClearSelection={vi.fn()}
+        onUpdate={vi.fn()}
+        createTask={vi.fn()}
+        taskHeightsRef={{ current: new Map() }}
+        optimisticUpdateInProgress={new Set()}
+        listStatusFilter="all"
+        bulkUpdateCustomDueDate={vi.fn()}
+        boardRef={{ current: null }}
+        columnsId={[...lists, collapsedClosedList].map((list) => list.id)}
+      />
+    );
+
+    expect(
+      (container.firstElementChild as HTMLElement).style.getPropertyValue(
+        '--kanban-column-width'
+      )
+    ).toContain('3.5rem');
+  });
+
   it('uses mandatory snapping on the measured scroll container', () => {
     const { container } = render(
       <KanbanColumns

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-columns.tsx

@@ -12,6 +12,7 @@ import { BoardColumn } from '../../board-column';
 import type { TaskFilters } from '../../task-filter';
 import { TaskListForm } from '../../task-list-form';
 import type { DragPreviewPosition } from '../dnd/use-kanban-dnd';
+import { isKanbanColumnCollapsed } from '../kanban-column-collapse';
 import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
 import { getKanbanColumnWidth } from './kanban-column-width';
 import {
@@ -50,6 +51,7 @@ interface KanbanColumnsProps {
   boardRef: React.RefObject<HTMLDivElement | null>;
   columnsId: string[];
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
+  onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
   deadlineLabels?: KanbanDeadlineLabels;
   deadlineSections?: KanbanDeadlineSections;
 }
@@ -79,14 +81,13 @@ export function KanbanColumns({
   boardRef,
   columnsId,
   onExternalTasksCollapsedChange,
+  onTaskListCollapsedChange,
   deadlineLabels,
   deadlineSections,
 }: KanbanColumnsProps) {
   const realColumns = columns.filter((column) => !column.is_external_staging);
   const snapEdgePadding = columns.length > 0 ? '0.5rem' : '0px';
-  const collapsedColumnCount = columns.filter(
-    (column) => column.is_external_collapsed
-  ).length;
+  const collapsedColumnCount = columns.filter(isKanbanColumnCollapsed).length;
   const dynamicColumnWidth = getKanbanColumnWidth({
     columnCount: columns.length,
     collapsedColumnCount,
@@ -207,6 +208,7 @@ export function KanbanColumns({
                 workspaceId={workspaceId}
                 wsId={workspaceId}
                 onExternalTasksCollapsedChange={onExternalTasksCollapsedChange}
+                onTaskListCollapsedChange={onTaskListCollapsedChange}
               />
             );
           })}

package/src/components/ui/tu-do/boards/boardId/kanban.tsx

@@ -19,18 +19,17 @@ import type { Workspace, WorkspaceProductTier } from '@tuturuuu/types';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
-import { usePlatform } from '@tuturuuu/utils/hooks/use-platform';
 import { coordinateGetter } from '@tuturuuu/utils/keyboard-preset';
 import { useBoardConfig, useReorderTask } from '@tuturuuu/utils/task-helper';
 import { useTranslations } from 'next-intl';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTaskDialog } from '../../hooks/useTaskDialog';
 import { useOptionalWorkspacePresenceContext } from '../../providers/workspace-presence-provider';
 import { useBoardBroadcast } from '../../shared/board-broadcast-context';
 import type { ListStatusFilter } from '../../shared/board-header';
 import { buildEstimationIndices } from '../../shared/estimation-mapping';
 import { BoardSelector } from '../board-selector';
-import { BulkActionsBar } from './kanban/bulk/bulk-actions-bar';
+import { BulkActionsIsland } from './kanban/bulk/bulk-actions-island';
 import { BulkCustomDateDialog } from './kanban/bulk/bulk-custom-date-dialog';
 import { BulkDeleteDialog } from './kanban/bulk/bulk-delete-dialog';
 import { useBulkOperations } from './kanban/bulk/bulk-operations';
@@ -76,6 +75,8 @@ interface Props {
   isMultiSelectMode: boolean;
   setIsMultiSelectMode: (enabled: boolean) => void;
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
+  onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
+  onBulkSelectionActiveChange?: (active: boolean) => void;
 }
 
 export function KanbanBoard({
@@ -91,13 +92,14 @@ export function KanbanBoard({
   isMultiSelectMode,
   setIsMultiSelectMode,
   onExternalTasksCollapsedChange,
+  onTaskListCollapsedChange,
+  onBulkSelectionActiveChange,
 }: Props) {
   const tLayout = useTranslations('ws-task-boards.layout_settings');
   const tTasks = useTranslations('ws-tasks');
   const invalidColumnMoveMessage = tLayout.has('cannot_reorder_across_statuses')
     ? tLayout('cannot_reorder_across_statuses')
     : 'Task lists can only be reordered within the same status group';
-  const { modKey } = usePlatform();
   const [boardSelectorOpen, setBoardSelectorOpen] = useState(false);
   const [bulkWorking, setBulkWorking] = useState(false);
   const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
@@ -189,6 +191,17 @@ export function KanbanBoard({
     setIsMultiSelectMode
   );
 
+  useEffect(() => {
+    onBulkSelectionActiveChange?.(selectedTasks.size > 0);
+  }, [onBulkSelectionActiveChange, selectedTasks.size]);
+
+  useEffect(
+    () => () => {
+      onBulkSelectionActiveChange?.(false);
+    },
+    [onBulkSelectionActiveChange]
+  );
+
   // Resources Hooks
   const { workspaceLabels, workspaceProjects, workspaceMembers } =
     useBulkResources({
@@ -352,11 +365,9 @@ export function KanbanBoard({
 
   return (
     <div className="flex h-full flex-col">
-      <BulkActionsBar
+      <BulkActionsIsland
         selectedCount={selectedTasks.size}
-        isMultiSelectMode={isMultiSelectMode}
         bulkWorking={bulkWorking}
-        modKey={modKey}
         onClearSelection={clearSelection}
         onOpenBoardSelector={() => setBoardSelectorOpen(true)}
         menuProps={{
@@ -440,6 +451,7 @@ export function KanbanBoard({
             deadlineLabels={deadlineLabels}
             deadlineSections={deadlineSections}
             onExternalTasksCollapsedChange={onExternalTasksCollapsedChange}
+            onTaskListCollapsedChange={onTaskListCollapsedChange}
           />
 
           <DragOverlay dropAnimation={null}>