@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/tu-do/shared/__tests__/board-switcher.test.tsx

@@ -0,0 +1,253 @@
+import '@testing-library/jest-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { BoardSwitcher } from '../board-switcher';
+
+const {
+  createWorkspaceTaskBoardMock,
+  isTaskRememberLastBoardEnabledMock,
+  listWorkspaceTaskBoardsMock,
+  pushMock,
+  rememberLastBoardConfig,
+  updateUserWorkspaceConfigMock,
+  useUserWorkspaceConfigMock,
+} = vi.hoisted(() => ({
+  createWorkspaceTaskBoardMock: vi.fn(),
+  isTaskRememberLastBoardEnabledMock: vi.fn(
+    (value: string | null | undefined) => value !== 'false'
+  ),
+  listWorkspaceTaskBoardsMock: vi.fn(),
+  pushMock: vi.fn(),
+  rememberLastBoardConfig: {
+    value: 'true' as string | null | undefined,
+  },
+  updateUserWorkspaceConfigMock: vi.fn(),
+  useUserWorkspaceConfigMock: vi.fn(),
+}));
+
+let comboboxProps:
+  | {
+      createText?: string;
+      creatingText?: string;
+      onChange: (value: string) => void;
+      onCreate?: (value: string) => Promise<{ label: string; value: string }>;
+      options: Array<{ icon?: unknown; label: string; value: string }>;
+      searchPlaceholder?: string;
+      selected?: string;
+      showSelectedIcon?: boolean;
+    }
+  | undefined;
+
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  createWorkspaceTaskBoard: (
+    ...args: Parameters<typeof createWorkspaceTaskBoardMock>
+  ) => createWorkspaceTaskBoardMock(...args),
+  listWorkspaceTaskBoards: (
+    ...args: Parameters<typeof listWorkspaceTaskBoardsMock>
+  ) => listWorkspaceTaskBoardsMock(...args),
+}));
+
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  isTaskRememberLastBoardEnabled: (value: string | null | undefined): boolean =>
+    isTaskRememberLastBoardEnabledMock(value),
+  TASK_DEFAULT_BOARD_ID_CONFIG_ID: 'TASK_DEFAULT_BOARD_ID',
+  TASK_REMEMBER_LAST_BOARD_CONFIG_ID: 'TASK_REMEMBER_LAST_BOARD',
+}));
+
+vi.mock('../../../../../hooks/use-user-workspace-config', () => ({
+  useUpdateUserWorkspaceConfig: () => ({
+    isPending: false,
+    mutate: updateUserWorkspaceConfigMock,
+  }),
+  useUserWorkspaceConfig: (...args: unknown[]) => {
+    useUserWorkspaceConfigMock(...args);
+    return {
+      data: rememberLastBoardConfig.value,
+      isLoading: false,
+    };
+  },
+}));
+
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: (props: any) => {
+    comboboxProps = props;
+    return (
+      <div>
+        <button
+          type="button"
+          data-testid="board-combobox"
+          onClick={() => props.onChange('board-2')}
+        >
+          {props.label}
+        </button>
+        <button
+          type="button"
+          data-testid="create-board"
+          onClick={async () => {
+            const result = await props.onCreate?.('Launch Board');
+            const boardId = typeof result === 'string' ? result : result?.value;
+            if (boardId) props.onChange(boardId);
+          }}
+        >
+          Create board
+        </button>
+      </div>
+    );
+  },
+}));
+
+vi.mock('@tuturuuu/ui/sonner', () => ({
+  toast: {
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}));
+
+vi.mock('../tasks-route-context', () => ({
+  useTasksHref: () => (path: string) => `/tasks${path}`,
+}));
+
+function renderBoardSwitcher() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <BoardSwitcher
+        board={{
+          id: 'board-1',
+          name: 'Tasks',
+          ticket_prefix: 'T',
+          ws_id: 'ws-1',
+        }}
+        translations={{
+          activeBoards: 'Active boards',
+          archivedBoards: 'Archived boards',
+          deletedBoards: 'Deleted boards',
+          createBoard: 'Create Board',
+          creatingBoard: 'Creating',
+          searchBoards: 'Search boards...',
+          tasks: 'Tasks',
+        }}
+      />
+    </QueryClientProvider>
+  );
+}
+
+describe('BoardSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    comboboxProps = undefined;
+    rememberLastBoardConfig.value = 'true';
+    listWorkspaceTaskBoardsMock.mockResolvedValue({
+      boards: [
+        {
+          archived_at: null,
+          created_at: '2026-06-01T00:00:00.000Z',
+          deleted_at: null,
+          icon: null,
+          id: 'board-2',
+          name: 'Roadmap',
+        },
+      ],
+    });
+  });
+
+  it('uses the shared combobox and navigates when a board is selected', async () => {
+    renderBoardSwitcher();
+
+    expect(screen.getByTestId('board-combobox')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(comboboxProps?.options).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: 'Roadmap',
+            value: 'board-2',
+          }),
+        ])
+      );
+    });
+
+    expect(comboboxProps).toMatchObject({
+      createText: 'Create Board',
+      creatingText: 'Creating',
+      searchPlaceholder: 'Search boards...',
+      selected: 'board-1',
+    });
+    expect(comboboxProps?.showSelectedIcon).toBeUndefined();
+    expect(comboboxProps?.options.some((option) => option.icon)).toBe(true);
+
+    fireEvent.click(screen.getByTestId('board-combobox'));
+
+    expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-2');
+    expect(useUserWorkspaceConfigMock).toHaveBeenCalledWith(
+      'ws-1',
+      'TASK_REMEMBER_LAST_BOARD',
+      'true'
+    );
+    expect(isTaskRememberLastBoardEnabledMock).toHaveBeenCalledWith('true');
+    expect(updateUserWorkspaceConfigMock).toHaveBeenCalledWith({
+      configId: 'TASK_DEFAULT_BOARD_ID',
+      value: 'board-2',
+      workspaceId: 'ws-1',
+    });
+  });
+
+  it('navigates without updating the default board when board memory is disabled', async () => {
+    rememberLastBoardConfig.value = 'false';
+    renderBoardSwitcher();
+
+    await waitFor(() => {
+      expect(comboboxProps?.options.length).toBeGreaterThan(0);
+    });
+
+    fireEvent.click(screen.getByTestId('board-combobox'));
+
+    expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-2');
+    expect(updateUserWorkspaceConfigMock).not.toHaveBeenCalled();
+  });
+
+  it('creates a new board from the picker and opens it', async () => {
+    createWorkspaceTaskBoardMock.mockResolvedValue({
+      board: {
+        archived_at: null,
+        created_at: '2026-06-24T00:00:00.000Z',
+        deleted_at: null,
+        icon: null,
+        id: 'board-3',
+        name: 'Launch Board',
+      },
+    });
+
+    renderBoardSwitcher();
+
+    fireEvent.click(screen.getByTestId('create-board'));
+
+    await waitFor(() => {
+      expect(createWorkspaceTaskBoardMock).toHaveBeenCalledWith('ws-1', {
+        name: 'Launch Board',
+      });
+    });
+
+    await waitFor(() => {
+      expect(pushMock).toHaveBeenCalledWith('/ws-1/tasks/boards/board-3');
+    });
+    expect(updateUserWorkspaceConfigMock).toHaveBeenCalledWith({
+      configId: 'TASK_DEFAULT_BOARD_ID',
+      value: 'board-3',
+      workspaceId: 'ws-1',
+    });
+  });
+});

