@tuturuuu/ui 0.9.0 → 0.10.0

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

@@ -13,6 +13,8 @@ interface DragPreviewProps {
   columns: TaskList[];
   boardId: string;
   isPersonalWorkspace: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   isMultiSelectMode: boolean;
   selectedTasks: Set<string>;
   onUpdate: () => void;
@@ -26,6 +28,8 @@ export function DragPreview({
   columns,
   boardId,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   isMultiSelectMode,
   selectedTasks,
   onUpdate,
@@ -52,6 +56,8 @@ export function DragPreview({
           isOverlay
           onUpdate={onUpdate}
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
         />
         {isMultiCardDrag && (
           <>
@@ -74,6 +80,8 @@ export function DragPreview({
     boardId,
     onUpdate,
     isPersonalWorkspace,
+    canUseBoardAssignees,
+    assigneeMemberSource,
     isMultiSelectMode,
     selectedTasks,
   ]);
@@ -87,11 +95,22 @@ export function DragPreview({
           tasks={tasks.filter((task) => task.list_id === activeColumn.id)}
           isOverlay
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
           onUpdate={onUpdate}
           wsId={wsId}
         />
       ) : null,
-    [activeColumn, tasks, boardId, isPersonalWorkspace, onUpdate, wsId]
+    [
+      activeColumn,
+      tasks,
+      boardId,
+      isPersonalWorkspace,
+      canUseBoardAssignees,
+      assigneeMemberSource,
+      onUpdate,
+      wsId,
+    ]
   );
 
   return <>{MemoizedTaskOverlay || MemoizedColumnOverlay}</>;

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

@@ -20,9 +20,20 @@ vi.mock('@dnd-kit/sortable', () => ({
 }));
 
 vi.mock('../../board-column', () => ({
-  BoardColumn: ({ column }: { column: TaskList }) => (
+  BoardColumn: ({
+    column,
+    specialPinned,
+    specialStickyOffset,
+  }: {
+    column: TaskList;
+    specialPinned?: boolean;
+    specialStickyOffset?: string;
+  }) => (
     <section
+      data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
       data-kanban-real-column={column.is_external_staging ? undefined : 'true'}
+      data-special-pinned={String(specialPinned === true)}
+      data-special-sticky-offset={specialStickyOffset}
       data-testid={`column-${column.id}`}
     />
   ),
@@ -117,6 +128,20 @@ function task(overrides: Partial<Task>): Task {
   };
 }
 
+function getMockRect(left: number, right: number) {
+  return {
+    bottom: 0,
+    height: 0,
+    left,
+    right,
+    toJSON: () => ({}),
+    top: 0,
+    width: right - left,
+    x: left,
+    y: 0,
+  } as DOMRect;
+}
+
 describe('KanbanColumns', () => {
   beforeEach(() => {
     cursorOverlayMock.mockClear();
@@ -525,7 +550,7 @@ describe('KanbanColumns', () => {
     ).toEqual(['Alpha task', 'Zulu task']);
   });
 
-  it('anchors the first load on the first real task list when special columns render to the left', () => {
+  it('anchors the first load on the first real task list when empty special columns render to the left', () => {
     const frameCallbacks: FrameRequestCallback[] = [];
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalCancelAnimationFrame = window.cancelAnimationFrame;
@@ -563,15 +588,9 @@ describe('KanbanColumns', () => {
           }}
           deadlineSections={{
             overdue: [],
-            upcoming: [
-              task({
-                end_date: '2026-06-02T00:00:00.000Z',
-                id: 'upcoming-task',
-                list_id: 'list-1',
-                name: 'Upcoming task',
-              }),
-            ],
+            upcoming: [],
           }}
+          deadlineSectionsLoading
         />
       );
       const scrollContainer = container.firstElementChild as HTMLElement;
@@ -614,15 +633,9 @@ describe('KanbanColumns', () => {
           }}
           deadlineSections={{
             overdue: [],
-            upcoming: [
-              task({
-                end_date: '2026-06-02T00:00:00.000Z',
-                id: 'upcoming-task',
-                list_id: 'list-1',
-                name: 'Upcoming task',
-              }),
-            ],
+            upcoming: [],
           }}
+          deadlineSectionsLoading
         />
       );
 
@@ -633,6 +646,69 @@ describe('KanbanColumns', () => {
     }
   });
 
+  it('keeps the first real task list visible when pinned special lists are sticky', () => {
+    const frameCallbacks: FrameRequestCallback[] = [];
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalCancelAnimationFrame = window.cancelAnimationFrame;
+    const collapsedExternalList = {
+      ...externalList,
+      is_external_collapsed: true,
+    };
+
+    window.requestAnimationFrame = vi.fn((callback: FrameRequestCallback) => {
+      frameCallbacks.push(callback);
+      return frameCallbacks.length;
+    });
+    window.cancelAnimationFrame = vi.fn();
+
+    try {
+      const { container } = render(
+        <KanbanColumns
+          columns={[collapsedExternalList, ...lists]}
+          tasks={[]}
+          boardId="board-1"
+          workspaceId="ws-1"
+          isPersonalWorkspace
+          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()}
+          bulkUpdateCustomDueDate={vi.fn()}
+          boardRef={{ current: null }}
+          columnsId={[collapsedExternalList, ...lists].map((list) => list.id)}
+          specialTaskListPins={{ external_tasks: true }}
+        />
+      );
+      const scrollContainer = container.firstElementChild as HTMLElement;
+      const firstRealColumn = screen.getByTestId('column-list-1');
+      const pinnedExternalColumn = screen.getByTestId('column-external-list');
+
+      Object.defineProperty(firstRealColumn, 'offsetLeft', {
+        configurable: true,
+        value: 320,
+      });
+      Object.defineProperty(pinnedExternalColumn, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => getMockRect(8, 64),
+      });
+
+      act(() => {
+        for (const callback of frameCallbacks) callback(0);
+      });
+
+      expect(scrollContainer.scrollLeft).toBe(256);
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      window.cancelAnimationFrame = originalCancelAnimationFrame;
+    }
+  });
+
   it('renders external deadline cards with their staging list context without exposing the staging list as a move target', () => {
     render(
       <KanbanColumns
@@ -748,6 +824,110 @@ describe('KanbanColumns', () => {
     ).toBeInTheDocument();
   });
 
+  it('keeps pinned deadline sections sticky without forcing them expanded', () => {
+    render(
+      <KanbanColumns
+        columns={lists}
+        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()}
+        bulkUpdateCustomDueDate={vi.fn()}
+        boardRef={{ current: null }}
+        columnsId={lists.map((list) => list.id)}
+        deadlineLabels={{
+          overdue: 'Overdue',
+          upcoming: 'Upcoming',
+        }}
+        deadlineSections={{
+          overdue: [],
+          upcoming: [],
+        }}
+        deadlineSectionsCollapsed={{ overdue: true }}
+        specialTaskListPins={{ overdue: true, upcoming: true }}
+      />
+    );
+
+    const collapsedOverdue = screen.getByTestId(
+      'kanban-deadline-section-overdue-collapsed'
+    );
+    const upcoming = screen.getByTestId('kanban-deadline-section-upcoming');
+
+    expect(collapsedOverdue).toHaveAttribute(
+      'data-kanban-pinned-special',
+      'true'
+    );
+    expect(collapsedOverdue).toHaveClass('sticky');
+    expect(collapsedOverdue.style.left).toBe(
+      'calc(var(--kanban-snap-left-padding) + 0px)'
+    );
+    expect(upcoming).toHaveAttribute('data-kanban-pinned-special', 'true');
+    expect(upcoming).toHaveClass('sticky');
+    expect(upcoming.style.left).toBe(
+      'calc(var(--kanban-snap-left-padding) + calc(3.5rem + 0.75rem))'
+    );
+  });
+
+  it('assigns sticky offsets to pinned external and closed task lists', () => {
+    const collapsedExternalList = {
+      ...externalList,
+      is_external_collapsed: true,
+    };
+
+    render(
+      <KanbanColumns
+        columns={[collapsedExternalList, ...lists, collapsedClosedList]}
+        tasks={[]}
+        boardId="board-1"
+        workspaceId="ws-1"
+        isPersonalWorkspace
+        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()}
+        bulkUpdateCustomDueDate={vi.fn()}
+        boardRef={{ current: null }}
+        columnsId={[collapsedExternalList, ...lists, collapsedClosedList].map(
+          (list) => list.id
+        )}
+        specialTaskListPins={{ closed_tasks: true, external_tasks: true }}
+      />
+    );
+
+    expect(screen.getByTestId('column-external-list')).toHaveAttribute(
+      'data-special-pinned',
+      'true'
+    );
+    expect(screen.getByTestId('column-external-list')).toHaveAttribute(
+      'data-special-sticky-offset',
+      '0px'
+    );
+    expect(screen.getByTestId('column-closed-list')).toHaveAttribute(
+      'data-special-pinned',
+      'true'
+    );
+    expect(screen.getByTestId('column-closed-list')).toHaveAttribute(
+      'data-special-sticky-offset',
+      'calc(3.5rem + 0.75rem)'
+    );
+  });
+
   it('passes deadline tick props to upcoming deadline cards', () => {
     render(
       <KanbanColumns
@@ -800,8 +980,8 @@ describe('KanbanColumns', () => {
     );
   });
 
-  it('omits deadline panels when both deadline sections are empty', () => {
-    render(
+  it('reserves empty deadline panels before deadline tasks load', () => {
+    const { container, rerender } = render(
       <KanbanColumns
         columns={lists}
         tasks={[]}
@@ -821,15 +1001,77 @@ describe('KanbanColumns', () => {
         bulkUpdateCustomDueDate={vi.fn()}
         boardRef={{ current: null }}
         columnsId={lists.map((list) => list.id)}
+        listStatusFilter="all"
         deadlineLabels={{
           overdue: 'Overdue',
           upcoming: 'Upcoming',
         }}
         deadlineSections={{ overdue: [], upcoming: [] }}
+        deadlineSectionsLoading
       />
     );
 
-    expect(screen.queryByTestId('kanban-deadline-panels')).toBeNull();
+    expect(screen.getByTestId('kanban-deadline-panels')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('kanban-deadline-section-overdue')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('kanban-deadline-section-upcoming')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('kanban-deadline-section-overdue-count')
+    ).toHaveTextContent('0');
+    expect(
+      screen.getByTestId('kanban-deadline-section-upcoming-count')
+    ).toHaveTextContent('0');
+    expect(
+      screen.getByTestId('kanban-deadline-section-overdue-loading')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('kanban-deadline-section-upcoming-loading')
+    ).toBeInTheDocument();
+    expect(
+      (container.firstElementChild as HTMLElement).style.getPropertyValue(
+        '--kanban-column-width'
+      )
+    ).toContain('/ 4');
     expect(screen.getByTestId('column-list-1')).toBeInTheDocument();
+
+    rerender(
+      <KanbanColumns
+        columns={lists}
+        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()}
+        bulkUpdateCustomDueDate={vi.fn()}
+        boardRef={{ current: null }}
+        columnsId={lists.map((list) => list.id)}
+        listStatusFilter="all"
+        deadlineLabels={{
+          overdue: 'Overdue',
+          upcoming: 'Upcoming',
+        }}
+        deadlineSections={{ overdue: [], upcoming: [] }}
+      />
+    );
+
+    expect(screen.getByTestId('kanban-deadline-panels')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('kanban-deadline-section-overdue-loading')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('kanban-deadline-section-upcoming-loading')
+    ).not.toBeInTheDocument();
   });
 });

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

@@ -29,12 +29,17 @@ import {
 } from './kanban-deadline-panels';
 import type { KanbanDeadlineSections } from './kanban-deadline-tasks';
 
+const KANBAN_COLUMN_GAP = '0.75rem';
+const COLLAPSED_SPECIAL_LIST_WIDTH = '3.5rem';
+
 interface KanbanColumnsProps {
   columns: TaskList[];
   tasks: Task[];
   boardId: string;
   workspaceId: string;
   isPersonalWorkspace: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   cursorsEnabled?: boolean;
   disableSort: boolean;
   selectedTasks: Set<string>;
@@ -62,6 +67,7 @@ interface KanbanColumnsProps {
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
   deadlineLabels?: KanbanDeadlineLabels;
   deadlineSections?: KanbanDeadlineSections;
+  deadlineSectionsLoading?: boolean;
   deadlineSectionsCollapsed?: KanbanDeadlineCollapsedState;
   deadlineNow?: number;
   onDeadlineSectionCollapsedChange?: (
@@ -76,12 +82,52 @@ interface KanbanColumnsProps {
   readOnly?: boolean;
 }
 
+interface PinnedSpecialListLayout {
+  offsets: Record<string, string>;
+  totalWidth: string;
+}
+
+function toCalcExpression(parts: string[]) {
+  if (parts.length === 0) return '0px';
+  if (parts.length === 1) return parts[0] ?? '0px';
+  return `calc(${parts.join(' + ')})`;
+}
+
+function getSpecialListWidth(collapsed: boolean) {
+  return collapsed
+    ? COLLAPSED_SPECIAL_LIST_WIDTH
+    : 'var(--kanban-column-width)';
+}
+
+function getPinnedSpecialRailWidth(container: HTMLElement) {
+  const elements = Array.from(
+    container.querySelectorAll<HTMLElement>(
+      '[data-kanban-pinned-special="true"]'
+    )
+  );
+
+  if (elements.length === 0) return 0;
+
+  const rects = elements
+    .map((element) => element.getBoundingClientRect())
+    .filter((rect) => rect.width > 0);
+
+  if (rects.length === 0) return 0;
+
+  const left = Math.min(...rects.map((rect) => rect.left));
+  const right = Math.max(...rects.map((rect) => rect.right));
+
+  return Math.max(0, right - left);
+}
+
 export function KanbanColumns({
   columns,
   tasks,
   boardId,
   workspaceId,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   cursorsEnabled = true,
   disableSort,
   selectedTasks,
@@ -104,6 +150,7 @@ export function KanbanColumns({
   onTaskListCollapsedChange,
   deadlineLabels,
   deadlineSections,
+  deadlineSectionsLoading,
   deadlineSectionsCollapsed,
   deadlineNow,
   onDeadlineSectionCollapsedChange,
@@ -114,26 +161,78 @@ export function KanbanColumns({
   const initialScrollAnchoredBoardRef = useRef<string | null>(null);
   const realColumns = columns.filter((column) => !column.is_external_staging);
   const deadlineSectionOrder: KanbanDeadlineSection[] = ['overdue', 'upcoming'];
-  const visibleDeadlineSections =
-    !readOnly && deadlineSections
-      ? deadlineSectionOrder.filter(
-          (section) => deadlineSections[section].length > 0
-        )
-      : [];
-  const snapEdgePadding = columns.length > 0 ? '0.5rem' : '0px';
+  const deadlinePanelsEnabled =
+    !readOnly && Boolean(boardId && deadlineSections && deadlineLabels);
+  const reservedDeadlineSections = deadlinePanelsEnabled
+    ? deadlineSectionOrder
+    : [];
+  const snapEdgePadding =
+    columns.length > 0 || reservedDeadlineSections.length > 0
+      ? '0.5rem'
+      : '0px';
   const collapsedColumnCount =
     columns.filter(isKanbanColumnCollapsed).length +
-    visibleDeadlineSections.filter(
+    reservedDeadlineSections.filter(
       (section) => deadlineSectionsCollapsed?.[section] === true
     ).length;
   const dynamicColumnWidth = getKanbanColumnWidth({
-    columnCount: columns.length + visibleDeadlineSections.length,
+    columnCount: columns.length + reservedDeadlineSections.length,
     collapsedColumnCount,
     snapEdgePadding,
     fillAvailableWidth: listStatusFilter === 'all',
   });
+  const pinnedSpecialListLayout = (() => {
+    const entries: { key: string; width: string }[] = [];
+
+    if (deadlinePanelsEnabled && specialTaskListPins?.overdue) {
+      entries.push({
+        key: 'deadline:overdue',
+        width: getSpecialListWidth(deadlineSectionsCollapsed?.overdue === true),
+      });
+    }
+
+    if (deadlinePanelsEnabled && specialTaskListPins?.upcoming) {
+      entries.push({
+        key: 'deadline:upcoming',
+        width: getSpecialListWidth(
+          deadlineSectionsCollapsed?.upcoming === true
+        ),
+      });
+    }
+
+    for (const column of columns) {
+      const pinned =
+        column.is_external_staging === true
+          ? specialTaskListPins?.external_tasks === true
+          : column.status === 'closed'
+            ? specialTaskListPins?.closed_tasks === true
+            : false;
+
+      if (!pinned) continue;
+
+      entries.push({
+        key: `column:${column.id}`,
+        width: getSpecialListWidth(isKanbanColumnCollapsed(column)),
+      });
+    }
+
+    const offsets: Record<string, string> = {};
+    const parts: string[] = [];
+
+    entries.forEach((entry, index) => {
+      if (index > 0) parts.push(KANBAN_COLUMN_GAP);
+
+      offsets[entry.key] = toCalcExpression(parts);
+      parts.push(entry.width);
+    });
+
+    return {
+      offsets,
+      totalWidth: toCalcExpression(parts),
+    } satisfies PinnedSpecialListLayout;
+  })();
   const hasLeftSpecialColumns =
-    visibleDeadlineSections.length > 0 ||
+    reservedDeadlineSections.length > 0 ||
     columns.some((column) => column.is_external_staging);
 
   useLayoutEffect(() => {
@@ -151,11 +250,16 @@ export function KanbanColumns({
     initialScrollAnchoredBoardRef.current = boardId;
 
     const anchor = () => {
-      container.scrollLeft = Math.max(0, target.offsetLeft - 8);
+      const pinnedRailWidth = getPinnedSpecialRailWidth(container);
+      container.scrollLeft = Math.max(
+        0,
+        target.offsetLeft - pinnedRailWidth - 8
+      );
     };
 
+    anchor();
+
     if (typeof window.requestAnimationFrame !== 'function') {
-      anchor();
       return;
     }
 
@@ -172,7 +276,10 @@ export function KanbanColumns({
           '--kanban-snap-left-padding': snapEdgePadding,
           '--kanban-snap-right-padding': snapEdgePadding,
           '--kanban-column-width': dynamicColumnWidth,
-          scrollPaddingLeft: 'var(--kanban-snap-left-padding)',
+          scrollPaddingLeft:
+            pinnedSpecialListLayout.totalWidth === '0px'
+              ? 'var(--kanban-snap-left-padding)'
+              : `calc(var(--kanban-snap-left-padding) + ${pinnedSpecialListLayout.totalWidth})`,
           scrollPaddingRight: 'var(--kanban-snap-right-padding)',
         } as React.CSSProperties
       }
@@ -188,13 +295,15 @@ export function KanbanColumns({
             paddingRight: 'var(--kanban-snap-right-padding)',
           }}
         >
-          {!readOnly && deadlineSections && deadlineLabels && (
+          {deadlinePanelsEnabled && deadlineSections && deadlineLabels && (
             <KanbanDeadlinePanels
               availableLists={realColumns}
               boardId={boardId}
               bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
               isMultiSelectMode={isMultiSelectMode}
               isPersonalWorkspace={isPersonalWorkspace}
+              canUseBoardAssignees={canUseBoardAssignees}
+              assigneeMemberSource={assigneeMemberSource}
               labels={deadlineLabels}
               onClearSelection={onClearSelection}
               onSectionCollapsedChange={onDeadlineSectionCollapsedChange}
@@ -202,12 +311,17 @@ export function KanbanColumns({
               onUpdate={onUpdate}
               optimisticUpdateInProgress={optimisticUpdateInProgress}
               sections={deadlineSections}
+              loading={deadlineSectionsLoading}
               collapsedSections={deadlineSectionsCollapsed}
               deadlineNow={deadlineNow}
               pinnedSections={{
                 overdue: specialTaskListPins?.overdue,
                 upcoming: specialTaskListPins?.upcoming,
               }}
+              stickyOffsets={{
+                overdue: pinnedSpecialListLayout.offsets['deadline:overdue'],
+                upcoming: pinnedSpecialListLayout.offsets['deadline:upcoming'],
+              }}
               onSectionPinnedChange={(section, pinned) =>
                 onSpecialTaskListPinnedChange?.(section, pinned)
               }
@@ -261,6 +375,8 @@ export function KanbanColumns({
                 tasks={listTasks}
                 availableLists={realColumns}
                 isPersonalWorkspace={isPersonalWorkspace}
+                canUseBoardAssignees={canUseBoardAssignees}
+                assigneeMemberSource={assigneeMemberSource}
                 onUpdate={onUpdate}
                 onAddTask={() =>
                   boardId && createTask(boardId, list.id, realColumns, filters)
@@ -280,6 +396,9 @@ export function KanbanColumns({
                 wsId={workspaceId}
                 onExternalTasksCollapsedChange={onExternalTasksCollapsedChange}
                 onTaskListCollapsedChange={onTaskListCollapsedChange}
+                specialStickyOffset={
+                  pinnedSpecialListLayout.offsets[`column:${list.id}`]
+                }
                 specialPinned={
                   list.is_external_staging
                     ? specialTaskListPins?.external_tasks === true