@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/boards/boardId/board-column-external-retry.test.tsx

@@ -0,0 +1,127 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, render, waitFor } from '@testing-library/react';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { ListPaginationState } from '../../shared/progressive-loader-context';
+import { BoardColumn } from './board-column';
+
+const mocks = vi.hoisted(() => ({
+  createTask: vi.fn(),
+  loadListPage: vi.fn(),
+  pagination: {} as Record<string, ListPaginationState>,
+}));
+
+vi.mock('@dnd-kit/sortable', () => ({
+  useSortable: () => ({
+    attributes: {},
+    isDragging: false,
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    transition: null,
+  }),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: () => '',
+    },
+  },
+}));
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, string>) =>
+    values?.name ? `${key}:${values.name}` : key,
+}));
+
+vi.mock('../../hooks/useTaskDialog', () => ({
+  useTaskDialog: () => ({
+    createTask: mocks.createTask,
+  }),
+}));
+
+vi.mock('../../shared/progressive-loader-context', () => ({
+  useProgressiveLoader: () => ({
+    loadListPage: mocks.loadListPage,
+    pagination: mocks.pagination,
+    revalidateLoadedLists: vi.fn(),
+  }),
+}));
+
+vi.mock('./list-actions', () => ({
+  ListActions: () => <div data-testid="list-actions" />,
+}));
+
+vi.mock('./task-list', () => ({
+  VirtualizedTaskList: () => <div data-testid="task-list" />,
+}));
+
+const externalColumn: TaskList = {
+  archived: false,
+  board_id: 'board-1',
+  color: 'CYAN',
+  created_at: '2026-06-16T00:00:00.000Z',
+  creator_id: 'user-1',
+  deleted: false,
+  id: 'personal-external-staging:board-1',
+  is_external_staging: true,
+  name: 'External tasks',
+  position: 0,
+  status: 'active',
+};
+
+const loadedExternalState: ListPaginationState = {
+  hasMore: true,
+  isInitialLoad: false,
+  isLoading: false,
+  page: 0,
+  totalCount: 0,
+};
+
+function renderExternalColumn() {
+  return (
+    <BoardColumn
+      boardId="board-1"
+      column={externalColumn}
+      tasks={[]}
+      wsId="personal"
+    />
+  );
+}
+
+describe('BoardColumn external lane retry behavior', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.pagination = {
+      [externalColumn.id]: loadedExternalState,
+    };
+    mocks.loadListPage.mockRejectedValue(
+      new Error('external lane unavailable')
+    );
+  });
+
+  it('does not immediately retry the same failed external-options signature', async () => {
+    const { rerender } = render(renderExternalColumn());
+
+    await waitFor(() => {
+      expect(mocks.loadListPage).toHaveBeenCalledTimes(1);
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+      rerender(renderExternalColumn());
+      await Promise.resolve();
+    });
+
+    expect(mocks.loadListPage).toHaveBeenCalledTimes(1);
+    expect(mocks.loadListPage).toHaveBeenCalledWith(externalColumn.id, 0, {
+      externalIncludeDocuments: false,
+      externalIncludeDoneClosed: false,
+      externalSortBy: 'created-desc',
+    });
+  });
+});

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

@@ -11,6 +11,8 @@ import {
   Filter,
   GripVertical,
   Loader2,
+  Pin,
+  PinOff,
   RotateCcw,
 } from '@tuturuuu/icons';
 import type { ExternalTaskSortBy } from '@tuturuuu/internal-api/tasks';