package/src/components/ui/tu-do/shared/__tests__/board-views.test.tsx

@@ -17,6 +17,8 @@ import { getBoardConfigKey } from '../board-config-storage';
 import { BoardViews } from '../board-views';
 
 const listWorkspaceTasksMock = vi.hoisted(() => vi.fn());
+const getUserWorkspaceConfigMock = vi.hoisted(() => vi.fn());
+const updateUserWorkspaceConfigMock = vi.hoisted(() => vi.fn());
 const createTaskMock = vi.fn();
 const loadListPageMock = vi.fn();
 let progressivePagination: Record<string, unknown> = {};
@@ -54,6 +56,15 @@ vi.mock('@tuturuuu/internal-api/tasks', () => ({
   listWorkspaceTasks: listWorkspaceTasksMock,
 }));
 
+vi.mock('@tuturuuu/internal-api/users', () => ({
+  TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID: 'TASK_BOARD_PINNED_SPECIAL_LISTS',
+  TASK_LAST_BOARD_VIEW_CONFIG_ID: 'TASK_LAST_BOARD_VIEW',
+  getUserWorkspaceConfig: (...args: unknown[]) =>
+    getUserWorkspaceConfigMock(...args),
+  updateUserWorkspaceConfig: (...args: unknown[]) =>
+    updateUserWorkspaceConfigMock(...args),
+}));
+
 vi.mock('../progressive-loader-context', () => ({
   useProgressiveLoader: () => ({
     loadListPage: loadListPageMock,
@@ -75,7 +86,32 @@ vi.mock('../board-header', () => ({
 }));
 
 vi.mock('../recycle-bin-panel', () => ({
-  RecycleBinPanel: () => null,
+  RecycleBinContent: () => <div data-testid="recycle-bin-view">Recycle</div>,
+}));
+
+vi.mock('../../drafts/drafts-page', () => ({
+  DraftsPage: ({
+    boardId,
+    includeUnassignedForBoard,
+    wsId,
+  }: {
+    boardId?: string;
+    includeUnassignedForBoard?: boolean;
+    wsId: string;
+  }) => (
+    <div
+      data-board-id={boardId}
+      data-include-unassigned={String(includeUnassignedForBoard)}
+      data-testid="drafts-view"
+      data-ws-id={wsId}
+    >
+      Drafts
+    </div>
+  ),
+}));
+
+vi.mock('../../my-tasks/my-tasks-content', () => ({
+  default: () => <div data-testid="my-tasks-view">My Tasks</div>,
 }));
 
 vi.mock('../../boards/boardId/kanban', () => ({
@@ -170,6 +206,7 @@ function renderBoardViews(overrides?: {
   board?: Record<string, unknown>;
   idleBottomIsland?: React.ReactNode;
   lists?: TaskList[];
+  props?: Partial<React.ComponentProps<typeof BoardViews>>;
   tasks?: Task[];
   workspace?: { id: string; personal: boolean };
 }) {
@@ -192,6 +229,7 @@ function renderBoardViews(overrides?: {
           workspace={(overrides?.workspace ?? mockWorkspace) as any}
           workspaceLabels={mockWorkspaceLabels}
           idleBottomIsland={overrides?.idleBottomIsland}
+          {...overrides?.props}
         />
       </HotkeysProvider>
     </QueryClientProvider>
@@ -213,7 +251,12 @@ describe('BoardViews', () => {
     progressivePagination = {};
     listWorkspaceTasksMock.mockReset();
     listWorkspaceTasksMock.mockResolvedValue({ tasks: mockTasks });
+    getUserWorkspaceConfigMock.mockReset();
+    getUserWorkspaceConfigMock.mockResolvedValue({ value: null });
+    updateUserWorkspaceConfigMock.mockReset();
+    updateUserWorkspaceConfigMock.mockResolvedValue({ message: 'ok' });
     window.localStorage.clear();
+    window.history.replaceState({}, '', '/');
   });
 
   it('registers visible hotkey labels for each board view', () => {
@@ -222,11 +265,71 @@ describe('BoardViews', () => {
     expect(boardHeaderProps?.viewHotkeyLabels).toEqual({
       kanban: formatHotkeySequence(['G', 'K']),
       list: formatHotkeySequence(['G', 'L']),
+      my_tasks: formatHotkeySequence(['G', 'M']),
       timeline: formatHotkeySequence(['G', 'T']),
+      drafts: formatHotkeySequence(['G', 'D']),
+      recycle_bin: formatHotkeySequence(['G', 'R']),
+    });
+  });
+
+  it('exposes drafts and recycle bin as editable board modes by default', () => {
+    renderBoardViews();
+
+    expect(boardHeaderProps?.availableViews).toEqual([
+      'kanban',
+      'list',
+      'my_tasks',
+      'timeline',
+      'drafts',
+      'recycle_bin',
+    ]);
+  });
+
+  it('passes explicit read-only public mode through shared board components', () => {
+    renderBoardViews({
+      props: {
+        availableViews: ['kanban', 'list'],
+        publicHeaderPrefix: <span data-testid="public-prefix" />,
+        publicView: true,
+        readOnly: true,
+      },
+    });
+
+    expect(boardHeaderProps).toMatchObject({
+      availableViews: ['kanban', 'list'],
+      publicView: true,
+      readOnly: true,
+    });
+    expect(boardHeaderProps?.titlePrefix).toBeDefined();
+    expect(kanbanBoardProps?.readOnly).toBe(true);
+    expect(listWorkspaceTasksMock).not.toHaveBeenCalled();
+  });
+
+  it('renders board-scoped drafts and recycle bin views from the header mode switcher', async () => {
+    renderBoardViews();
+
+    await act(async () => {
+      boardHeaderProps?.onViewChange('drafts');
+    });
+
+    expect(screen.getByTestId('drafts-view')).toHaveAttribute(
+      'data-board-id',
+      'board-1'
+    );
+    expect(screen.getByTestId('drafts-view')).toHaveAttribute(
+      'data-include-unassigned',
+      'true'
+    );
+
+    await act(async () => {
+      boardHeaderProps?.onViewChange('recycle_bin');
     });
+
+    expect(screen.getByTestId('recycle-bin-view')).toBeInTheDocument();
+    expect(createTaskMock).not.toHaveBeenCalled();
   });
 
-  it('switches between kanban, list, and timeline using TanStack hotkey sequences', async () => {
+  it('switches between all board views using TanStack hotkey sequences', async () => {
     renderBoardViews();
 
     expect(screen.getByTestId('kanban-view')).toBeInTheDocument();
@@ -251,6 +354,43 @@ describe('BoardViews', () => {
     await waitFor(() => {
       expect(screen.getByTestId('kanban-view')).toBeInTheDocument();
     });
+
+    fireEvent.keyDown(document, { key: 'g' });
+    fireEvent.keyDown(document, { key: 'm' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('my-tasks-view')).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(document, { key: 'g' });
+    fireEvent.keyDown(document, { key: 'd' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('drafts-view')).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(document, { key: 'g' });
+    fireEvent.keyDown(document, { key: 'r' });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('recycle-bin-view')).toBeInTheDocument();
+    });
+  });
+
+  it('saves the selected workspace task view when the header changes view', async () => {
+    renderBoardViews();
+
+    await act(async () => {
+      boardHeaderProps?.onViewChange('list');
+    });
+
+    await waitFor(() => {
+      expect(updateUserWorkspaceConfigMock).toHaveBeenCalledWith(
+        'ws-1',
+        'TASK_LAST_BOARD_VIEW',
+        'list'
+      );
+    });
   });
 
   it('toggles the idle bottom island around active kanban bulk selection', async () => {
@@ -508,6 +648,42 @@ describe('BoardViews', () => {
     });
   });
 
+  it('persists deadline section collapse state per board and section', async () => {
+    window.localStorage.setItem(
+      'task-board-deadline-section-collapsed:board-1:overdue',
+      'true'
+    );
+
+    renderBoardViews();
+
+    await waitFor(() => {
+      expect(kanbanBoardProps?.deadlineSectionsCollapsed).toEqual(
+        expect.objectContaining({
+          overdue: true,
+          upcoming: false,
+        })
+      );
+    });
+
+    act(() => {
+      kanbanBoardProps?.onDeadlineSectionCollapsedChange?.('upcoming', true);
+    });
+
+    await waitFor(() => {
+      expect(
+        window.localStorage.getItem(
+          'task-board-deadline-section-collapsed:board-1:upcoming'
+        )
+      ).toBe('true');
+      expect(kanbanBoardProps?.deadlineSectionsCollapsed).toEqual(
+        expect.objectContaining({
+          overdue: true,
+          upcoming: true,
+        })
+      );
+    });
+  });
+
   it('excludes deleted lists from active board views and create shortcuts', () => {
     const listsWithDeletedFirst: TaskList[] = [
       {
@@ -650,6 +826,31 @@ describe('BoardViews', () => {
     });
   });
 
+  it('passes board filter criteria into deadline task query options without global sort', async () => {
+    renderBoardViews();
+
+    act(() => {
+      boardHeaderProps?.onListStatusFilterChange('active');
+      boardHeaderProps?.onFiltersChange({
+        ...boardHeaderProps.filters,
+        labels: [{ color: 'BLUE', id: 'label-1', name: 'Urgent' } as any],
+        searchQuery: 'launch',
+        sortBy: 'name-asc',
+      });
+    });
+
+    await waitFor(() => {
+      expect(kanbanBoardProps?.deadlineTaskQueryOptions).toEqual(
+        expect.objectContaining({
+          labelIds: ['label-1'],
+          listStatuses: ['active'],
+          q: 'launch',
+        })
+      );
+    });
+    expect(kanbanBoardProps?.deadlineTaskQueryOptions?.sortBy).toBeUndefined();
+  });
+
   it('uses server-side search counts to hide task lists without matching tasks', async () => {
     listWorkspaceTasksMock.mockImplementation(async (_workspaceId, options) => {
       if (options?.includeListCounts) {

package/src/components/ui/tu-do/shared/__tests__/task-board-loading-state.test.tsx

@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { TaskBoardLoadingState } from '../task-board-loading-state';
+
+describe('TaskBoardLoadingState', () => {
+  it('fills the padded board route with a transparent kanban skeleton', () => {
+    render(<TaskBoardLoadingState root />);
+
+    expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
+      '-m-4',
+      'h-[calc(100dvh+2rem)]',
+      'bg-transparent'
+    );
+    expect(screen.getByTestId('kanban-skeleton')).toHaveClass('bg-transparent');
+  });
+});

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/board-client.tsx

@@ -24,6 +24,7 @@ import {
 import { BoardViews } 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;
@@ -237,13 +238,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 />;
   }
 
   if (!board?.id) {

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 {