@tuturuuu/ui 0.8.0 → 0.9.0

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import type React from 'react';
@@ -21,7 +21,10 @@ vi.mock('@dnd-kit/sortable', () => ({
 
 vi.mock('../../board-column', () => ({
   BoardColumn: ({ column }: { column: TaskList }) => (
-    <section data-testid={`column-${column.id}`} />
+    <section
+      data-kanban-real-column={column.is_external_staging ? undefined : 'true'}
+      data-testid={`column-${column.id}`}
+    />
   ),
 }));
 
@@ -317,10 +320,18 @@ describe('KanbanColumns', () => {
     );
 
     const deadlinePanels = screen.getByTestId('kanban-deadline-panels');
+    const overdueSection = screen.getByTestId(
+      'kanban-deadline-section-overdue'
+    );
+    const overdueCount = screen.getByTestId(
+      'kanban-deadline-section-overdue-count'
+    );
     const firstColumn = screen.getByTestId('column-list-1');
     const sharedTaskCard = screen.getByTestId('shared-task-card-overdue-task');
 
+    expect(overdueSection).toHaveClass('border-dashed');
     expect(deadlinePanels).toHaveTextContent('Overdue');
+    expect(overdueCount).toHaveTextContent('1');
     expect(sharedTaskCard).toHaveTextContent('Overdue task');
     expect(deadlinePanels.compareDocumentPosition(firstColumn)).toBe(
       Node.DOCUMENT_POSITION_FOLLOWING
@@ -347,6 +358,281 @@ describe('KanbanColumns', () => {
     ).toEqual(['list-1', 'list-2']);
   });
 
+  it('filters deadline cards by document and external source controls', () => {
+    render(
+      <KanbanColumns
+        columns={[...lists, externalList]}
+        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={[...lists, externalList].map((list) => list.id)}
+        deadlineLabels={{
+          filter: 'Filters',
+          overdue: 'Overdue',
+          showDocuments: 'Show document-list tasks',
+          showExternalTasks: 'External tasks',
+          upcoming: 'Upcoming',
+        }}
+        deadlineSections={{
+          overdue: [],
+          upcoming: [
+            task({
+              end_date: '2026-06-01T00:00:00.000Z',
+              id: 'regular-deadline',
+              list_id: 'list-1',
+              name: 'Regular deadline task',
+            }),
+            task({
+              end_date: '2026-06-02T00:00:00.000Z',
+              id: 'document-deadline',
+              list_id: 'list-1',
+              name: 'Document deadline task',
+              source_list_status: 'documents',
+            }),
+            task({
+              end_date: '2026-06-03T00:00:00.000Z',
+              id: 'external-deadline',
+              list_id: 'external-list',
+              name: 'External deadline task',
+              source_workspace_id: 'source-ws',
+            }),
+          ],
+        }}
+      />
+    );
+
+    const upcomingSection = screen.getByTestId(
+      'kanban-deadline-section-upcoming'
+    );
+
+    expect(
+      screen.getByTestId('shared-task-card-regular-deadline')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('shared-task-card-document-deadline')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('shared-task-card-external-deadline')
+    ).toBeInTheDocument();
+
+    fireEvent.pointerDown(
+      within(upcomingSection).getByRole('button', { name: 'Filters' }),
+      { button: 0, ctrlKey: false }
+    );
+    fireEvent.click(
+      screen.getByRole('menuitemcheckbox', {
+        name: 'Show document-list tasks',
+      })
+    );
+    fireEvent.click(
+      screen.getByRole('menuitemcheckbox', { name: 'External tasks' })
+    );
+
+    expect(
+      screen.getByTestId('shared-task-card-regular-deadline')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('shared-task-card-document-deadline')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('shared-task-card-external-deadline')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByTestId('kanban-deadline-section-upcoming-count')
+    ).toHaveTextContent('1');
+  });
+
+  it('sorts deadline cards using local deadline sort controls', () => {
+    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',
+          sort: 'Sort',
+          sortNameAsc: 'Task name',
+          upcoming: 'Upcoming',
+        }}
+        deadlineSections={{
+          overdue: [],
+          upcoming: [
+            task({
+              end_date: '2026-06-02T00:00:00.000Z',
+              id: 'z-deadline',
+              list_id: 'list-1',
+              name: 'Zulu task',
+            }),
+            task({
+              end_date: '2026-06-03T00:00:00.000Z',
+              id: 'a-deadline',
+              list_id: 'list-1',
+              name: 'Alpha task',
+            }),
+          ],
+        }}
+      />
+    );
+
+    const upcomingSection = screen.getByTestId(
+      'kanban-deadline-section-upcoming'
+    );
+
+    expect(
+      within(upcomingSection)
+        .getAllByTestId(/shared-task-card-/)
+        .map((item) => item.textContent)
+    ).toEqual(['Zulu task', 'Alpha task']);
+
+    fireEvent.pointerDown(
+      within(upcomingSection).getByRole('button', { name: 'Sort' }),
+      { button: 0, ctrlKey: false }
+    );
+    fireEvent.click(screen.getByRole('menuitemradio', { name: 'Task name' }));
+
+    expect(
+      within(upcomingSection)
+        .getAllByTestId(/shared-task-card-/)
+        .map((item) => item.textContent)
+    ).toEqual(['Alpha task', 'Zulu task']);
+  });
+
+  it('anchors the first load on the first real task list when special columns render to the left', () => {
+    const frameCallbacks: FrameRequestCallback[] = [];
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalCancelAnimationFrame = window.cancelAnimationFrame;
+
+    window.requestAnimationFrame = vi.fn((callback: FrameRequestCallback) => {
+      frameCallbacks.push(callback);
+      return frameCallbacks.length;
+    });
+    window.cancelAnimationFrame = vi.fn();
+
+    try {
+      const { container, rerender } = render(
+        <KanbanColumns
+          columns={[externalList, ...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={[externalList, ...lists].map((list) => list.id)}
+          deadlineLabels={{
+            overdue: 'Overdue',
+            upcoming: 'Upcoming',
+          }}
+          deadlineSections={{
+            overdue: [],
+            upcoming: [
+              task({
+                end_date: '2026-06-02T00:00:00.000Z',
+                id: 'upcoming-task',
+                list_id: 'list-1',
+                name: 'Upcoming task',
+              }),
+            ],
+          }}
+        />
+      );
+      const scrollContainer = container.firstElementChild as HTMLElement;
+      const firstRealColumn = screen.getByTestId('column-list-1');
+      Object.defineProperty(firstRealColumn, 'offsetLeft', {
+        configurable: true,
+        value: 320,
+      });
+
+      act(() => {
+        for (const callback of frameCallbacks) callback(0);
+      });
+
+      expect(scrollContainer.scrollLeft).toBe(312);
+
+      scrollContainer.scrollLeft = 64;
+      rerender(
+        <KanbanColumns
+          columns={[externalList, ...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={[externalList, ...lists].map((list) => list.id)}
+          deadlineLabels={{
+            overdue: 'Overdue',
+            upcoming: 'Upcoming',
+          }}
+          deadlineSections={{
+            overdue: [],
+            upcoming: [
+              task({
+                end_date: '2026-06-02T00:00:00.000Z',
+                id: 'upcoming-task',
+                list_id: 'list-1',
+                name: 'Upcoming task',
+              }),
+            ],
+          }}
+        />
+      );
+
+      expect(scrollContainer.scrollLeft).toBe(64);
+    } 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
@@ -403,6 +689,115 @@ describe('KanbanColumns', () => {
     expect(
       externalCardProps.availableLists.map((list: TaskList) => list.id)
     ).toEqual(['list-1', 'list-2']);
+    expect(externalCardProps).toEqual(
+      expect.objectContaining({
+        deadlineContext: 'upcoming',
+      })
+    );
+  });
+
+  it('renders collapsed deadline sections with counts and expand labels', () => {
+    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={{
+          expandSection: (name) => `Expand ${name}`,
+          overdue: 'Overdue',
+          upcoming: 'Upcoming',
+        }}
+        deadlineSections={{
+          overdue: [
+            task({
+              end_date: '2026-05-06T00:00:00.000Z',
+              id: 'overdue-task',
+              list_id: 'list-1',
+              name: 'Overdue task',
+            }),
+          ],
+          upcoming: [],
+        }}
+        deadlineSectionsCollapsed={{ overdue: true }}
+      />
+    );
+
+    const collapsedOverdue = screen.getByTestId(
+      'kanban-deadline-section-overdue-collapsed'
+    );
+
+    expect(collapsedOverdue).toHaveTextContent('Overdue');
+    expect(collapsedOverdue).toHaveTextContent('1');
+    expect(
+      screen.getByRole('button', { name: 'Expand Overdue' })
+    ).toBeInTheDocument();
+  });
+
+  it('passes deadline tick props to upcoming deadline cards', () => {
+    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',
+        }}
+        deadlineNow={1_779_840_000_000}
+        deadlineSections={{
+          overdue: [],
+          upcoming: [
+            task({
+              end_date: '2026-06-01T00:00:00.000Z',
+              id: 'upcoming-task',
+              list_id: 'list-1',
+              name: 'Upcoming task',
+            }),
+          ],
+        }}
+      />
+    );
+
+    const upcomingCardProps = taskCardMock.mock.calls.find(
+      ([props]) => props.task.id === 'upcoming-task'
+    )?.[0];
+
+    expect(upcomingCardProps).toEqual(
+      expect.objectContaining({
+        deadlineContext: 'upcoming',
+        deadlineNow: 1_779_840_000_000,
+      })
+    );
   });
 
   it('omits deadline panels when both deadline sections are empty', () => {

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

@@ -7,18 +7,25 @@ import {
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { getBoardRealtimeChannelName } from '@tuturuuu/ui/hooks/useBoardRealtime.types';
+import { useLayoutEffect, useRef } from 'react';
 import type { ListStatusFilter } from '../../../../shared/board-header';
 import CursorOverlayMultiWrapper from '../../../../shared/cursor-overlay-multi-wrapper';
+import type {
+  SpecialTaskListPin,
+  SpecialTaskListPinState,
+} from '../../../../shared/special-task-list-pins';
 import { BoardColumn } from '../../board-column';
 import type { TaskFilters } from '../../task-filter';
 import { TaskListForm } from '../../task-list-form';
+import { compareTasksByEffectiveSortKey } from '../dnd/task-sort-key';
 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 {
+  type KanbanDeadlineCollapsedState,
   type KanbanDeadlineLabels,
   KanbanDeadlinePanels,
+  type KanbanDeadlineSection,
 } from './kanban-deadline-panels';
 import type { KanbanDeadlineSections } from './kanban-deadline-tasks';
 
@@ -55,6 +62,18 @@ interface KanbanColumnsProps {
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
   deadlineLabels?: KanbanDeadlineLabels;
   deadlineSections?: KanbanDeadlineSections;
+  deadlineSectionsCollapsed?: KanbanDeadlineCollapsedState;
+  deadlineNow?: number;
+  onDeadlineSectionCollapsedChange?: (
+    section: KanbanDeadlineSection,
+    collapsed: boolean
+  ) => void;
+  specialTaskListPins?: SpecialTaskListPinState;
+  onSpecialTaskListPinnedChange?: (
+    pin: SpecialTaskListPin,
+    pinned: boolean
+  ) => void;
+  readOnly?: boolean;
 }
 
 export function KanbanColumns({
@@ -85,16 +104,64 @@ export function KanbanColumns({
   onTaskListCollapsedChange,
   deadlineLabels,
   deadlineSections,
+  deadlineSectionsCollapsed,
+  deadlineNow,
+  onDeadlineSectionCollapsedChange,
+  specialTaskListPins,
+  onSpecialTaskListPinnedChange,
+  readOnly = false,
 }: KanbanColumnsProps) {
+  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 collapsedColumnCount = columns.filter(isKanbanColumnCollapsed).length;
+  const collapsedColumnCount =
+    columns.filter(isKanbanColumnCollapsed).length +
+    visibleDeadlineSections.filter(
+      (section) => deadlineSectionsCollapsed?.[section] === true
+    ).length;
   const dynamicColumnWidth = getKanbanColumnWidth({
-    columnCount: columns.length,
+    columnCount: columns.length + visibleDeadlineSections.length,
     collapsedColumnCount,
     snapEdgePadding,
     fillAvailableWidth: listStatusFilter === 'all',
   });
+  const hasLeftSpecialColumns =
+    visibleDeadlineSections.length > 0 ||
+    columns.some((column) => column.is_external_staging);
+
+  useLayoutEffect(() => {
+    if (!hasLeftSpecialColumns) return;
+    if (initialScrollAnchoredBoardRef.current === boardId) return;
+
+    const container = boardRef.current;
+    if (!container) return;
+
+    const target = container.querySelector<HTMLElement>(
+      '[data-kanban-real-column="true"]'
+    );
+    if (!target) return;
+
+    initialScrollAnchoredBoardRef.current = boardId;
+
+    const anchor = () => {
+      container.scrollLeft = Math.max(0, target.offsetLeft - 8);
+    };
+
+    if (typeof window.requestAnimationFrame !== 'function') {
+      anchor();
+      return;
+    }
+
+    const frame = window.requestAnimationFrame(anchor);
+    return () => window.cancelAnimationFrame?.(frame);
+  }, [boardId, boardRef, hasLeftSpecialColumns]);
 
   return (
     <div
@@ -121,7 +188,7 @@ export function KanbanColumns({
             paddingRight: 'var(--kanban-snap-right-padding)',
           }}
         >
-          {deadlineSections && deadlineLabels && (
+          {!readOnly && deadlineSections && deadlineLabels && (
             <KanbanDeadlinePanels
               availableLists={realColumns}
               boardId={boardId}
@@ -130,10 +197,20 @@ export function KanbanColumns({
               isPersonalWorkspace={isPersonalWorkspace}
               labels={deadlineLabels}
               onClearSelection={onClearSelection}
+              onSectionCollapsedChange={onDeadlineSectionCollapsedChange}
               onTaskSelect={onTaskSelect}
               onUpdate={onUpdate}
               optimisticUpdateInProgress={optimisticUpdateInProgress}
               sections={deadlineSections}
+              collapsedSections={deadlineSectionsCollapsed}
+              deadlineNow={deadlineNow}
+              pinnedSections={{
+                overdue: specialTaskListPins?.overdue,
+                upcoming: specialTaskListPins?.upcoming,
+              }}
+              onSectionPinnedChange={(section, pinned) =>
+                onSpecialTaskListPinnedChange?.(section, pinned)
+              }
               selectedTasks={selectedTasks}
               taskLists={columns}
               workspaceId={workspaceId}
@@ -170,14 +247,7 @@ export function KanbanColumns({
 
               // For all other lists, only sort by sort_key if parent hasn't already sorted
               if (!disableSort) {
-                const sortA = a.sort_key ?? MAX_SAFE_INTEGER_SORT;
-                const sortB = b.sort_key ?? MAX_SAFE_INTEGER_SORT;
-                if (sortA !== sortB) return sortA - sortB;
-                if (!a.created_at || !b.created_at) return 0;
-                return (
-                  new Date(a.created_at).getTime() -
-                  new Date(b.created_at).getTime()
-                );
+                return compareTasksByEffectiveSortKey(a, b);
               }
 
               return 0;
@@ -210,10 +280,30 @@ export function KanbanColumns({
                 wsId={workspaceId}
                 onExternalTasksCollapsedChange={onExternalTasksCollapsedChange}
                 onTaskListCollapsedChange={onTaskListCollapsedChange}
+                specialPinned={
+                  list.is_external_staging
+                    ? specialTaskListPins?.external_tasks === true
+                    : list.status === 'closed'
+                      ? specialTaskListPins?.closed_tasks === true
+                      : false
+                }
+                onSpecialPinnedChange={(pinned) => {
+                  if (list.is_external_staging) {
+                    onSpecialTaskListPinnedChange?.('external_tasks', pinned);
+                    return;
+                  }
+
+                  if (list.status === 'closed') {
+                    onSpecialTaskListPinnedChange?.('closed_tasks', pinned);
+                  }
+                }}
+                readOnly={readOnly}
               />
             );
           })}
-          <TaskListForm boardId={boardId ?? ''} onListCreated={onUpdate} />
+          {!readOnly && (
+            <TaskListForm boardId={boardId ?? ''} onListCreated={onUpdate} />
+          )}
         </div>
       </SortableContext>