@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/text-editor/task-mention-chip.tsx

@@ -0,0 +1,1397 @@
+'use client';
+
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { Editor } from '@tiptap/react';
+import {
+  AlertCircle,
+  Ban,
+  CheckCircle2,
+  CircleSlash,
+  Copy,
+  ExternalLink,
+  Trash2,
+} from '@tuturuuu/icons';
+import {
+  cleanupWorkspaceTaskMentions,
+  listWorkspaceTaskLists,
+  listWorkspaceTaskProjects,
+} from '@tuturuuu/internal-api';
+import type { Task } from '@tuturuuu/types/primitives/Task';
+import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
+import { cn } from '@tuturuuu/utils/format';
+import {
+  useBoardConfig,
+  useWorkspaceLabels,
+} from '@tuturuuu/utils/task-helper';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDomResolvedTheme } from '../../../hooks/use-dom-resolved-theme';
+import { useTaskActions } from '../../../hooks/use-task-actions';
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar';
+import { Badge } from '../badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { toast } from '../sonner';
+import {
+  TaskAssigneesMenu,
+  TaskBlockingMenu,
+  TaskDueDateMenu,
+  TaskEstimationMenu,
+  TaskLabelsMenu,
+  TaskMoveMenu,
+  TaskParentMenu,
+  TaskPriorityMenu,
+  TaskProjectsMenu,
+  TaskRelatedMenu,
+} from '../tu-do/boards/boardId/menus';
+import { TaskCustomDateDialog } from '../tu-do/boards/boardId/task-dialogs/TaskCustomDateDialog';
+import { TaskDeleteDialog } from '../tu-do/boards/boardId/task-dialogs/TaskDeleteDialog';
+import { TaskNewLabelDialog } from '../tu-do/boards/boardId/task-dialogs/TaskNewLabelDialog';
+import { TaskNewProjectDialog } from '../tu-do/boards/boardId/task-dialogs/TaskNewProjectDialog';
+import { useTaskCardRelationships } from '../tu-do/hooks/useTaskCardRelationships';
+import { useTaskLabelManagement } from '../tu-do/hooks/useTaskLabelManagement';
+import { useTaskProjectManagement } from '../tu-do/hooks/useTaskProjectManagement';
+import { CreateListDialog } from '../tu-do/shared/create-list-dialog';
+import { buildWorkspaceTaskUrl } from '../tu-do/shared/task-url';
+import { computeAccessibleLabelStyles } from '../tu-do/utils/label-colors';
+import {
+  getAssigneeInitials,
+  getTicketBadgeColorClasses,
+} from '../tu-do/utils/taskColorUtils';
+import { getPriorityIcon } from '../tu-do/utils/taskPriorityUtils';
+import {
+  getRouteTaskBoardIdFromPathname,
+  getRouteWorkspaceIdFromPathname,
+  resolveTaskMentionPayload,
+} from './task-mention-resolution';
+import { TaskSummaryPopover } from './task-summary-popover';
+
+/**
+ * Remove all mention nodes for a specific task from the editor
+ * @param editor - The Tiptap editor instance
+ * @param taskId - The ID of the task to remove mentions for
+ * @returns Number of mentions removed
+ */
+const removeTaskMentionsFromEditor = (
+  editor: Editor,
+  taskId: string
+): number => {
+  let removedCount = 0;
+
+  // Use a single transaction to delete all mentions
+  editor.commands.command(({ tr, state }) => {
+    const nodesToDelete: Array<{ from: number; to: number }> = [];
+
+    // Find all mention nodes for this task
+    state.doc.descendants((node, pos) => {
+      if (
+        node.type.name === 'mention' &&
+        node.attrs.entityType === 'task' &&
+        node.attrs.entityId === taskId
+      ) {
+        nodesToDelete.push({ from: pos, to: pos + node.nodeSize });
+      }
+    });
+
+    // Delete in reverse order to maintain correct positions
+    // When deleting from end to start, earlier positions remain valid
+    nodesToDelete
+      .sort((a, b) => b.from - a.from) // Sort by position descending
+      .forEach(({ from, to }) => {
+        tr.delete(from, to);
+        removedCount++;
+      });
+
+    return true;
+  });
+
+  return removedCount;
+};
+
+/**
+ * Clean up task mentions from all other tasks in the workspace (non-blocking background operation)
+ * @param deletedTaskId - The ID of the deleted task
+ * @param wsId - The workspace ID
+ * @param queryClient - The React Query client for cache invalidation
+ */
+const cleanupTaskMentionsGlobally = async (
+  deletedTaskId: string,
+  wsId: string,
+  _queryClient: ReturnType<typeof useQueryClient>
+): Promise<void> => {
+  try {
+    await cleanupWorkspaceTaskMentions(wsId, deletedTaskId);
+  } catch (error) {
+    console.error('Failed to clean up task mentions globally:', error);
+  }
+};
+
+// Extended Task type that includes board_id (denormalized field in database)
+interface TaskWithBoardId extends Task {
+  board_id: string;
+}
+
+interface TaskMentionChipProps {
+  entityId: string;
+  displayNumber: string;
+  avatarUrl?: string | null;
+  subtitle?: string | null;
+  workspaceId?: string | null;
+  className?: string;
+  editor?: Editor | null;
+  onResolvedTaskMention?: (attrs: {
+    avatarUrl?: string | null;
+    displayName: string;
+    entityId: string;
+    priority?: string | null;
+    subtitle?: string | null;
+    workspaceId?: string | null;
+  }) => void;
+  /** Optional translations for dialogs (for use in isolated React roots) */
+  translations?: {
+    // TaskDeleteDialog
+    delete_task?: string;
+    delete_task_confirmation?: string | ((name: string) => string);
+    cancel?: string;
+    deleting?: string;
+    // TaskCustomDateDialog
+    set_custom_due_date?: string;
+    custom_due_date_description?: string;
+    remove_due_date?: string;
+    // TaskNewLabelDialog
+    create_new_label?: string;
+    create_new_label_description?: string;
+    label_name?: string;
+    color?: string;
+    preview?: string;
+    creating?: string;
+    create_label?: string;
+    // TaskNewProjectDialog
+    create_new_project?: string;
+    create_new_project_description?: string;
+    project_name?: string;
+    create_project?: string;
+    // TaskLabelsDisplay
+    hidden_labels?: string;
+  };
+}
+
+export function TaskMentionChip({
+  entityId,
+  displayNumber,
+  avatarUrl,
+  subtitle,
+  className,
+  editor: editorProp,
+  onResolvedTaskMention,
+  translations,
+}: TaskMentionChipProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [menuGuardUntil, setMenuGuardUntil] = useState(0);
+  const resolvedMentionRef = useRef<string | null>(null);
+  const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
+  const queryClient = useQueryClient();
+  const routeWsId = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    return getRouteWorkspaceIdFromPathname(window.location.pathname);
+  }, []);
+  const routeBoardId = useMemo(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+
+    return getRouteTaskBoardIdFromPathname(window.location.pathname);
+  }, []);
+  const resolutionWorkspaceId = routeWsId;
+  const taskMentionQueryKey = useMemo(
+    () => [
+      'task',
+      'mention',
+      entityId,
+      resolutionWorkspaceId ?? null,
+      routeBoardId ?? null,
+      displayNumber.trim(),
+      subtitle?.trim() ?? null,
+    ],
+    [displayNumber, entityId, resolutionWorkspaceId, routeBoardId, subtitle]
+  );
+  const isDark = useDomResolvedTheme() === 'dark';
+
+  // Dialog states
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showCustomDateDialog, setShowCustomDateDialog] = useState(false);
+  const [showCreateListDialog, setShowCreateListDialog] = useState(false);
+  const [showNewLabelDialog, setShowNewLabelDialog] = useState(false);
+  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+
+  // Fetch full task data - load immediately to show priority, assignees, and colors
+  const {
+    data: taskPayload,
+    isLoading: taskLoading,
+    error: taskError,
+  } = useQuery({
+    queryKey: taskMentionQueryKey,
+    queryFn: async () => {
+      return resolveTaskMentionPayload({
+        displayNumber,
+        entityId,
+        routeBoardId,
+        routeWorkspaceId: resolutionWorkspaceId,
+        subtitle,
+      });
+    },
+    enabled: true, // Always load to show inline metadata
+    staleTime: 30000,
+    retry: false,
+  });
+
+  const task = taskPayload?.task as TaskWithBoardId | undefined;
+  const resolvedTaskId = task?.id ?? entityId;
+  const taskWorkspaceId = taskPayload?.taskWsId;
+  const taskWorkspacePersonal = taskPayload?.taskWorkspacePersonal;
+  const canonicalWorkspaceId = taskWorkspaceId ?? routeWsId;
+  const boardWorkspaceId = canonicalWorkspaceId;
+  const resolvedTaskBelongsToRouteWorkspace = useMemo(() => {
+    if (!routeWsId || !taskWorkspaceId) {
+      return false;
+    }
+
+    if (taskWorkspaceId === routeWsId) {
+      return true;
+    }
+
+    return routeWsId === 'personal' && taskWorkspacePersonal === true;
+  }, [routeWsId, taskWorkspaceId, taskWorkspacePersonal]);
+
+  // Get board config - only fetch when menu opens and we have task data
+  const { data: boardConfig } = useBoardConfig(
+    task?.board_id,
+    boardWorkspaceId
+  );
+  const actionWorkspaceId = boardConfig?.ws_id ?? canonicalWorkspaceId;
+
+  // Fetch workspace labels
+  const { data: workspaceLabels = [], isLoading: labelsLoading } =
+    useWorkspaceLabels(actionWorkspaceId);
+
+  // Fetch workspace projects
+  const { data: workspaceProjects = [], isLoading: projectsLoading } = useQuery(
+    {
+      queryKey: ['task_projects', actionWorkspaceId],
+      queryFn: async () => {
+        if (!actionWorkspaceId) return [];
+        const data = await listWorkspaceTaskProjects(actionWorkspaceId);
+        return data.filter((project) => project.status !== 'deleted');
+      },
+      enabled: !!actionWorkspaceId && menuOpen,
+      staleTime: 10 * 60 * 1000,
+    }
+  );
+
+  // Fetch workspace members
+  const { data: workspaceMembers = [], isLoading: membersLoading } =
+    useWorkspaceMembers(actionWorkspaceId, {
+      enabled: !!actionWorkspaceId && menuOpen, // Only needed for editing
+    });
+
+  // Fetch available task lists - enable when we have task data to get current list color
+  const { data: availableLists = [] } = useQuery({
+    queryKey: ['task_lists', task?.board_id, actionWorkspaceId],
+    queryFn: async () => {
+      if (taskPayload?.availableLists?.length) {
+        return taskPayload.availableLists as TaskList[];
+      }
+      if (!task?.board_id || !actionWorkspaceId) return [];
+      const payload = await listWorkspaceTaskLists(
+        actionWorkspaceId,
+        task.board_id
+      );
+      return payload.lists as TaskList[];
+    },
+    enabled: !!task?.board_id, // Load when we have task data
+    staleTime: 10 * 60 * 1000,
+  });
+
+  // Get current task's list for color rendering
+  const currentTaskList = useMemo(() => {
+    if (!task || !availableLists.length) return null;
+    return availableLists.find((list) => list.id === task.list_id) || null;
+  }, [task, availableLists]);
+
+  // Placeholder task for hooks when task is not loaded yet
+  const placeholderTask: Task = useMemo(
+    () => ({
+      id: entityId,
+      name: displayNumber,
+      list_id: '',
+      display_number: 0,
+      created_at: new Date().toISOString(),
+    }),
+    [entityId, displayNumber]
+  );
+
+  // Use label management hook - only when we have task
+  const {
+    toggleTaskLabel: baseToggleTaskLabel,
+    createNewLabel: baseCreateNewLabel,
+    newLabelName,
+    setNewLabelName,
+    newLabelColor,
+    setNewLabelColor,
+    creatingLabel,
+  } = useTaskLabelManagement({
+    task: task ?? placeholderTask,
+    boardId: task?.board_id || '',
+    workspaceLabels,
+    workspaceId: actionWorkspaceId,
+    selectedTasks: undefined,
+    isMultiSelectMode: false,
+    onClearSelection: undefined,
+    taskId: resolvedTaskId, // Pass resolved task ID to sync individual task cache
+  });
+
+  // Use project management hook - only when we have task
+  const {
+    toggleTaskProject: baseToggleTaskProject,
+    newProjectName,
+    setNewProjectName,
+    creatingProject,
+    createNewProject: baseCreateNewProject,
+  } = useTaskProjectManagement({
+    task: task ?? placeholderTask,
+    boardId: task?.board_id || '',
+    workspaceProjects,
+    workspaceId: actionWorkspaceId,
+    selectedTasks: undefined,
+    isMultiSelectMode: false,
+    onClearSelection: undefined,
+    taskId: resolvedTaskId, // Pass resolved task ID to sync individual task cache
+  });
+
+  // Use task relationships hook - only when we have task
+  const {
+    parentTask,
+    childTasks,
+    blocking: blockingTasks,
+    blockedBy: blockedByTasks,
+    relatedTasks,
+    setParentTask,
+    removeParentTask,
+    addBlockingTask,
+    removeBlockingTask,
+    addBlockedByTask,
+    removeBlockedByTask,
+    addRelatedTask,
+    removeRelatedTask,
+    isSaving: relationshipSaving,
+    savingTaskId: relationshipSavingTaskId,
+  } = useTaskCardRelationships({
+    taskId: task?.id || '',
+    boardId: task?.board_id || '',
+    wsId: actionWorkspaceId,
+  });
+
+  const targetCompletionList = useMemo(() => {
+    if (!task) return null;
+    const doneList = availableLists.find((list) => list.status === 'done');
+    const closedList = availableLists.find((list) => list.status === 'closed');
+    return doneList || closedList || null;
+  }, [availableLists, task]);
+
+  const targetClosedList = useMemo(() => {
+    if (!task) return null;
+    return availableLists.find((list) => list.status === 'closed') || null;
+  }, [availableLists, task]);
+
+  const handleUpdate = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['task', 'mention'] });
+    queryClient.invalidateQueries({ queryKey: ['task', entityId] });
+    if (resolvedTaskId !== entityId) {
+      queryClient.invalidateQueries({ queryKey: ['task', resolvedTaskId] });
+    }
+    if (task?.board_id) {
+      queryClient.invalidateQueries({ queryKey: ['tasks', task.board_id] });
+    }
+  }, [queryClient, entityId, resolvedTaskId, task?.board_id]);
+
+  // Helper to sync individual task cache with updates
+  // Supports both direct updates and functional updates for operations that depend on current state
+  const syncTaskCache = useCallback(
+    (
+      updatesOrFn:
+        | Partial<TaskWithBoardId>
+        | ((current: TaskWithBoardId) => Partial<TaskWithBoardId>)
+    ) => {
+      const cacheTaskIds = Array.from(new Set([entityId, resolvedTaskId]));
+
+      for (const cacheTaskId of cacheTaskIds) {
+        queryClient.setQueryData(
+          ['task', cacheTaskId],
+          (old: TaskWithBoardId | undefined) => {
+            if (!old) return old;
+            const updates =
+              typeof updatesOrFn === 'function'
+                ? updatesOrFn(old)
+                : updatesOrFn;
+            return { ...old, ...updates };
+          }
+        );
+      }
+    },
+    [queryClient, entityId, resolvedTaskId]
+  );
+
+  // Use task actions hook - only when we have task
+  const {
+    handleMoveToCompletion: baseHandleMoveToCompletion,
+    handleMoveToClose: baseHandleMoveToClose,
+    handleDelete: baseHandleDelete,
+    handleMoveToList: baseHandleMoveToList,
+    handleDueDateChange: baseHandleDueDateChange,
+    handlePriorityChange: baseHandlePriorityChange,
+    updateEstimationPoints: baseUpdateEstimationPoints,
+    handleCustomDateChange: baseHandleCustomDateChange,
+    handleToggleAssignee: baseHandleToggleAssignee,
+  } = useTaskActions({
+    task: task || undefined,
+    boardId: task?.board_id || '',
+    workspaceId: actionWorkspaceId,
+    targetCompletionList,
+    targetClosedList,
+    availableLists,
+    onUpdate: handleUpdate,
+    setIsLoading,
+    setMenuOpen,
+    setCustomDateDialogOpen: setShowCustomDateDialog,
+    setDeleteDialogOpen: setShowDeleteDialog,
+    setEstimationSaving: () => {},
+    selectedTasks: undefined,
+    isMultiSelectMode: false,
+    onClearSelection: undefined,
+    taskId: resolvedTaskId, // Pass resolved task ID to sync individual task cache
+  });
+
+  // Wrap handlers to also sync individual task cache
+  const handleMoveToCompletion = useCallback(async () => {
+    if (targetCompletionList) {
+      syncTaskCache({
+        list_id: targetCompletionList.id,
+        closed_at: new Date().toISOString(),
+        completed_at:
+          targetCompletionList.status === 'done'
+            ? new Date().toISOString()
+            : task?.completed_at,
+      });
+    }
+    return baseHandleMoveToCompletion();
+  }, [
+    baseHandleMoveToCompletion,
+    syncTaskCache,
+    targetCompletionList,
+    task?.completed_at,
+  ]);
+
+  const handleMoveToClose = useCallback(async () => {
+    if (targetClosedList) {
+      syncTaskCache({
+        list_id: targetClosedList.id,
+        closed_at: new Date().toISOString(),
+      });
+    }
+    return baseHandleMoveToClose();
+  }, [baseHandleMoveToClose, syncTaskCache, targetClosedList]);
+
+  const handleDelete = useCallback(async () => {
+    if (!task) return;
+
+    const taskId = task.id;
+
+    // Perform deletion
+    await baseHandleDelete();
+
+    // Phase 1: Clean up mentions from current editor (immediate)
+    const editor = editorProp;
+
+    if (editor) {
+      const removedCount = removeTaskMentionsFromEditor(editor, taskId);
+      if (removedCount > 0) {
+        console.log(
+          `Removed ${removedCount} mention(s) of task ${taskId} from current editor`
+        );
+      }
+    }
+
+    // Phase 2: Clean up mentions from all other tasks (non-blocking background operation)
+    if (actionWorkspaceId) {
+      cleanupTaskMentionsGlobally(taskId, actionWorkspaceId, queryClient).catch(
+        (error) => {
+          console.error('Failed to clean up task mentions globally:', error);
+          // Don't show error to user - this is background cleanup
+        }
+      );
+    }
+  }, [actionWorkspaceId, baseHandleDelete, task, queryClient, editorProp]);
+
+  const handleMoveToList = useCallback(
+    async (targetListId: string) => {
+      const targetList = availableLists.find((l) => l.id === targetListId);
+      const isCompletionList =
+        targetList?.status === 'done' || targetList?.status === 'closed';
+      const now = new Date().toISOString();
+      syncTaskCache({
+        list_id: targetListId,
+        ...(isCompletionList ? { closed_at: now } : { closed_at: undefined }),
+        ...(targetList?.status === 'done'
+          ? { completed_at: now }
+          : { completed_at: undefined }),
+      } as Partial<TaskWithBoardId>);
+      return baseHandleMoveToList(targetListId);
+    },
+    [baseHandleMoveToList, syncTaskCache, availableLists]
+  );
+
+  const handleDueDateChange = useCallback(
+    async (days: number | null) => {
+      let newDate: string | null = null;
+      if (days !== null) {
+        const target = new Date();
+        target.setDate(target.getDate() + days);
+        target.setHours(23, 59, 59, 999);
+        newDate = target.toISOString();
+      }
+      syncTaskCache({ end_date: newDate });
+      return baseHandleDueDateChange(days);
+    },
+    [baseHandleDueDateChange, syncTaskCache]
+  );
+
+  const handlePriorityChange = useCallback(
+    async (newPriority: Parameters<typeof baseHandlePriorityChange>[0]) => {
+      syncTaskCache({ priority: newPriority });
+      return baseHandlePriorityChange(newPriority);
+    },
+    [baseHandlePriorityChange, syncTaskCache]
+  );
+
+  const updateEstimationPoints = useCallback(
+    async (points: number | null) => {
+      syncTaskCache({ estimation_points: points });
+      return baseUpdateEstimationPoints(points);
+    },
+    [baseUpdateEstimationPoints, syncTaskCache]
+  );
+
+  const handleCustomDateChange = useCallback(
+    async (date: Date | undefined) => {
+      let newDate: string | null = null;
+      if (date) {
+        const selectedDate = new Date(date);
+        if (
+          selectedDate.getHours() === 0 &&
+          selectedDate.getMinutes() === 0 &&
+          selectedDate.getSeconds() === 0 &&
+          selectedDate.getMilliseconds() === 0
+        ) {
+          selectedDate.setHours(23, 59, 59, 999);
+        }
+        newDate = selectedDate.toISOString();
+      }
+      syncTaskCache({ end_date: newDate });
+      return baseHandleCustomDateChange(date);
+    },
+    [baseHandleCustomDateChange, syncTaskCache]
+  );
+
+  const onToggleAssignee = useCallback(
+    (assigneeId: string) => {
+      if (!task) return;
+      return baseHandleToggleAssignee(assigneeId);
+    },
+    [baseHandleToggleAssignee, task]
+  );
+
+  // Wrap label toggle - base function handles all cache updates
+  const toggleTaskLabel = useCallback(
+    async (labelId: string) => {
+      if (!task) return;
+      // Base function handles optimistic updates to both caches
+      return baseToggleTaskLabel(labelId);
+    },
+    [baseToggleTaskLabel, task]
+  );
+
+  // Wrap project toggle - base function handles all cache updates
+  const toggleTaskProject = useCallback(
+    async (projectId: string) => {
+      if (!task) return;
+      // Base function handles optimistic updates to both caches
+      return baseToggleTaskProject(projectId);
+    },
+    [baseToggleTaskProject, task]
+  );
+
+  // Wrap create new label - base function handles cache updates
+  const createNewLabel = useCallback(async () => {
+    // Base function handles optimistic updates to both caches
+    return baseCreateNewLabel();
+  }, [baseCreateNewLabel]);
+
+  // Wrap create new project - base function handles cache updates
+  const createNewProject = useCallback(async () => {
+    // Base function handles optimistic updates to both caches
+    return baseCreateNewProject();
+  }, [baseCreateNewProject]);
+
+  // Guarded select handler for menu items
+  const handleMenuItemSelect = useCallback(
+    (e: Event, action: () => void) => {
+      if (Date.now() < menuGuardUntil) {
+        if (e && typeof (e as any).preventDefault === 'function') {
+          (e as any).preventDefault();
+        }
+        return;
+      }
+      action();
+    },
+    [menuGuardUntil]
+  );
+
+  // Derive actual display number - prefer fetched task data over props
+  // This fixes legacy mentions where task name was stored instead of display number
+  const actualDisplayNumber = useMemo(() => {
+    // If we have task data with a valid display_number, use it
+    if (task?.display_number !== undefined && task.display_number !== null) {
+      return String(task.display_number);
+    }
+    // Otherwise use the prop (for new mentions, this should be correct)
+    return displayNumber;
+  }, [task?.display_number, displayNumber]);
+
+  // Derive actual task name - prefer fetched task data over subtitle prop
+  const actualTaskName = useMemo(() => {
+    // If we have task data with a name, use it
+    if (task?.name) {
+      return task.name;
+    }
+    // For legacy mentions where displayNumber might be the task name
+    // and subtitle is also the task name, use subtitle
+    return subtitle || null;
+  }, [task?.name, subtitle]);
+
+  useEffect(() => {
+    if (!task || task.id === entityId || !resolvedTaskBelongsToRouteWorkspace) {
+      return;
+    }
+
+    queryClient.setQueryData(['task', task.id], taskPayload);
+
+    if (resolvedMentionRef.current === task.id) {
+      return;
+    }
+
+    resolvedMentionRef.current = task.id;
+    onResolvedTaskMention?.({
+      avatarUrl,
+      displayName:
+        typeof task.display_number === 'number'
+          ? String(task.display_number)
+          : actualDisplayNumber,
+      entityId: task.id,
+      priority: task.priority ?? null,
+      subtitle: task.name ?? subtitle ?? null,
+      workspaceId: actionWorkspaceId ?? null,
+    });
+  }, [
+    actionWorkspaceId,
+    actualDisplayNumber,
+    avatarUrl,
+    entityId,
+    onResolvedTaskMention,
+    queryClient,
+    resolvedTaskBelongsToRouteWorkspace,
+    subtitle,
+    task,
+    taskPayload,
+  ]);
+
+  const showTaskResolutionError = useCallback(
+    (fallbackDescription?: string) => {
+      const description =
+        taskError instanceof Error
+          ? taskError.message
+          : (fallbackDescription ??
+            'The linked task could not be resolved from the current mention.');
+
+      toast.error(`Failed to resolve linked task #${actualDisplayNumber}`, {
+        description: `${description} (task id: ${resolvedTaskId})`,
+      });
+    },
+    [actualDisplayNumber, resolvedTaskId, taskError]
+  );
+
+  const getTaskUrl = () => {
+    const wsId = actionWorkspaceId;
+    const boardId = task?.board_id ?? currentTaskList?.board_id ?? null;
+    if (!wsId || !boardId || typeof window === 'undefined') return null;
+    return buildWorkspaceTaskUrl({
+      boardId,
+      currentPathname: window.location.pathname,
+      origin: window.location.origin,
+      taskId: resolvedTaskId,
+      workspaceId: wsId,
+      isPersonalWorkspace: taskWorkspacePersonal,
+    });
+  };
+
+  const handleGoToTask = () => {
+    const taskUrl = getTaskUrl();
+    if (!taskUrl) {
+      showTaskResolutionError('Task link is not available yet.');
+      return;
+    }
+
+    const openedWindow = window.open(taskUrl, '_blank', 'noopener,noreferrer');
+    if (!openedWindow) {
+      showTaskResolutionError(
+        'The browser blocked the task window from opening.'
+      );
+      return;
+    }
+
+    setMenuOpen(false);
+  };
+
+  const handleCopyTaskLink = async () => {
+    const taskUrl = getTaskUrl();
+    if (!taskUrl) {
+      showTaskResolutionError('Task link is not available yet.');
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(taskUrl);
+      toast.success('Task link copied to clipboard');
+    } catch {
+      toast.error('Failed to copy link');
+    }
+    setMenuOpen(false);
+    setPopoverOpen(false);
+  };
+
+  const title = actualTaskName
+    ? `#${actualDisplayNumber} • ${actualTaskName}`
+    : `#${actualDisplayNumber}`;
+  const canOpenTaskMention = !!task && !taskLoading && !taskError;
+
+  // Get styling based on task list color or priority
+  const chipColorClasses = useMemo(() => {
+    return getTicketBadgeColorClasses(
+      currentTaskList || undefined,
+      task?.priority || undefined
+    );
+  }, [currentTaskList, task?.priority]);
+
+  const chipContent = (
+    <span
+      data-mention="true"
+      data-entity-id={resolvedTaskId}
+      data-entity-type="task"
+      data-display-number={displayNumber}
+      data-avatar-url={avatarUrl ?? ''}
+      data-subtitle={subtitle ?? ''}
+      data-priority={task?.priority ?? ''}
+      data-list-color={currentTaskList?.color ?? ''}
+      data-workspace-id={actionWorkspaceId ?? ''}
+      title={title}
+      aria-disabled={!canOpenTaskMention}
+      contentEditable={false}
+      onClick={(e) => {
+        if (!canOpenTaskMention) {
+          return;
+        }
+
+        e.stopPropagation();
+        (e as any).stopImmediatePropagation?.();
+        e.preventDefault();
+
+        setPopoverOpen((prev) => !prev);
+      }}
+      onContextMenu={(e) => {
+        if (!canOpenTaskMention) {
+          return;
+        }
+
+        e.stopPropagation();
+        (e as any).stopImmediatePropagation?.();
+        e.preventDefault();
+        // Right-click: close popover and open dropdown menu after delay
+        setPopoverOpen(false);
+        // Delay to let popover close animation complete before opening menu
+        setTimeout(() => {
+          setMenuOpen(true);
+          setMenuGuardUntil(Date.now() + 300);
+        }, 50);
+      }}
+      className={cn(
+        'inline-flex items-center gap-1 rounded-full border py-0.5 pr-1 pl-2 font-medium text-[12px] leading-normal transition-colors',
+        chipColorClasses,
+        canOpenTaskMention
+          ? 'cursor-pointer hover:opacity-80'
+          : taskLoading
+            ? 'cursor-progress opacity-90'
+            : 'cursor-default opacity-70',
+        className
+      )}
+    >
+      {/* Chip content - updated 2025-12-26 */}
+      {/* Task Number - use derived value for legacy mention support */}
+      <span className="font-semibold">#{actualDisplayNumber}</span>
+
+      {/* Priority Icon */}
+      {task?.priority && (
+        <span className="flex items-center justify-center">
+          {getPriorityIcon(task.priority, 'h-3 w-3')}
+        </span>
+      )}
+
+      {/* Dot separator between priority and blocked icon */}
+      <span className="opacity-50">•</span>
+
+      {/* Blocked indicator - show if task has blocking tasks */}
+      {blockedByTasks.length > 0 && (
+        <span
+          className="flex items-center justify-center text-dynamic-red"
+          title={`Blocked by ${blockedByTasks.length} task${blockedByTasks.length > 1 ? 's' : ''}`}
+        >
+          <Ban className="h-3 w-3" />
+        </span>
+      )}
+
+      {/* Task Name - use derived value for legacy mention support, with priority color */}
+      {actualTaskName && (
+        <span className={cn('max-w-50 truncate font-medium')}>
+          {actualTaskName}
+        </span>
+      )}
+
+      {/* Assignee Avatars */}
+      {task?.assignees && task.assignees.length > 0 && (
+        <span className="ml-1 flex -space-x-1">
+          {task.assignees.slice(0, 3).map((assignee) => (
+            <Avatar
+              key={assignee.id}
+              className="h-4 w-4 border border-background"
+              title={assignee.display_name || 'Unknown'}
+            >
+              {assignee.avatar_url && (
+                <AvatarImage
+                  src={assignee.avatar_url}
+                  alt={assignee.display_name || 'User'}
+                  referrerPolicy="no-referrer"
+                />
+              )}
+              <AvatarFallback className="text-[8px]">
+                {getAssigneeInitials(assignee.display_name, null)}
+              </AvatarFallback>
+            </Avatar>
+          ))}
+          {task.assignees.length > 3 && (
+            <span className="flex h-4 w-4 items-center justify-center rounded-full border border-background bg-muted font-medium text-[8px]">
+              +{task.assignees.length - 3}
+            </span>
+          )}
+        </span>
+      )}
+
+      {/* Labels with cross-theme accessible colors - using same strategy as TaskLabelsDisplay */}
+      {task?.labels && task.labels.length > 0 && (
+        <span className="flex items-center gap-0.5">
+          {task.labels.slice(0, 2).map((label) => {
+            const styles = computeAccessibleLabelStyles(label.color, isDark);
+            return (
+              <Badge
+                key={label.id}
+                variant="outline"
+                className="inline-flex h-4 max-w-16 items-center gap-0.5 truncate rounded-full border px-1 font-medium text-[8px] ring-0"
+                style={
+                  styles
+                    ? {
+                        backgroundColor: styles.bg,
+                        borderColor: styles.border,
+                        color: styles.text,
+                      }
+                    : undefined
+                }
+                title={label.name}
+              >
+                <span className="truncate">{label.name}</span>
+              </Badge>
+            );
+          })}
+          {task.labels.length > 2 && (
+            <Badge
+              variant="outline"
+              className="inline-flex h-4 items-center border-dashed px-1 font-medium text-[8px] opacity-80"
+            >
+              +{task.labels.length - 2}
+            </Badge>
+          )}
+        </span>
+      )}
+    </span>
+  );
+
+  const canMoveToCompletion =
+    targetCompletionList && targetCompletionList.id !== task?.list_id;
+  const canMoveToClose =
+    targetClosedList && targetClosedList.id !== task?.list_id;
+
+  const menuItems = task ? (
+    <>
+      <DropdownMenuItem onClick={handleGoToTask} className="cursor-pointer">
+        <ExternalLink className="mr-2 h-4 w-4" />
+        Go to task
+      </DropdownMenuItem>
+
+      <DropdownMenuItem onClick={handleCopyTaskLink} className="cursor-pointer">
+        <Copy className="mr-2 h-4 w-4" />
+        Copy task link
+      </DropdownMenuItem>
+
+      <DropdownMenuSeparator />
+
+      {/* Quick Completion Actions */}
+      {canMoveToCompletion && (
+        <DropdownMenuItem
+          onSelect={(e) =>
+            handleMenuItemSelect(e as unknown as Event, handleMoveToCompletion)
+          }
+          className="cursor-pointer"
+          disabled={isLoading}
+        >
+          <CheckCircle2 className="mr-2 h-4 w-4 text-dynamic-green" />
+          Mark as {targetCompletionList?.status === 'done' ? 'Done' : 'Closed'}
+        </DropdownMenuItem>
+      )}
+
+      {canMoveToClose && targetClosedList?.id !== targetCompletionList?.id && (
+        <DropdownMenuItem
+          onSelect={(e) =>
+            handleMenuItemSelect(e as unknown as Event, handleMoveToClose)
+          }
+          className="cursor-pointer"
+          disabled={isLoading}
+        >
+          <CircleSlash className="mr-2 h-4 w-4 text-dynamic-purple" />
+          Mark as Closed
+        </DropdownMenuItem>
+      )}
+
+      {(canMoveToCompletion || canMoveToClose) && <DropdownMenuSeparator />}
+
+      {/* Priority Menu */}
+      <TaskPriorityMenu
+        currentPriority={task.priority ?? null}
+        isLoading={isLoading}
+        onPriorityChange={handlePriorityChange}
+        onMenuItemSelect={handleMenuItemSelect}
+        onClose={() => setMenuOpen(false)}
+      />
+
+      {/* Due Date Menu */}
+      <TaskDueDateMenu
+        endDate={task.end_date}
+        isLoading={isLoading}
+        onDueDateChange={handleDueDateChange}
+        onCustomDateClick={() => {
+          setMenuOpen(false);
+          setTimeout(() => setShowCustomDateDialog(true), 100);
+        }}
+        onMenuItemSelect={handleMenuItemSelect}
+        onClose={() => setMenuOpen(false)}
+      />
+
+      {/* Estimation Menu */}
+      {boardConfig?.estimation_type && (
+        <TaskEstimationMenu
+          currentPoints={task.estimation_points}
+          estimationType={boardConfig.estimation_type}
+          extendedEstimation={boardConfig.extended_estimation}
+          allowZeroEstimates={boardConfig.allow_zero_estimates}
+          isLoading={isLoading}
+          onEstimationChange={updateEstimationPoints}
+          onMenuItemSelect={handleMenuItemSelect}
+        />
+      )}
+
+      {/* Labels Menu */}
+      <TaskLabelsMenu
+        taskLabels={task.labels || []}
+        availableLabels={workspaceLabels}
+        isLoading={labelsLoading}
+        onToggleLabel={toggleTaskLabel}
+        onCreateNewLabel={() => {
+          setShowNewLabelDialog(true);
+          setMenuOpen(false);
+        }}
+        onMenuItemSelect={handleMenuItemSelect}
+      />
+
+      {/* Projects Menu */}
+      <TaskProjectsMenu
+        taskProjects={task.projects || []}
+        availableProjects={workspaceProjects}
+        isLoading={projectsLoading}
+        onToggleProject={toggleTaskProject}
+        onCreateNewProject={() => {
+          setShowNewProjectDialog(true);
+          setMenuOpen(false);
+        }}
+        onMenuItemSelect={handleMenuItemSelect}
+      />
+
+      <DropdownMenuSeparator />
+
+      {/* Task Relationships Section */}
+      {actionWorkspaceId && (
+        <>
+          <TaskParentMenu
+            wsId={actionWorkspaceId}
+            taskId={task.id}
+            parentTask={parentTask}
+            childTaskIds={childTasks.map((t) => t.id)}
+            isSaving={relationshipSaving}
+            onSetParent={setParentTask}
+            onRemoveParent={removeParentTask}
+            translations={{
+              parent_task: 'Parent Task',
+              search_tasks: 'Search tasks...',
+              error_loading_tasks: 'Error loading tasks',
+              no_matching_tasks: 'No matching tasks',
+              no_available_tasks: 'No available tasks',
+              n_set: '1',
+            }}
+          />
+
+          <TaskBlockingMenu
+            wsId={actionWorkspaceId}
+            taskId={task.id}
+            blockingTasks={blockingTasks}
+            blockedByTasks={blockedByTasks}
+            isSaving={relationshipSaving}
+            savingTaskId={relationshipSavingTaskId}
+            onAddBlocking={addBlockingTask}
+            onRemoveBlocking={removeBlockingTask}
+            onAddBlockedBy={addBlockedByTask}
+            onRemoveBlockedBy={removeBlockedByTask}
+            translations={{
+              dependencies: 'Dependencies',
+              blocks: 'Blocks',
+              blocked_by: 'Blocked By',
+              search_tasks_to_block: 'Search tasks...',
+              search_blocking_tasks: 'Search tasks...',
+              error_loading_tasks: 'Error loading tasks',
+              no_matching_tasks: 'No matching tasks',
+              no_available_tasks: 'No available tasks',
+              remove_dependency: 'Remove',
+              tasks_that_cannot_start:
+                'Tasks that cannot start until this one is done',
+              tasks_that_must_complete:
+                'Tasks that must complete before this one can start',
+            }}
+          />
+
+          <TaskRelatedMenu
+            wsId={actionWorkspaceId}
+            taskId={task.id}
+            relatedTasks={relatedTasks}
+            isSaving={relationshipSaving}
+            savingTaskId={relationshipSavingTaskId}
+            onAddRelated={addRelatedTask}
+            onRemoveRelated={removeRelatedTask}
+            translations={{
+              related_tasks: 'Related Tasks',
+              currently_related: 'Currently Related',
+              search_tasks_to_link: 'Search tasks to link...',
+              no_matching_tasks: 'No matching tasks',
+              no_available_tasks: 'No available tasks',
+              related_tasks_help:
+                'Link tasks that share context or are related to each other',
+            }}
+          />
+
+          <DropdownMenuSeparator />
+        </>
+      )}
+
+      {/* Move Menu */}
+      {availableLists.length > 0 && actionWorkspaceId && task?.board_id && (
+        <TaskMoveMenu
+          currentListId={task.list_id}
+          availableLists={availableLists}
+          isLoading={isLoading}
+          onMoveToList={handleMoveToList}
+          onMenuItemSelect={handleMenuItemSelect}
+          onRequestOpenCreateDialog={() => {
+            setMenuOpen(false);
+            setShowCreateListDialog(true);
+          }}
+        />
+      )}
+
+      {/* Assignee Menu */}
+      {actionWorkspaceId && (
+        <TaskAssigneesMenu
+          taskAssignees={task.assignees || []}
+          availableMembers={workspaceMembers}
+          isLoading={membersLoading}
+          onToggleAssignee={onToggleAssignee}
+          onMenuItemSelect={handleMenuItemSelect}
+        />
+      )}
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuItem
+        onSelect={(e) =>
+          handleMenuItemSelect(e as unknown as Event, () => {
+            setShowDeleteDialog(true);
+            setMenuOpen(false);
+          })
+        }
+        className="cursor-pointer text-dynamic-red focus:text-dynamic-red"
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        Delete task
+      </DropdownMenuItem>
+    </>
+  ) : (
+    <>
+      <button
+        type="button"
+        onClick={handleGoToTask}
+        className="flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground"
+      >
+        <ExternalLink className="h-4 w-4" />
+        Go to task
+      </button>
+
+      <button
+        type="button"
+        onClick={handleCopyTaskLink}
+        className="flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground"
+      >
+        <Copy className="h-4 w-4" />
+        Copy task link
+      </button>
+    </>
+  );
+
+  // Render chip that opens popover, and a separate dropdown menu for editing
+  return (
+    <div style={{ display: 'inline-flex', position: 'relative' }}>
+      <TaskSummaryPopover
+        task={task || null}
+        taskList={currentTaskList}
+        isLoading={taskLoading}
+        onEdit={() => {
+          setPopoverOpen(false);
+          setTimeout(() => setMenuOpen(true), 100);
+        }}
+        onGoToTask={handleGoToTask}
+        open={popoverOpen}
+        onOpenChange={setPopoverOpen}
+        blockedBy={blockedByTasks as Task[]}
+        workspaceId={actionWorkspaceId}
+        hiddenLabelsLabel={translations?.hidden_labels}
+      >
+        {chipContent}
+      </TaskSummaryPopover>
+
+      {/* Dropdown menu for editing */}
+      <DropdownMenu
+        open={menuOpen}
+        onOpenChange={(open) => {
+          setMenuOpen(open);
+          if (open) {
+            setMenuGuardUntil(Date.now() + 300);
+          }
+        }}
+      >
+        <DropdownMenuTrigger asChild>
+          <button
+            ref={dropdownTriggerRef}
+            type="button"
+            tabIndex={-1}
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              top: '100%',
+              left: 0,
+              opacity: 0,
+              width: '1px',
+              height: '1px',
+              border: 'none',
+              padding: 0,
+              background: 'transparent',
+            }}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="start"
+          className="w-56"
+          side="bottom"
+          sideOffset={8}
+          onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
+          onCloseAutoFocus={(e) => {
+            // Prevent focus from moving to an element that might be outside the parent dialog
+            // This fixes the issue where closing the dropdown causes the parent dialog to close
+            e.preventDefault();
+          }}
+        >
+          {taskLoading ? (
+            <div className="flex items-center justify-center p-4">
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          ) : taskError ? (
+            <div className="flex flex-col items-center gap-2 p-4 text-center text-muted-foreground text-sm">
+              <AlertCircle className="h-5 w-5 text-dynamic-red" />
+              <span>Failed to load task</span>
+              <span className="text-xs opacity-70">
+                {taskError instanceof Error
+                  ? taskError.message
+                  : 'Unknown error'}
+              </span>
+            </div>
+          ) : (
+            menuItems
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Dialogs */}
+      {task && (
+        <>
+          <TaskDeleteDialog
+            task={task}
+            open={showDeleteDialog}
+            isLoading={isLoading}
+            onOpenChange={setShowDeleteDialog}
+            onConfirm={handleDelete}
+            translations={
+              translations
+                ? {
+                    delete_task: translations.delete_task,
+                    delete_task_confirmation:
+                      translations.delete_task_confirmation,
+                    cancel: translations.cancel,
+                    deleting: translations.deleting,
+                  }
+                : undefined
+            }
+          />
+
+          <TaskCustomDateDialog
+            open={showCustomDateDialog}
+            endDate={task.end_date ?? null}
+            isLoading={isLoading}
+            onOpenChange={setShowCustomDateDialog}
+            onDateChange={handleCustomDateChange}
+            onClear={() => {
+              handleDueDateChange(null);
+              setShowCustomDateDialog(false);
+            }}
+            translations={
+              translations
+                ? {
+                    set_custom_due_date: translations.set_custom_due_date,
+                    custom_due_date_description:
+                      translations.custom_due_date_description,
+                    cancel: translations.cancel,
+                    remove_due_date: translations.remove_due_date,
+                  }
+                : undefined
+            }
+          />
+
+          {actionWorkspaceId && task?.board_id && (
+            <CreateListDialog
+              open={showCreateListDialog}
+              onOpenChange={setShowCreateListDialog}
+              boardId={task.board_id}
+              wsId={actionWorkspaceId}
+              initialStatus="active"
+              onSuccess={(listId) => {
+                handleMoveToList(listId);
+              }}
+            />
+          )}
+
+          <TaskNewLabelDialog
+            open={showNewLabelDialog}
+            newLabelName={newLabelName}
+            newLabelColor={newLabelColor}
+            creatingLabel={creatingLabel}
+            onNameChange={setNewLabelName}
+            onColorChange={setNewLabelColor}
+            onOpenChange={setShowNewLabelDialog}
+            onConfirm={async () => {
+              const result = await createNewLabel();
+              if (result) setShowNewLabelDialog(false);
+            }}
+            translations={
+              translations
+                ? {
+                    create_new_label: translations.create_new_label,
+                    create_new_label_description:
+                      translations.create_new_label_description,
+                    label_name: translations.label_name,
+                    color: translations.color,
+                    preview: translations.preview,
+                    cancel: translations.cancel,
+                    creating: translations.creating,
+                    create_label: translations.create_label,
+                  }
+                : undefined
+            }
+          />
+
+          <TaskNewProjectDialog
+            open={showNewProjectDialog}
+            newProjectName={newProjectName}
+            creatingProject={creatingProject}
+            onNameChange={setNewProjectName}
+            onOpenChange={setShowNewProjectDialog}
+            onConfirm={async () => {
+              const result = await createNewProject();
+              if (result) setShowNewProjectDialog(false);
+            }}
+            translations={
+              translations
+                ? {
+                    create_new_project: translations.create_new_project,
+                    create_new_project_description:
+                      translations.create_new_project_description,
+                    project_name: translations.project_name,
+                    cancel: translations.cancel,
+                    creating: translations.creating,
+                    create_project: translations.create_project,
+                  }
+                : undefined
+            }
+          />
+        </>
+      )}
+    </div>
+  );
+}