@tuturuuu/ui 0.13.0 → 0.16.0

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

@@ -17,7 +17,9 @@ import { getBoardConfigKey } from '../board-config-storage';
 import { BoardViews } from '../board-views';
 
 const listWorkspaceTasksMock = vi.hoisted(() => vi.fn());
+const getUserConfigMock = vi.hoisted(() => vi.fn());
 const getUserWorkspaceConfigMock = vi.hoisted(() => vi.fn());
+const updateUserConfigMock = vi.hoisted(() => vi.fn());
 const updateUserWorkspaceConfigMock = vi.hoisted(() => vi.fn());
 const createTaskMock = vi.fn();
 const loadListPageMock = vi.fn();
@@ -64,8 +66,11 @@ vi.mock('@tuturuuu/internal-api/tasks', () => ({
 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',
+  TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID: 'TASK_QUICK_CREATE_TARGET_LIST',
+  getUserConfig: (...args: unknown[]) => getUserConfigMock(...args),
   getUserWorkspaceConfig: (...args: unknown[]) =>
     getUserWorkspaceConfigMock(...args),
+  updateUserConfig: (...args: unknown[]) => updateUserConfigMock(...args),
   updateUserWorkspaceConfig: (...args: unknown[]) =>
     updateUserWorkspaceConfigMock(...args),
 }));
@@ -260,8 +265,12 @@ describe('BoardViews', () => {
     progressivePagination = {};
     listWorkspaceTasksMock.mockReset();
     listWorkspaceTasksMock.mockResolvedValue({ tasks: mockTasks });
+    getUserConfigMock.mockReset();
+    getUserConfigMock.mockResolvedValue({ value: null });
     getUserWorkspaceConfigMock.mockReset();
     getUserWorkspaceConfigMock.mockResolvedValue({ value: null });
+    updateUserConfigMock.mockReset();
+    updateUserConfigMock.mockResolvedValue({ message: 'ok' });
     updateUserWorkspaceConfigMock.mockReset();
     updateUserWorkspaceConfigMock.mockResolvedValue({ message: 'ok' });
     window.localStorage.clear();
@@ -312,6 +321,7 @@ describe('BoardViews', () => {
     expect(boardHeaderProps?.titlePrefix).toBeDefined();
     expect(kanbanBoardProps?.readOnly).toBe(true);
     expect(listWorkspaceTasksMock).not.toHaveBeenCalled();
+    expect(getUserConfigMock).not.toHaveBeenCalled();
   });
 
   it('enables assignees for personal boards that have guest access', async () => {
@@ -544,6 +554,66 @@ describe('BoardViews', () => {
     );
   });
 
+  it('creates a task in the hovered list when the quick-create target prefers hovered lists', async () => {
+    getUserConfigMock.mockResolvedValue({ value: 'hovered_list' });
+    const { queryClient } = renderBoardViews({
+      board: { ...mockBoard, default_list_id: 'list-1' },
+    });
+
+    await waitFor(() => {
+      expect(
+        queryClient.getQueryData([
+          'user-config',
+          'TASK_QUICK_CREATE_TARGET_LIST',
+        ])
+      ).toBe('hovered_list');
+    });
+
+    await act(async () => {
+      kanbanBoardProps?.onHoveredTaskListChange?.('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 board default list in hovered-list mode when no hovered list is selectable', async () => {
+    getUserConfigMock.mockResolvedValue({ value: 'hovered_list' });
+    const { queryClient } = renderBoardViews({
+      board: { ...mockBoard, default_list_id: 'list-2' },
+    });
+
+    await waitFor(() => {
+      expect(
+        queryClient.getQueryData([
+          'user-config',
+          'TASK_QUICK_CREATE_TARGET_LIST',
+        ])
+      ).toBe('hovered_list');
+    });
+
+    await act(async () => {
+      kanbanBoardProps?.onHoveredTaskListChange?.('external-list');
+    });
+
+    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' },

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

@@ -13,6 +13,7 @@ import {
 import {
   TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID,
   TASK_LAST_BOARD_VIEW_CONFIG_ID,
+  TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
 } from '@tuturuuu/internal-api/users';
 import type {
   Workspace,
@@ -35,6 +36,7 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { useUserConfig } from '../../../../hooks/use-user-config';
 import {
   useUpdateUserWorkspaceConfig,
   useUserWorkspaceConfig,
@@ -58,6 +60,10 @@ import {
   type SpecialTaskListPin,
   serializeSpecialTaskListPins,
 } from './special-task-list-pins';
+import {
+  DEFAULT_TASK_QUICK_CREATE_TARGET_LIST,
+  normalizeTaskQuickCreateTargetList,
+} from './task-quick-create-target-list';
 
 export type ViewType =
   | 'kanban'
@@ -290,8 +296,19 @@ export function BoardViews({
   const [isMultiSelectMode, setIsMultiSelectMode] = useState(false);
   const [kanbanBulkSelectionActive, setKanbanBulkSelectionActive] =
     useState(false);
+  const [hoveredTaskListId, setHoveredTaskListId] = useState<string | null>(
+    null
+  );
   const { createTask } = useTaskDialog();
   const localTaskState = readOnly || publicView;
+  const { data: quickCreateTargetListRaw } = useUserConfig(
+    TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
+    DEFAULT_TASK_QUICK_CREATE_TARGET_LIST,
+    { enabled: !localTaskState }
+  );
+  const quickCreateTargetList = normalizeTaskQuickCreateTargetList(
+    quickCreateTargetListRaw
+  );
   const boardAssigneesEnabled =
     !workspace.personal ||
     board.access_type === 'guest' ||
@@ -820,6 +837,15 @@ export function BoardViews({
     statusFilteredLists,
   ]);
 
+  useEffect(() => {
+    if (!hoveredTaskListId) return;
+
+    const stillSelectable = filteredLists.some(
+      (list) => list.id === hoveredTaskListId && !list.is_external_staging
+    );
+    if (!stillSelectable) setHoveredTaskListId(null);
+  }, [filteredLists, hoveredTaskListId]);
+
   const sourceTasks = useMemo(() => {
     if (localTaskState) return locallyFilteredTasks;
 
@@ -902,11 +928,14 @@ export function BoardViews({
       const selectableLists = filteredLists.filter(
         (list) => !list.is_external_staging
       );
-      // Prefer the board's configured default list for new tasks, falling back
-      // to the first selectable list when unset or the list is unavailable.
-      const targetList =
+      const defaultTargetList =
         selectableLists.find((list) => list.id === board.default_list_id) ??
         selectableLists[0];
+      const hoveredTargetList =
+        quickCreateTargetList === 'hovered_list'
+          ? selectableLists.find((list) => list.id === hoveredTaskListId)
+          : undefined;
+      const targetList = hoveredTargetList ?? defaultTargetList;
       if (!targetList) return;
       createTask(board.id, targetList.id, selectableLists, filters);
     },
@@ -1022,6 +1051,7 @@ export function BoardViews({
             onBulkSelectionActiveChange={setKanbanBulkSelectionActive}
             canUseBoardAssignees={boardAssigneesEnabled}
             assigneeMemberSource={assigneeMemberSource}
+            onHoveredTaskListChange={setHoveredTaskListId}
             readOnly={readOnly}
           />
         );

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}