@tuturuuu/ui 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.14.0](https://github.com/tutur3u/platform/compare/ui-v0.13.0...ui-v0.14.0) (2026-07-06)
+
+
+### Features
+
+* **tasks:** add quick-create targeting and edge autoscroll ([f03e932](https://github.com/tutur3u/platform/commit/f03e9324b0cce18e9f9974cc8fe251bb58b686bd))
+
+
+### Bug Fixes
+
+* **tasks:** scroll kanban board at drag edges ([1053f6c](https://github.com/tutur3u/platform/commit/1053f6cc6db9788b7e184ed8bc7febdb2adacf97))
+
 ## [0.13.0](https://github.com/tutur3u/platform/compare/ui-v0.12.0...ui-v0.13.0) (2026-07-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuturuuu/ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -85,10 +85,10 @@
     "@tiptap/react": "3.27.1",
     "@tiptap/starter-kit": "3.27.1",
     "@tuturuuu/ai": "0.2.2",
-    "@tuturuuu/apis": "0.7.1",
+    "@tuturuuu/apis": "0.7.2",
     "@tuturuuu/hooks": "0.0.2",
     "@tuturuuu/icons": "0.0.6",
-    "@tuturuuu/internal-api": "0.14.1",
+    "@tuturuuu/internal-api": "0.15.0",
     "@tuturuuu/supabase": "0.4.0",
     "@tuturuuu/utils": "0.13.0",
     "@types/debug": "^4.1.13",

package/src/components/ui/custom/settings/task-settings.tsx

@@ -7,6 +7,7 @@ import {
   TASK_NAVIGATION_LEADERBOARDS_CONFIG_ID,
   TASK_NAVIGATION_PROGRESS_CONFIG_ID,
   TASK_NAVIGATION_STATS_CONFIG_ID,
+  TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
 } from '@tuturuuu/internal-api/users';
 import type { Workspace } from '@tuturuuu/types';
 import { SettingItemTab } from '@tuturuuu/ui/custom/settings-item-tab';
@@ -34,6 +35,11 @@ import {
   type TaskDialogPresentation,
 } from '../../tu-do/shared/task-dialog-presentation';
 import { TASKS_SHOW_REVIEW_DUE_DATES_CONFIG_ID } from '../../tu-do/shared/task-due-date-visibility';
+import {
+  DEFAULT_TASK_QUICK_CREATE_TARGET_LIST,
+  normalizeTaskQuickCreateTargetList,
+  type TaskQuickCreateTargetList,
+} from '../../tu-do/shared/task-quick-create-target-list';
 import {
   clampTaskSoundEffectsVolume,
   DEFAULT_TASK_SOUND_EFFECTS_VOLUME,
@@ -142,6 +148,14 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const { data: dialogPresentationRaw, isLoading: dialogPresentationLoading } =
     useUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID, 'compact');
   const updateDialogPresentation = useUpdateUserConfig();
+  const {
+    data: quickCreateTargetListRaw,
+    isLoading: quickCreateTargetListLoading,
+  } = useUserConfig(
+    TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
+    DEFAULT_TASK_QUICK_CREATE_TARGET_LIST
+  );
+  const updateQuickCreateTargetList = useUpdateUserConfig();
 
   const { data: settings, isLoading } = useQuery({
     queryKey: ['user-task-settings'],
@@ -211,6 +225,9 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
   const dialogPresentation = normalizeTaskDialogPresentation(
     dialogPresentationRaw
   );
+  const quickCreateTargetList = normalizeTaskQuickCreateTargetList(
+    quickCreateTargetListRaw
+  );
 
   const handleDialogPresentationChange = (value: string) => {
     const nextValue: TaskDialogPresentation = normalizeTaskDialogPresentation(
@@ -223,6 +240,15 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
     });
   };
 
+  const handleQuickCreateTargetListChange = (value: string) => {
+    const nextValue: TaskQuickCreateTargetList =
+      normalizeTaskQuickCreateTargetList(value);
+    updateQuickCreateTargetList.mutate({
+      configId: TASK_QUICK_CREATE_TARGET_LIST_CONFIG_ID,
+      value: nextValue,
+    });
+  };
+
   return (
     <div className="space-y-8">
       <div className="grid gap-6">
@@ -330,6 +356,35 @@ export function TaskSettings({ workspace }: TaskSettingsProps) {
           </Select>
         </SettingItemTab>
         <Separator />
+        <SettingItemTab
+          title={t('quick_create_target_list')}
+          description={t('quick_create_target_list_description')}
+        >
+          <Select
+            value={quickCreateTargetList}
+            onValueChange={handleQuickCreateTargetListChange}
+            disabled={
+              quickCreateTargetListLoading ||
+              updateQuickCreateTargetList.isPending
+            }
+          >
+            <SelectTrigger
+              aria-label={t('quick_create_target_list')}
+              className="w-44"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="default_list">
+                {t('quick_create_target_list_default')}
+              </SelectItem>
+              <SelectItem value="hovered_list">
+                {t('quick_create_target_list_hovered')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItemTab>
+        <Separator />
         <SettingItemTab
           title={t('draft_mode')}
           description={t('draft_mode_description')}

package/src/components/ui/tu-do/boards/boardId/board-column.tsx

@@ -182,6 +182,7 @@ interface BoardColumnProps {
   specialPinned?: boolean;
   specialStickyOffset?: string;
   onSpecialPinnedChange?: (pinned: boolean) => void;
+  onHoverTaskList?: (listId: string) => void;
   readOnly?: boolean;
 }
 
@@ -214,6 +215,7 @@ export function BoardColumn({
   specialPinned = false,
   specialStickyOffset,
   onSpecialPinnedChange,
+  onHoverTaskList,
   readOnly = false,
 }: BoardColumnProps) {
   const t = useTranslations('common');
@@ -530,6 +532,7 @@ export function BoardColumn({
         data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
         data-kanban-column-id={column.id}
         data-kanban-real-column={isExternalStaging ? undefined : 'true'}
+        onPointerEnter={() => onHoverTaskList?.(column.id)}
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
           'touch-none select-none overflow-hidden hover:shadow-md',
@@ -583,6 +586,7 @@ export function BoardColumn({
       data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
       data-kanban-column-id={column.id}
       data-kanban-real-column={isExternalStaging ? undefined : 'true'}
+      onPointerEnter={() => onHoverTaskList?.(column.id)}
       className={cn(
         'group flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col rounded-xl transition-all duration-200 last:snap-end',
         'touch-none select-none',

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/auto-scroll.test.ts

@@ -0,0 +1,118 @@
+import type { DragMoveEvent } from '@dnd-kit/core';
+import { describe, expect, it } from 'vitest';
+import {
+  getKanbanDragAutoScrollPointerX,
+  getKanbanEdgeAutoScrollAmount,
+} from './auto-scroll';
+
+const rect = {
+  left: 100,
+  right: 500,
+};
+
+function createDragMoveEvent({
+  deltaX = 0,
+  initialLeft = 200,
+  pointerStartX,
+  translatedLeft = initialLeft,
+  width = 80,
+}: {
+  deltaX?: number;
+  initialLeft?: number;
+  pointerStartX?: number;
+  translatedLeft?: number | null;
+  width?: number;
+}) {
+  return {
+    active: {
+      rect: {
+        current: {
+          initial: {
+            left: initialLeft,
+            width,
+          },
+          translated:
+            translatedLeft === null
+              ? null
+              : {
+                  left: translatedLeft,
+                  width,
+                },
+        },
+      },
+    },
+    activatorEvent:
+      pointerStartX === undefined
+        ? ({ type: 'keydown' } as Event)
+        : ({ clientX: pointerStartX } as unknown as Event),
+    delta: {
+      x: deltaX,
+      y: 0,
+    },
+  } as unknown as DragMoveEvent;
+}
+
+describe('getKanbanEdgeAutoScrollAmount', () => {
+  it('scrolls left when the drag center is near the left edge', () => {
+    expect(
+      getKanbanEdgeAutoScrollAmount(125, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeLessThan(0);
+  });
+
+  it('scrolls right when the drag center is near the right edge', () => {
+    expect(
+      getKanbanEdgeAutoScrollAmount(475, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeGreaterThan(0);
+  });
+
+  it('does nothing away from horizontal edges or without a drag center', () => {
+    expect(getKanbanEdgeAutoScrollAmount(300, rect)).toBe(0);
+    expect(getKanbanEdgeAutoScrollAmount(null, rect)).toBe(0);
+  });
+
+  it('uses pointer position for edge auto-scroll instead of card center', () => {
+    const pointerX = getKanbanDragAutoScrollPointerX(
+      createDragMoveEvent({
+        deltaX: 215,
+        pointerStartX: 260,
+        translatedLeft: 190,
+        width: 80,
+      })
+    );
+
+    expect(pointerX).toBe(475);
+    expect(
+      getKanbanEdgeAutoScrollAmount(pointerX, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBeGreaterThan(0);
+    expect(
+      getKanbanEdgeAutoScrollAmount(230, rect, {
+        threshold: 100,
+        speed: 10,
+        maxSpeed: 30,
+      })
+    ).toBe(0);
+  });
+
+  it('falls back to the active card center without pointer coordinates', () => {
+    expect(
+      getKanbanDragAutoScrollPointerX(
+        createDragMoveEvent({
+          translatedLeft: 370,
+          width: 100,
+        })
+      )
+    ).toBe(420);
+  });
+});

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/auto-scroll.ts

@@ -1,86 +1,160 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import type {
+  DragMoveEvent,
+  DragOverEvent,
+  DragStartEvent,
+} from '@dnd-kit/core';
+import { useCallback, useEffect, useRef } from 'react';
+
+export const KANBAN_EDGE_AUTO_SCROLL_THRESHOLD = 100;
+const KANBAN_EDGE_AUTO_SCROLL_SPEED = 10;
+const KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED = 30;
+
+type KanbanDragAutoScrollEvent = DragMoveEvent | DragOverEvent | DragStartEvent;
+
+interface HorizontalRect {
+  left: number;
+  right: number;
+}
+
+function getTouchListClientX(touches: unknown) {
+  if (!touches || typeof touches !== 'object') return null;
+
+  const list = touches as ArrayLike<{ clientX?: unknown }> & {
+    item?: (index: number) => { clientX?: unknown } | null;
+  };
+  const touch = list.item?.(0) ?? list[0];
+
+  return typeof touch?.clientX === 'number' ? touch.clientX : null;
+}
+
+function getPointerEventClientX(event: Event) {
+  if ('clientX' in event && typeof event.clientX === 'number') {
+    return event.clientX;
+  }
+
+  if ('touches' in event) {
+    const touchX = getTouchListClientX(event.touches);
+    if (touchX !== null) return touchX;
+  }
+
+  if ('changedTouches' in event) {
+    return getTouchListClientX(event.changedTouches);
+  }
+
+  return null;
+}
+
+function getDragEventDeltaX(event: KanbanDragAutoScrollEvent) {
+  return 'delta' in event && typeof event.delta?.x === 'number'
+    ? event.delta.x
+    : 0;
+}
+
+function getDragActiveCenterX(event: KanbanDragAutoScrollEvent) {
+  const activeRect =
+    event.active.rect.current.translated ?? event.active.rect.current.initial;
+
+  return activeRect ? activeRect.left + activeRect.width / 2 : null;
+}
+
+export function getKanbanDragAutoScrollPointerX(
+  event: KanbanDragAutoScrollEvent
+) {
+  const pointerStartX = getPointerEventClientX(event.activatorEvent);
+
+  if (pointerStartX !== null) {
+    return pointerStartX + getDragEventDeltaX(event);
+  }
+
+  return getDragActiveCenterX(event);
+}
+
+export function getKanbanEdgeAutoScrollAmount(
+  pointerX: number | null,
+  rect: HorizontalRect,
+  options: {
+    maxSpeed?: number;
+    speed?: number;
+    threshold?: number;
+  } = {}
+) {
+  if (pointerX === null) return 0;
+
+  const threshold = options.threshold ?? KANBAN_EDGE_AUTO_SCROLL_THRESHOLD;
+  const speed = options.speed ?? KANBAN_EDGE_AUTO_SCROLL_SPEED;
+  const maxSpeed = options.maxSpeed ?? KANBAN_EDGE_AUTO_SCROLL_MAX_SPEED;
+
+  if (pointerX <= rect.left + threshold) {
+    const distanceFromLeft = Math.max(0, pointerX - rect.left);
+    const intensity = 1 - distanceFromLeft / threshold;
+    return -Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  if (pointerX >= rect.right - threshold) {
+    const distanceFromRight = Math.max(0, rect.right - pointerX);
+    const intensity = 1 - distanceFromRight / threshold;
+    return Math.min(speed + intensity * (maxSpeed - speed), maxSpeed);
+  }
+
+  return 0;
+}
 
 export function useAutoScroll(
-  isDraggingRef: React.MutableRefObject<boolean>,
   scrollContainerRef: React.RefObject<HTMLDivElement | null>
 ) {
   const autoScrollRafRef = useRef<number | null>(null);
+  const isAutoScrollActiveRef = useRef(false);
+  const pointerXRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    const EDGE_THRESHOLD = 100; // Distance from edge to trigger scroll (px)
-    const SCROLL_SPEED = 10; // Base scroll speed (px per frame)
-    const MAX_SCROLL_SPEED = 30; // Maximum scroll speed (px per frame)
+  const stopAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = false;
+    pointerXRef.current = null;
 
-    let currentPointerX = 0;
+    if (autoScrollRafRef.current !== null) {
+      cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
+    }
+  }, []);
+
+  const autoScroll = useCallback(() => {
+    if (!isAutoScrollActiveRef.current || !scrollContainerRef.current) {
+      autoScrollRafRef.current = null;
+      return;
+    }
+
+    const container = scrollContainerRef.current;
+    const scrollAmount = getKanbanEdgeAutoScrollAmount(
+      pointerXRef.current,
+      container.getBoundingClientRect()
+    );
 
-    function handlePointerMove(event: PointerEvent) {
-      currentPointerX = event.clientX;
+    if (scrollAmount !== 0) {
+      container.scrollLeft += scrollAmount;
     }
 
-    function autoScroll() {
-      if (!isDraggingRef.current || !scrollContainerRef.current) {
-        autoScrollRafRef.current = null;
-        return;
-      }
-
-      const container = scrollContainerRef.current;
-      const rect = container.getBoundingClientRect();
-
-      // Calculate distance from edges
-      const distanceFromLeft = currentPointerX - rect.left;
-      const distanceFromRight = rect.right - currentPointerX;
-
-      let scrollAmount = 0;
-
-      // Scroll left when near left edge
-      if (distanceFromLeft < EDGE_THRESHOLD && distanceFromLeft > 0) {
-        const intensity = 1 - distanceFromLeft / EDGE_THRESHOLD;
-        scrollAmount = -Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-      // Scroll right when near right edge
-      else if (distanceFromRight < EDGE_THRESHOLD && distanceFromRight > 0) {
-        const intensity = 1 - distanceFromRight / EDGE_THRESHOLD;
-        scrollAmount = Math.min(
-          SCROLL_SPEED + intensity * (MAX_SCROLL_SPEED - SCROLL_SPEED),
-          MAX_SCROLL_SPEED
-        );
-      }
-
-      // Apply scroll if needed
-      if (scrollAmount !== 0) {
-        container.scrollLeft += scrollAmount;
-      }
-
-      // Continue the animation loop
+    autoScrollRafRef.current = requestAnimationFrame(autoScroll);
+  }, [scrollContainerRef]);
+
+  const startAutoScroll = useCallback(() => {
+    isAutoScrollActiveRef.current = true;
+
+    if (autoScrollRafRef.current === null) {
       autoScrollRafRef.current = requestAnimationFrame(autoScroll);
     }
+  }, [autoScroll]);
+
+  const updateAutoScrollPointerX = useCallback((pointerX: number | null) => {
+    pointerXRef.current = pointerX;
+  }, []);
+
+  useEffect(() => stopAutoScroll, [stopAutoScroll]);
 
-    // Start auto-scroll loop when dragging starts (triggered by isDraggingRef)
-    window.addEventListener('pointermove', handlePointerMove);
-
-    // Watch for drag start to initialize auto-scroll loop
-    const startAutoScrollLoop = () => {
-      if (isDraggingRef.current && !autoScrollRafRef.current) {
-        autoScrollRafRef.current = requestAnimationFrame(autoScroll);
-      }
-    };
-
-    // Poll for drag start (alternative: trigger from onDragStart)
-    const pollInterval = setInterval(startAutoScrollLoop, 100);
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      clearInterval(pollInterval);
-      if (autoScrollRafRef.current) {
-        cancelAnimationFrame(autoScrollRafRef.current);
-      }
-    };
-  }, [isDraggingRef, scrollContainerRef]);
-
-  return { autoScrollRafRef };
+  return {
+    autoScrollRafRef,
+    startAutoScroll,
+    stopAutoScroll,
+    updateAutoScrollPointerX,
+  };
 }

package/src/components/ui/tu-do/boards/boardId/kanban/dnd/use-kanban-dnd.ts

@@ -25,7 +25,7 @@ import { isPersonalExternalOverlayTask } from '../../../../../../../lib/task-per
 import { useBoardBroadcast } from '../../../../shared/board-broadcast-context';
 import { invalidateKanbanDeadlineTasks } from '../data/kanban-deadline-query';
 import { MAX_SAFE_INTEGER_SORT } from '../kanban-constants';
-import { useAutoScroll } from './auto-scroll';
+import { getKanbanDragAutoScrollPointerX, useAutoScroll } from './auto-scroll';
 import { getColumnReorderUpdates } from './column-reorder';
 import { calculateSortKeyWithRetry as createCalculateSortKeyWithRetry } from './kanban-sort-helpers';
 import {
@@ -566,8 +566,15 @@ export function useKanbanDnd({
     [wsId]
   );
 
-  // Initialize auto-scroll
-  useAutoScroll(isDraggingRef, scrollContainerRef);
+  const { startAutoScroll, stopAutoScroll, updateAutoScrollPointerX } =
+    useAutoScroll(scrollContainerRef);
+
+  const updateAutoScrollFromDragEvent = useCallback(
+    (event: DragMoveEvent | DragOverEvent | DragStartEvent) => {
+      updateAutoScrollPointerX(getKanbanDragAutoScrollPointerX(event));
+    },
+    [updateAutoScrollPointerX]
+  );
 
   const resetDragState = useCallback(
     (clearOptimisticUpdates = false) => {
@@ -582,12 +589,13 @@ export function useKanbanDnd({
       dragSessionMetricsRef.current = null;
       dragStartTaskIndexesByListRef.current.clear();
       isDraggingRef.current = false;
+      stopAutoScroll();
 
       if (clearOptimisticUpdates) {
         setOptimisticUpdateInProgress(new Set());
       }
     },
-    [setDragPreviewPosition]
+    [setDragPreviewPosition, stopAutoScroll]
   );
 
   const markTaskIdsPending = useCallback((taskIds: string[]) => {
@@ -606,6 +614,8 @@ export function useKanbanDnd({
 
   const processTaskDragPreview = useCallback(
     (event: DragMoveEvent) => {
+      updateAutoScrollFromDragEvent(event);
+
       const { active, over } = event;
       const activeType = active.data?.current?.type;
       if (!activeType) return;
@@ -730,6 +740,7 @@ export function useKanbanDnd({
       getDragPreviewForList,
       getDragPreviewForListSurface,
       setDragPreviewPosition,
+      updateAutoScrollFromDragEvent,
       wsId,
     ]
   );
@@ -742,6 +753,8 @@ export function useKanbanDnd({
 
     // Enable auto-scroll
     isDraggingRef.current = true;
+    updateAutoScrollFromDragEvent(event);
+    startAutoScroll();
 
     const { type } = active.data.current;
     if (type === 'Column') {
@@ -750,6 +763,7 @@ export function useKanbanDnd({
     }
     if (type === 'Task') {
       if (!wsId) {
+        resetDragState(true);
         return;
       }
 

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

@@ -79,6 +79,7 @@ interface KanbanColumnsProps {
     pin: SpecialTaskListPin,
     pinned: boolean
   ) => void;
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -156,6 +157,7 @@ export function KanbanColumns({
   onDeadlineSectionCollapsedChange,
   specialTaskListPins,
   onSpecialTaskListPinnedChange,
+  onHoveredTaskListChange,
   readOnly = false,
 }: KanbanColumnsProps) {
   const initialScrollAnchoredBoardRef = useRef<string | null>(null);
@@ -270,6 +272,7 @@ export function KanbanColumns({
   return (
     <div
       ref={boardRef}
+      onPointerLeave={() => onHoveredTaskListChange?.(null)}
       className="scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent relative flex h-full w-full snap-x snap-mandatory gap-3 overflow-x-auto overscroll-x-contain scroll-smooth"
       style={
         {
@@ -416,6 +419,9 @@ export function KanbanColumns({
                     onSpecialTaskListPinnedChange?.('closed_tasks', pinned);
                   }
                 }}
+                onHoverTaskList={
+                  list.is_external_staging ? undefined : onHoveredTaskListChange
+                }
                 readOnly={readOnly}
               />
             );

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

@@ -104,6 +104,7 @@ interface Props {
   onBulkSelectionActiveChange?: (active: boolean) => void;
   canUseBoardAssignees?: boolean;
   assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
+  onHoveredTaskListChange?: (listId: string | null) => void;
   readOnly?: boolean;
 }
 
@@ -129,6 +130,7 @@ export function KanbanBoard({
   onBulkSelectionActiveChange,
   canUseBoardAssignees,
   assigneeMemberSource,
+  onHoveredTaskListChange,
   readOnly = false,
 }: Props) {
   const tCommon = useTranslations('common');
@@ -150,7 +152,6 @@ export function KanbanBoard({
   const [assigneeSearchQuery, setAssigneeSearchQuery] = useState('');
 
   // Refs
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
   const taskHeightsRef = useRef<Map<string, number>>(new Map());
   const boardRef = useRef<HTMLDivElement>(null);
 
@@ -412,7 +413,7 @@ export function KanbanBoard({
     ),
     reorderTaskMutation,
     taskHeightsRef,
-    scrollContainerRef,
+    scrollContainerRef: boardRef,
   });
 
   const sensors = useSensors(
@@ -565,6 +566,7 @@ export function KanbanBoard({
             onTaskListCollapsedChange={onTaskListCollapsedChange}
             specialTaskListPins={specialTaskListPins}
             onSpecialTaskListPinnedChange={onSpecialTaskListPinnedChange}
+            onHoveredTaskListChange={onHoveredTaskListChange}
             readOnly={readOnly}
           />
 

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/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-quick-create-target-list.ts

@@ -0,0 +1,20 @@
+export const DEFAULT_TASK_QUICK_CREATE_TARGET_LIST = 'default_list';
+
+export const TASK_QUICK_CREATE_TARGET_LIST_VALUES = [
+  DEFAULT_TASK_QUICK_CREATE_TARGET_LIST,
+  'hovered_list',
+] as const;
+
+export type TaskQuickCreateTargetList =
+  (typeof TASK_QUICK_CREATE_TARGET_LIST_VALUES)[number];
+
+export function normalizeTaskQuickCreateTargetList(
+  value: string | null | undefined,
+  fallback: TaskQuickCreateTargetList = DEFAULT_TASK_QUICK_CREATE_TARGET_LIST
+): TaskQuickCreateTargetList {
+  return TASK_QUICK_CREATE_TARGET_LIST_VALUES.includes(
+    value as TaskQuickCreateTargetList
+  )
+    ? (value as TaskQuickCreateTargetList)
+    : fallback;
+}

package/src/hooks/use-user-config.ts

@@ -11,14 +11,22 @@ import { getUserConfig, updateUserConfig } from '@tuturuuu/internal-api/users';
  * @param defaultValue - Default value if config doesn't exist
  * @returns Query result with the config value
  */
-export function useUserConfig(configId: string, defaultValue: string = '') {
+export function useUserConfig(
+  configId: string,
+  defaultValue: string = '',
+  options?: {
+    enabled?: boolean;
+    staleTime?: number;
+  }
+) {
   return useQuery({
     queryKey: ['user-config', configId],
     queryFn: async () => {
       const data = await getUserConfig(configId);
       return (data.value as string) ?? defaultValue;
     },
-    staleTime: 5 * 60 * 1000, // 5 minutes
+    enabled: options?.enabled !== false && Boolean(configId),
+    staleTime: options?.staleTime ?? 5 * 60 * 1000, // 5 minutes
   });
 }