@tuturuuu/ui 0.0.4 → 0.2.0

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

@@ -0,0 +1,2543 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  AlertCircle,
+  Archive,
+  ArrowUpCircle,
+  Ban,
+  Box,
+  Calendar,
+  Check,
+  CheckCircle2,
+  CircleSlash,
+  Clock,
+  Copy,
+  ExternalLink,
+  FileText,
+  Image as ImageIcon,
+  Link2,
+  ListChecks,
+  ListTodo,
+  ListTree,
+  Loader2,
+  MoreHorizontal,
+  MoveRight,
+  Play,
+  Share2,
+  SquareCenterlineDashedVertical,
+  Timer,
+  Trash2,
+} from '@tuturuuu/icons';
+import {
+  getWorkspaceTask,
+  listWorkspaceTaskLists,
+  listWorkspaceTaskProjects,
+  removeCurrentUserTaskPersonalPlacement,
+} from '@tuturuuu/internal-api/tasks';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card } from '@tuturuuu/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@tuturuuu/ui/dropdown-menu';
+import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
+import { useTaskActions } from '@tuturuuu/ui/hooks/use-task-actions';
+import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@tuturuuu/ui/hover-card';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import {
+  createTask,
+  getPersonalExternalStagingListId,
+  getTicketIdentifier,
+  useBoardConfig,
+  useWorkspaceLabels,
+} from '@tuturuuu/utils/task-helper';
+import { isTaskBoardResolvedStatus } from '@tuturuuu/utils/task-list-status';
+import { getDescriptionMetadata } from '@tuturuuu/utils/text-helper';
+import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
+import { format, formatDistanceToNow } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useLocale, useTranslations } from 'next-intl';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  enqueueTaskCardRelationshipRequest,
+  useTaskCardRelationships,
+} from '../../../hooks/useTaskCardRelationships';
+import { useTaskDialog } from '../../../hooks/useTaskDialog';
+import { useTaskDialogState } from '../../../hooks/useTaskDialogState';
+import { useTaskLabelManagement } from '../../../hooks/useTaskLabelManagement';
+import { useTaskProjectManagement } from '../../../hooks/useTaskProjectManagement';
+import { useTaskDialogContext } from '../../../providers/task-dialog-provider';
+import { AssigneeSelect } from '../../../shared/assignee-select';
+import { useBoardBroadcast } from '../../../shared/board-broadcast-context';
+import { CreateListDialog } from '../../../shared/create-list-dialog';
+import { formatRelationshipTaskIdentifier } from '../../../shared/relationship-task-identifier';
+import { TaskEstimationDisplay } from '../../../shared/task-estimation-display';
+import { TaskLabelsDisplay } from '../../../shared/task-labels-display';
+import { TaskShareDialog } from '../../../shared/task-share-dialog';
+import { TaskViewerAvatarsComponent } from '../../../shared/user-presence-avatars';
+import { useTasksHref } from '../../../tasks-route-context';
+import {
+  getCardColorClasses as getCardColorClassesUtil,
+  getListTextColorClass,
+  getTicketBadgeColorClasses,
+} from '../../../utils/taskColorUtils';
+import {
+  DESTINATION_TONE_COLORS,
+  getRandomNewLabelColor,
+} from '../../../utils/taskConstants';
+import { formatSmartDate } from '../../../utils/taskDateUtils';
+import { getPriorityIndicator } from '../../../utils/taskPriorityUtils';
+import { sortByDisplayName } from '../board-text-utils';
+import {
+  TaskAssigneesMenu,
+  TaskBlockingMenu,
+  TaskDueDateMenu,
+  TaskEstimationMenu,
+  TaskLabelsMenu,
+  TaskMoveMenu,
+  TaskParentMenu,
+  TaskPriorityMenu,
+  TaskProjectsMenu,
+  TaskRelatedMenu,
+} from '../menus';
+import { TaskActions } from '../task-actions';
+import { TaskCustomDateDialog } from '../task-dialogs/TaskCustomDateDialog';
+import { TaskDeleteDialog } from '../task-dialogs/TaskDeleteDialog';
+import { TaskNewLabelDialog } from '../task-dialogs/TaskNewLabelDialog';
+import { TaskNewProjectDialog } from '../task-dialogs/TaskNewProjectDialog';
+import { getTaskCardParentBadgeState } from '../task-parent-badge-state';
+import { TaskCardCheckbox } from './TaskCardCheckbox';
+import { areTaskCardPropsEqual } from './task-card-comparator';
+import { mergeTaskCardLabelOptions } from './task-card-label-options';
+import { getTaskCardVisibilityState } from './task-card-visibility';
+
+export interface TaskCardProps {
+  task: Task;
+  boardId: string;
+  workspaceId?: string;
+  taskList?: TaskList;
+  isOverlay?: boolean;
+  onUpdate: () => void;
+  availableLists?: TaskList[]; // Optional: pass from parent to avoid redundant API calls
+  isSelected?: boolean;
+  isMultiSelectMode?: boolean;
+  isPersonalWorkspace?: boolean;
+  onSelect?: (taskId: string, event: React.MouseEvent) => void;
+  onClearSelection?: () => void;
+  dragDisabled?: boolean;
+  sortableId?: string;
+  suppressSortableTransform?: boolean;
+  optimisticUpdateInProgress?: Set<string>;
+  selectedTasks?: Set<string>; // For bulk operations
+  bulkUpdateCustomDueDate?: (date: Date | null) => Promise<void>; // From useBulkOperations
+}
+
+// Memoized full TaskCard
+function TaskCardInner({
+  task,
+  boardId,
+  workspaceId,
+  taskList,
+  isOverlay,
+  onUpdate,
+  availableLists: propAvailableLists,
+  isSelected = false,
+  isMultiSelectMode = false,
+  isPersonalWorkspace = false,
+  onSelect,
+  onClearSelection,
+  dragDisabled: dragDisabledProp = false,
+  sortableId: sortableIdProp,
+  suppressSortableTransform = false,
+  optimisticUpdateInProgress,
+  selectedTasks,
+  bulkUpdateCustomDueDate,
+}: TaskCardProps) {
+  const { wsId: rawWsId } = useParams();
+  const wsId = Array.isArray(rawWsId) ? rawWsId[0] : rawWsId;
+  const queryClient = useQueryClient();
+  const broadcast = useBoardBroadcast();
+  const t = useTranslations('common');
+  const tTasks = useTranslations('ws-tasks');
+  const taskBoardT = useTranslations();
+  const tasksHref = useTasksHref();
+  const locale = useLocale();
+  const dateLocale = locale === 'vi' ? vi : enUS;
+  const { weekStartsOn, timeFormat } = useCalendarPreferences();
+  const timePattern = getTimeFormatPattern(timeFormat);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [isCreateListDialogOpen, setIsCreateListDialogOpen] = useState(false);
+  const [menuGuardUntil, setMenuGuardUntil] = useState(0);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [isInViewport, setIsInViewport] = useState(false);
+  const [relationshipMenusOpen, setRelationshipMenusOpen] = useState({
+    parent: false,
+    dependencies: false,
+    related: false,
+  });
+  const isAnyRelationshipMenuOpen =
+    relationshipMenusOpen.parent ||
+    relationshipMenusOpen.dependencies ||
+    relationshipMenusOpen.related;
+  const cardElementRef = useRef<HTMLDivElement | null>(null);
+
+  // Use extracted dialog state management hook
+  const { state: dialogState, actions: dialogActions } = useTaskDialogState();
+  const { createSubtask } = useTaskDialogContext();
+
+  // Use centralized task dialog
+  const { openTask, openTaskById } = useTaskDialog();
+
+  // Guarded select handler for Radix DropdownMenuItem to avoid immediate action on context open
+  const handleMenuItemSelect = useCallback(
+    (e: Event, action: () => void) => {
+      if (Date.now() < menuGuardUntil) {
+        // Keep menu open by preventing default close
+        if (e && typeof (e as any).preventDefault === 'function') {
+          (e as any).preventDefault();
+        }
+        return;
+      }
+      action();
+    },
+    [menuGuardUntil]
+  );
+
+  // Use React Query hooks for shared data (cached across all task cards)
+  const workspaceContextWsId = workspaceId ?? wsId;
+  const { data: boardConfig } = useBoardConfig(boardId, workspaceContextWsId);
+  const effectiveWorkspaceId = workspaceId ?? boardConfig?.ws_id ?? wsId;
+  const taskShareWsId = effectiveWorkspaceId;
+  const { data: workspaceLabels = [], isLoading: labelsLoading } =
+    useWorkspaceLabels(effectiveWorkspaceId);
+
+  // Local state for UI interactions
+  const [estimationSaving, setEstimationSaving] = useState(false);
+
+  // Use extracted label management hook
+  const {
+    toggleTaskLabel,
+    createNewLabel,
+    newLabelName,
+    setNewLabelName,
+    newLabelColor,
+    setNewLabelColor,
+    creatingLabel,
+  } = useTaskLabelManagement({
+    task,
+    boardId,
+    workspaceLabels,
+    workspaceId: effectiveWorkspaceId,
+    selectedTasks,
+    isMultiSelectMode,
+    onClearSelection,
+    labelCacheWorkspaceIds: [
+      effectiveWorkspaceId,
+      workspaceContextWsId,
+      wsId,
+      task.source_workspace_id ?? undefined,
+    ],
+  });
+
+  const openNewLabelDialog = () => {
+    setNewLabelColor((previousColor) => getRandomNewLabelColor(previousColor));
+    dialogActions.openNewLabelDialog();
+  };
+
+  // Fetch workspace projects
+  const { data: workspaceProjects = [], isLoading: projectsLoading } = useQuery(
+    {
+      queryKey: ['task_projects', effectiveWorkspaceId],
+      queryFn: async () => {
+        if (!effectiveWorkspaceId) return [];
+        return listWorkspaceTaskProjects(effectiveWorkspaceId);
+      },
+      enabled: !!effectiveWorkspaceId,
+      staleTime: 5 * 60 * 1000, // 5 minutes - projects rarely change
+    }
+  );
+
+  // Use extracted project management hook
+  const {
+    toggleTaskProject,
+    newProjectName,
+    setNewProjectName,
+    creatingProject,
+    createNewProject,
+  } = useTaskProjectManagement({
+    task,
+    boardId,
+    workspaceProjects,
+    workspaceId: effectiveWorkspaceId,
+    selectedTasks,
+    isMultiSelectMode,
+    onClearSelection,
+  });
+
+  // Fetch workspace members
+  const { data: workspaceMembers = [], isLoading: membersLoading } =
+    useWorkspaceMembers(effectiveWorkspaceId, {
+      enabled: !!effectiveWorkspaceId && !isPersonalWorkspace,
+    });
+
+  const relationshipSummary =
+    task.relationship_summary ??
+    ({
+      parent_task_id: null,
+      parent_task: null,
+      child_count: 0,
+      completed_child_count: 0,
+      blocked_by_count: 0,
+      blocking_count: 0,
+      related_count: 0,
+    } as const);
+  const shouldLoadRelationshipPreview =
+    isInViewport &&
+    (isAnyRelationshipMenuOpen || relationshipSummary.blocked_by_count > 0);
+
+  // Use task relationships hook for managing parent/child/blocking/related tasks
+  const {
+    parentTask,
+    childTasks,
+    blocking: blockingTasks,
+    blockedBy: blockedByTasks,
+    relatedTasks,
+    setParentTask,
+    removeParentTask,
+    addBlockingTask,
+    removeBlockingTask,
+    addBlockedByTask,
+    removeBlockedByTask,
+    addRelatedTask,
+    removeRelatedTask,
+    isSaving: relationshipSaving,
+    savingTaskId: relationshipSavingTaskId,
+    hasLoadedRelationships,
+  } = useTaskCardRelationships({
+    taskId: task.id,
+    boardId,
+    wsId: effectiveWorkspaceId,
+    enabled: shouldLoadRelationshipPreview,
+  });
+
+  const summaryParentTaskId = relationshipSummary.parent_task_id;
+  const summaryParentTask = relationshipSummary.parent_task ?? null;
+  const { data: cachedBoardParentTask } = useQuery({
+    queryKey: ['tasks', boardId],
+    queryFn: async () => [] as Task[],
+    enabled: false,
+    select: (tasks: Task[]) => {
+      if (!summaryParentTaskId) {
+        return null;
+      }
+
+      const match = tasks.find(
+        (candidate) => candidate.id === summaryParentTaskId
+      );
+      if (!match) {
+        return null;
+      }
+
+      return {
+        id: match.id,
+        name: match.name,
+        display_number: match.display_number,
+        ticket_prefix:
+          'ticket_prefix' in match && typeof match.ticket_prefix === 'string'
+            ? match.ticket_prefix
+            : (boardConfig?.ticket_prefix ?? null),
+      };
+    },
+  });
+  const shouldHydrateParentTask =
+    isInViewport &&
+    !!effectiveWorkspaceId &&
+    !!summaryParentTaskId &&
+    !summaryParentTask &&
+    !cachedBoardParentTask &&
+    (!parentTask || parentTask.id !== summaryParentTaskId);
+  const { data: hydratedParentTask } = useQuery({
+    queryKey: [
+      'task-parent-summary',
+      effectiveWorkspaceId,
+      summaryParentTaskId ?? 'none',
+    ],
+    queryFn: async () => {
+      if (!effectiveWorkspaceId || !summaryParentTaskId) {
+        return null;
+      }
+
+      const response = await enqueueTaskCardRelationshipRequest(() =>
+        getWorkspaceTask(effectiveWorkspaceId, summaryParentTaskId)
+      );
+      const fetchedTask = response.task;
+
+      return {
+        id: fetchedTask.id,
+        name: fetchedTask.name,
+        display_number: fetchedTask.display_number,
+        ticket_prefix:
+          'ticket_prefix' in fetchedTask &&
+          typeof fetchedTask.ticket_prefix === 'string'
+            ? fetchedTask.ticket_prefix
+            : fetchedTask.board_id === boardId
+              ? (boardConfig?.ticket_prefix ?? null)
+              : null,
+      };
+    },
+    enabled: shouldHydrateParentTask,
+    staleTime: 5 * 60 * 1000,
+  });
+  const [resolvedParentTask, setResolvedParentTask] = useState(
+    summaryParentTask ?? parentTask
+  );
+
+  useEffect(() => {
+    if (parentTask?.id && parentTask.id === summaryParentTaskId) {
+      setResolvedParentTask(parentTask);
+      return;
+    }
+
+    if (summaryParentTask?.id && summaryParentTask.id === summaryParentTaskId) {
+      setResolvedParentTask(summaryParentTask);
+      return;
+    }
+
+    if (
+      cachedBoardParentTask?.id &&
+      cachedBoardParentTask.id === summaryParentTaskId
+    ) {
+      setResolvedParentTask(cachedBoardParentTask);
+      return;
+    }
+
+    if (
+      hydratedParentTask?.id &&
+      hydratedParentTask.id === summaryParentTaskId
+    ) {
+      setResolvedParentTask(hydratedParentTask);
+      return;
+    }
+
+    if (!summaryParentTaskId) {
+      setResolvedParentTask(null);
+    }
+  }, [
+    cachedBoardParentTask,
+    hydratedParentTask,
+    parentTask,
+    summaryParentTask,
+    summaryParentTaskId,
+  ]);
+
+  const { hasParentRelationship, parentBadgeTask } =
+    getTaskCardParentBadgeState({
+      summaryParentTaskId,
+      summaryParentTask,
+      parentTask,
+      resolvedParentTask,
+      hasLoadedRelationships,
+    });
+  const childTaskCount = hasLoadedRelationships
+    ? childTasks.length
+    : relationshipSummary.child_count;
+  const completedChildTaskCount = hasLoadedRelationships
+    ? childTasks.filter((childTask) => childTask.completed).length
+    : (relationshipSummary.completed_child_count ?? 0);
+  const blockedByCount = hasLoadedRelationships
+    ? blockedByTasks.length
+    : relationshipSummary.blocked_by_count;
+  const blockingCount = hasLoadedRelationships
+    ? blockingTasks.length
+    : relationshipSummary.blocking_count;
+  const relatedTaskCount = hasLoadedRelationships
+    ? relatedTasks.length
+    : relationshipSummary.related_count;
+  const parentBadgeIdentifier = parentBadgeTask
+    ? formatRelationshipTaskIdentifier(parentBadgeTask)
+    : null;
+  const blockedByPreviewTasks = useMemo(() => {
+    if (!hasLoadedRelationships) {
+      return [];
+    }
+
+    return [...blockedByTasks]
+      .sort((left, right) => {
+        const leftCompleted = left.completed ? 1 : 0;
+        const rightCompleted = right.completed ? 1 : 0;
+        if (leftCompleted !== rightCompleted) {
+          return leftCompleted - rightCompleted;
+        }
+
+        return left.name.localeCompare(right.name);
+      })
+      .slice(0, 1);
+  }, [blockedByTasks, hasLoadedRelationships]);
+  const primaryBlockedByTask = blockedByPreviewTasks[0] ?? null;
+  const primaryBlockedByTaskIdentifier = primaryBlockedByTask
+    ? formatRelationshipTaskIdentifier(primaryBlockedByTask)
+    : null;
+  const blockedByOverflowCount = Math.max(
+    0,
+    blockedByCount - blockedByPreviewTasks.length
+  );
+  const showBlockedByCallout =
+    blockedByCount > 0 && !(task.closed_at || task.completed_at);
+
+  // Fetch available task lists using React Query (same key as other components)
+  const { data: availableLists = [] } = useQuery({
+    queryKey: ['task_lists', boardId],
+    queryFn: async () => {
+      if (!effectiveWorkspaceId) {
+        return [];
+      }
+
+      const { lists } = await listWorkspaceTaskLists(
+        effectiveWorkspaceId,
+        boardId,
+        typeof window !== 'undefined'
+          ? { baseUrl: window.location.origin }
+          : undefined
+      );
+
+      return lists.filter((list) => !list.deleted) as TaskList[];
+    },
+    enabled: !propAvailableLists && !!effectiveWorkspaceId, // Only fetch if not provided as prop
+    initialData: propAvailableLists,
+    staleTime: 60 * 1000, // 1 minute - lists change less frequently
+  });
+
+  // Find the first list with 'done' or 'closed' status
+  const getTargetCompletionList = () => {
+    const doneList = availableLists.find((list) => list.status === 'done');
+    const closedList = availableLists.find((list) => list.status === 'closed');
+    return doneList || closedList || null;
+  };
+
+  const duplicateTaskMutation = useMutation({
+    mutationFn: async (tasksToDuplicate: Task[]) => {
+      if (!effectiveWorkspaceId) {
+        throw new Error('Workspace ID is required to duplicate tasks');
+      }
+
+      const duplicatedTasks: Task[] = [];
+
+      for (const sourceTask of tasksToDuplicate) {
+        const taskData: Parameters<typeof createTask>[2] = {
+          name: sourceTask.name.trim(),
+          description: sourceTask.description,
+          priority: sourceTask.priority,
+          start_date: sourceTask.start_date,
+          end_date: sourceTask.end_date,
+          estimation_points: sourceTask.estimation_points ?? null,
+          label_ids: sourceTask.labels?.map((label) => label.id) ?? [],
+          assignee_ids:
+            sourceTask.assignees?.map((assignee) => assignee.id) ?? [],
+          project_ids: sourceTask.projects?.map((project) => project.id) ?? [],
+        };
+
+        const newTask = await createTask(
+          effectiveWorkspaceId,
+          sourceTask.list_id,
+          taskData
+        );
+
+        duplicatedTasks.push({
+          ...newTask,
+          assignees: sourceTask.assignees,
+          labels: sourceTask.labels,
+          projects: sourceTask.projects,
+        });
+      }
+
+      return duplicatedTasks;
+    },
+    onSuccess: (duplicatedTasks) => {
+      const localMutationAt = Date.now();
+      const locallyDuplicatedTasks = duplicatedTasks.map(
+        (duplicatedTask) =>
+          ({
+            ...(duplicatedTask as Task & { _localMutationAt?: number }),
+            _localMutationAt: localMutationAt,
+          }) as Task
+      );
+
+      queryClient.setQueryData(
+        ['tasks', boardId],
+        (old: Task[] | undefined) => {
+          if (!old) return locallyDuplicatedTasks;
+          const newTasks = locallyDuplicatedTasks.filter(
+            (newTask) => !old.some((task) => task.id === newTask.id)
+          );
+          return [...old, ...newTasks];
+        }
+      );
+
+      for (const duplicatedTask of locallyDuplicatedTasks) {
+        broadcast?.('task:upsert', { task: duplicatedTask });
+        if (
+          (duplicatedTask.assignees && duplicatedTask.assignees.length > 0) ||
+          (duplicatedTask.labels && duplicatedTask.labels.length > 0) ||
+          (duplicatedTask.projects && duplicatedTask.projects.length > 0)
+        ) {
+          broadcast?.('task:relations-changed', {
+            taskId: duplicatedTask.id,
+          });
+        }
+      }
+
+      toast.success(
+        t('tasks_duplicated_successfully', { count: duplicatedTasks.length })
+      );
+    },
+    onError: (error) => {
+      console.error('Error duplicating task(s):', error);
+      toast.error(
+        error instanceof Error ? error.message : t('please_try_again_later')
+      );
+    },
+    onSettled: () => {
+      setIsLoading(false);
+    },
+  });
+
+  // Find specifically the closed list
+  const getTargetClosedList = () => {
+    return availableLists.find((list) => list.status === 'closed') || null;
+  };
+
+  const targetCompletionList = getTargetCompletionList();
+  const targetClosedList = getTargetClosedList();
+  const canMoveToCompletion =
+    targetCompletionList && targetCompletionList.id !== task.list_id;
+  const canMoveToClose =
+    targetClosedList && targetClosedList.id !== task.list_id;
+  const canQuickArchive =
+    taskList?.status === 'done' && !isOverlay && Boolean(canMoveToClose);
+  const quickArchiveToneClass = taskList?.color
+    ? DESTINATION_TONE_COLORS[taskList.color]
+    : DESTINATION_TONE_COLORS.GRAY;
+
+  // Check if task is optimistically added (pending realtime confirmation)
+  const isOptimistic = '_isOptimistic' in task && task._isOptimistic === true;
+  const isPersonalExternalTask =
+    task.is_personal_external === true || Boolean(task.personal_board_id);
+  const sourceBoardUrl =
+    task.source_workspace_id && task.source_board_id
+      ? `/${task.source_workspace_id}${tasksHref(`/boards/${task.source_board_id}`)}`
+      : null;
+  const taskTicketPrefix =
+    'ticket_prefix' in task && typeof task.ticket_prefix === 'string'
+      ? task.ticket_prefix
+      : null;
+  const taskTicketIdentifier = getTicketIdentifier(
+    isPersonalExternalTask ? taskTicketPrefix : boardConfig?.ticket_prefix,
+    task.display_number
+  );
+  const externalSourceLabel =
+    task.source_workspace_name ??
+    task.source_board_name ??
+    tTasks('external_task');
+
+  const dragDisabled =
+    dragDisabledProp ||
+    dialogState.editDialogOpen ||
+    dialogState.deleteDialogOpen ||
+    dialogState.customDateDialogOpen ||
+    dialogState.newLabelDialogOpen ||
+    dialogState.newProjectDialogOpen ||
+    menuOpen ||
+    isOptimistic; // Disable drag for optimistic tasks until confirmed
+
+  // Debug: log drag state for newly created task
+  if (task.name === 'new task') {
+    console.log('[TaskCard Debug]', {
+      taskId: task.id,
+      editDialogOpen: dialogState.editDialogOpen,
+      deleteDialogOpen: dialogState.deleteDialogOpen,
+      customDateDialogOpen: dialogState.customDateDialogOpen,
+      newLabelDialogOpen: dialogState.newLabelDialogOpen,
+      newProjectDialogOpen: dialogState.newProjectDialogOpen,
+      menuOpen,
+      isOptimistic,
+      RESULT_dragDisabled: dragDisabled,
+    });
+  }
+
+  const sortableDisabled = dragDisabled || isOverlay;
+  const sortableId = isOverlay
+    ? `${task.id}:drag-overlay`
+    : (sortableIdProp ?? task.id);
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: sortableId,
+    data: {
+      type: 'Task',
+      task: {
+        ...task,
+        list_id: String(task.list_id),
+      },
+    },
+    disabled: sortableDisabled,
+  });
+
+  const cardVisibilityState = getTaskCardVisibilityState({
+    isDragging,
+    optimisticUpdateInProgress:
+      optimisticUpdateInProgress?.has(task.id) ?? false,
+  });
+
+  const setCardRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      cardElementRef.current = node;
+      setNodeRef(node);
+    },
+    [setNodeRef]
+  );
+
+  useEffect(() => {
+    const node = cardElementRef.current;
+    if (!node) return;
+
+    if (typeof IntersectionObserver === 'undefined') {
+      setIsInViewport(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry) {
+          return;
+        }
+        setIsInViewport(entry.isIntersecting);
+      },
+      {
+        rootMargin: '220px 0px',
+        threshold: 0.05,
+      }
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  const style: React.CSSProperties = {
+    transform:
+      isOverlay || isDragging || suppressSortableTransform
+        ? 'translate3d(0, 0, 0)'
+        : CSS.Transform.toString(transform),
+    transition: isOverlay || suppressSortableTransform ? 'none' : transition,
+    height: 'var(--task-height)',
+    background: isOverlay || isDragging ? 'var(--card)' : undefined,
+    // Show reduced opacity for optimistic tasks (pending realtime confirmation)
+    opacity: isOverlay ? 1 : isOptimistic ? 0.6 : undefined,
+  };
+
+  const now = new Date();
+  const isOverdue = task.end_date && new Date(task.end_date) < now;
+  const isResolvedListStatus = isTaskBoardResolvedStatus(taskList?.status);
+  const startDate = task.start_date ? new Date(task.start_date) : null;
+  const endDate = task.end_date ? new Date(task.end_date) : null;
+
+  // Memoize description metadata to prevent unnecessary recalculations
+  // This is important because descriptionMeta is used in taskBadges dependency array
+  const descriptionMeta = useMemo(
+    () => getDescriptionMetadata(task.description),
+    [task.description]
+  );
+
+  // Helper function to get card color classes
+  const getCardColorClasses = () =>
+    getCardColorClassesUtil(taskList, task.priority);
+
+  // Use the extracted task actions hook
+  const {
+    handleArchiveToggle,
+    handleMoveToCompletion,
+    handleMoveToClose,
+    handleDelete,
+    handleMoveToList,
+    handleDueDateChange,
+    handlePriorityChange,
+    updateEstimationPoints,
+    handleCustomDateChange,
+    handleToggleAssignee,
+  } = useTaskActions({
+    task,
+    boardId,
+    workspaceId: effectiveWorkspaceId,
+    targetCompletionList,
+    targetClosedList,
+    availableLists,
+    onUpdate,
+    setIsLoading,
+    setMenuOpen,
+    setCustomDateDialogOpen: (open: boolean) =>
+      open
+        ? dialogActions.openCustomDateDialog()
+        : dialogActions.closeCustomDateDialog(),
+    setDeleteDialogOpen: (open: boolean) =>
+      open
+        ? dialogActions.openDeleteDialog()
+        : dialogActions.closeDeleteDialog(),
+    setEstimationSaving,
+    selectedTasks,
+    isMultiSelectMode,
+    onClearSelection,
+    bulkUpdateCustomDueDate,
+  });
+
+  const onToggleAssignee = useCallback(
+    (assigneeId: string) => handleToggleAssignee(assigneeId),
+    [handleToggleAssignee]
+  );
+
+  const quickArchiveButton = canQuickArchive ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={t('archive')}
+          disabled={isLoading}
+          onPointerDown={(e) => {
+            e.stopPropagation();
+          }}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void handleMoveToClose();
+          }}
+          className={cn(
+            'flex h-5 w-5 flex-none items-center justify-center rounded-sm border border-transparent transition-all duration-200',
+            quickArchiveToneClass,
+            'hover:scale-110 hover:ring-2 hover:brightness-110',
+            'focus-visible:outline-none focus-visible:ring-2',
+            'disabled:cursor-not-allowed disabled:opacity-60'
+          )}
+        >
+          {isLoading ? (
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Archive className="h-3.5 w-3.5" />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="text-xs">
+        {t('archive')}
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+
+  // Memoize drag handle for performance
+  // Removed explicit drag handle – entire card is now draggable for better UX.
+  // Keep attributes/listeners to spread onto root interactive area.
+
+  const openExternalTask = useCallback(async () => {
+    const sourceWorkspaceId = task.source_workspace_id;
+    const sourceBoardId = task.source_board_id;
+
+    if (sourceWorkspaceId && sourceBoardId) {
+      try {
+        const { task: sourceTask } = await getWorkspaceTask(
+          sourceWorkspaceId,
+          task.id
+        );
+        let sourceLists: TaskList[] | undefined;
+
+        try {
+          sourceLists = (
+            await listWorkspaceTaskLists(sourceWorkspaceId, sourceBoardId)
+          ).lists;
+        } catch {
+          sourceLists = undefined;
+        }
+
+        openTask(sourceTask as Task, sourceBoardId, sourceLists, false, {
+          taskWsId: sourceWorkspaceId,
+          taskWorkspacePersonal: false,
+        });
+        return;
+      } catch {
+        const opened = await openTaskById(task.id);
+        if (opened) return;
+      }
+    } else {
+      const opened = await openTaskById(task.id);
+      if (opened) return;
+    }
+
+    openTask(task, sourceBoardId ?? boardId, availableLists, false, {
+      taskWsId: sourceWorkspaceId ?? effectiveWorkspaceId,
+      taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
+    });
+  }, [
+    task,
+    boardId,
+    availableLists,
+    effectiveWorkspaceId,
+    isPersonalWorkspace,
+    openTask,
+    openTaskById,
+  ]);
+
+  const handleCardClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Check if only Shift is held (without CMD/Ctrl) for multiselect
+      const isShiftOnlyHeld =
+        e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey;
+
+      // Handle multi-select functionality only when Shift is held alone
+      if (isMultiSelectMode || isShiftOnlyHeld) {
+        onSelect?.(task.id, e);
+      } else if (
+        !isDragging &&
+        !dialogState.editDialogOpen &&
+        !dialogState.isClosingDialog &&
+        !menuOpen &&
+        !dialogState.deleteDialogOpen &&
+        !dialogState.customDateDialogOpen &&
+        !dialogState.newLabelDialogOpen &&
+        !dialogState.newProjectDialogOpen
+      ) {
+        // Only open edit dialog if not in multi-select mode, not dragging, and no other dialogs are open
+        if (isPersonalExternalTask) {
+          void openExternalTask();
+          return;
+        }
+
+        openTask(task, boardId, availableLists, false, {
+          taskWsId: effectiveWorkspaceId,
+          taskWorkspacePersonal: isPersonalWorkspace,
+        });
+      }
+    },
+    [
+      task,
+      boardId,
+      effectiveWorkspaceId,
+      isPersonalWorkspace,
+      isPersonalExternalTask,
+      isMultiSelectMode,
+      availableLists,
+      isDragging,
+      menuOpen,
+      dialogState,
+      onSelect,
+      openTask,
+      openExternalTask,
+    ]
+  );
+
+  // Refs for measuring badge widths
+  const containerRef = useRef<HTMLDivElement>(null);
+  const badgeRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const descriptionMetaRef = useRef<HTMLDivElement>(null);
+  const [visibleBadgeCount, setVisibleBadgeCount] = useState(0);
+
+  const handleDuplicateTask = async () => {
+    setIsLoading(true);
+    setMenuOpen(false);
+
+    // Check if we're in multi-select mode and have multiple tasks selected
+    const shouldBulkDuplicate =
+      isMultiSelectMode &&
+      selectedTasks &&
+      selectedTasks.size > 1 &&
+      selectedTasks.has(task.id);
+
+    // Get all tasks data from cache for bulk operations
+    const allTasks =
+      (queryClient.getQueryData<Task[]>(['tasks', boardId]) as Task[]) || [];
+    const tasksToDuplicate = shouldBulkDuplicate
+      ? allTasks.filter((t) => selectedTasks?.has(t.id))
+      : [task];
+
+    try {
+      await duplicateTaskMutation.mutateAsync(tasksToDuplicate);
+    } catch {
+      // Error handling is centralized in the mutation callbacks.
+    }
+  };
+
+  const handleAddSubtask = () => {
+    setMenuOpen(false);
+    // Open subtask creation dialog - the relationship will be created when the user saves
+    createSubtask(task.id, task.name, boardId, task.list_id, availableLists);
+  };
+
+  const handleMoveToExternalStaging = async () => {
+    if (!task.personal_board_id) return;
+
+    setIsLoading(true);
+    setMenuOpen(false);
+
+    try {
+      await removeCurrentUserTaskPersonalPlacement(task.id);
+
+      const localMutationAt = Date.now();
+      queryClient.setQueryData(['tasks', boardId], (old: Task[] | undefined) =>
+        old?.map((candidate) =>
+          candidate.id === task.id
+            ? {
+                ...candidate,
+                list_id: getPersonalExternalStagingListId(
+                  task.personal_board_id ?? boardId
+                ),
+                sort_key: null,
+                personal_list_id: null,
+                personal_sort_key: null,
+                personal_placed_at: null,
+                is_personal_external: true,
+                is_personal_external_default: true,
+                _localMutationAt: localMutationAt,
+              }
+            : candidate
+        )
+      );
+
+      toast.success(tTasks('moved_to_external_tasks'));
+    } catch (error) {
+      console.error('Failed to move task to external staging:', error);
+      toast.error(tTasks('failed_update_personal_placement'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemoveFromPersonalBoard = async () => {
+    setIsLoading(true);
+    setMenuOpen(false);
+
+    try {
+      await removeCurrentUserTaskPersonalPlacement(task.id);
+
+      queryClient.setQueryData(['tasks', boardId], (old: Task[] | undefined) =>
+        old?.filter((candidate) => candidate.id !== task.id)
+      );
+
+      toast.success(tTasks('removed_from_personal_board'));
+    } catch (error) {
+      console.error('Failed to remove task from personal board:', error);
+      toast.error(tTasks('failed_update_personal_placement'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const taskBadges = useMemo(() => {
+    // Collect all badges into an array for overflow handling
+    const badges: { id: string; element: React.ReactNode }[] = [];
+
+    // Priority badge
+    if (task.priority) {
+      badges.push({
+        id: 'priority',
+        element: (
+          <div
+            key="priority"
+            className="flex-none overflow-hidden"
+            ref={(el) => {
+              if (el) badgeRefs.current.set('priority', el);
+            }}
+          >
+            {getPriorityIndicator(task.priority)}
+          </div>
+        ),
+      });
+    }
+
+    // Sub-tasks counter badge (checked / total, excludes indeterminate)
+    if (descriptionMeta.totalCheckboxes > 0) {
+      const allChecked =
+        descriptionMeta.checkedCheckboxes === descriptionMeta.totalCheckboxes;
+      badges.push({
+        id: 'subtasks',
+        element: (
+          <Badge
+            key="subtasks"
+            variant="secondary"
+            className={cn(
+              'border font-medium text-[10px]',
+              allChecked
+                ? 'border-dynamic-green/30 bg-dynamic-green/15 text-dynamic-green'
+                : 'border-dynamic-gray/30 bg-dynamic-gray/10 text-dynamic-gray'
+            )}
+            title={t('n_subtasks_completed', {
+              checked: descriptionMeta.checkedCheckboxes,
+              total: descriptionMeta.totalCheckboxes,
+            })}
+            ref={(el) => {
+              if (el) badgeRefs.current.set('subtasks', el as any);
+            }}
+          >
+            {allChecked ? (
+              <ListChecks className="h-3 w-3" />
+            ) : (
+              <ListTodo className="h-3 w-3" />
+            )}
+            {descriptionMeta.checkedCheckboxes}/
+            {descriptionMeta.totalCheckboxes}
+          </Badge>
+        ),
+      });
+    }
+
+    // Indeterminate (abandoned) sub-tasks badge
+    if (descriptionMeta.indeterminateCheckboxes > 0) {
+      badges.push({
+        id: 'indeterminate-subtasks',
+        element: (
+          <Badge
+            key="indeterminate-subtasks"
+            variant="secondary"
+            className="border border-dynamic-orange/30 bg-dynamic-orange/15 font-medium text-[10px] text-dynamic-orange"
+            title={t('n_subtasks_abandoned', {
+              count: descriptionMeta.indeterminateCheckboxes,
+            })}
+            ref={(el) => {
+              if (el)
+                badgeRefs.current.set('indeterminate-subtasks', el as any);
+            }}
+          >
+            <SquareCenterlineDashedVertical className="h-3 w-3" />
+            {descriptionMeta.indeterminateCheckboxes}
+          </Badge>
+        ),
+      });
+    }
+
+    // Project indicator badge
+    if (task.projects && task.projects.length > 0) {
+      badges.push({
+        id: 'projects',
+        element: (
+          <div
+            key="projects"
+            className="min-w-0 shrink-0"
+            ref={(el) => {
+              if (el) badgeRefs.current.set('projects', el);
+            }}
+          >
+            <Badge
+              variant="secondary"
+              className={cn(
+                'h-5 border px-2 text-[10px]',
+                'border-dynamic-sky/30 bg-dynamic-sky/10 text-dynamic-sky'
+              )}
+            >
+              <Box className="h-2.5 w-2.5" />
+              {task.projects.length === 1
+                ? task.projects[0]?.name
+                : t('n_projects', { count: task.projects.length })}
+            </Badge>
+          </div>
+        ),
+      });
+    }
+
+    // Estimation Points badge
+    if (task.estimation_points != null) {
+      badges.push({
+        id: 'estimation',
+        element: (
+          <div
+            key="estimation"
+            className="min-w-0 shrink-0"
+            ref={(el) => {
+              if (el) badgeRefs.current.set('estimation', el);
+            }}
+          >
+            <TaskEstimationDisplay
+              points={task.estimation_points}
+              size="sm"
+              estimationType={boardConfig?.estimation_type}
+              showIcon
+            />
+          </div>
+        ),
+      });
+    }
+
+    // Labels badge
+    if (task.labels && task.labels.length > 0) {
+      badges.push({
+        id: 'labels',
+        element: (
+          <div
+            key="labels"
+            className="flex min-w-0 shrink-0 flex-wrap gap-1"
+            ref={(el) => {
+              if (el) badgeRefs.current.set('labels', el);
+            }}
+          >
+            <TaskLabelsDisplay
+              labels={sortByDisplayName(task.labels)}
+              size="sm"
+              hiddenLabelsLabel={t('hidden_labels')}
+            />
+          </div>
+        ),
+      });
+    }
+
+    // Parent task indicator badge
+    if (hasParentRelationship) {
+      badges.push({
+        id: 'parent',
+        element: (
+          <Badge
+            key="parent"
+            variant="secondary"
+            className="flex h-6 max-w-full shrink-0 items-center gap-1.5 overflow-hidden rounded-full border border-dynamic-purple/35 bg-dynamic-purple/10 px-2.5 text-[10px] text-dynamic-purple"
+            title={
+              parentBadgeTask
+                ? parentBadgeIdentifier
+                  ? `${parentBadgeIdentifier} · ${parentBadgeTask.name}`
+                  : t('subtask_of', { name: parentBadgeTask.name })
+                : undefined
+            }
+            ref={(el) => {
+              if (el) badgeRefs.current.set('parent', el as any);
+            }}
+          >
+            <ArrowUpCircle className="h-2.5 w-2.5" />
+            {parentBadgeIdentifier && (
+              <span className="rounded-full bg-dynamic-purple/12 px-1.5 py-0.5 font-mono text-[9px] leading-none">
+                {parentBadgeIdentifier}
+              </span>
+            )}
+            <span className="truncate">
+              {parentBadgeTask?.name ||
+                parentBadgeIdentifier ||
+                t('parent_task')}
+            </span>
+          </Badge>
+        ),
+      });
+    }
+
+    // Child tasks (sub-tasks) count badge
+    if (childTaskCount > 0) {
+      badges.push({
+        id: 'children',
+        element: (
+          <Badge
+            key="children"
+            variant="secondary"
+            className={cn(
+              'h-5 shrink-0 border px-2 text-[10px]',
+              completedChildTaskCount === childTaskCount
+                ? 'border-dynamic-green/30 bg-dynamic-green/10 text-dynamic-green'
+                : 'border-dynamic-gray/30 bg-dynamic-gray/10 text-dynamic-gray'
+            )}
+            title={t('n_subtasks_completed', {
+              checked: completedChildTaskCount,
+              total: childTaskCount,
+            })}
+            ref={(el) => {
+              if (el) badgeRefs.current.set('children', el as any);
+            }}
+          >
+            <ListTree className="h-2.5 w-2.5" />
+            {completedChildTaskCount}/{childTaskCount}
+          </Badge>
+        ),
+      });
+    }
+
+    // Blocking indicator badge (this task blocks others)
+    if (blockingCount > 0) {
+      badges.push({
+        id: 'blocking',
+        element: (
+          <Badge
+            key="blocking"
+            variant="secondary"
+            className="h-5 shrink-0 border border-dynamic-orange/30 bg-dynamic-orange/10 px-2 text-[10px] text-dynamic-orange"
+            title={t('blocking_n_tasks', { count: blockingCount })}
+            ref={(el) => {
+              if (el) badgeRefs.current.set('blocking', el as any);
+            }}
+          >
+            <Ban className="h-2.5 w-2.5" />
+            {blockingCount}
+          </Badge>
+        ),
+      });
+    }
+
+    // Related tasks indicator badge
+    if (relatedTaskCount > 0) {
+      badges.push({
+        id: 'related',
+        element: (
+          <Badge
+            key="related"
+            variant="secondary"
+            className="h-5 shrink-0 border border-dynamic-blue/30 bg-dynamic-blue/10 px-2 text-[10px] text-dynamic-blue"
+            title={t('n_related_tasks', { count: relatedTaskCount })}
+            ref={(el) => {
+              if (el) badgeRefs.current.set('related', el as any);
+            }}
+          >
+            <Link2 className="h-2.5 w-2.5" />
+            {relatedTaskCount}
+          </Badge>
+        ),
+      });
+    }
+
+    return badges;
+  }, [
+    // Only depend on specific task properties that affect badge rendering
+    // to prevent recalculation when unrelated properties (like name) change
+    task.priority,
+    task.projects,
+    task.estimation_points,
+    task.labels,
+    boardConfig?.estimation_type,
+    descriptionMeta.totalCheckboxes,
+    descriptionMeta.checkedCheckboxes,
+    descriptionMeta.indeterminateCheckboxes,
+    parentBadgeTask,
+    hasParentRelationship,
+    childTaskCount,
+    completedChildTaskCount,
+    blockingCount,
+    relatedTaskCount,
+    t,
+    parentBadgeIdentifier,
+  ]);
+
+  // Calculate visible badges based on available width
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const calculateVisibleCount = () => {
+      const containerWidth = container.clientWidth;
+      const gap = 4; // gap-1 = 4px
+
+      // Get description meta width
+      let descriptionMetaWidth = 0;
+      if (descriptionMetaRef.current) {
+        descriptionMetaWidth = descriptionMetaRef.current.offsetWidth + gap;
+      }
+
+      // Calculate total width needed for each badge
+      let totalWidth = descriptionMetaWidth;
+      let count = 0;
+
+      for (let i = 0; i < taskBadges.length; i++) {
+        const badge = taskBadges[i];
+        const badgeElement = badgeRefs.current.get(badge?.id || '');
+        if (!badgeElement) continue;
+
+        const isLastBadge = i === taskBadges.length - 1;
+        const badgeWidth = badgeElement.offsetWidth + (isLastBadge ? 0 : gap);
+
+        const totalNeeded = totalWidth + badgeWidth;
+
+        if (totalNeeded <= containerWidth) {
+          totalWidth += badgeWidth;
+          count++;
+        } else {
+          break;
+        }
+      }
+
+      setVisibleBadgeCount(count);
+    };
+
+    // Initial calculation
+    calculateVisibleCount();
+
+    // Re-calculate on container resize
+    const resizeObserver = new ResizeObserver(calculateVisibleCount);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [taskBadges]);
+
+  const visibleBadges = taskBadges.slice(0, visibleBadgeCount);
+  const hiddenBadges = taskBadges.slice(visibleBadgeCount);
+  const showBlockedByInlineWithCheckbox =
+    showBlockedByCallout && taskBadges.length === 0;
+  const showBlockedByUnderTitle =
+    showBlockedByCallout && !showBlockedByInlineWithCheckbox;
+
+  // Get all tasks from query to subscribe to cache updates
+  const { data: allTasksFromQuery } = useQuery({
+    queryKey: ['tasks', boardId],
+    queryFn: () => [], // No-op function - we only want to read from cache
+    enabled: false, // Don't fetch, just subscribe to cache
+  });
+
+  // Compute collective attributes for bulk operations
+  const {
+    displayLabels,
+    displayProjects,
+    displayAssignees,
+    displayEstimation,
+  } = useMemo(() => {
+    const shouldUseBulkMode =
+      isMultiSelectMode &&
+      selectedTasks &&
+      selectedTasks.size > 1 &&
+      selectedTasks.has(task.id);
+
+    if (!shouldUseBulkMode) {
+      return {
+        displayLabels: task.labels || [],
+        displayProjects: task.projects || [],
+        displayAssignees: task.assignees || [],
+        displayEstimation: task.estimation_points,
+      };
+    }
+
+    // Get all selected tasks data from query cache
+    const allTasks = (allTasksFromQuery as Task[]) || [];
+    const selectedTasksData = allTasks.filter((t) => selectedTasks?.has(t.id));
+
+    if (selectedTasksData.length === 0) {
+      return {
+        displayLabels: task.labels || [],
+        displayProjects: task.projects || [],
+        displayAssignees: task.assignees || [],
+        displayEstimation: task.estimation_points,
+      };
+    }
+
+    // Find attributes that ALL selected tasks have in common
+    // Start with all unique attributes from all selected tasks
+    const allLabels = new Map<string, any>();
+    const allProjects = new Map<string, any>();
+    const allAssignees = new Map<string, any>();
+
+    selectedTasksData.forEach((t) => {
+      t.labels?.forEach((label) => {
+        allLabels.set(label.id, label);
+      });
+      t.projects?.forEach((project) => {
+        allProjects.set(project.id, project);
+      });
+      t.assignees?.forEach((assignee) => {
+        allAssignees.set(assignee.id, assignee);
+      });
+    });
+
+    // Filter to only those present in ALL selected tasks
+    const commonLabels = Array.from(allLabels.values()).filter((label) =>
+      selectedTasksData.every((t) => t.labels?.some((l) => l.id === label.id))
+    );
+
+    const commonProjects = Array.from(allProjects.values()).filter((project) =>
+      selectedTasksData.every((t) =>
+        t.projects?.some((p) => p.id === project.id)
+      )
+    );
+
+    const commonAssignees = Array.from(allAssignees.values()).filter(
+      (assignee) =>
+        selectedTasksData.every((t) =>
+          t.assignees?.some((a) => a.id === assignee.id)
+        )
+    );
+
+    // Check if ALL selected tasks have the same estimation
+    const firstEstimation = selectedTasksData[0]?.estimation_points;
+    const allSameEstimation = selectedTasksData.every(
+      (t) => t.estimation_points === firstEstimation
+    );
+    const commonEstimation = allSameEstimation ? firstEstimation : undefined;
+
+    return {
+      displayLabels: commonLabels,
+      displayProjects: commonProjects,
+      displayAssignees: commonAssignees,
+      displayEstimation: commonEstimation,
+    };
+  }, [
+    isMultiSelectMode,
+    selectedTasks,
+    task.id,
+    task.labels,
+    task.projects,
+    task.assignees,
+    task.estimation_points,
+    allTasksFromQuery,
+  ]);
+
+  const availableLabelsForMenu = useMemo(() => {
+    return mergeTaskCardLabelOptions(workspaceLabels, displayLabels);
+  }, [workspaceLabels, displayLabels]);
+
+  const blockedByCluster = (
+    <div className="relative overflow-hidden rounded-md border border-dynamic-red/16 bg-dynamic-red/[0.045] px-2 py-1.5">
+      <div className="absolute inset-y-1.5 left-1.5 w-0.75 rounded-full bg-dynamic-red/45" />
+      <div className="flex min-w-0 items-center justify-between gap-2 pl-3">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <div className="flex shrink-0 items-center gap-1 font-semibold text-[10px] text-dynamic-red uppercase tracking-[0.12em]">
+            <Ban className="h-3 w-3" />
+            <span>{t('blocked_by')}</span>
+          </div>
+          {!primaryBlockedByTask && (
+            <span className="truncate text-[11px] text-muted-foreground">
+              {t('blocked_by_help')}
+            </span>
+          )}
+        </div>
+        {primaryBlockedByTask && (
+          <div className="flex shrink-0 items-center gap-1">
+            <HoverCard openDelay={120}>
+              <HoverCardTrigger asChild>
+                <button
+                  type="button"
+                  className={cn(
+                    'rounded-md border border-dynamic-red/18 bg-background/90 px-1.5 py-0.5 font-mono text-[9px] text-dynamic-red/85 uppercase transition-colors',
+                    'hover:border-dynamic-red/30 hover:bg-background'
+                  )}
+                  aria-label={t('blocked_by_n_tasks', {
+                    count: blockedByCount,
+                  })}
+                >
+                  {primaryBlockedByTaskIdentifier ?? t('blocked')}
+                </button>
+              </HoverCardTrigger>
+              <HoverCardContent
+                side="top"
+                align="end"
+                className="w-64 border-dynamic-red/20 bg-background/95 p-3 backdrop-blur-sm"
+              >
+                <div className="flex flex-col gap-1">
+                  <div className="flex items-center gap-2">
+                    <span className="rounded-md border border-dynamic-red/18 bg-dynamic-red/8 px-1.5 py-0.5 font-mono text-[10px] text-dynamic-red uppercase">
+                      {primaryBlockedByTaskIdentifier ?? t('blocked')}
+                    </span>
+                    {primaryBlockedByTask.completed && (
+                      <Badge
+                        variant="secondary"
+                        className="h-5 border-dynamic-green/20 bg-dynamic-green/10 px-1.5 text-[10px] text-dynamic-green"
+                      >
+                        {t('done')}
+                      </Badge>
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      'text-sm leading-snug',
+                      primaryBlockedByTask.completed &&
+                        'text-muted-foreground line-through'
+                    )}
+                  >
+                    {primaryBlockedByTask.name}
+                  </div>
+                  {primaryBlockedByTask.board_name && (
+                    <div className="text-[11px] text-muted-foreground">
+                      {primaryBlockedByTask.board_name}
+                    </div>
+                  )}
+                </div>
+              </HoverCardContent>
+            </HoverCard>
+            {blockedByOverflowCount > 0 && (
+              <Badge
+                variant="secondary"
+                className="h-5 border-dynamic-red/16 bg-dynamic-red/8 px-1.5 text-[10px] text-dynamic-red/80"
+              >
+                +{blockedByOverflowCount}
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <Card
+      data-id={task.id}
+      data-task-id={task.id}
+      ref={setCardRefs}
+      style={style}
+      onClick={handleCardClick}
+      onContextMenu={(e) => {
+        // If only Shift is held (without CMD/Ctrl), handle as selection
+        if (e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          e.preventDefault();
+          e.stopPropagation();
+          // Trigger selection
+          onSelect?.(task.id, e as any);
+          return;
+        }
+
+        // Normal right-click behavior - open context menu
+        e.preventDefault();
+        e.stopPropagation();
+        // Open the context menu (actions dropdown) and guard first click briefly
+        setMenuOpen(true);
+        setMenuGuardUntil(Date.now() + 300);
+      }}
+      // Apply sortable listeners/attributes to the full card so the whole surface remains draggable
+      {...(sortableDisabled ? {} : attributes)}
+      {...(sortableDisabled ? {} : listeners)}
+      className={cn(
+        'group relative overflow-hidden rounded-lg border-l-4',
+        cardVisibilityState.hidden && 'pointer-events-none opacity-0',
+        sortableDisabled
+          ? 'cursor-default'
+          : 'cursor-grab touch-none select-none active:cursor-grabbing',
+        // Task list or priority-based styling
+        getCardColorClasses(),
+        showBlockedByCallout && 'bg-dynamic-red/[0.03]',
+        cardVisibilityState.pending
+          ? 'border-dashed opacity-90'
+          : 'border-solid',
+        (isOverlay || isDragging) &&
+          'bg-card bg-none shadow-lg ring-2 ring-primary/50',
+        // Closed state (closed tasks)
+        (!!task.closed_at || !!task.completed_at) && 'opacity-70 saturate-75',
+        // Overdue state
+        isOverdue &&
+          !isResolvedListStatus &&
+          !(!!task.closed_at || !!task.completed_at) &&
+          'border-dynamic-red/70 bg-dynamic-red/10 ring-1 ring-dynamic-red/20',
+        // Hover state (no transitions)
+        !isDragging && !isSelected && 'hover:ring-1 hover:ring-primary/15',
+        // Selection state - enhanced visual feedback
+        isSelected &&
+          'scale-[1.01] border-l-primary bg-linear-to-r from-primary/10 via-primary/5 to-transparent shadow-lg ring-2 ring-primary/60',
+        // Multi-select mode cursor
+        isMultiSelectMode && 'cursor-pointer'
+      )}
+    >
+      {/* Overdue indicator */}
+      {isOverdue &&
+        !isResolvedListStatus &&
+        !(!!task.closed_at || !!task.completed_at) && (
+          <div className="absolute top-0 right-0 h-0 w-0 border-t-20 border-t-dynamic-red border-l-20 border-l-transparent">
+            <AlertCircle className="absolute -top-4 -right-4.5 h-3 w-3" />
+          </div>
+        )}
+      {/* Selection indicator */}
+      {isMultiSelectMode && (
+        <div
+          className={cn(
+            'absolute top-2 left-2 flex h-6 w-6 items-center justify-center rounded-full border-2 transition-all duration-200',
+            isSelected
+              ? 'scale-110 border-primary bg-primary text-primary-foreground shadow-md'
+              : 'border-border bg-background/80 text-muted-foreground shadow-sm hover:scale-105 hover:border-primary/50'
+          )}
+        >
+          {isSelected ? (
+            <Check className="h-4 w-4 stroke-3" />
+          ) : (
+            <div className="h-2 w-2 rounded-full bg-current opacity-30" />
+          )}
+        </div>
+      )}
+      <div className="p-3">
+        {/* Header */}
+        <div className="flex items-start gap-1">
+          <div className="min-w-0 flex-1">
+            <div
+              className={cn(
+                'mb-1 flex gap-1',
+                isPersonalExternalTask ? 'flex-wrap items-center' : 'flex-col'
+              )}
+            >
+              {isPersonalExternalTask && (
+                <Badge
+                  variant="secondary"
+                  className="h-5 min-w-0 max-w-[70%] gap-1 border border-dynamic-cyan/30 bg-dynamic-cyan/10 px-1.5 text-[10px] text-dynamic-cyan"
+                  title={[
+                    task.source_workspace_name,
+                    task.source_board_name,
+                    task.source_list_name,
+                  ]
+                    .filter(Boolean)
+                    .join(' / ')}
+                >
+                  <ExternalLink className="h-2.5 w-2.5 shrink-0" />
+                  <span className="truncate">{externalSourceLabel}</span>
+                </Badge>
+              )}
+              {/* Ticket Identifier */}
+              {taskList?.status !== 'documents' && (
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'w-fit px-1 py-0 font-mono text-[10px]',
+                    getTicketBadgeColorClasses(taskList, task.priority)
+                  )}
+                  title={t('ticket_id_label', {
+                    id: taskTicketIdentifier,
+                  })}
+                >
+                  {taskTicketIdentifier}
+                </Badge>
+              )}
+            </div>
+            <div className="mb-1">
+              {/* Task Name */}
+              <button
+                type="button"
+                className={cn(
+                  'w-full cursor-pointer text-left font-semibold text-xs leading-tight transition-colors duration-200',
+                  'line-clamp-2',
+                  task.closed_at || task.completed_at
+                    ? 'text-muted-foreground line-through'
+                    : '-mx-1 -my-0.5 rounded-sm px-1 py-0.5 text-foreground active:bg-muted/50'
+                )}
+                aria-label={t('edit_task_aria', { name: task.name })}
+                title={t('click_to_edit_task')}
+              >
+                {task.name}
+              </button>
+              {showBlockedByUnderTitle && blockedByCluster}
+            </div>
+          </div>
+          {/* Actions menu only */}
+          <div className="flex items-center justify-end gap-1">
+            {/* Main Actions Menu - With integrated date picker */}
+            {!isOverlay && (
+              <DropdownMenu
+                open={menuOpen}
+                onOpenChange={(open) => {
+                  setMenuOpen(open);
+                  if (!open) {
+                    setRelationshipMenusOpen({
+                      parent: false,
+                      dependencies: false,
+                      related: false,
+                    });
+                  }
+                }}
+              >
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="xs"
+                    className={cn(
+                      'h-7 w-7 shrink-0 p-0 transition-all duration-200',
+                      'hover:scale-105 hover:bg-muted',
+                      menuOpen
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100',
+                      menuOpen && 'bg-muted ring-1 ring-border'
+                    )}
+                  >
+                    <MoreHorizontal className="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  align="end"
+                  className="w-56"
+                  sideOffset={5}
+                  onClick={(e) => {
+                    e.stopPropagation(); // Prevent triggering task card click
+                  }}
+                >
+                  {taskList?.status !== 'documents' && (
+                    <DropdownMenuItem
+                      className="cursor-pointer"
+                      disabled={isLoading}
+                    >
+                      <Link
+                        href={`/${wsId}/time-tracker/timer?taskSelect=${task?.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2"
+                      >
+                        <Timer className="h-4 w-4 text-dynamic-blue" />
+                        {t('start_tracking_time')}
+                      </Link>
+                    </DropdownMenuItem>
+                  )}
+                  {taskList?.status !== 'documents' && (
+                    <DropdownMenuSeparator />
+                  )}
+                  {/* Quick Completion Action */}
+                  {taskList?.status !== 'documents' && canMoveToCompletion && (
+                    <DropdownMenuItem
+                      onSelect={(e) =>
+                        handleMenuItemSelect(
+                          e as unknown as Event,
+                          handleMoveToCompletion
+                        )
+                      }
+                      className="cursor-pointer"
+                      disabled={isLoading}
+                    >
+                      <CheckCircle2 className="h-4 w-4 text-dynamic-green" />
+                      {targetCompletionList?.status === 'done'
+                        ? t('mark_as_done')
+                        : t('mark_as_closed')}
+                    </DropdownMenuItem>
+                  )}
+
+                  {/* Mark as Closed Action - Only show if closed list exists and is different from the generic completion */}
+                  {taskList?.status !== 'documents' &&
+                    canMoveToClose &&
+                    targetClosedList?.id !== targetCompletionList?.id && (
+                      <DropdownMenuItem
+                        onSelect={(e) =>
+                          handleMenuItemSelect(
+                            e as unknown as Event,
+                            handleMoveToClose
+                          )
+                        }
+                        className="cursor-pointer"
+                        disabled={isLoading}
+                      >
+                        <CircleSlash className="h-4 w-4 text-dynamic-purple" />
+                        {t('mark_as_closed')}
+                      </DropdownMenuItem>
+                    )}
+
+                  {taskList?.status !== 'documents' &&
+                    (canMoveToCompletion || canMoveToClose) && (
+                      <DropdownMenuSeparator />
+                    )}
+
+                  {/* Priority Menu */}
+                  <TaskPriorityMenu
+                    currentPriority={task.priority ?? null}
+                    isLoading={isLoading}
+                    onPriorityChange={handlePriorityChange}
+                    onMenuItemSelect={handleMenuItemSelect}
+                    onClose={() => setMenuOpen(false)}
+                    translations={{
+                      priority: t('priority'),
+                      none: t('none'),
+                      urgent: t('priority_urgent'),
+                      high: t('priority_high'),
+                      medium: t('priority_medium'),
+                      low: t('priority_low'),
+                    }}
+                  />
+
+                  {/* Due Date Menu */}
+                  <TaskDueDateMenu
+                    endDate={task.end_date}
+                    isLoading={isLoading}
+                    weekStartsOn={weekStartsOn}
+                    onDueDateChange={handleDueDateChange}
+                    onCustomDateClick={() => {
+                      setMenuOpen(false);
+                      setTimeout(
+                        () => dialogActions.openCustomDateDialog(),
+                        100
+                      );
+                    }}
+                    onMenuItemSelect={handleMenuItemSelect}
+                    onClose={() => setMenuOpen(false)}
+                    translations={{
+                      dueDate: t('due_date'),
+                      none: t('none'),
+                      today: t('today'),
+                      tomorrow: t('tomorrow'),
+                      yesterday: t('yesterday'),
+                      thisWeek: t('this_week'),
+                      nextWeek: t('next_week'),
+                      customDate: t('custom_date'),
+                      removeDueDate: t('remove_due_date'),
+                    }}
+                  />
+
+                  {/* Estimation Menu */}
+                  {boardConfig?.estimation_type && (
+                    <TaskEstimationMenu
+                      currentPoints={displayEstimation}
+                      estimationType={boardConfig?.estimation_type}
+                      extendedEstimation={boardConfig?.extended_estimation}
+                      allowZeroEstimates={boardConfig?.allow_zero_estimates}
+                      isLoading={estimationSaving}
+                      onEstimationChange={updateEstimationPoints}
+                      onMenuItemSelect={handleMenuItemSelect}
+                    />
+                  )}
+
+                  {/* Labels Menu */}
+                  <TaskLabelsMenu
+                    taskLabels={displayLabels}
+                    availableLabels={availableLabelsForMenu}
+                    isLoading={labelsLoading}
+                    onToggleLabel={toggleTaskLabel}
+                    onCreateNewLabel={() => {
+                      openNewLabelDialog();
+                      setMenuOpen(false);
+                    }}
+                    onMenuItemSelect={handleMenuItemSelect}
+                    translations={{
+                      labels: t('labels'),
+                      searchLabels: t('search_labels'),
+                      loading: t('loading'),
+                      noLabelsFound: t('no_labels_found'),
+                      noLabelsAvailable: t('no_labels_available'),
+                      applied: t('applied'),
+                      createNewLabel: t('create_new_label'),
+                    }}
+                  />
+
+                  {/* Projects Menu */}
+                  <TaskProjectsMenu
+                    taskProjects={displayProjects}
+                    availableProjects={workspaceProjects}
+                    isLoading={projectsLoading}
+                    onToggleProject={toggleTaskProject}
+                    onCreateNewProject={() => {
+                      dialogActions.openNewProjectDialog();
+                      setMenuOpen(false);
+                    }}
+                    onMenuItemSelect={handleMenuItemSelect}
+                    translations={{
+                      projects: t('projects'),
+                      searchProjects: t('search_projects'),
+                      loading: t('loading'),
+                      noProjectsFound: t('no_projects_found'),
+                      noProjectsAvailable: t('no_projects_available'),
+                      assigned: t('assigned'),
+                      createNewProject: t('create_new_project'),
+                    }}
+                  />
+
+                  <DropdownMenuSeparator />
+
+                  {/* Task Relationships Section */}
+                  {effectiveWorkspaceId && (
+                    <>
+                      {/* Parent Task Menu */}
+                      <TaskParentMenu
+                        wsId={effectiveWorkspaceId}
+                        taskId={task.id}
+                        parentTask={parentTask}
+                        childTaskIds={childTasks.map((t) => t.id)}
+                        isSaving={relationshipSaving}
+                        onSetParent={setParentTask}
+                        onRemoveParent={removeParentTask}
+                        onOpenChange={(open) =>
+                          setRelationshipMenusOpen((prev) => ({
+                            ...prev,
+                            parent: open,
+                          }))
+                        }
+                        translations={{
+                          parent_task: t('parent_task'),
+                          search_tasks: t('search_tasks'),
+                          error_loading_tasks: t('error'),
+                          no_matching_tasks: t('no-results'),
+                          no_available_tasks: t('no_tasks'),
+                          n_set: '1',
+                        }}
+                      />
+
+                      {/* Blocking/Blocked By Menu */}
+                      <TaskBlockingMenu
+                        wsId={effectiveWorkspaceId}
+                        taskId={task.id}
+                        blockingTasks={blockingTasks}
+                        blockedByTasks={blockedByTasks}
+                        isSaving={relationshipSaving}
+                        savingTaskId={relationshipSavingTaskId}
+                        onAddBlocking={addBlockingTask}
+                        onRemoveBlocking={removeBlockingTask}
+                        onAddBlockedBy={addBlockedByTask}
+                        onRemoveBlockedBy={removeBlockedByTask}
+                        onOpenChange={(open) =>
+                          setRelationshipMenusOpen((prev) => ({
+                            ...prev,
+                            dependencies: open,
+                          }))
+                        }
+                        translations={{
+                          dependencies: t('dependencies'),
+                          blocks: t('blocks'),
+                          blocked_by: t('blocked_by'),
+                          search_tasks_to_block: t('search_tasks'),
+                          search_blocking_tasks: t('search_tasks'),
+                          error_loading_tasks: t('error'),
+                          no_matching_tasks: t('no-results'),
+                          no_available_tasks: t('no_tasks'),
+                          remove_dependency: t('remove'),
+                          tasks_that_cannot_start: t('blocks_help'),
+                          tasks_that_must_complete: t('blocked_by_help'),
+                        }}
+                      />
+
+                      {/* Related Tasks Menu */}
+                      <TaskRelatedMenu
+                        wsId={effectiveWorkspaceId}
+                        taskId={task.id}
+                        relatedTasks={relatedTasks}
+                        isSaving={relationshipSaving}
+                        savingTaskId={relationshipSavingTaskId}
+                        onAddRelated={addRelatedTask}
+                        onRemoveRelated={removeRelatedTask}
+                        onOpenChange={(open) =>
+                          setRelationshipMenusOpen((prev) => ({
+                            ...prev,
+                            related: open,
+                          }))
+                        }
+                        translations={{
+                          related_tasks: t('related_tasks'),
+                          currently_related: t('currently_related'),
+                          search_tasks_to_link: t('search_tasks'),
+                          no_matching_tasks: t('no-results'),
+                          no_available_tasks: t('no_tasks'),
+                          related_tasks_help: t('related_tasks_help'),
+                        }}
+                      />
+
+                      <DropdownMenuSeparator />
+                    </>
+                  )}
+
+                  {/* Move Menu */}
+                  {availableLists.length > 0 && effectiveWorkspaceId && (
+                    <TaskMoveMenu
+                      currentListId={task.list_id}
+                      availableLists={availableLists}
+                      isLoading={isLoading}
+                      onMoveToList={handleMoveToList}
+                      onMenuItemSelect={handleMenuItemSelect}
+                      onRequestOpenCreateDialog={() => {
+                        setMenuOpen(false);
+                        setIsCreateListDialogOpen(true);
+                      }}
+                      translations={{
+                        move: t('move'),
+                      }}
+                    />
+                  )}
+
+                  {isPersonalExternalTask && (
+                    <>
+                      {task.personal_board_id && task.personal_list_id && (
+                        <DropdownMenuItem
+                          onSelect={(e) =>
+                            handleMenuItemSelect(
+                              e as unknown as Event,
+                              () => void handleMoveToExternalStaging()
+                            )
+                          }
+                          className="cursor-pointer"
+                          disabled={isLoading}
+                        >
+                          <MoveRight className="h-4 w-4 text-dynamic-cyan" />
+                          {tTasks('move_to_external_tasks')}
+                        </DropdownMenuItem>
+                      )}
+                      {sourceBoardUrl && (
+                        <DropdownMenuItem asChild>
+                          <Link href={sourceBoardUrl}>
+                            <ExternalLink className="h-4 w-4 text-foreground" />
+                            {tTasks('open_source_board')}
+                          </Link>
+                        </DropdownMenuItem>
+                      )}
+                      {!task.is_personal_external_default && (
+                        <DropdownMenuItem
+                          onSelect={(e) =>
+                            handleMenuItemSelect(e as unknown as Event, () => {
+                              void handleRemoveFromPersonalBoard();
+                            })
+                          }
+                          className="cursor-pointer text-dynamic-red focus:text-dynamic-red"
+                          disabled={isLoading}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                          {tTasks('remove_from_personal_board')}
+                        </DropdownMenuItem>
+                      )}
+                      <DropdownMenuSeparator />
+                    </>
+                  )}
+
+                  {/* Assignee Actions - Show if not personal workspace */}
+                  {!isPersonalWorkspace && (
+                    <TaskAssigneesMenu
+                      taskAssignees={displayAssignees}
+                      availableMembers={workspaceMembers}
+                      isLoading={membersLoading}
+                      onToggleAssignee={onToggleAssignee}
+                      onMenuItemSelect={handleMenuItemSelect}
+                      translations={{
+                        assignees: t('assignees'),
+                        searchMembers: t('search_members'),
+                        loading: t('loading'),
+                        noMembersFound: t('no_members_found'),
+                        noMembersAvailable: t('no_members_available'),
+                        assigned: t('assigned'),
+                        memberNoLongerInWorkspace: t(
+                          'member_no_longer_in_workspace'
+                        ),
+                      }}
+                    />
+                  )}
+
+                  <DropdownMenuSeparator />
+                  {taskShareWsId && (
+                    <DropdownMenuItem
+                      onSelect={(e) =>
+                        handleMenuItemSelect(e as unknown as Event, () => {
+                          setShareDialogOpen(true);
+                          setMenuOpen(false);
+                        })
+                      }
+                      className="cursor-pointer"
+                    >
+                      <Share2 className="h-4 w-4 text-foreground" />
+                      {t('task_sharing.share_task')}
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem
+                    onSelect={handleDuplicateTask}
+                    className="cursor-pointer"
+                  >
+                    <Copy className="h-4 w-4 text-foreground" />
+                    {t('duplicate_task')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={handleAddSubtask}
+                    className="cursor-pointer"
+                  >
+                    <ListTree className="h-4 w-4 text-foreground" />
+                    {t('add_subtask')}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  {!isPersonalExternalTask && (
+                    <DropdownMenuItem
+                      onSelect={(e) =>
+                        handleMenuItemSelect(e as unknown as Event, () => {
+                          dialogActions.openDeleteDialog();
+                          setMenuOpen(false);
+                        })
+                      }
+                      className="cursor-pointer"
+                    >
+                      <Trash2 className="h-4 w-4 text-dynamic-red" />
+                      {t('delete_task')}
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+          {/* Assignee: left, not cut off */}
+          {!isPersonalWorkspace && (
+            <div className="flex flex-none items-start justify-start">
+              <AssigneeSelect
+                taskId={task.id}
+                assignees={task.assignees}
+                onUpdate={onUpdate}
+              />
+            </div>
+          )}
+        </div>
+        {/* Dates Section (improved layout & conditional rendering) */}
+        {/* Hide dates when the list itself represents resolved work. */}
+        {(startDate || endDate) && !isResolvedListStatus && (
+          <div className="mb-1 space-y-0.5 text-[10px] leading-snug">
+            {/* Show start only if in the future (hide historical start for visual simplicity) */}
+            {startDate && startDate > now && (
+              <div className="flex items-center gap-1 text-muted-foreground">
+                <Clock className="h-2.5 w-2.5 shrink-0" />
+                <span className="truncate">
+                  {t('starts_at', {
+                    date: formatSmartDate(
+                      startDate,
+                      {
+                        today: t('today'),
+                        tomorrow: t('tomorrow'),
+                        yesterday: t('yesterday'),
+                      },
+                      dateLocale
+                    ),
+                  })}
+                </span>
+              </div>
+            )}
+            {endDate && (
+              <div
+                className={cn(
+                  'flex items-center gap-1',
+                  isOverdue && !task.closed_at
+                    ? 'font-medium text-dynamic-red'
+                    : 'text-muted-foreground'
+                )}
+              >
+                <Calendar className="h-2.5 w-2.5 shrink-0" />
+                <span className="truncate">
+                  {t('due_at', {
+                    date: formatSmartDate(
+                      endDate,
+                      {
+                        today: t('today'),
+                        tomorrow: t('tomorrow'),
+                        yesterday: t('yesterday'),
+                      },
+                      dateLocale
+                    ),
+                  })}
+                </span>
+                {isOverdue && !task.closed_at ? (
+                  <Badge className="ml-1 h-4 bg-dynamic-red px-1 font-semibold text-[9px] text-white tracking-wide">
+                    {t('overdue')}
+                  </Badge>
+                ) : (
+                  <span className="ml-1 hidden text-[10px] text-muted-foreground md:inline">
+                    {format(endDate, `MMM dd '${t('at')}' ${timePattern}`, {
+                      locale: dateLocale,
+                    })}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+        {taskList?.status === 'done' || taskList?.status === 'closed' ? (
+          /*
+            Completion and Closed Dates Section
+            Show completed_at when in done list, closed_at when in closed list
+          */
+          <div className="mb-1 flex min-h-5 items-center justify-between gap-2 text-[10px] leading-snug sm:min-h-6">
+            <div className="min-w-0 space-y-0.5">
+              {taskList?.status === 'done' && task.completed_at && (
+                <div
+                  className={cn(
+                    'flex min-w-0 items-center gap-1',
+                    getListTextColorClass(taskList?.color)
+                  )}
+                >
+                  <CheckCircle2 className="h-2.5 w-2.5 shrink-0" />
+                  <span className="truncate">
+                    {t('completed')}{' '}
+                    {formatDistanceToNow(new Date(task.completed_at), {
+                      addSuffix: true,
+                      locale: dateLocale,
+                    })}
+                  </span>
+                  <span className="ml-1 hidden shrink-0 text-[10px] text-muted-foreground md:inline">
+                    {format(
+                      new Date(task.completed_at),
+                      `MMM dd '${t('at')}' ${timePattern}`,
+                      { locale: dateLocale }
+                    )}
+                  </span>
+                </div>
+              )}
+              {taskList?.status === 'closed' && task.closed_at && (
+                <div
+                  className={cn(
+                    'flex min-w-0 items-center gap-1',
+                    getListTextColorClass(taskList?.color)
+                  )}
+                >
+                  <CircleSlash className="h-2.5 w-2.5 shrink-0" />
+                  <span className="truncate">
+                    {t('closed')}{' '}
+                    {formatDistanceToNow(new Date(task.closed_at), {
+                      addSuffix: true,
+                      locale: dateLocale,
+                    })}
+                  </span>
+                  <span className="ml-1 hidden shrink-0 text-[10px] text-muted-foreground md:inline">
+                    {format(
+                      new Date(task.closed_at),
+                      `MMM dd '${t('at')}' ${timePattern}`,
+                      { locale: dateLocale }
+                    )}
+                  </span>
+                </div>
+              )}
+            </div>
+            {quickArchiveButton}
+          </div>
+        ) : (
+          /*
+            Bottom Row: Three-column layout for assignee, priority, and checkbox, with only one tag visible and +N tooltip for extras.
+            Hide bottom row entirely when in done/closed list
+          */
+          <div className="flex items-center gap-2">
+            {/* Hidden measurement container - render all badges to measure their width */}
+            <div
+              className="pointer-events-none absolute top-0 -left-2499.75 flex items-center gap-1 opacity-0"
+              aria-hidden="true"
+            >
+              {taskBadges.map((badge) => badge.element)}
+            </div>
+            {/* Visible container - only show badges that fit */}
+            <div
+              ref={containerRef}
+              className="scrollbar-hide flex w-full items-center gap-1 overflow-auto whitespace-nowrap rounded-lg"
+            >
+              {showBlockedByInlineWithCheckbox && (
+                <div className="min-w-0 flex-1">{blockedByCluster}</div>
+              )}
+              {visibleBadges.map((badge) => badge.element)}
+              {visibleBadges.length > 0 && hiddenBadges.length > 0 && (
+                <HoverCard openDelay={200}>
+                  <HoverCardTrigger asChild>
+                    <Badge
+                      variant="secondary"
+                      className="cursor-pointer border border-border bg-muted/50 font-medium text-[10px] text-muted-foreground hover:bg-muted"
+                    >
+                      +{hiddenBadges.length}
+                    </Badge>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    side="top"
+                    align="start"
+                    className="flex w-auto max-w-xs flex-col gap-2 p-2"
+                  >
+                    <div className="text-center font-semibold text-sm">
+                      {t('other_properties')}
+                    </div>
+                    <div className="border" />
+                    <div className="flex flex-col gap-2">
+                      {hiddenBadges.map((badge) => badge.element)}
+                    </div>
+                  </HoverCardContent>
+                </HoverCard>
+              )}
+              {/* Description indicators */}
+              {(descriptionMeta.hasText ||
+                descriptionMeta.hasImages ||
+                descriptionMeta.hasVideos ||
+                descriptionMeta.hasLinks) && (
+                <div
+                  ref={descriptionMetaRef}
+                  className="flex min-w-0 shrink-0 items-center gap-0.5"
+                >
+                  {descriptionMeta.hasText && (
+                    <div
+                      className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
+                      title={t('has_description')}
+                    >
+                      <FileText className="h-3.5 w-3.5 text-muted-foreground" />
+                    </div>
+                  )}
+                  {descriptionMeta.hasImages && (
+                    <div
+                      className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
+                      title={t('n_images', {
+                        count: descriptionMeta.imageCount,
+                      })}
+                    >
+                      <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                      {descriptionMeta.imageCount > 1 && (
+                        <span className="text-[9px] text-muted-foreground">
+                          {descriptionMeta.imageCount}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {descriptionMeta.hasVideos && (
+                    <div
+                      className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 py-0.5"
+                      title={t('n_videos', {
+                        count: descriptionMeta.videoCount,
+                      })}
+                    >
+                      <Play className="h-3.5 w-3.5 text-muted-foreground" />
+                      {descriptionMeta.videoCount > 1 && (
+                        <span className="text-[9px] text-muted-foreground">
+                          {descriptionMeta.videoCount}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                  {descriptionMeta.hasLinks && (
+                    <div
+                      className="flex items-center gap-0.5 rounded bg-dynamic-surface/50 px-1 py-0.5"
+                      title={t('n_links', { count: descriptionMeta.linkCount })}
+                    >
+                      <Link2 className="h-2.5 w-2.5 text-muted-foreground" />
+                      {descriptionMeta.linkCount > 1 && (
+                        <span className="text-[9px] text-muted-foreground">
+                          {descriptionMeta.linkCount}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+            <div className="flex min-h-5 items-center gap-2 sm:min-h-6">
+              {!isPersonalWorkspace && (
+                <TaskViewerAvatarsComponent taskId={task.id} />
+              )}
+
+              {/* Checkbox: hidden for documents lists */}
+              {taskList?.status !== 'documents' && (
+                <TaskCardCheckbox
+                  task={task}
+                  taskList={taskList}
+                  isLoading={isLoading}
+                  onToggle={handleArchiveToggle}
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      <TaskDeleteDialog
+        task={task}
+        open={dialogState.deleteDialogOpen}
+        isLoading={isLoading}
+        onOpenChange={(open) =>
+          open
+            ? dialogActions.openDeleteDialog()
+            : dialogActions.closeDeleteDialog()
+        }
+        onConfirm={handleDelete}
+        translations={{
+          delete_task: t('delete_task'),
+          delete_task_confirmation: t('delete_task_confirmation', {
+            name: task.name ?? '',
+          }),
+          cancel: t('cancel'),
+          deleting: t('deleting'),
+        }}
+      />
+      {effectiveWorkspaceId && (
+        <CreateListDialog
+          open={isCreateListDialogOpen}
+          onOpenChange={setIsCreateListDialogOpen}
+          boardId={boardId}
+          wsId={effectiveWorkspaceId}
+          initialStatus="active"
+          onSuccess={(listId) => {
+            handleMoveToList(listId);
+          }}
+          translations={{
+            listNameAlreadyExists: taskBoardT(
+              'ws-task-boards.layout_settings.list_name_exists'
+            ),
+          }}
+        />
+      )}
+      <TaskNewLabelDialog
+        open={dialogState.newLabelDialogOpen}
+        newLabelName={newLabelName}
+        newLabelColor={newLabelColor}
+        creatingLabel={creatingLabel}
+        onNameChange={setNewLabelName}
+        onColorChange={setNewLabelColor}
+        onOpenChange={(open) =>
+          open ? openNewLabelDialog() : dialogActions.closeNewLabelDialog()
+        }
+        onConfirm={async () => {
+          const result = await createNewLabel();
+          if (result) dialogActions.closeNewLabelDialog();
+        }}
+        translations={{
+          create_new_label: t('create_new_label'),
+          create_new_label_description: t('create_new_label_description'),
+          label_name: t('label_name'),
+          color: t('color'),
+          preview: t('preview'),
+          cancel: t('cancel'),
+          creating: t('creating'),
+          create_label: t('create_label'),
+          randomize_color: t('randomize_color'),
+        }}
+      />
+
+      <TaskNewProjectDialog
+        open={dialogState.newProjectDialogOpen}
+        newProjectName={newProjectName}
+        creatingProject={creatingProject}
+        onNameChange={setNewProjectName}
+        onOpenChange={(open) =>
+          open
+            ? dialogActions.openNewProjectDialog()
+            : dialogActions.closeNewProjectDialog()
+        }
+        onConfirm={async () => {
+          const result = await createNewProject();
+          if (result) dialogActions.closeNewProjectDialog();
+        }}
+        translations={{
+          create_new_project: t('create_new_project'),
+          create_new_project_description: t('create_new_project_description'),
+          project_name: t('project_name'),
+          cancel: t('cancel'),
+          creating: t('creating'),
+          create_project: t('create_project'),
+        }}
+      />
+
+      <TaskCustomDateDialog
+        open={dialogState.customDateDialogOpen}
+        endDate={task.end_date ?? null}
+        isLoading={isLoading}
+        onOpenChange={(open) =>
+          open
+            ? dialogActions.openCustomDateDialog()
+            : dialogActions.closeCustomDateDialog()
+        }
+        onDateChange={handleCustomDateChange}
+        onClear={() => {
+          handleDueDateChange(null);
+          dialogActions.closeCustomDateDialog();
+        }}
+        translations={{
+          set_custom_due_date: t('set_custom_due_date'),
+          custom_due_date_description: t('custom_due_date_description'),
+          cancel: t('cancel'),
+          remove_due_date: t('remove_due_date'),
+        }}
+      />
+      {taskShareWsId && (
+        <TaskShareDialog
+          open={shareDialogOpen}
+          onOpenChange={setShareDialogOpen}
+          taskId={task.id}
+          taskName={task.name ?? ''}
+          wsId={taskShareWsId}
+        />
+      )}
+
+      {!isOverlay && !isPersonalExternalTask && (
+        <TaskActions taskId={task.id} boardId={boardId} onUpdate={onUpdate} />
+      )}
+    </Card>
+  );
+}
+
+export const TaskCard = React.memo(TaskCardInner, areTaskCardPropsEqual);