@tuturuuu/ui 0.14.0 → 0.17.0

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

@@ -209,10 +209,16 @@ describe('BoardClient', () => {
     );
 
     expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
-      '-m-4',
+      '-mt-4',
+      '-mb-4',
+      '-ml-4',
       'h-[calc(100dvh+2rem)]',
       'w-[calc(100%+2rem)]'
     );
+    expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
+      '-m-4',
+      '-mr-4'
+    );
     expect(
       screen.getByTestId('task-board-header-skeleton')
     ).toBeInTheDocument();

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

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { SidebarContext } from '@tuturuuu/ui/custom/sidebar-context';
 import type React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BoardHeader } from '../board-header';
@@ -180,7 +181,8 @@ const mockBoard = {
 } as const;
 
 function renderBoardHeader(
-  overrides?: Partial<React.ComponentProps<typeof BoardHeader>>
+  overrides?: Partial<React.ComponentProps<typeof BoardHeader>>,
+  sidebarContext?: React.ContextType<typeof SidebarContext>
 ) {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -190,7 +192,7 @@ function renderBoardHeader(
     },
   });
 
-  return render(
+  const content = (
     <QueryClientProvider client={queryClient}>
       <BoardHeader
         workspaceId="ws-1"
@@ -221,6 +223,16 @@ function renderBoardHeader(
       />
     </QueryClientProvider>
   );
+
+  return render(
+    sidebarContext ? (
+      <SidebarContext.Provider value={sidebarContext}>
+        {content}
+      </SidebarContext.Provider>
+    ) : (
+      content
+    )
+  );
 }
 
 describe('BoardHeader', () => {
@@ -247,6 +259,79 @@ describe('BoardHeader', () => {
     );
   });
 
+  it('renders a compact hide-sidebar button when sidebar context is available', () => {
+    const handleBehaviorChange = vi.fn();
+
+    renderBoardHeader(undefined, {
+      behavior: 'expanded',
+      handleBehaviorChange,
+      localOverride: false,
+      setBehavior: vi.fn(),
+      setLocalOverride: vi.fn(),
+    });
+
+    const hideButton = screen.getByRole('button', {
+      name: 'common.hide_sidebar',
+    });
+
+    expect(hideButton).toHaveClass('border', 'h-7', 'w-7', 'px-0');
+    fireEvent.click(hideButton);
+    expect(handleBehaviorChange).toHaveBeenCalledWith('hidden');
+  });
+
+  it('does not render the hide-sidebar button without context or when already hidden', () => {
+    const { rerender } = renderBoardHeader();
+
+    expect(
+      screen.queryByRole('button', { name: 'common.hide_sidebar' })
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <SidebarContext.Provider
+        value={{
+          behavior: 'hidden',
+          handleBehaviorChange: vi.fn(),
+          localOverride: false,
+          setBehavior: vi.fn(),
+          setLocalOverride: vi.fn(),
+        }}
+      >
+        <QueryClientProvider client={new QueryClient()}>
+          <BoardHeader
+            workspaceId="ws-1"
+            board={mockBoard}
+            currentView="kanban"
+            filters={{
+              assignees: [],
+              dueDateRange: null,
+              estimationRange: null,
+              includeMyTasks: false,
+              includeUnassigned: false,
+              labels: [],
+              priorities: [],
+              projects: [],
+              sourceBoardIds: [],
+              sourceScope: 'all_visible',
+              sourceWorkspaceIds: [],
+            }}
+            isMultiSelectMode={false}
+            isPersonalWorkspace={false}
+            listStatusFilter="all"
+            onFiltersChange={vi.fn()}
+            onListStatusFilterChange={vi.fn()}
+            onUpdate={vi.fn()}
+            onViewChange={vi.fn()}
+            setIsMultiSelectMode={vi.fn()}
+          />
+        </QueryClientProvider>
+      </SidebarContext.Provider>
+    );
+
+    expect(
+      screen.queryByRole('button', { name: 'common.hide_sidebar' })
+    ).not.toBeInTheDocument();
+  });
+
   it('prefetches current board settings before opening the dialog', async () => {
     renderBoardHeader();
 

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

@@ -8,11 +8,17 @@ describe('TaskBoardLoadingState', () => {
     render(<TaskBoardLoadingState root />);
 
     expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
-      '-m-4',
+      '-mt-4',
+      '-mb-4',
+      '-ml-4',
       'h-[calc(100dvh+2rem)]',
       'w-[calc(100%+2rem)]',
       'bg-transparent'
     );
+    expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
+      '-m-4',
+      '-mr-4'
+    );
     expect(screen.getByTestId('kanban-skeleton')).toHaveClass('bg-transparent');
     expect(screen.getByTestId('kanban-skeleton-frame')).toHaveClass(
       'py-2',
@@ -34,6 +40,9 @@ describe('TaskBoardLoadingState', () => {
     );
     expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
       '-m-4',
+      '-mt-4',
+      '-mb-4',
+      '-ml-4',
       'w-[calc(100%+2rem)]'
     );
     expect(screen.getByTestId('kanban-skeleton-frame')).toHaveClass('p-2');
@@ -46,22 +55,37 @@ describe('TaskBoardLoadingState', () => {
     render(<TaskBoardLoadingState root showHeader />);
 
     expect(screen.getByTestId('task-board-loading-state')).toHaveClass(
-      '-m-4',
+      '-mt-4',
+      '-mb-4',
+      '-ml-4',
       'h-[calc(100dvh+2rem)]',
       'w-[calc(100%+2rem)]',
       'flex',
       'flex-col'
     );
+    expect(screen.getByTestId('task-board-loading-state')).not.toHaveClass(
+      '-m-4',
+      '-mr-4'
+    );
     expect(screen.getByTestId('task-board-header-skeleton')).toHaveAttribute(
       'aria-hidden',
       'true'
     );
     expect(screen.getByTestId('task-board-header-skeleton')).toHaveClass(
       'border-b',
-      'px-2',
+      'pl-2',
+      'pr-0',
       'pt-2',
       'pb-2'
     );
+    expect(screen.getByTestId('task-board-header-skeleton')).not.toHaveClass(
+      'px-2'
+    );
+    expect(screen.getByTestId('kanban-skeleton-frame')).toHaveClass(
+      'py-2',
+      'pl-2',
+      'pr-0'
+    );
     expect(screen.getByTestId('task-board-header-skeleton')).not.toHaveClass(
       '-mt-2'
     );

package/src/components/ui/tu-do/shared/__tests__/task-dialog-manager.test.tsx

@@ -171,6 +171,8 @@ vi.mock('../task-edit-dialog', () => ({
     isHydratingTask,
     taskLoadError,
     task,
+    visibleBoardId,
+    visibleTaskSnapshot,
     onClose,
     onNavigateToTask,
   }: {
@@ -179,6 +181,8 @@ vi.mock('../task-edit-dialog', () => ({
     isHydratingTask?: boolean;
     taskLoadError?: boolean;
     task?: Task;
+    visibleBoardId?: string;
+    visibleTaskSnapshot?: Partial<Task>;
     onClose: () => void;
     onNavigateToTask?: (taskId: string) => Promise<void>;
   }) => {
@@ -197,6 +201,8 @@ vi.mock('../task-edit-dialog', () => ({
         data-hydrating={String(!!isHydratingTask)}
         data-load-error={String(!!taskLoadError)}
         data-open={isOpen}
+        data-visible-board-id={visibleBoardId}
+        data-visible-list-id={visibleTaskSnapshot?.list_id}
       >
         {task && <div data-testid="task-name">{task.name}</div>}
         <button
@@ -684,11 +690,25 @@ describe('TaskDialogManager', () => {
       const { openTaskById } = useTaskDialogContext();
 
       React.useEffect(() => {
+        const visibleExternalSnapshot = {
+          ...mockTask,
+          id: 'external-task-1',
+          name: 'External snapshot',
+          list_id: 'personal-list-1',
+          personal_board_id: 'personal-board-1',
+          personal_list_id: 'personal-list-1',
+          personal_sort_key: 2000,
+          source_workspace_id: 'source-workspace-1',
+          source_board_id: 'external-board-1',
+          source_list_id: 'external-list-1',
+          source_list_name: 'External list',
+          is_personal_external: true,
+        } satisfies Task;
+
         void openTaskById('external-task-1', {
           initialTask: {
-            ...mockTask,
-            id: 'external-task-1',
-            name: 'External snapshot',
+            ...visibleExternalSnapshot,
+            list_id: 'external-list-1',
           },
           boardId: 'external-board-1',
           availableLists: [
@@ -700,6 +720,8 @@ describe('TaskDialogManager', () => {
           ],
           taskWsId: 'source-workspace-1',
           taskWorkspacePersonal: false,
+          visibleBoardId: 'personal-board-1',
+          visibleTaskSnapshot: visibleExternalSnapshot,
         });
       }, [openTaskById]);
 
@@ -719,6 +741,14 @@ describe('TaskDialogManager', () => {
       );
       expect(getByTestId('task-name')).toHaveTextContent('External snapshot');
     });
+    expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+      'data-visible-board-id',
+      'personal-board-1'
+    );
+    expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+      'data-visible-list-id',
+      'personal-list-1'
+    );
     expect(taskDialogRenderStats).toMatchObject({
       mounts: 1,
       unmounts: 0,
@@ -751,6 +781,14 @@ describe('TaskDialogManager', () => {
         'Hydrated external task'
       );
     });
+    expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+      'data-visible-board-id',
+      'personal-board-1'
+    );
+    expect(getByTestId('task-edit-dialog')).toHaveAttribute(
+      'data-visible-list-id',
+      'personal-list-1'
+    );
     expect(taskDialogRenderStats).toMatchObject({
       mounts: 1,
       unmounts: 0,

package/src/components/ui/tu-do/shared/__tests__/use-progressive-board-loader.test.tsx

@@ -515,6 +515,60 @@ describe('useProgressiveBoardLoader', () => {
     ]);
   });
 
+  it('preserves a freshly property-updated external overlay when list revalidation misses it', async () => {
+    const propertyUpdatedExternalTask = {
+      id: 'task-external',
+      display_number: 43,
+      name: 'Updated external task',
+      list_id: 'personal-list-2',
+      created_at: '2026-05-07T00:00:00.000Z',
+      sort_key: 1_500_000,
+      personal_board_id: 'board-1',
+      personal_list_id: 'personal-list-2',
+      personal_sort_key: 1_500_000,
+      source_workspace_id: 'source-ws',
+      source_board_id: 'source-board',
+      source_list_id: 'source-list',
+      source_list_name: 'Source list',
+      source_list_status: 'active',
+      is_personal_external: true,
+      priority: 'high',
+      _localMutationAt: Date.now(),
+    } as Task;
+
+    const { result } = renderHook(
+      () => useProgressiveBoardLoader('personal', 'board-1'),
+      { wrapper }
+    );
+
+    vi.mocked(listWorkspaceTasks).mockResolvedValueOnce({ tasks: [] });
+
+    await act(async () => {
+      await result.current.loadListPage('personal-list-2', 0);
+    });
+
+    queryClient.setQueryData(
+      ['tasks', 'board-1'],
+      [propertyUpdatedExternalTask]
+    );
+    vi.mocked(listWorkspaceTasks).mockResolvedValueOnce({ tasks: [] });
+
+    await act(async () => {
+      await result.current.revalidateLoadedLists();
+    });
+
+    expect(queryClient.getQueryData<Task[]>(['tasks', 'board-1'])).toEqual([
+      expect.objectContaining({
+        id: 'task-external',
+        priority: 'high',
+        list_id: 'personal-list-2',
+        personal_list_id: 'personal-list-2',
+        source_list_id: 'source-list',
+        _localMutationAt: expect.any(Number),
+      }),
+    ]);
+  });
+
   it('revalidates loaded lists without clearing other list tasks', async () => {
     const existingOtherListTask: Task = {
       id: 'task-other',

package/src/components/ui/tu-do/shared/board-header.tsx

@@ -15,6 +15,7 @@ import {
   LayoutGrid,
   List,
   Loader2,
+  PanelLeftClose,
   Pencil,
   Play,
   Search,
@@ -29,6 +30,7 @@ import type { WorkspaceTaskBoard } from '@tuturuuu/types';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { Button } from '@tuturuuu/ui/button';
 import { Combobox } from '@tuturuuu/ui/custom/combobox';
+import { useOptionalSidebar } from '@tuturuuu/ui/custom/sidebar-context';
 import { Input } from '@tuturuuu/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { cn } from '@tuturuuu/utils/format';
@@ -157,6 +159,9 @@ export function BoardHeader({
     !publicView &&
     isPersonalWorkspace &&
     currentView === 'kanban';
+  const sidebar = useOptionalSidebar();
+  const hideSidebarVisible =
+    Boolean(sidebar) && sidebar?.behavior !== 'hidden' && !publicView;
   const hasSharedBoardGuests =
     board.access_type === 'guest' || board.has_guest_access === true;
   const presenceVisible =
@@ -568,6 +573,21 @@ export function BoardHeader({
             />
           )}
 
+          {hideSidebarVisible && (
+            <ToolbarTooltip label={t('common.hide_sidebar')}>
+              <Button
+                type="button"
+                size="xs"
+                variant="outline"
+                className={toolbarButtonClass}
+                onClick={() => sidebar?.handleBehaviorChange('hidden')}
+                aria-label={t('common.hide_sidebar')}
+              >
+                <PanelLeftClose className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
+              </Button>
+            </ToolbarTooltip>
+          )}
+
           {/* Smart Focus Button */}
           {interactiveControlsVisible && (
             <ToolbarTooltip

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

@@ -13,11 +13,11 @@ const HEADER_ACTIONS = [
   'settings',
 ];
 
-function TaskBoardHeaderSkeleton() {
+function TaskBoardHeaderSkeleton({ root = false }: { root?: boolean }) {
   return (
     <div
       aria-hidden="true"
-      className="border-b px-2 pt-2 pb-2"
+      className={cn('border-b pt-2 pb-2', root ? 'pr-0 pl-2' : 'px-2')}
       data-testid="task-board-header-skeleton"
     >
       <div className="flex flex-wrap items-center justify-between gap-1.5 sm:gap-2">
@@ -57,7 +57,7 @@ export function TaskBoardLoadingState({
       className={cn(
         'overflow-hidden bg-transparent',
         root
-          ? '-m-4 h-[calc(100dvh+2rem)] min-h-[calc(32rem+2rem)] w-[calc(100%+2rem)] min-w-[calc(100%+2rem)]'
+          ? '-mt-4 -mb-4 -ml-4 h-[calc(100dvh+2rem)] min-h-[calc(32rem+2rem)] w-[calc(100%+2rem)] min-w-[calc(100%+2rem)]'
           : 'h-[calc(100dvh-1rem)] min-h-[32rem] w-full',
         showHeader && 'flex flex-col',
         className
@@ -66,7 +66,7 @@ export function TaskBoardLoadingState({
     >
       {showHeader ? (
         <>
-          <TaskBoardHeaderSkeleton />
+          <TaskBoardHeaderSkeleton root={root} />
           <div
             className="min-h-0 flex-1 overflow-hidden"
             data-testid="task-board-loading-body"

package/src/components/ui/tu-do/shared/task-dialog-manager.tsx

@@ -542,6 +542,8 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       taskWsId={state.taskWsId}
       task={state.task}
       boardId={state.boardId || ''}
+      visibleBoardId={state.visibleBoardId}
+      visibleTaskSnapshot={state.visibleTaskSnapshot}
       isOpen={state.isOpen}
       availableLists={state.availableLists}
       sharedContext={

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-dialog-header.tsx

@@ -220,6 +220,9 @@ interface TaskDialogHeaderProps {
   isPersonalWorkspace?: boolean;
   /** Callback to open share dialog */
   onOpenShareDialog?: () => void;
+  /** Optional archive action for document-type tasks. */
+  onArchiveTask?: () => void;
+  archiveTaskDisabled?: boolean;
   /** Whether the dialog is in read-only mode */
   disabled?: boolean;
   /** Whether task-dependent actions should be disabled while the task hydrates. */
@@ -263,6 +266,8 @@ export function TaskDialogHeader({
   onNavigateBack,
   isPersonalWorkspace = false,
   onOpenShareDialog,
+  onArchiveTask,
+  archiveTaskDisabled = false,
   disabled = false,
   controlsDisabled = false,
   onScrollToUserCursor,
@@ -487,6 +492,8 @@ export function TaskDialogHeader({
           onShowDeleteDialog={() => setShowDeleteConfirm(true)}
           onClearDraft={clearDraftState}
           onNavigateBack={onNavigateBack}
+          onArchiveTask={onArchiveTask}
+          archiveTaskDisabled={archiveTaskDisabled}
           onOpenShareDialog={onOpenShareDialog}
           disabled={disabled}
           controlsDisabled={controlsDisabled}