@tuturuuu/ui 0.7.0 → 0.9.0

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', () => ({
@@ -167,8 +203,10 @@ const mockTasks: Task[] = [
 const mockWorkspaceLabels: WorkspaceLabel[] = [];
 
 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 };
 }) {
@@ -184,13 +222,14 @@ function renderBoardViews(overrides?: {
     <QueryClientProvider client={queryClient}>
       <HotkeysProvider>
         <BoardViews
-          board={mockBoard as any}
+          board={(overrides?.board ?? mockBoard) as any}
           currentUserId="user-1"
           lists={overrides?.lists ?? mockLists}
           tasks={overrides?.tasks ?? mockTasks}
           workspace={(overrides?.workspace ?? mockWorkspace) as any}
           workspaceLabels={mockWorkspaceLabels}
           idleBottomIsland={overrides?.idleBottomIsland}
+          {...overrides?.props}
         />
       </HotkeysProvider>
     </QueryClientProvider>
@@ -212,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', () => {
@@ -221,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();
@@ -250,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 () => {
@@ -323,6 +464,38 @@ describe('BoardViews', () => {
     );
   });
 
+  it('creates a task in the board default list when configured', () => {
+    renderBoardViews({
+      board: { ...mockBoard, default_list_id: 'list-2' },
+    });
+
+    fireEvent.keyDown(document, { key: 'c' });
+
+    expect(createTaskMock).toHaveBeenCalledTimes(1);
+    expect(createTaskMock).toHaveBeenCalledWith(
+      'board-1',
+      'list-2',
+      mockLists,
+      expect.objectContaining({ labels: [] })
+    );
+  });
+
+  it('falls back to the first list when the default list is unavailable', () => {
+    renderBoardViews({
+      board: { ...mockBoard, default_list_id: 'list-does-not-exist' },
+    });
+
+    fireEvent.keyDown(document, { key: 'c' });
+
+    expect(createTaskMock).toHaveBeenCalledTimes(1);
+    expect(createTaskMock).toHaveBeenCalledWith(
+      'board-1',
+      'list-1',
+      mockLists,
+      expect.objectContaining({ labels: [] })
+    );
+  });
+
   it('pins a collapsed virtual external task list on personal boards without assigned external tasks', () => {
     renderBoardViews({
       workspace: {
@@ -475,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[] = [
       {
@@ -617,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 {