@@ -174,6 +176,9 @@ interface BoardColumnProps {
   wsId: string;
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
+  specialPinned?: boolean;
+  onSpecialPinnedChange?: (pinned: boolean) => void;
+  readOnly?: boolean;
 }
 
 export function BoardColumn({
@@ -200,6 +205,9 @@ export function BoardColumn({
   wsId,
   onExternalTasksCollapsedChange,
   onTaskListCollapsedChange,
+  specialPinned = false,
+  onSpecialPinnedChange,
+  readOnly = false,
 }: BoardColumnProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -210,7 +218,9 @@ export function BoardColumn({
   const isExternalCollapsed =
     isExternalStaging && column.is_external_collapsed === true;
   const listState = pagination[column.id];
-  const isInitialLoad = !listState || listState.isInitialLoad;
+  const isInitialLoad = readOnly
+    ? false
+    : !listState || listState.isInitialLoad;
   const [externalIncludeDocuments, setExternalIncludeDocuments] =
     useState(false);
   const [externalIncludeDoneClosed, setExternalIncludeDoneClosed] =
@@ -259,9 +269,7 @@ export function BoardColumn({
       loadedExternalOptionsSignatureRef.current = externalOptionsSignature;
       const promise = loadListPage(column.id, page, externalLoadOptions);
 
-      promise.catch(() => {
-        loadedExternalOptionsSignatureRef.current = null;
-      });
+      void promise.catch(() => {});
 
       return promise;
     },
@@ -378,7 +386,7 @@ export function BoardColumn({
     isDragging,
   } = useSortable({
     id: column.id,
-    disabled: isExternalStaging,
+    disabled: readOnly || isExternalStaging,
     data: {
       type: 'Column',
       column: {
@@ -448,6 +456,9 @@ export function BoardColumn({
     : visibleTasks.length;
   const externalFilterCount =
     (externalIncludeDocuments ? 1 : 0) + (externalIncludeDoneClosed ? 1 : 0);
+  const pinListLabel = specialPinned
+    ? tTasks('unpin_task_list', { name: translateListName(column.name) })
+    : tTasks('pin_task_list', { name: translateListName(column.name) });
 
   // Memoize drag handle for performance
   const DragHandle = useMemo(
@@ -503,6 +514,8 @@ export function BoardColumn({
       <Card
         ref={composedRef}
         style={style}
+        data-kanban-column-id={column.id}
+        data-kanban-real-column={isExternalStaging ? undefined : 'true'}
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
           'touch-none select-none overflow-hidden hover:shadow-md',
@@ -552,6 +565,8 @@ export function BoardColumn({
     <Card
       ref={composedRef}
       style={style}
+      data-kanban-column-id={column.id}
+      data-kanban-real-column={isExternalStaging ? undefined : 'true'}
       className={cn(
         'group flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col rounded-xl transition-all duration-200 last:snap-end',
         'touch-none select-none',
@@ -568,7 +583,7 @@ export function BoardColumn({
       )}
     >
       <div className="flex items-center gap-2 rounded-t-xl border-b p-3">
-        {!isExternalStaging && DragHandle}
+        {!readOnly && !isExternalStaging && DragHandle}
         <div className="flex flex-1 items-center gap-2">
           <span className="text-sm">{statusIcon}</span>
           <h3
@@ -579,9 +594,9 @@ export function BoardColumn({
                 : 'cursor-pointer hover:underline'
             )}
             onClick={() => {
-              if (!isExternalStaging) setIsEditOpen(true);
+              if (!readOnly && !isExternalStaging) setIsEditOpen(true);
             }}
-            title={isExternalStaging ? undefined : t('edit_list')}
+            title={readOnly || isExternalStaging ? undefined : t('edit_list')}
           >
             {translateListName(column.name)}
           </h3>
@@ -707,53 +722,104 @@ export function BoardColumn({
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
-              <Button
-                type="button"
-                variant="ghost"
-                size="xs"
-                className="h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10"
-                title={tTasks('collapse_external_tasks')}
-                aria-label={tTasks('collapse_external_tasks')}
-                onClick={() => onExternalTasksCollapsedChange?.(true)}
-              >
-                <ChevronLeft className="h-3.5 w-3.5" />
-              </Button>
-            </>
-          ) : (
-            <>
-              {isClosedCollapsed || column.status === 'closed' ? (
+              {onSpecialPinnedChange ? (
                 <Button
                   type="button"
                   variant="ghost"
                   size="xs"
                   className={cn(
-                    'h-7 w-7 p-0 hover:bg-muted/40',
-                    getListTextColorClass(column.color as SupportedColor)
+                    'h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10',
+                    specialPinned && 'bg-dynamic-cyan/10'
                   )}
-                  title={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  aria-label={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  onClick={() => onTaskListCollapsedChange?.(column.id, true)}
+                  title={pinListLabel}
+                  aria-label={pinListLabel}
+                  onClick={() => onSpecialPinnedChange(!specialPinned)}
+                >
+                  {specialPinned ? (
+                    <PinOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Pin className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+              ) : null}
+              {!specialPinned && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="xs"
+                  className="h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10"
+                  title={tTasks('collapse_external_tasks')}
+                  aria-label={tTasks('collapse_external_tasks')}
+                  onClick={() => onExternalTasksCollapsedChange?.(true)}
                 >
                   <ChevronLeft className="h-3.5 w-3.5" />
                 </Button>
+              )}
+            </>
+          ) : (
+            <>
+              {isClosedCollapsed || column.status === 'closed' ? (
+                <>
+                  {onSpecialPinnedChange ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="xs"
+                      className={cn(
+                        'h-7 w-7 p-0 hover:bg-muted/40',
+                        getListTextColorClass(column.color as SupportedColor),
+                        specialPinned && 'bg-muted/40'
+                      )}
+                      title={pinListLabel}
+                      aria-label={pinListLabel}
+                      onClick={() => onSpecialPinnedChange(!specialPinned)}
+                    >
+                      {specialPinned ? (
+                        <PinOff className="h-3.5 w-3.5" />
+                      ) : (
+                        <Pin className="h-3.5 w-3.5" />
+                      )}
+                    </Button>
+                  ) : null}
+                  {!specialPinned && (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="xs"
+                      className={cn(
+                        'h-7 w-7 p-0 hover:bg-muted/40',
+                        getListTextColorClass(column.color as SupportedColor)
+                      )}
+                      title={tTasks('collapse_task_list', {
+                        name: translateListName(column.name),
+                      })}
+                      aria-label={tTasks('collapse_task_list', {
+                        name: translateListName(column.name),
+                      })}
+                      onClick={() =>
+                        onTaskListCollapsedChange?.(column.id, true)
+                      }
+                    >
+                      <ChevronLeft className="h-3.5 w-3.5" />
+                    </Button>
+                  )}
+                </>
               ) : null}
-              <ListActions
-                listId={column.id}
-                listName={column.name}
-                listStatus={column.status}
-                listColor={column.color as SupportedColor}
-                tasks={tasks}
-                boardId={boardId}
-                wsId={wsId}
-                onUpdate={handleUpdate}
-                onSelectAll={handleSelectAll}
-                isEditOpen={isEditOpen}
-                onEditOpenChange={setIsEditOpen}
-              />
+              {!readOnly && (
+                <ListActions
+                  listId={column.id}
+                  listName={column.name}
+                  listStatus={column.status}
+                  listColor={column.color as SupportedColor}
+                  tasks={tasks}
+                  boardId={boardId}
+                  wsId={wsId}
+                  onUpdate={handleUpdate}
+                  onSelectAll={handleSelectAll}
+                  isEditOpen={isEditOpen}
+                  onEditOpenChange={setIsEditOpen}
+                />
+              )}
             </>
           )}
         </div>
@@ -785,10 +851,11 @@ export function BoardColumn({
           onLoadMore={handleLoadMore}
           hasMore={listState?.hasMore ?? false}
           isLoadingMore={listState?.isLoading ?? false}
+          readOnly={readOnly}
         />
       )}
 
-      {!isExternalStaging && (
+      {!readOnly && !isExternalStaging && (
         <div className="rounded-b-xl border-t p-3 backdrop-blur-sm">
           <Button
             variant="ghost"

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-mutations-clear-delete.ts

@@ -4,6 +4,7 @@ import { type QueryClient, useMutation } from '@tanstack/react-query';
 import { bulkWorkspaceTasks } from '@tuturuuu/internal-api/tasks';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import {
   type BulkTaskWorkspaceGroup,
@@ -390,6 +391,7 @@ export function useBulkDeleteTasks(
       for (const tid of succeededTaskIds) {
         broadcast?.('task:delete', { taskId: tid });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       clearSelection();
       setBulkDeleteOpen(false);

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

@@ -6,6 +6,7 @@ import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import { getInternalApiOptions } from './bulk-operation-utils';
 import {
@@ -184,6 +185,8 @@ export function useBulkMoveToBoard(
       for (const tid of movedTaskIds) {
         broadcast?.('task:delete', { taskId: tid });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
+      void invalidateKanbanDeadlineTasks(queryClient, data.targetBoardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -428,6 +431,7 @@ export function useBulkMoveToList(
           },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -631,6 +635,7 @@ export function useBulkMoveToStatus(
           },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(

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

@@ -4,6 +4,7 @@ import { type QueryClient, useMutation } from '@tanstack/react-query';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { toast } from '@tuturuuu/ui/sonner';
 import type { BoardBroadcastFn } from '../../../../shared/board-broadcast-context';
+import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import type { BulkOperationI18n } from './bulk-operation-i18n';
 import {
   bulkWorkspaceTasksByEffectiveWorkspace,
@@ -322,6 +323,7 @@ export function useBulkUpdateDueDate(
           task: { id: tid, end_date: data.end_date },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(
@@ -434,6 +436,7 @@ export function useBulkUpdateCustomDueDate(
           task: { id: tid, end_date: data.end_date },
         });
       }
+      void invalidateKanbanDeadlineTasks(queryClient, boardId);
 
       if (data.failures.length > 0) {
         toast.warning(

package/src/components/ui/tu-do/boards/boardId/kanban/data/kanban-deadline-query.ts

@@ -1,22 +1,70 @@
+import type { QueryClient } from '@tanstack/react-query';
 import { listWorkspaceTasks } from '@tuturuuu/internal-api';
+import type { ListWorkspaceTasksOptions } from '@tuturuuu/internal-api/tasks';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 
 const KANBAN_DEADLINE_TASK_PAGE_SIZE = 200;
+export const KANBAN_DEADLINE_TASKS_QUERY_KEY = 'kanban-deadline-tasks';
+
+export function getKanbanDeadlineTasksQueryKey(
+  workspaceId: string,
+  boardId: string | null | undefined,
+  taskQueryOptions?: ListWorkspaceTasksOptions
+) {
+  return [
+    KANBAN_DEADLINE_TASKS_QUERY_KEY,
+    workspaceId,
+    boardId,
+    taskQueryOptions,
+  ] as const;
+}
+
+export function invalidateKanbanDeadlineTasks(
+  queryClient: QueryClient,
+  boardId?: string | null
+) {
+  return queryClient.invalidateQueries({
+    predicate: (query) => {
+      const queryKey = query.queryKey;
+      if (!Array.isArray(queryKey)) return false;
+      if (queryKey[0] !== KANBAN_DEADLINE_TASKS_QUERY_KEY) return false;
+      return !boardId || queryKey[2] === boardId;
+    },
+  });
+}
 
 interface ListKanbanDeadlineTasksOptions {
   boardId: string;
+  taskQueryOptions?: ListWorkspaceTasksOptions;
   workspaceId: string;
 }
 
 export async function listKanbanDeadlineTasks({
   boardId,
+  taskQueryOptions,
   workspaceId,
 }: ListKanbanDeadlineTasksOptions): Promise<Task[]> {
   const tasks: Task[] = [];
   let offset = 0;
+  const {
+    boardId: _boardId,
+    closed: _closed,
+    completed: _completed,
+    externalSortBy: _externalSortBy,
+    hasDueDate: _hasDueDate,
+    includeCount: _includeCount,
+    includeListCounts: _includeListCounts,
+    includeRelationshipSummary: _includeRelationshipSummary,
+    limit: _limit,
+    listId: _listId,
+    offset: _offset,
+    sortBy: _sortBy,
+    ...filterOptions
+  } = taskQueryOptions ?? {};
 
   while (true) {
     const response = await listWorkspaceTasks(workspaceId, {
+      ...filterOptions,
       boardId,
       closed: 'exclude',
       completed: 'exclude',
@@ -25,9 +73,9 @@ export async function listKanbanDeadlineTasks({
       includeCount: true,
       includeRelationshipSummary: false,
       limit: KANBAN_DEADLINE_TASK_PAGE_SIZE,
-      listStatuses: ['not_started', 'active'],
+      listStatuses: filterOptions.listStatuses ?? ['not_started', 'active'],
       offset,
-      sourceScope: 'all_visible',
+      sourceScope: filterOptions.sourceScope ?? 'all_visible',
     });
 
     tasks.push(...response.tasks);

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/__tests__/column-reorder.test.ts

@@ -43,6 +43,23 @@ describe('getColumnReorderUpdates', () => {
     expect(getColumnReorderUpdates(columns, 'todo', 'doing')).toBeNull();
   });
 
+  it('excludes synthetic external staging lanes from persisted position repairs', () => {
+    const externalLane = {
+      ...makeList('external', 'not_started', -1),
+      is_external_staging: true,
+    };
+    const columns = [
+      externalLane,
+      makeList('todo', 'not_started', 0),
+      makeList('backlog', 'not_started', 1),
+    ];
+
+    expect(getColumnReorderUpdates(columns, 'backlog', 'todo')).toEqual([
+      { listId: 'backlog', newPosition: 0 },
+      { listId: 'todo', newPosition: 1 },
+    ]);
+  });
+
   it('sorts columns in the same order they are rendered in Kanban', () => {
     const columns = [
       makeList('closed', 'closed', 0),

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

@@ -39,7 +39,10 @@ export function getColumnReorderUpdates(
   }
 
   const statusColumns = [...columns]
-    .filter((column) => column.status === activeColumn.status)
+    .filter(
+      (column) =>
+        column.status === activeColumn.status && !column.is_external_staging
+    )
     .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
 
   const activeIndex = statusColumns.findIndex(